/* ============================================================
   POV 02 · Our POVs — the index (Fred, 10 Sep 2026). See the html's
   header. Paper ground, ink type (the landing page's Five Agencies
   chapter), the dark nav. The title runs the full width on one line;
   under it the index on the left and the collage card on the right.
   The chapter is min-height one screen and GROWS with the entries.
   Tokens only. Nothing moves on scroll (§4.7); the hover is a cut.
   ============================================================ */

#povs{--chapter-bg:var(--cream);color:var(--ink);
  /* the site's y150 line at 1440, clearing the opaque band (§12 #13) */
  padding:clamp(96px,10.42vw,150px) var(--m) clamp(64px,8svh,120px)}

/* the title: a title with a list under it — Deck Semibold at the
   Problem sections' treatment, 72/68, -.02em (§3 "which face, where");
   one line at every desktop width */
#povs h1{margin:0;font-family:var(--deck-display);font-weight:500;
  font-size:clamp(44px,5vw,72px);line-height:.944;letter-spacing:-.02em;white-space:nowrap}   /* settles at 72px above ~1440-wide — Forma's Display optical size, not Deck (19 Sep 2026) */

/* two columns under the title: the index and the card, equal, the
   card starting on the first row's rule */
#povs .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(40px,6.25vw,90px);align-items:start;margin-top:clamp(32px,3.5vw,50px)}

/* THE ROWS — the index, the way Medium lists pieces. A 1px rule in the
   type colour at 28% above each and below the last; the coral deck
   numeral, the title, and on the far right the reading time. The title
   is the link and the whole row is its target. Hover or focus CUTS the
   title to coral (§4.2); nothing else changes. */
#povs .feed{list-style:none;margin:0;padding:0}
#povs .post{position:relative;border-top:1px solid color-mix(in srgb, currentColor 28%, transparent)}
#povs .post:last-child{border-bottom:1px solid color-mix(in srgb, currentColor 28%, transparent)}
#povs .post .hd{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:22px;
  align-items:baseline;padding:20px 0 22px}
#povs .post .num{font-family:var(--deck);font-weight:500;font-size:24px;line-height:1;
  letter-spacing:-.02em}   /* deck, not display — the display face is for the big moments only; in the type colour (coral until 10 Sep 2026 — not a brand pairing) */
#povs .post .ttl{margin:0;font-family:var(--deck);font-weight:500;font-size:24px;line-height:1.15;
  letter-spacing:-.02em}
#povs .post .ttl a{color:inherit;text-decoration:none}
#povs .post .ttl a::after{content:'';position:absolute;inset:0}   /* the row is the target; the link text stays the title */
#povs .post .meta{display:block;margin:8px 0 0;font-family:var(--mono);font-size:12px;line-height:1.4;
  letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb, currentColor 70%, transparent)}
/* the reading time: mono, on the title's baseline, at the far right —
   the nav's link face */
#povs .post .time{font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb, currentColor 70%, transparent)}
#povs .post .time:empty{display:none}
@media(hover:hover){#povs .post:has(a):hover .ttl{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:2px}}
#povs .post:has(a:focus-visible) .ttl{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:2px}   /* hover and focus: an underline cut, not a coral one (10 Sep 2026) */
#povs .post .ttl a:focus-visible{outline:none}
#povs .post:has(a:focus-visible){outline:2px solid var(--ink);outline-offset:4px}   /* ink, not coral: 2.74:1 on paper failed 1.4.11 (a11y pass, 24 Sep 2026) */

/* THE CARD: one of the five agency collages in the Five Agencies' open
   card — its own ground baked in, the comp's 16px radius — sticky under
   the band while the list scrolls. A picture; nothing in it moves. */
/* ONE SCREEN (Julian, 10 Sep 2026): the card was sized by its column's
   width, so on a laptop screen (1280 × 720) it ran past the fold and the
   chapter with it. --card-h is what is left of the small viewport under
   the padding, the one-line title and the wrap's margin; the card is the
   narrower of its column and that height at the collage's proportion,
   so the whole picture shows and the chapter is one screen until the
   entries outgrow it. THE ROTATION (Julian, 10 Sep 2026): the card
   cycles the five collages, a push every few seconds (pov-02-index.js) —
   the one thing on the page on its own clock, a §4.8 override like the
   clients' ticker; off under reduced motion, paused while the tab is
   hidden. The images stack in the card; one is shown. */
#povs{--card-h:calc(100svh - clamp(96px,10.42vw,150px) - 0.944*clamp(44px,5vw,72px) - clamp(32px,3.5vw,50px) - clamp(64px,8svh,120px))}
#povs .art{position:sticky;top:clamp(84px,7vw,120px);width:min(100%,calc(var(--card-h) * 1744 / 1580));aspect-ratio:1744/1580;
  border-radius:16px;overflow:hidden}
/* THE PUSH (Julian, 10 Sep 2026): the next collage rises from the foot
   and pushes the current one off the top — the chapter system's own
   move (§4.9), on the accordion's clock (.45s, cubic-bezier(.4,0,.2,1)).
   Never a fade. The images stack; the one in view sits at 0, the next
   waits below, and the js moves both together. Reduced motion: no
   rotation at all (the js), so nothing here ever runs. */
#povs .art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  transform:translateY(100%);will-change:transform}
#povs .art img.is-in{transform:translateY(0)}
#povs .art img.is-out{transform:translateY(-100%)}
#povs .art img.is-moving{transition:transform .45s cubic-bezier(.4,0,.2,1)}
#povs .art img[hidden]{display:block}   /* the html's hidden marks the ones waiting; the transform hides them */

/* PHONES (§3 stacked flow, one breakpoint): the title, the card full
   width, then the rows, inside --m. The reading time leaves the far
   right and joins the meta line (the js). Rows are the tap targets. */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  #povs{padding:max(96px,11svh) var(--m) max(24px,3svh)}
  #povs h1{font-family:var(--deck);font-size:clamp(28px,8.4vw,44px);line-height:1}   /* phone size drops under Display's 48px floor — back to Deck (19 Sep 2026) */
  #povs .wrap{display:flex;flex-direction:column;align-items:stretch;margin-top:18px}   /* stretch: the desktop's align-items:start would shrink the list to its content */
  #povs .art{order:1;position:relative;top:auto;width:100%;border-radius:12px}   /* full width on phones; the page scrolls */
  #povs .feed{order:2;margin-top:24px}
  #povs .post .hd{grid-template-columns:36px minmax(0,1fr);column-gap:16px;padding:14px 0 16px;min-height:44px}
  #povs .post .num{font-size:clamp(20px,5.5vw,24px)}
  #povs .post .ttl{font-size:clamp(18px,4.8vw,21px)}
  #povs .post .meta{font-size:11px;margin-top:6px}
  #povs .post .time{display:none}
}

/* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer
   at a narrow or short window — where 200% browser zoom lands — this
   section is in its stacked, still layout, and its type is set at the
   size the board draws it, in rem, so zoom enlarges it (the phone sizes
   above are fitted to the screen and would cancel the zoom). !important
   beats the sizes the js writes inline; utils.js zoomFit() then eases
   back any line whose longest word would run past the edge. */
@media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  #povs h1{font-size:4.5rem!important;line-height:1.02!important}
  #povs .num{font-size:1.5rem!important;line-height:1!important}
  #povs .ttl{font-size:1.5rem!important;line-height:1.2!important}
}