/* The site's own rules, on top of noostrategy.css (the identity's stylesheet, not edited here).
   The page is black; the studio opens it. This file only places the page's parts; every value
   comes from the kit's tokens. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Three sizes and no more. XL for the claims and the page titles, M for everything that is read, S
   for everything around it: the menu, captions, dates, tables, the footer. The kit's eleven steps
   fold onto these three through its own tokens; weight and place make the rest of the order. */
:root {
  --fs-xl: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  --fs-m: 1.375rem;
  --fs-s: 1rem;
  --t-title-size: var(--fs-m); --t-title-lh: 1.35;
  --t-subtitle-size: var(--fs-m); --t-subtitle-lh: 1.35;
  --t-lead-size: var(--fs-m);
  --t-body-size: var(--fs-m); --t-body-lh: 1.45; --t-body-w: 400; --t-lead-w: 400;   /* light on black reads at full weight */
  --t-body-sm-size: var(--fs-s);
  --t-caption-size: var(--fs-s); --t-caption-lh: 1.5;
  --t-label-size: var(--fs-s); --t-label-sm-size: var(--fs-s);
  /* Text and pictures never touch: the space between blocks is at least a line of text. */
  --space-block: clamp(2.25rem, 3vw, 2.5rem);
}
.t-display-xl, .t-display, .t-headline { font-size: var(--fs-xl); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-tr); font-weight: var(--t-display-xl-w); }
table { font-weight: 400; }

/* The menu, on the landing page and the pages alike: sentence case at body size, no hue
   underline at rest, a thin one on hover. */
.studio .top nav a, .site-header nav a { font-size: var(--t-body-sm-size); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); background-image: none; padding-bottom: .15em; }
.studio .top nav a:hover, .studio .top nav a:focus-visible, .site-header nav a:hover, .site-header nav a:focus-visible { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; }

/* The studio opens the landing page, full width, the kit's own header inside it. */
.studio .top { display: flex; align-items: center; justify-content: space-between; padding: var(--s-6) var(--gutter); }
.studio .top .lockup { display: block; width: clamp(150px, 20vw, 240px); color: var(--ink); background: none; padding: 0; }
.studio .top nav { display: flex; gap: var(--s-6); }
.studio .top, .studio .caption { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 719px) {
  .studio .top { flex-wrap: wrap; row-gap: var(--s-4); }
  .studio .top nav { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; gap: var(--s-3) var(--s-4); }
}

/* The growth film stands on the floor as the kit's rhizome sitters do: the script sizes its frame so
   the grown rhizome takes the whole wall, from just under the header to the floor line, and may
   leave the frame at the sides. */
.studio .floor { position: static; }
.studio .organism.ns-growth { bottom: auto; max-width: none; opacity: 1; transform: translate(-50%, 0); transition: none; cursor: pointer; }
.studio .organism.ns-growth svg { overflow: visible; }

/* The caption under the film, in the ink at the menu's size: a phrase per stage of the growth,
   written as it grows, and Play again once it is done. */
.studio .caption { align-items: baseline; font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); color: var(--ink); }
.studio .growth-caption { flex: 1 1 auto; min-width: 0; margin: 0; }
.studio .growth-caption span { display: inline-block; }
.studio .growth-caption .rise { animation-duration: var(--motion-slow); }
.studio .replay { flex: none; font: inherit; color: var(--ink); background: none; border: 0; padding: 0 0 .15em; cursor: pointer; }
.studio .replay:hover, .studio .replay:focus-visible { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; }
.studio .replay[hidden] { display: block; visibility: hidden; }   /* it keeps its place, so the caption never reflows when it appears */

/* The lit room, the identity's photographic register, to try live: add ?room=lit to the address.
   Ink and paper here are the identity's light values, since the page itself stays dark. */
:root[data-theme="dark"] .studio.lit { --top: 246; --wall: 224; --horizon: 213; --floor: 222; --lamp: .22; }
:root[data-theme="dark"] .studio.lit .organism { color: #000; }
:root[data-theme="dark"] .studio.lit .grain { mix-blend-mode: multiply; opacity: .45; }
.studio.lit .top .lockup img { filter: invert(1); }
.studio.lit .top nav a { color: #000; }
.studio.lit .caption, .studio.lit .caption * { color: #000; }

/* Full-bleed surfaces break out of the column with 100vw; clip keeps a visible scrollbar from
   adding a sideways scroll. */
html, body { overflow-x: clip; }

/* The reveal: type rises 8 px into place and fades in, once, as it arrives, a line at a time. The
   script splits plain text into lines and staggers them; a block with a link rises whole. */
.reveal [data-rise]:not(.risen) { opacity: 0; }
.rise-part { animation: ns-rise var(--motion-slow) var(--ease-grow) both; }
.ln { display: block; }

/* Statements on the identity's twelve columns, one module for the whole page. The claim at XL
   across ten columns, and directly under it, one gap down, the reading: the reasons in a six-column
   measure at full weight, and the turn they lead to beside them on the right, in the hue, which the
   identity allows as text on black. Size and place make the order, never a second grey. */
.st { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: var(--s-6); row-gap: var(--s-12); padding-block: clamp(3rem, 8vh, 5.5rem); border-top: 1px solid var(--rule); }
.st > * { grid-column: 1 / -1; }
.st-head { grid-row: 1; grid-column: 1 / span 10; margin: 0; max-width: none; text-wrap: balance; }
.st-body { grid-row: 2; grid-column: 1 / span 6; }
.st-body > * { margin: 0; }
.st-body > * + * { margin-top: var(--s-6); }
.st-body .t-lead { text-wrap: pretty; }
.st-argue .st-reasons { grid-row: 2; grid-column: 1 / span 6; margin: 0; text-wrap: pretty; }
.st-argue .st-turn { grid-row: 2; grid-column: 8 / span 5; margin: 0; color: var(--accent); font-weight: 400; line-height: var(--t-body-lh); text-wrap: pretty; }
#open, .picture + .st { border-top: 0; }
@media (max-width: 719px) {
  .st { row-gap: 2.5rem; }
  .st-head, .st-body, .st-argue .st-reasons, .st-argue .st-turn { grid-column: 1 / -1; }
  .st-argue .st-turn { grid-row: 3; }
}

/* One close-up as a surface, opening the thinking layer's chapter: black arms on the hue, edge to
   edge. The hue comes from the token, so it follows any change of the hue. */
.picture { margin-block: 0; }
.picture img { display: block; width: 100%; height: min(64svh, 50vw); object-fit: cover; }

/* Close-ups, the identity's first voice for an illustration: the five composed by hand, windows on a
   living network with its arms leaving the frame, black on the hue. The hue is the figure's own
   background, from the token, so it follows any change of the hue. */
.closeup { margin: 0; background: var(--accent); overflow: hidden; }
.closeup img { display: block; width: 100%; height: auto; }

/* The three things: the claim, then a column each on the grid's thirds, each element with its own
   close-up, the one its page opens with, as a 4:5 window on it, and its sentence, the name a link. */
.st-trio .three { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); }
.three p { margin: 0; padding-right: var(--s-6); text-wrap: pretty; }
.thing-picture { display: block; aspect-ratio: 4 / 5; padding: 0; margin-bottom: var(--s-8); }
.thing-picture img { height: 100%; object-fit: cover; }
@media (max-width: 719px) {
  .st-trio .three { grid-template-columns: 1fr; row-gap: var(--s-12); }
  .thing-picture { width: min(100%, 18rem); }
}

/* The case: its kind as a kicker over the claim, then a picture from Solstice across the page, and
   the story in two columns, read down the left and on down the right. */
.st-case { row-gap: var(--s-8); }
.st-case .st-kind { grid-row: 1; grid-column: 1 / -1; margin: 0 0 calc(-1 * var(--s-4)); font-size: var(--fs-s); line-height: 1.5; }
.st-case .st-head { grid-row: 2; }
.st-case .case-picture { grid-row: 3; grid-column: 1 / -1; margin: var(--s-4) 0 0; }
.case-picture img { display: block; width: 100%; height: auto; }
.st-case .st-p1 { grid-row: 4; grid-column: 1 / span 6; margin: var(--s-4) 0 0; text-wrap: pretty; }
.st-case .st-p2 { grid-row: 4; grid-column: 8 / span 5; margin-top: var(--s-4); }
.st-case .st-p2 > * { margin: 0; text-wrap: pretty; }
.st-case .st-p2 > * + * { margin-top: var(--s-6); }
@media (max-width: 719px) {
  .st-case .st-p1 { grid-column: 1 / -1; }
  .st-case .st-p2 { grid-row: 5; grid-column: 1 / -1; }
}

/* The record: the practice's work, newest first, a line each. The date and the kind at S at the
   edges, the title at M with its line at S under it; a title with somewhere to go is a link. */
.st-work .work { grid-row: 2; grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.work li { border-top: 1px solid var(--rule); }
.w-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: baseline; padding-block: var(--s-4) calc(var(--s-4) + .15em); color: var(--ink); background: none; }
.w-date { grid-column: 1 / span 2; font-size: var(--fs-s); line-height: 1.5; font-variant-numeric: tabular-nums; }
.w-main { grid-column: 3 / span 7; text-wrap: balance; }   /* the title's lines, since the title itself is inline so its underline hugs the words */
.w-title { font-size: var(--fs-m); line-height: 1.35; font-weight: 400; }
.w-line { display: block; font-size: var(--fs-s); line-height: 1.5; margin-top: var(--s-1); text-wrap: pretty; }
.w-kind { grid-column: 10 / span 3; justify-self: end; font-size: var(--fs-s); line-height: 1.5; }
a.w-row .w-title { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% .08em; transition: background-size var(--motion-quick) var(--ease-grow); }
a.w-row:hover .w-title, a.w-row:focus-visible .w-title { background-size: 100% .18em; }
@media (max-width: 719px) {
  .w-row { grid-template-columns: 1fr auto; row-gap: var(--s-1); }
  .w-date { grid-column: 1; grid-row: 1; }
  .w-kind { grid-column: 2; grid-row: 1; }
  .w-main { grid-column: 1 / -1; grid-row: 2; }
}

/* The close on the hue, a full screen of it: the name, what the practice does, and the address. */
.statement { margin-block: 0; padding-block: 0; }
.statement .st { border-top: 0; }
.statement .st-body .t-lead { color: var(--accent-ink); }

.st-mail a { display: inline-block; }

/* The pages. The head: the title and its lead in the left eight columns, one gap between them as on
   the home page, and the page's close-up in the right four as a 4:5 window. Then chapters, each
   opened by a hairline, its head hanging in the left margin beside the first paragraph and the
   reading in a seven-column measure beside it; tables and screenshots take the whole width and the
   diagrams the reading's width. */
.site-header .lockup img { display: block; width: 100%; height: auto; }
@media (max-width: 719px) {
  .site-header { flex-wrap: wrap; row-gap: var(--s-4); }
  .site-header nav { display: flex; flex-wrap: wrap; flex-basis: 100%; justify-content: flex-start; gap: var(--s-3) var(--s-4); }
}
.page { padding-bottom: var(--space-section); }
.page .article-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: start; padding-block: var(--space-hero) var(--space-section); }
.page .article-head > div { grid-column: 1 / span 8; }
.page .article-head .t-lead { max-width: 32em; margin-top: var(--s-12); text-wrap: pretty; }
.page .page-closeup { grid-column: 9 / -1; width: 100%; aspect-ratio: 4 / 5; }
.page .page-closeup img { height: 100%; object-fit: cover; }
.page .page-closeup.is-right img { object-position: 100% 50%; }
.contact-mail { margin-top: var(--s-6); }
.chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--space-block); padding-block: var(--s-12); border-top: 1px solid var(--rule); }
.chapter > h2 { grid-row: 1; grid-column: 1 / span 3; margin: 0; padding-right: var(--s-6); font-size: var(--fs-m); line-height: var(--t-body-lh); font-weight: 500; text-wrap: balance; }
.chapter > h2 + .chapter-body, .chapter > .chapter-body:first-child { grid-row: 1; }
.chapter-body { grid-column: 4 / span 7; max-width: none; margin: 0; }
.chapter > .chapter-body:first-child { grid-column: 1 / span 7; }   /* a chapter with no head reads from the left edge */
@media (min-width: 720px) {
  .chapter > .systems, .chapter > table, .chapter > figure.shot, .chapter > .shots { grid-column: 1 / -1; margin: 0; }
  .chapter > figure.diagram { grid-column: 4 / -1; margin: 0; }
}
.prose ul.traits { list-style: none; padding: 0; }
.prose .traits li + li { margin-top: .6em; }
.traits strong { font-weight: 500; }
@media (max-width: 719px) {
  .page .article-head { row-gap: var(--s-8); }
  .page .article-head > div { grid-column: 1 / -1; }
  .page .page-closeup { grid-column: 1 / -1; width: min(100%, 20rem); }
  /* On a phone a chapter stacks: the head, then its reading a short step below, everything else a
     block apart. */
  .chapter { display: block; }
  .chapter > :not(:first-child) { margin-top: var(--space-block); }
  .chapter > h2 { padding-right: 0; }
  .chapter > h2 + :nth-child(n) { margin-top: var(--s-4); }
}

/* Diagrams: the identity's words, points and arms, inline so their words are set in the page's
   Commissioner. One to a view, wide enough to keep the words legible, and on a phone they scroll
   sideways in their own box rather than shrink. */
figure.diagram { max-width: 54rem; }
figure.diagram svg { display: block; width: 100%; height: auto; min-width: 640px; }

/* Live Strategy: the three systems side by side. */
.systems { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.systems div { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.systems .t-subtitle { margin-bottom: var(--s-3); }
@media (max-width: 719px) { .systems { grid-template-columns: 1fr; gap: var(--s-6); } }
.page thead th { text-transform: none; letter-spacing: 0; font-size: var(--t-caption-size); }
/* The Ensemble: the seven parts, each with its agent and its person. */
table.who th { white-space: nowrap; }
table.who th .move { display: block; font-size: var(--t-caption-size); font-weight: 400; color: var(--muted); margin-top: var(--s-1); }
table.who td { max-width: 28em; }
@media (max-width: 719px) { table.who th { white-space: normal; } table.who thead { display: none; } table.who tr { display: block; padding-block: var(--s-4); border-top: 1px solid var(--rule); } table.who th, table.who td { display: block; border: 0; padding: var(--s-2) 0; } table.who td::before { content: "The agent"; display: block; font-size: var(--t-caption-size); color: var(--muted); } table.who td + td::before { content: "The person"; } }

/* The Canvas: the captures. */
figure.shot { margin: 0; }
figure.shot img { border: 1px solid var(--rule); background: #000; }
@media (max-width: 719px) { .shots figure + figure { margin-top: var(--space-block); } }

/* Reading lists on the pages. */
.reading { list-style: none; margin: 0; padding: 0; }
.reading li { display: grid; gap: var(--s-2); padding-block: var(--s-6); border-top: 1px solid var(--rule); }
.reading li:last-child { border-bottom: 1px solid var(--rule); }
.reading a { justify-self: start; }

/* The mark alone is never smaller than 48 px wide, the identity's minimum; the kit's footer draws it
   at 40. */
.site-footer .mark { width: 3.5rem; height: auto; }
.site-footer .t-caption a { color: inherit; }