/* ============================================================================
   /for-chess-coaches, /for-chess-academies and /about — the argument pages.

   No diagram machinery here: these three pages are ruled lists, tables and prose,
   because what they do is make a case and a case is made in sentences. The shared
   components in pages.css do most of the work; what is below is the handful of
   compositions specific to one argument.
   ========================================================================== */

/* ------------------------------------------------------------ before and after */
.ro-swap { margin: clamp(22px, 3.2vh, 34px) 0 clamp(20px, 3vh, 28px); }
.ro-swap p:last-child { color: var(--fg-dim); font-size: 0.93rem; }
.ro-swap .mono { color: var(--fg-faint); }
.ro-swap .is-after .mono { color: var(--fg-dim); }

/* --------------------------------------------------- the numbered decision list
   Three lines per row and they are three different things: the decision, what the
   curriculum has instead, and what that changes. The third line is the one the brief
   asks for — feature, benefit, outcome — and it is set in ink while the middle line,
   which carries the counts, is the quiet one. */
.ro-dec, .ro-vary, .ab-not { list-style: none; margin: clamp(20px, 3vh, 30px) 0 0; padding: 0;
  display: grid; }
.ro-dec > li, .ro-vary > li, .ab-not > li {
  display: grid; gap: 5px; padding: clamp(13px, 1.8vh, 19px) 0;
  border-top: var(--rule) solid var(--line);
}
.ro-dec > li:last-child, .ro-vary > li:last-child, .ab-not > li:last-child {
  border-bottom: var(--rule) solid var(--line);
}
.ro-dn, .ro-vn, .ab-nn {
  display: flex; align-items: baseline; gap: 0.8em; color: var(--fg); font-size: 0.6rem;
}
.ro-dn .num, .ro-vn .num, .ab-nn .num { color: var(--fg-faint); }
.ro-dw, .ro-vp, .ab-not p:last-child {
  color: var(--fg-dim); font-size: 0.94rem; max-width: 78ch; padding-left: 2.9em;
}
.ro-dy {
  font-size: 0.94rem; max-width: 78ch; padding-left: 2.9em;
  /* the outcome line, and the only place on these pages a hue rule appears beside prose */
  border-left: 2px solid var(--hue); margin-left: 0.7em; padding-left: 2.1em;
}
.ro-vf { font-size: 0.94rem; max-width: 78ch; padding-left: 2.9em; }
.ro-vf .mono { display: block; color: var(--fg-dim); font-size: 0.5rem; margin-bottom: 2px; }

.ro-live, .ro-notes { align-content: start; }
.ro-live li, .ro-notes li { font-size: 0.92rem; }
.ro-never li::before {
  /* a rule, not a tick: these are things the product does not do, and a checkmark
     beside a negation contradicts itself — terms.css recorded the same trade */
  border: 0; width: 10px; height: 1px; top: 0.72em; transform: none;
  background: var(--line-2);
}

.ro-two {
  display: grid; gap: clamp(22px, 3.4vw, 52px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start; margin: clamp(20px, 3vh, 28px) 0;
}
.ro-two > div:first-child { display: grid; gap: clamp(12px, 1.8vh, 18px); }

.ro-std, .ro-gates, .ab-built { margin-top: clamp(18px, 2.6vh, 28px); }
/* The pull quote closes the list above it, so it needs the air a section break would give
   it — the list's last rule and the quote's first line were flush before this. */
.ro-vary + .pg-quote, .ab-not + .pg-quote { margin-top: clamp(22px, 3.2vh, 38px); }
.ro-gates td a { text-decoration: underline; text-decoration-color: var(--line-2);
  text-underline-offset: 0.16em; }
.ro-gates td a:hover { text-decoration-color: var(--fg); }
.ro-std td, .ro-gates td { color: var(--fg-dim); }
.ro-std tbody th, .ro-gates tbody th { color: var(--fg); white-space: nowrap; }

.ro-cover {
  display: grid; gap: clamp(20px, 3.4vw, 52px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.ro-cover .lead { margin-top: clamp(12px, 1.8vh, 18px); }

/* =============================================================== /about */
.ab-name {
  display: grid; gap: clamp(22px, 3.4vw, 56px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
}
/* The word itself, at display size, right-to-left. It is the only Arabic on the site
   and it is the page's one piece of art — set in the same Fraunces stack the headings
   use, which falls through to the system Arabic face, because there is no Arabic
   webfont here and loading one for four glyphs would be the wrong trade. */
.ab-word { margin: 0; display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: clamp(20px, 3vw, 38px); background: var(--plate);
  border: var(--rule) solid var(--line); border-radius: 6px; }
.ab-word p {
  font-size: clamp(3.4rem, 8vw, 6.2rem); line-height: 1.25; margin: 0;
  letter-spacing: 0; font-weight: 400;
}
.ab-word figcaption { color: var(--fg-dim); font-size: 0.85rem; }
.ab-word figcaption .mono { color: var(--fg); }

.ab-side { display: grid; gap: clamp(16px, 2.4vh, 24px); align-content: start; }
.ab-is > div { display: grid; gap: 12px; align-content: start; }
.ab-is h3 { font-family: var(--display); font-weight: 300; font-size: 1.32rem;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40; letter-spacing: -0.014em; }
.ab-is li b { font-weight: 500; }
.ab-method { margin-top: clamp(20px, 3vh, 30px); }
.ab-built .is-soon th, .ab-built .is-soon td { color: var(--fg-faint); }
.ab-built .is-built td:first-child { color: var(--fg-dim); }
.ab-built td:first-child { font-size: 0.5rem; letter-spacing: 0.13em; white-space: nowrap; }

/* =============================================================== /founder
   An editorial masthead in the shape of nuqtaa.studio/about: the name runs full-bleed
   across the top, then a row of portrait beside the lede. The name is set in Fraunces at
   display size; the lede in Archivo Narrow, a condensed grotesque loaded only for this
   page — the compression lets the description fill the column beside the portrait and reads
   as a deliberate editorial pairing against the serif name. */
/* Selector carries .fd-hero so it outweighs pages.css's `.pg h1` (which otherwise caps the
   size at 3.9rem and the width at 22ch); roles.css also loads after it. Big and spatial: the
   name is the masthead, so it grows to fill the measure and reads as the largest thing on the
   page. clamp runs it to ~10rem on a wide screen while holding one line, and text-wrap keeps a
   clean break if a narrow window forces two. */
.fd-hero .fd-name {
  font-size: clamp(2.8rem, 12.8vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.028em;
  max-width: none;
  margin: 0.02em 0 clamp(28px, 4.5vh, 62px);
}
.fd-mast {
  display: grid; gap: clamp(30px, 5vw, 76px);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  /* Stretch, so the text column takes the portrait's full height and can pin its closing
     line to the portrait's foot — the two columns bottom out together instead of the text
     floating in a slab of empty space. */
  align-items: stretch;
}
/* The description column: condensed, quiet. A flex column so the prose sits at the top,
   aligned with the portrait's top edge, and the mono coordinate line is pushed to the
   bottom — the block spans the portrait's height and reads as a deliberate pairing. */
.fd-lede {
  display: flex; flex-direction: column;
  gap: clamp(15px, 2.1vh, 22px);
  max-width: 52ch;
  padding-top: clamp(2px, 0.8vh, 10px);
}
.fd-lede p {
  margin: 0;
  font-family: 'Archivo Narrow', var(--sans);
  font-size: clamp(1.14rem, 1.55vw, 1.5rem);
  line-height: 1.44;
  letter-spacing: 0.004em;
  color: var(--fg-dim);
}
.fd-lede p:first-child { color: var(--fg); }
/* The closing line: a mono dateline pinned to the foot of the column by the auto margin,
   set off by a hairline rule so it reads as a caption, not a fourth paragraph. */
.fd-lede .fd-meta {
  margin-top: auto;
  padding-top: clamp(16px, 2.4vh, 22px);
  border-top: var(--rule) solid var(--line);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--fg-faint);
}

.fd-portrait { margin: 0; display: grid; gap: 10px; }
.fd-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border: var(--rule) solid var(--line); border-radius: 8px; background: var(--plate);
  /* Black-and-white by request: the colour portrait read as a stock photo dropped onto
     the page. Grayscale with a small contrast lift sits it into the ink ground as a
     deliberate plate rather than a snapshot. */
  filter: grayscale(1) contrast(1.04);
}
.fd-portrait figcaption { color: var(--fg-dim); }
.fd-portrait figcaption.mono { color: var(--fg-faint); }

/* =============================================================== /founder — dark
   The one document set on the ink end of the ramp instead of paper. Every component
   on the page reads the same token names, so re-declaring the paper tokens back to
   their dark-room values (the defaults tokens.css ships) flips the whole page — nav,
   footer, plates and prose — without a single component override. Scoped to
   body.pg-founder, set only by tools/pages/founder.cjs, so no other page is touched. */
html:has(body.pg-founder) { background: var(--void); }
body.pg-founder {
  --paper: #06060a;
  --plate: #14131a;
  --fg: #f4efe4;
  --fg-dim: #b8ae9d;
  /* One step brighter than tokens.css's #7b7387 faint: on this near-black ground the
     mono captions and kickers need it to clear AA. #948ea0 measures ~6.3:1 on --paper
     and stays a clear step under --fg-dim. */
  --fg-faint: #948ea0;
  --fg-inv: #06060a;
  --line: rgb(244 239 228 / 0.12);
  --line-2: rgb(244 239 228 / 0.26);
  --glass: rgb(7 7 10 / 0.9);
}
/* On the dark ground the portrait's own bright plate backing would frame it in a pale
   box; drop the fill so the grayscale image sits straight on the ink. */
body.pg-founder .fd-portrait img { background: var(--ebony-2); }

/* The bio: prose on the reading measure, the facts plate holding its own column. */
.fd-bio {
  display: grid; gap: clamp(22px, 3.4vw, 52px);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
.fd-facts { align-self: start; }
.fd-facts-h { margin: 0 0 clamp(12px, 1.8vh, 16px); color: var(--fg-dim); }
.fd-facts dl { margin: 0; display: grid; }
.fd-facts dl > div {
  display: grid; gap: 3px; padding: clamp(11px, 1.6vh, 15px) 0;
  border-top: var(--rule) solid var(--line);
}
.fd-facts dl > div:first-of-type { border-top: 0; padding-top: 0; }
.fd-facts dt { color: var(--fg-faint); }
.fd-facts dd { margin: 0; color: var(--fg); font-size: 0.96rem; line-height: 1.5; }
.fd-facts dd .num { font-weight: 500; }
.fd-facts dd .mono { color: var(--fg-faint); }

/* =============================================================== /founder — portrait
   The plate lifts on hover: it rises off the page, gains a cast shadow and a hairline of
   light, and lets a little of its colour back through the grayscale. A slow ease so it
   reads as a considered movement, not a flick. focus-within mirrors it for the keyboard,
   and reduced motion keeps the colour/shadow but drops the travel (see the block below). */
.fd-portrait img {
  transition: transform 640ms var(--ease), filter 640ms var(--ease), box-shadow 640ms var(--ease);
  will-change: transform;
}
.fd-portrait:hover img,
.fd-portrait:focus-within img {
  transform: translateY(-10px) scale(1.018);
  filter: grayscale(0.34) contrast(1.06);
  box-shadow: 0 34px 66px -26px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(244 239 228 / 0.16);
}

/* =============================================================== /founder — the board
   A chessboard laid full-bleed behind the page: a square larger than the viewport so its
   cells stay square whatever the window's ratio, centred and fixed so it holds still while
   the page scrolls over it. It is pointer-events:none — the runtime reads the cursor's
   coordinates and lights the square under it directly, so the board never intercepts a
   click or a text selection. Its opacity is driven by --fd-reveal, which the runtime ramps
   from 0 to 1 with scroll: at the top, over the masthead, the board is absent; it arrives
   as the reader descends into the bio. Markup and squares are in FounderBody.tsx. */
.fd-board {
  position: fixed;
  top: 50%;
  left: 50%;
  width: max(102vw, 102vh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  pointer-events: none;
  z-index: 0;
  opacity: calc(var(--fd-reveal, 0) * 0.9);
  transition: opacity 700ms var(--ease);
}
.fd-sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgb(244 239 228 / 0.045);
  border-bottom: 1px solid rgb(244 239 228 / 0.045);
  /* one-time entrance, staggered down the diagonal once the board is lit */
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease),
    background-color 360ms var(--ease), box-shadow 360ms var(--ease);
  transition-delay: calc(var(--diag, 0) * 32ms);
}
.fd-sq.is-dark { background: rgb(244 239 228 / 0.018); }
.fd-board.is-lit .fd-sq { opacity: 1; transform: none; }
/* The square under the cursor: a soft white wash, a hairline frame, and its coordinate. */
.fd-sq.is-near {
  background: rgb(244 239 228 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(244 239 228 / 0.18), inset 0 0 34px rgb(244 239 228 / 0.06);
}
.fd-sq-note {
  font-size: clamp(9px, 0.9vw, 13px);
  letter-spacing: 0.14em;
  /* algebraic notation keeps its lowercase file letter; the shared .mono uppercases */
  text-transform: none;
  color: rgb(244 239 228 / 0);
  transition: color 320ms var(--ease);
  transition-delay: 0ms;
  user-select: none;
}
.fd-sq.is-near .fd-sq-note { color: rgb(244 239 228 / 0.6); }

/* Stacking on the founder page: the board sits at z-index 0, the reading column above it,
   and the nav and footer above that (their plate backgrounds keep the grid off the chrome).
   main is made a stacking context so the fixed board is scoped to it and paints under its
   own sections. Only body.pg-founder is touched, so no other page changes. */
body.pg-founder main { position: relative; z-index: 1; }
body.pg-founder .pg-nav,
body.pg-founder .pg-foot { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  /* Keep the lift's look, drop its travel; hold the board still and plainly visible. */
  .fd-portrait:hover img,
  .fd-portrait:focus-within img { transform: none; }
  .fd-sq { opacity: 1; transform: none; transition: none; }
  .fd-board { opacity: 0.5; transition: none; }
}

/* ================================================================== responsive */
@media (max-width: 900px) {
  .ro-two, .ro-cover, .ab-name, .fd-mast, .fd-bio { grid-template-columns: minmax(0, 1fr); }
  .ab-word p { font-size: clamp(3rem, 16vw, 4.6rem); }
  /* Copy leads, portrait follows — the name is still the first thing read. */
  .fd-mast { align-items: start; }
  .fd-portrait { max-width: 460px; }
  .fd-name { max-width: none; }
}
@media (max-width: 640px) {
  /* The numeral leaves the flow of the line and the three lines lose their indent —
     at this width a 2.9em gutter costs a third of the measure. */
  .ro-dw, .ro-dy, .ro-vp, .ro-vf, .ab-not p:last-child { padding-left: 0; }
  .ro-dy { margin-left: 0; padding-left: 0.9em; }
  .ro-std tbody th, .ro-gates tbody th { white-space: normal; }
  /* The stage column goes; the title already names the stage's own graduation. */
  .ro-gates thead th:nth-child(4), .ro-gates tbody td:nth-child(4),
  .ro-gates thead th:nth-child(5), .ro-gates tbody td:nth-child(5) { display: none; }
}