/* ==========================================================================
   The three new visual mechanisms:
     · the Isotype audience field
     · the anatomy diagram (information design + marginalia)
     · the wire (interactive halftone map)
   Registration lives in system.css and is used exactly twice on the page.
   ========================================================================== */

/* ── 02 · THE AUDIENCE ─────────────────────────────────────────────────── */
.aud{ padding-block:clamp(4rem,11vh,7.5rem) clamp(3rem,8vh,5rem);overflow:clip }
.aud__lede{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4.5rem);align-items:end;
  margin-bottom:clamp(2.2rem,6vh,4rem);
}
.aud__lede-l .headline{ margin-top:.6rem;max-width:14ch }
.aud__lede-r .body{ max-width:44ch;margin-bottom:1rem }
.aud__lede-r .body:last-child{ margin-bottom:0 }

.aud__fig{ margin:0;position:relative }
.aud__svg{
  width:100%;height:auto;display:block;color:var(--ink);
  overflow:visible;
}
.aud__f{ color:var(--ink);transition:color .35s var(--ease) }
.aud__f.is-read{ color:var(--ink) }
.aud__f.is-watch{ color:var(--signal) }
.aud__f.is-ask{ color:var(--product) }

/* rank labels, set in the page's own serif — the chart labels itself */
.aud__lbl{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 24;
  font-size:30px;letter-spacing:-.018em;fill:var(--ink);
  opacity:calc(var(--sorted,0) * 1.6 - .35);
}
.aud__lbl--watch{ fill:var(--signal) }
.aud__lbl--ask{ fill:var(--product) }
.aud__base{
  stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:calc(var(--sorted,0) * .5 - .12);
}
.aud__base--watch{ stroke:var(--signal) }
.aud__base--ask{ stroke:var(--product) }
.aud__sub{
  font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.005em;
  fill:var(--ink-45);
  opacity:calc(var(--sorted,0) * 1.6 - .55);
}

.aud__cap{
  padding-inline:var(--margin);max-width:var(--max);margin:1.6rem auto 0;
  text-wrap:pretty;
}
.aud__cap > span{ display:block;max-width:62ch }
.aud__cap strong{ color:var(--ink) }

@media (max-width:860px){
  .aud__lede{ grid-template-columns:1fr;gap:1.6rem;align-items:start }
  .aud__lede-l .headline{ max-width:none }
}

/* ── 03 · ANATOMY ──────────────────────────────────────────────────────── */
.anat{ padding-block:clamp(4rem,11vh,7.5rem);background:var(--paper-2) }
.anat__head{ max-width:52ch;margin-bottom:clamp(2rem,5vh,3.4rem) }
.anat__head .headline{ margin:.6rem 0 1rem;max-width:16ch }
.anat__head .dek{ max-width:46ch }

.anat__stage{
  position:relative;
  display:grid;grid-template-columns:minmax(0,268px) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.2rem);align-items:center;
}
.anat__obj{ margin:0;position:relative;z-index:2 }
.anat__pair{ position:relative;display:grid;gap:2.4rem;justify-items:start }
.anat__scr{ background:var(--paper) }
.anat__scr--a{ width:82%;max-width:220px;position:relative;z-index:2 }
/* B is a detail enlargement, not a second phone: the foot of the Sudo screen,
   cropped the way a magazine crops a plate to show one part of it. */
.anat__scr--b{
  position:relative;width:100%;max-width:262px;z-index:2;
  aspect-ratio:820/300;overflow:hidden;
  outline-color:var(--product);
  box-shadow:0 12px 40px -30px #161616a6;
}
.anat__scr--b img{ position:absolute;left:0;bottom:0;width:100%;height:auto }
.anat__detail{
  margin:-1.6rem 0 0;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--product);
}

.anat__notes{ list-style:none;margin:0;padding:0;position:relative;z-index:4 }
.anat__n{
  display:grid;grid-template-columns:2.6rem 9.5rem minmax(0,1fr);
  gap:.2rem 1rem;align-items:baseline;
  padding:1.45rem 0;border-top:1px solid var(--ink-22);
  opacity:.28;transition:opacity .5s var(--ease);
}
.anat__n:last-child{ border-bottom:1px solid var(--ink-22) }
.anat__n.is-on{ opacity:1 }
.anat__num{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--signal);
}
.anat__lbl{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 18;
  font-size:1.06rem;letter-spacing:-.012em;
}
.anat__txt{ color:var(--ink-70);font-size:.92rem;line-height:1.55 }

/* leader lines drawn between the object and each note */
.anat__lines{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;
  overflow:visible;
}
.anat__lines path{
  fill:none;stroke:var(--signal);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:.55;
  transition:stroke-dashoffset .74s var(--ease);
}
.anat__lines path.anat__halo{
  stroke:#fff;stroke-width:2.5;opacity:.45;
}
.anat__lines circle{
  fill:var(--signal);stroke:#fff;stroke-width:1.4;
  opacity:0;transition:opacity .4s var(--ease) .12s;
}

@media (max-width:900px){
  .anat__stage{ grid-template-columns:1fr;gap:3rem }
  .anat__pair{ grid-template-columns:1fr 1fr;gap:1.4rem;align-items:end }
  .anat__scr--a{ max-width:210px }
  .anat__scr--b{ max-width:230px;align-self:end }
  .anat__n{ padding:1rem 0 }
  .anat__lines{ display:none }
  .anat__n{ grid-template-columns:2.4rem minmax(0,1fr);opacity:1 }
  .anat__lbl{ grid-column:2 }
  .anat__txt{ grid-column:2 }
}

/* ── 07 · THE WIRE ─────────────────────────────────────────────────────── */
.wire-sec{ padding-block:clamp(4rem,11vh,7.5rem) clamp(3rem,8vh,5rem);overflow:clip }
.wire__head{ max-width:56ch;margin-bottom:clamp(1.6rem,4vh,2.6rem) }
.wire__head .headline{ margin:.6rem 0 1rem;max-width:17ch }
.wire__head .headline em{ font-style:italic;color:var(--signal) }
.wire__head .dek{ max-width:48ch }

.wire__fig{ margin:0 }
.wire{
  position:relative;width:100%;
  height:clamp(260px,44vw,560px);
  cursor:crosshair;
}
.wire canvas{ display:block;width:100%;height:100% }
.wire__labels{ position:absolute;inset:0;pointer-events:none }
.wire__label{
  position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-70);white-space:nowrap;
  padding:0 0 0 .55rem;margin-top:-.42rem;
  opacity:0;transition:opacity .55s var(--ease);
  /* the label sits on a field of ink dots. A blurred glow is not enough at
     this tone; eight hard offsets knock a clean paper hole around the glyphs
     without putting a box behind them. */
  text-shadow:
    2px 0 0 var(--paper), -2px 0 0 var(--paper),
    0 2px 0 var(--paper), 0 -2px 0 var(--paper),
    1.5px 1.5px 0 var(--paper), -1.5px 1.5px 0 var(--paper),
    1.5px -1.5px 0 var(--paper), -1.5px -1.5px 0 var(--paper);
}
.wire__label::before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:3px;
  background:var(--ink);transform:translate(-1.5px,-1.5px);
  box-shadow:0 0 0 1.5px var(--paper);
}
.wire__label.is-on{ opacity:1 }
.wire__label.is-l{ padding:0 .55rem 0 0 }
.wire__label.is-l::before{ left:auto;right:0;transform:translate(1.5px,-1.5px) }
.wire__label.is-home{
  color:var(--signal);font-weight:500;font-size:.68rem;opacity:1;
  padding-left:.75rem;
}
.wire__label.is-home::before{ background:var(--signal);width:0;height:0 }
.wire__cap{ margin-top:1.5rem }
.wire__cap-t{ display:block;max-width:64ch }
.wire__hint{ display:block;margin-top:.35rem;color:var(--product) }
@media (hover:none){ .wire{ cursor:default } .wire__hint{ display:none } }
@media (max-width:760px){
  .wire{ height:clamp(200px,52vw,320px) }
  .wire__label{ font-size:.52rem;letter-spacing:.08em }
}

/* ── 06 · SUDO — the mark, with the story printed inside it ─────────────── */
.ask{ padding-block:clamp(4rem,10vh,6.5rem);position:relative;overflow:clip }
.ask__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,6vw,5.5rem);align-items:center;
}
.ask__text .headline{ margin:.7rem 0 1.4rem;max-width:13ch }
.ask__text .dek{ max-width:42ch }
.ask__text .isnot{ margin-top:clamp(1.6rem,4vh,2.6rem);max-width:44ch }

.ask__fig{ margin:0;position:relative }
/* the mark bleeds off the right trim, the way a magazine lets a display glyph
   run off the page rather than politely fitting inside the column */
.ask__mark{
  display:block;width:100%;height:auto;max-width:460px;
  margin-left:auto;margin-right:calc(var(--margin) * -1);
  overflow:hidden;
  filter:drop-shadow(0 20px 40px #1616161c);
}
.ask__img{ will-change:transform }

/* the real screen, small, touching the mark's foot: type and product in one
   picture rather than a phone parked next to a paragraph */
.ask__phone{
  position:absolute;left:31%;bottom:12%;width:28%;max-width:150px;
  background:var(--paper);outline-color:var(--product);
  box-shadow:14px 18px 46px -28px #161616b3;
}
.ask__cap{ margin-top:1.1rem;max-width:36ch }

/* kinetic setting: the line arrives word by word with a cut-and-hold rhythm */
.kin-w{ display:inline-block;white-space:pre }
.kin-w > i{
  display:inline-block;font-style:inherit;
  opacity:0;transform:translate3d(0,.34em,0);
  transition:opacity .42s var(--ease),transform .52s var(--ease-snap);
}
.is-kin .kin-w > i{ opacity:1;transform:none }

@media (max-width:900px){
  .ask__grid{ grid-template-columns:1fr;gap:2.6rem }
  .ask__text .headline{ max-width:none }
  .ask__mark{ margin-left:0;margin-right:calc(var(--margin) * -1);max-width:340px }
  .ask__phone{ left:auto;right:2%;bottom:14%;width:36%;max-width:140px }
  .ask__cap{ margin-left:0;text-align:left;max-width:46ch }
}
@media (prefers-reduced-motion:reduce){
  .kin-w > i{ opacity:1;transform:none;transition:none }
}

.ask__key{ fill:none;stroke:var(--ink);stroke-width:2;opacity:.7 }
.ask__img{ mix-blend-mode:multiply }

/* ── without JavaScript ────────────────────────────────────────────────── */
/* The page is never a set of empty boxes. The Isotype field is baked into the
   markup in its sorted state, so it needs nothing here; the wire is a canvas
   and cannot be, so it steps aside for a line of type instead. */
.no-js .wire{ display:none }
.no-js .wire__hint{ display:none }
.no-js .anat__n{ opacity:1 }
.no-js .anat__lines{ display:none }
.no-js .kin-w > i{ opacity:1;transform:none }
.wire__nojs{ display:none }
.no-js .wire__nojs{
  display:block;border-top:1px solid var(--ink-22);padding-top:1.2rem;
  max-width:60ch;
}

/* narrow: the rank label sits above its row, so it must hold its own at the
   viewBox scale the phone layout uses */
.aud__lbl.is-over{ font-size:52px }

@media (max-width:860px){
  /* on a phone the chart aligns to the text column rather than the trim —
     a rank label hard against the screen edge reads as a mistake */
  .aud__fig{ padding-inline:var(--margin) }
}