@import url('../css/tokens.css?v=2');

/* Detail pages (tenure pieces). Colour, type, space, grid and motion come from
   css/tokens.css; this file only lays the surface out (Codex's treatment,
   13 Oct). Rail on columns 1–2; prose on 5–8; figures on 5–9.
   Accent is the project's own brand hue. */
body { --accent: var(--brand-on-dark, var(--color-text-primary)); }
:root[data-theme="light"] body { --accent: var(--brand, var(--color-text-primary)); }
* { box-sizing: border-box; }
html { background: var(--color-bg-page); color: var(--color-text-primary); scroll-behavior: auto; scroll-padding-top: 48px; }
body { margin: 0; background: var(--color-bg-page); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); font-weight: 400; }
h1,h2,h3,p,dl,dd,figure,blockquote { margin: 0; font: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--color-bg-page); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 20; top: 16px; left: 16px; transform: translateY(-200%); padding: 8px 16px; background: var(--color-bg-page); }
.skip-link:focus { transform: none; }
.piece { display: grid; grid-template-columns: repeat(var(--cols),minmax(0,1fr)); column-gap: var(--gutter); max-width: 1680px; margin: 0 auto; padding: 96px var(--margin) 0; }
.rail { grid-column: 1 / 3; position: sticky; top: 96px; /* = .piece padding-top, so it never moves before sticking */ align-self: start; height: calc(100svh - 144px); display: flex; flex-direction: column; font-size: var(--text-meta); line-height: var(--leading-meta); }
.back { color: var(--color-text-secondary); align-self: flex-start; }
.back:hover { color: var(--color-text-primary); }
.toc { margin-top: 72px; display: flex; flex-direction: column; position: relative; }
.toc a { color: var(--color-text-tertiary); transition: color 240ms var(--ease); }
.toc a:hover,.toc a:focus-visible { color: var(--color-text-secondary); }
.toc a.on { color: var(--color-text-primary); }
.rail-foot { margin-top: auto; display: flex; gap: 16px; color: var(--color-text-tertiary); }
.rail-foot .draft { display: none; }
.rail-foot button:hover,.rail-foot button[aria-pressed="true"] { color: var(--color-text-primary); }
/* Reading sits on columns 5–8 and figures on 5–9 (Hakeeb, 13 Oct): set in
   from the rail, with figures one column wider than the text. */
main { grid-column: 5 / 10; display: grid; grid-template-columns: subgrid; align-content: start; min-width: 0; }
main > * { grid-column: 1 / 5; }
main > figure,main > section { grid-column: 1 / -1; }
section { display: grid; grid-template-columns: subgrid; margin-top: 96px; }
section > * { grid-column: 1 / 5; }
section > figure { grid-column: 1 / -1; }
.intro h1 { font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); text-wrap: balance; }
.role { margin-top: 8px; color: var(--color-text-tertiary); font-size: var(--text-meta); line-height: var(--leading-meta); }
.lede { margin-top: 40px; color: var(--color-text-body); }
/* Outcomes as rows: the figure on the text block's first column (5), its
   label across the rest (6–8). The first track is exactly one page column. */
.outcomes { margin-top: 40px; display: grid; grid-template-columns: minmax(max-content,calc((100% - 3 * var(--gutter)) / 4)) minmax(0,1fr); column-gap: var(--gutter); align-items: start; }
.outcomes > div { display: contents; }
.outcomes dt { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-primary); }
.outcomes dd { color: var(--color-text-tertiary); font-size: var(--text-meta); line-height: var(--leading-meta); margin-top: 0; overflow-wrap: anywhere; }
/* One weight (foundations): headings carry hierarchy by ink and space. */
h2,h3 { color: var(--color-text-primary); font-weight: 400; font-size: var(--text-body); line-height: var(--leading-body); }
.prose { margin-top: 24px; color: var(--color-text-body); }
.prose p + p { margin-top: 24px; }
.prose p + h3 { margin-top: 40px; }
.prose h3 { margin-bottom: 16px; }
section > .prose:not(:first-of-type) { margin-top: 48px; }
figure.wide { margin-top: 48px; }
main > figure.wide { margin-top: 64px; }
figcaption { margin: 16px auto 0; max-width: 580px; color: var(--color-text-tertiary); font-size: var(--text-meta); line-height: var(--leading-meta); text-align: center; text-wrap: balance; }
.media-stage { padding: 64px 48px; background: color-mix(in oklch,var(--media-surface,#e9e1f1) 9%,var(--color-bg-page)); border-radius: 12px; border: 1px solid var(--color-border-subtle); overflow: hidden; }
:root[data-theme="light"] .media-stage { background: color-mix(in oklch,var(--media-surface,#e9e1f1) 70%,var(--color-bg-page)); border-color: transparent; }
.media-stage--mint { --media-surface: #dce8df; }
.media-stage--neutral { --media-surface: #e5e4df; }
.media-stage + .media-stage { margin-top: 20px; }
.phones { display: grid; justify-content: center; align-items: center; gap: 36px; }
.phones.three { grid-template-columns: repeat(3,minmax(0,160px)); }
.phones.two { grid-template-columns: repeat(2,minmax(0,172px)); }
.device { --radius: 22px; position: relative; min-width: 0; padding: 3px; border-radius: calc(var(--radius) + 3px); background: linear-gradient(145deg,#68676c 0%,#171719 12%,#09090b 65%,#545359 100%); box-shadow: 0 0 0 1px rgb(0 0 0 / .24),0 3px 6px -2px rgb(0 0 0 / .28),0 16px 24px -10px rgb(0 0 0 / .34); }
.device::before,.device::after { content: ''; position: absolute; width: 1px; background: #343337; border-radius: 2px; }
.device::before { left: -1px; top: 18%; height: 14%; }
.device::after { right: -1px; top: 25%; height: 10%; }
.device-screen { display: block; width: 100%; border-radius: var(--radius); overflow: hidden; background: #fff; }
.device-screen img { width: 100%; height: auto; display: block; }
.motion { aspect-ratio: 375 / 812; display: grid; place-items: center; }
.motion video { width: 100%; height: auto; display: block; }
.pair { display: grid; grid-template-columns: 1fr; gap: 32px; }
.pair img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 12px 24px -12px rgb(0 0 0 / .2); }
blockquote { margin-top: 40px; }
blockquote p { color: var(--color-text-primary); }
blockquote cite { display: block; margin-top: 8px; font-style: normal; color: var(--color-text-tertiary); font-size: var(--text-meta); line-height: var(--leading-meta); }
.end { margin-top: 96px; margin-bottom: 48px; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-text-secondary); }
.end a:hover { color: var(--color-text-primary); }
/* G reveals the actual homepage columns and baseline, not a separate overlay. */
.guides { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: 0; }
body.grid-on .guides { opacity: 1; }
.guides .cols,.guides .rows { position: absolute; inset: 0 max(var(--margin),calc((100% - 1680px)/2 + var(--margin))); /* 100%, not 100vw: vw counts the scrollbar and shifted the overlay ~8px */ }
.guides .cols { display: grid; grid-template-columns: repeat(var(--cols),minmax(0,1fr)); gap: var(--gutter); }
.guides .col { background: color-mix(in srgb,var(--color-text-primary) 4%,transparent); box-shadow: inset 1px 0 color-mix(in srgb,var(--color-text-primary) 18%,transparent),inset -1px 0 color-mix(in srgb,var(--color-text-primary) 18%,transparent); }
.guides .rows { top: 96px; background-image: repeating-linear-gradient(to bottom,color-mix(in srgb,var(--color-text-primary) 9%,transparent) 0 1px,transparent 1px var(--lh)),repeating-linear-gradient(to bottom,color-mix(in srgb,var(--color-text-primary) 4%,transparent) 0 1px,transparent 1px var(--bl)); }
@media (max-width: 1100px) {
  .media-stage { padding: 48px 24px; }
  .phones { gap: 24px; }
}
@media (max-width: 760px) {
  .piece { padding-top: 24px; }
  .rail { grid-column: 1 / -1; position: static; height: auto; margin-bottom: 40px; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .toc { display: none; }
    .rail-foot { margin-top: 0; }
  main { grid-column: 1 / -1; grid-template-columns: subgrid; }
  main > *,section > * { grid-column: 1 / -1; }
  .intro h1 { font-size: var(--text-title); }
  .lede { margin-top: 32px; }
  section { margin-top: 72px; }
  .media-stage { padding: 40px 24px; }
  .phones { gap: 16px; }
  .device { --radius: 16px; padding: 2px; }
  .guides .rows { top: 24px; }
}
@media (max-width: 420px) {
  .phones.three { grid-template-columns: repeat(2,minmax(0,125px)); gap: 24px 16px; }
  .phones.three > :last-child { grid-column: 1 / -1; width: min(100%,125px); justify-self: center; }
  .phones.two { grid-template-columns: repeat(2,minmax(0,125px)); }
  .media-stage { padding: 32px 24px; }
}
/* Small images invite inspection without changing the article's rhythm. */
.device-screen[data-expand] { cursor: zoom-in; }
.device-screen[data-expand]:focus-visible { outline-offset: 8px; }
.image-viewer { margin: auto; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; max-width: calc(100vw - 48px); max-height: none; }
.image-viewer::backdrop { background: rgb(0 0 0 / .82); backdrop-filter: blur(8px); }
.image-viewer img { display: block; width: auto; height: auto; max-width: min(1440px,calc(100vw - var(--space-6))); max-height: calc(100svh - 120px); border-radius: var(--radius-dialog); box-shadow: 0 24px 80px rgb(0 0 0 / .4); }
.image-viewer button { position: absolute; top: -40px; right: 0; font-size: var(--text-meta); line-height: var(--leading-meta); color: #fff; }

/* Each visual marks a contribution rather than a gallery. Supplied frames
   replace these empty surfaces after the narrative has landed. */
.image-placeholder { aspect-ratio: 16 / 9; display: grid; place-items: center; padding: var(--space-3); background: var(--color-bg-media); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-media); color: var(--color-text-tertiary); font-size: var(--text-meta); line-height: var(--leading-meta); text-align: center; }
.visual-plan figcaption { max-width: none; margin-right: 0; margin-left: 0; text-align: left; text-wrap: pretty; }
.composition-link { display: block; width: 100%; min-width: 0; cursor: zoom-in; border-radius: var(--radius-media); }
.composition-link img { display: block; width: 100%; height: auto; border-radius: var(--radius-media); }
.composition figcaption { margin-inline: 0; max-width: 75ch; text-align: start; }
.rail-foot button { min-height: var(--space-3); }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--color-text-tertiary); }
@media (max-width: 760px) { .image-placeholder { aspect-ratio: 4 / 3; } }