/* Publication identity layer for /work/*.
   ---------------------------------------------------------------------------
   adv.css carries the STRUCTURE and it is sound: publisher bar, sheet on a
   ground, two-column with sidebar, annotated hero, author block. What made
   every spec page read as stock was that adv.css also carried the only
   identity, and that identity was Inter at 800 on white with an editorial red.
   Inter as a display face is the single most-flagged AI tell there is, and six
   landers sharing one palette meant six publications that looked like one
   template.

   So: structure stays shared, identity forks. Each publication gets its own
   type pairing, its own palette and its own masthead logic. The two are
   deliberately inverted from each other. Cabinet is sans display over serif
   body; Taper is serif display over sans body. That inversion alone is what
   makes them read as two different publishers rather than two skins.

   Every face here is open-licence (OFL) and served from Google Fonts, which is
   the standing rule for anything on an unlicensed test domain. No commercial
   foundry file goes near a pages.dev URL.
   =========================================================================== */


/* ===========================================================================
   THE CABINET TEST  .  a consumer-testing publication
   Reference family: Consumer Reports, Which?. Authority comes from rigour and
   measurement, not from editorial prettiness. So the page reads like a test
   report: institutional paper, a pass/fail colour system, rules everywhere,
   nothing decorative.
   =========================================================================== */
body[data-pub="cabinet"]{
  --paper:#FFFFFF;
  --band:#E7EBEF;            /* cool steel ground, not the default flat grey */
  --ink:#0F1419;
  --ink-soft:#333C45;
  --muted:#5F6B76;
  --muted-2:#8996A2;
  --rule:#D7DDE3;
  --alert:#B42318;           /* fail */
  --pass:#0B5138;            /* pass. a testing publication needs both */
  --accent:#1F3A4D;          /* links read as institutional, never as a brand */

  --disp:"Bricolage Grotesque","Archivo",-apple-system,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  font-family:var(--serif);
  font-size:18.5px;
  line-height:1.66;
}

/* Body copy is the serif. This is the biggest single change: the page stops
   looking like a web app and starts looking like something that was edited. */
body[data-pub="cabinet"] p,
body[data-pub="cabinet"] .lede,
body[data-pub="cabinet"] figcaption,
body[data-pub="cabinet"] .ednote,
body[data-pub="cabinet"] .pull{ font-family:var(--serif) }

/* Everything structural and label-like stays in the grotesque. */
body[data-pub="cabinet"] h1,
body[data-pub="cabinet"] h2,
body[data-pub="cabinet"] h3,
body[data-pub="cabinet"] .dek,
body[data-pub="cabinet"] .stamp,
body[data-pub="cabinet"] .crumbs,
body[data-pub="cabinet"] .pub-name,
body[data-pub="cabinet"] .pub-tag,
body[data-pub="cabinet"] .pub-live,
body[data-pub="cabinet"] .author-meta,
body[data-pub="cabinet"] .side-h,
body[data-pub="cabinet"] .ring-note,
body[data-pub="cabinet"] .buy,
body[data-pub="cabinet"] .kicker{ font-family:var(--disp) }

body[data-pub="cabinet"] h1{
  font-weight:800; letter-spacing:-.032em; line-height:1.08;
  font-size:clamp(33px,5.4vw,48px);
  border-left:0; padding-left:0;                 /* the red bar was the tell */
  border-top:3px solid var(--ink); padding-top:16px;
}
body[data-pub="cabinet"] .dek{ font-weight:700; font-size:20.5px; letter-spacing:-.012em }
body[data-pub="cabinet"] .subdek{ font-family:var(--serif); font-style:italic; font-size:17.5px }

/* Masthead: a testing body, so pale and ruled rather than a black tabloid bar. */
body[data-pub="cabinet"] .pub{
  background:#FFFFFF; color:var(--ink);
  border-bottom:3px double var(--ink); padding:16px 0;
}
body[data-pub="cabinet"] .pub-name{ font-weight:800; letter-spacing:.02em; font-size:19px; text-transform:none }
body[data-pub="cabinet"] .pub-tag{ color:var(--muted); border-left-color:var(--rule) }
body[data-pub="cabinet"] .pub-live{
  color:var(--pass); background:#EAF2EE; border-color:#BFD6CB; border-radius:0;
  font-weight:800; letter-spacing:.13em;
}
body[data-pub="cabinet"] .advlabel{ background:#0F1419 }

body[data-pub="cabinet"] .stamp{ color:var(--pass); letter-spacing:.14em; font-weight:800 }
body[data-pub="cabinet"] .crumbs{ color:var(--accent); letter-spacing:.13em }
body[data-pub="cabinet"] .sheet{ box-shadow:0 1px 0 var(--rule), 0 24px 60px -40px rgba(15,20,25,.45) }
body[data-pub="cabinet"] .avatar{ border-radius:0; background:var(--accent); font-family:var(--disp) }

/* Pull quote as a verdict slip rather than a soft tinted box. */
body[data-pub="cabinet"] .pull{
  border-left:3px solid var(--pass); background:#F3F7F5;
  font-style:normal; font-size:20px;
}


/* ===========================================================================
   WEIGHT & MEASURE  .  a clinical bulletin
   Reference family: a patient-facing bulletin from a clinic, not a magazine.
   Quieter, cooler, more medical. Type is inverted from Cabinet on purpose:
   serif display over a clean sans body.
   =========================================================================== */
body[data-pub="taper"]{
  --paper:#FFFFFF;
  --band:#DFE6ED;            /* clinical blue-grey, distinctly not Cabinet steel */
  --ink:#111B2B;
  --ink-soft:#2E3E52;
  --muted:#5A6B80;
  --muted-2:#8797A9;
  --rule:#D3DCE6;
  --alert:#9A3412;           /* used sparingly. this page is not shouting */
  --accent:#0B5CAD;

  --disp:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,sans-serif;

  font-family:var(--sans);
  font-size:18px;
  line-height:1.68;
}

body[data-pub="taper"] h1,
body[data-pub="taper"] h2,
body[data-pub="taper"] h3,
body[data-pub="taper"] .dek,
body[data-pub="taper"] .pull,
body[data-pub="taper"] .pub-name{ font-family:var(--disp) }

body[data-pub="taper"] h1{
  font-weight:600; letter-spacing:-.018em; line-height:1.14;
  font-size:clamp(32px,5vw,46px);
  border-left:0; padding-left:0;
  border-bottom:1px solid var(--rule); padding-bottom:18px;
}
body[data-pub="taper"] .dek{ font-weight:400; font-size:21px; line-height:1.42; color:var(--ink-soft) }
body[data-pub="taper"] .subdek{ font-size:16.5px }

/* Masthead: deep clinical navy, thin, with a hairline. Structurally unlike
   Cabinet's doubled rule on white. */
body[data-pub="taper"] .pub{
  background:#111B2B; color:#fff; padding:15px 0;
  border-bottom:1px solid #24344A;
}
body[data-pub="taper"] .pub-name{
  font-weight:600; letter-spacing:.01em; font-size:20px; text-transform:none;
}
body[data-pub="taper"] .pub-tag{ color:#9DB0C6; border-left-color:#2B3E56 }
body[data-pub="taper"] .pub-live{
  color:#BBD5F2; background:#152A45; border-color:#2B4A70;
  border-radius:999px; font-weight:600; letter-spacing:.12em;
}
body[data-pub="taper"] .advlabel{ background:#111B2B }

body[data-pub="taper"] .stamp{ color:var(--accent); letter-spacing:.12em }
body[data-pub="taper"] .crumbs{ color:var(--muted); letter-spacing:.12em }
body[data-pub="taper"] .avatar{ background:var(--accent) }
body[data-pub="taper"] .sheet{ box-shadow:0 1px 0 var(--rule), 0 24px 60px -40px rgba(17,27,43,.4) }

body[data-pub="taper"] .pull{
  border-left:3px solid var(--accent); background:#F2F6FB;
  font-style:normal; font-size:20.5px; line-height:1.5;
}

/* The annotated-hero ring is the one device both pages keep, because it is the
   thing that actually aims the eye. Each tints it to its own signal colour so
   it does not read as the same red stamp twice. */
body[data-pub="cabinet"] .ring{ border-color:var(--alert) }
body[data-pub="cabinet"] .ring-note{ background:var(--alert); border-radius:0 }
body[data-pub="taper"] .ring{ border-color:var(--accent) }
body[data-pub="taper"] .ring-note{ background:var(--accent); border-radius:2px; font-weight:700 }

/* Hover and press only. No scroll-reveal anywhere: standing rule. */
body[data-pub] .buy{ transition:transform .14s ease, filter .14s ease }
body[data-pub] .buy:hover{ filter:brightness(1.06) }
body[data-pub] .buy:active{ transform:translateY(1px) }


/* ===========================================================================
   VISUAL DEVICES
   Each page had one block carrying its central argument and each was a bullet
   list in a grey rounded box. That is the weakest component either page could
   have reached for, and it is why nothing on these landers was worth looking
   at. Both are now real diagrams, built in HTML so the type stays live type
   at 390px instead of going fuzzy inside an exported image.
   =========================================================================== */

/* --- Cabinet: an annotated supplement panel ------------------------------ */
.panelfig{margin:30px 0 28px;padding:0}
.panelfig-h{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.2;
  color:var(--ink);border:0;padding:0 0 16px;margin:0}
.panelwrap{display:grid;gap:22px}
@media(min-width:820px){.panelwrap{grid-template-columns:1fr 1fr;gap:30px;align-items:start}}

.panel{border:2px solid var(--ink);background:#fff;padding:0}
.panel-t{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em;
  padding:12px 14px 8px;border-bottom:7px solid var(--ink)}
.panel-sub{font-size:13px;color:var(--muted);padding:8px 14px;border-bottom:2px solid var(--ink)}
.panel-rows{padding:0 14px}
.prow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.35}
.prow span{color:var(--ink)}
.prow b{font-family:var(--disp);font-weight:800;white-space:nowrap}
.panel-foot{font-size:13.5px;line-height:1.5;color:var(--muted);padding:11px 14px;
  border-top:5px solid var(--ink);background:#F4F7F5}

/* the marker chips are what turn a table into a diagram */
.prow[data-mark],.panel-foot[data-mark]{position:relative}
.prow[data-mark]::after,.panel-foot[data-mark]::after{
  content:attr(data-mark);position:absolute;left:-40px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:var(--pass);color:#fff;font-family:var(--disp);font-weight:800;font-size:12px}
.panel-foot[data-mark]::after{left:-26px;top:14px;transform:none}
.panel{margin-left:26px}

.panel-keys{list-style:none;margin:0;padding:0;counter-reset:k}
.panel-keys li{position:relative;padding:0 0 14px 38px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.panel-keys li + li{border-top:1px solid var(--rule);padding-top:14px}
.panel-keys b{position:absolute;left:0;top:0;font-family:var(--disp);font-weight:800;
  font-size:12px;color:var(--pass);letter-spacing:.06em}
.panel-keys li + li b{top:14px}
.panel-keys em{font-style:italic;color:var(--ink)}

/* --- Taper: the window, as a timeline ----------------------------------- */
.tlfig{margin:30px 0 28px;padding:0}
.tlfig-h{font-family:var(--disp);font-weight:600;font-size:23px;line-height:1.2;
  color:var(--ink);border:0;padding:0 0 18px;margin:0}
.tline{border-left:2px solid var(--rule);padding-left:0;margin-left:8px}
.tl-row{position:relative;padding:2px 0 22px 26px}
.tl-row::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;
  border-radius:50%;background:#fff;border:2px solid var(--muted-2)}
.tl-row::after{content:attr(data-phase);position:absolute;left:26px;top:0;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2)}
.tl-when{font-family:var(--disp);font-weight:600;font-size:19.5px;line-height:1.25;
  color:var(--ink);margin:0 0 5px;padding-top:22px}
.tl-row p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-soft)}

/* one moment is the point of the page, so exactly one row breaks the rhythm */
.tl-hot::before{background:var(--accent);border-color:var(--accent);width:16px;height:16px;left:-9px;top:4px}
.tl-hot::after{color:var(--accent)}
.tl-hot{background:#F2F6FB;margin-left:-2px;padding:2px 16px 20px 26px;border-left:2px solid var(--accent)}
.tl-hot .tl-when{font-size:21px}