/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SYCOPHANT — the trade press of the pitch (Pilot §1.2.5 · design/SPEC_sycophant_build.md §2/§7)
   ------------------------------------------------------------------------------------------------
   THE RECORDED SEAM (Theme Law §5, logged in DECISIONS_LOG): the paper is PRINTED MATTER.
   Ink #14110C on aged paper #ECE6D8 — it does NOT repaint with themes or the cosmetic --accent.
   Contrast is fixed and measured once: 14.6:1, AA at every size. The masthead is the CLEARED
   Direction-A asset (design/sycophant/masthead.html): Bodoni Moda 900, lowercase, the y-bow —
   deliberately NOT the Campaign wordmark (spec §1, legal). Font self-hosted per the play.html
   no-CDN-in-the-type-path rule.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Bodoni Masthead";
  src:url("../../fonts/bodonimoda-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}

/* the full VIEW — whole screen, no Finder chrome (UX Law 10), full occlusion (Law 2) */
#pn-syco{
  position:fixed;inset:0;z-index:11800;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:#ECE6D8;color:#14110C;
  background-image:linear-gradient(105deg,rgba(0,0,0,.03),transparent 40%),
                   radial-gradient(rgba(20,17,12,.05) .5px,transparent .5px);
  background-size:auto,3px 3px;
}
body.syco-open{overflow:hidden}
.syco-page{max-width:720px;margin:0 auto;padding:14px 18px 56px;position:relative}

/* HARD RESET against the game's global heading rules — the shell paints h2/h3 uppercase navy
   with decorative bars; printed matter is none of those things. Scoped to the paper only. */
#pn-syco h2,#pn-syco h3,#pn-syco p{text-transform:none;letter-spacing:normal;background:none;border:0}
#pn-syco h2::before,#pn-syco h2::after,#pn-syco h3::before,#pn-syco h3::after{content:none;display:none}
#pn-syco .syco-hed{color:#14110C;text-transform:none;letter-spacing:-.02em}
#pn-syco .syco-ihed{color:#14110C;text-transform:none}
#pn-syco .syco-k{text-transform:uppercase;letter-spacing:.2em}
#pn-syco .syco-date,#pn-syco .syco-by,#pn-syco .syco-clause,#pn-syco .syco-edline,#pn-syco .syco-foot{text-transform:uppercase}
#pn-syco .syco-date{letter-spacing:.18em}
#pn-syco .syco-by{letter-spacing:.14em}
#pn-syco .syco-edline{letter-spacing:.2em}
#pn-syco .syco-clause{letter-spacing:.1em}
#pn-syco .syco-foot{letter-spacing:.16em}

/* back to the desk — chrome on paper, ink AA by construction */
.syco-back{
  appearance:none;border:1.5px solid #14110C;background:transparent;color:#14110C;
  font:700 10px/1 ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.18em;
  text-transform:uppercase;padding:9px 12px;border-radius:2px;cursor:pointer;
  position:sticky;top:12px;float:right;margin:0 0 4px 12px;z-index:2;
  /* 44px floor — the Apple/WCAG touch-target minimum, and the same floor the QA48
     sweep enforced across the arcade controls. 34px was under it. */
  min-height:44px;display:inline-flex;align-items:center;background:#ECE6D8;
}
.syco-back:hover{background:#14110C;color:#ECE6D8}
.syco-back:focus-visible{outline:2px solid #14110C;outline-offset:2px}

/* ── THE NAMEPLATE — masthead + dateline, ≤20% of the first view (spec §2) ───────────────────── */
.syco-mast{padding:22px 0 8px;clear:none}
.syco-mark{
  font-family:"Bodoni Masthead",Didot,"Bodoni 72",Georgia,serif;font-weight:900;
  text-transform:lowercase;letter-spacing:-.045em;line-height:.82;
  display:inline-block;position:relative;color:#14110C;white-space:nowrap;
}
.syco-mark--hero{font-size:clamp(44px,12vw,72px)}
/* the y-bow — the obsequious descender. Anchored BELOW the baseline so it flows out of the y
   and sweeps right UNDER the word (spec §8's human-craft finding: a bow that crosses the word
   reads as a stray mark, not wit). The strip hangs beneath the span; the path starts at the y. */
.syco-ybow{position:absolute;left:0;right:0;bottom:-.34em;height:.36em;pointer-events:none;overflow:visible}
.syco-ybow svg{width:100%;height:100%;overflow:visible;display:block}
.syco-ybow path{fill:none;stroke:#14110C;stroke-linecap:round;stroke-width:1.3}
.syco-date{
  /* clearance scales with the mark: the y-bow hangs ~.34em below the baseline and must never
     strike through the dateline (seen at 1440 in the gate; fixed, re-rendered) */
  margin:clamp(20px,2.4vw,34px) 0 0;font:600 9.5px/1.5 ui-monospace,"JetBrains Mono",Menlo,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(20,17,12,.62);
}
.syco-rule{border:0;border-top:2.5px solid #14110C;margin:10px 0 22px}

/* the nameplate "prints" on open — a fast ink-settle wipe; one memorable move (UX Law 11) */
/* negative insets so the wipe never crops the descenders or the y-bow (they live outside the box) */
@keyframes syco-print{from{clip-path:inset(-20% 100% -80% 0);opacity:.4}to{clip-path:inset(-20% -8% -80% 0);opacity:1}}
.syco-print .syco-mark{animation:syco-print .55s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){
  .syco-print .syco-mark{animation:none}
}

/* ── THE LEAD — one loud moment per screen (UX Law 15) ───────────────────────────────────────── */
.syco-k{
  margin:0 0 6px;font:700 10px/1 ui-monospace,"JetBrains Mono",Menlo,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:#8a3a10;
}
.syco-lead{margin:0 0 26px}
.syco-hed{
  margin:0 0 10px;font-family:"Bodoni Masthead",Didot,Georgia,serif;font-weight:900;
  letter-spacing:-.02em;line-height:1.02;font-size:clamp(26px,6.4vw,40px);text-wrap:balance;
}
.syco-stand{
  margin:0 0 10px;font:400 15px/1.5 Georgia,"Times New Roman",serif;
  color:rgba(20,17,12,.78);max-width:52ch;
}
.syco-by{
  margin:0;font:600 9.5px/1 ui-monospace,"JetBrains Mono",Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(20,17,12,.62);
}

/* ── THE COLUMN — kicker + hed + one clause; no card-on-card grey modules (UX Law 12) ────────── */
.syco-col{border-top:1px solid rgba(20,17,12,.3)}
/* 44px minimum on the whole tappable row, not just its text (touch-target floor) */
.syco-item{padding:14px 0;border-bottom:1px solid rgba(20,17,12,.16);cursor:pointer;min-height:44px}
.syco-item:focus-visible{outline:2px solid #14110C;outline-offset:-2px}
.syco-ihed{
  margin:0;font:700 16px/1.25 Georgia,serif;color:#14110C;letter-spacing:-.005em;
}
.syco-clause{
  font:600 10px/1 ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(20,17,12,.62);white-space:nowrap;
}
.syco-ibody{
  margin:8px 0 0;font:400 13.5px/1.5 Georgia,serif;color:rgba(20,17,12,.72);max-width:56ch;
  display:none;
}
.syco-item.is-open .syco-ibody{display:block}
/* THE PARTNER is the one kind whose body IS the story: the item is a retrieved Marlowe quote,
   and a collapsed "a word from Marlowe Frost" tells the reader nothing. Always show it — it is
   two lines, and hiding the only news behind a tap is the opposite of the Noise Test. */
.syco-item[data-kind="marlowe"] .syco-ibody{display:block}
.syco-item[data-kind="marlowe"]{cursor:default}

/* ── the archive — earlier editions stack beneath, dated, quiet ──────────────────────────────── */
.syco-ed.is-front{margin-bottom:8px}
.syco-edline{
  margin:34px 0 10px;padding-top:14px;border-top:1px dashed rgba(20,17,12,.35);
  font:700 10px/1 ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(20,17,12,.62);
}
.syco-ed:not(.is-front) .syco-hed{font-size:clamp(20px,4.6vw,26px)}
.syco-ed:not(.is-front) .syco-stand{font-size:13.5px}

/* a quiet week prints a short paper and says so (spec §4c.1) */
.syco-quiet{
  margin:6px 0 18px;font:400 14.5px/1.55 Georgia,serif;color:rgba(20,17,12,.66);
  font-style:italic;max-width:52ch;
}

.syco-foot{
  margin-top:44px;padding-top:12px;border-top:1px solid rgba(20,17,12,.3);
  font:600 9px/1.6 ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(20,17,12,.62);
}

/* phone: tighter gutters, nothing touches the bezel (UX Law 3) */
@media (max-width:480px){
  .syco-page{padding:12px 14px 48px}
  .syco-back{top:10px}
}

/* ══ THE PAPER THAT IS NOT ABOUT YOU — baseline only ══════════════════════════════════════════
   Written by the narrative desk so the corpus is LEGIBLE on arrival, not designed. Rita owns the
   real back-page art direction (column rules, the classified grid, the ad slabs). Everything here
   is ink on paper in the existing type scale, no cards, no grey modules (UX Law 12), and it holds
   at 390 without horizontal scroll. Replace it; do not build on it.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
#pn-syco .syco-body{margin:10px 0 12px;font:400 14.5px/1.6 Georgia,"Times New Roman",serif;color:rgba(20,17,12,.8);max-width:56ch}

/* the hook is the one column item whose standfirst is always visible: it is a thread the player
   can pull, and a thread behind a tap is decoration. Its `body` still expands. */
#pn-syco .syco-item.is-hook .syco-ibody:not(.syco-ibody--more){display:block}
#pn-syco .syco-item.is-hook .syco-ihed::after{content:" ▸";color:#8a3a10}

#pn-syco .syco-furn{margin:22px 0 0;padding:16px 0 0;border-top:1px solid rgba(20,17,12,.3)}
#pn-syco .syco-furnh{
  margin:0 0 10px;font:700 10px/1 ui-monospace,"JetBrains Mono",Menlo,monospace;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(20,17,12,.62);
}
#pn-syco .syco-appt{margin:0 0 7px;font:400 13.5px/1.5 Georgia,serif;color:rgba(20,17,12,.82);max-width:58ch}
#pn-syco .syco-appt b{font-weight:700;color:#14110C}

#pn-syco .syco-diary{margin:0 0 9px;font:400 13.5px/1.5 Georgia,serif;color:rgba(20,17,12,.82);max-width:56ch}
#pn-syco .syco-attr{font:400 11.5px/1.4 Georgia,serif;color:rgba(20,17,12,.62);font-style:italic}

/* two narrow columns of small ads on a wide screen, one on a phone — a back page, not a grid of
   equal tiles. `column-fill:balance` keeps the second column from running short and looking broken. */
#pn-syco .syco-furn--class > :not(.syco-furnh){break-inside:avoid}
@media (min-width:720px){
  #pn-syco .syco-furn--class{columns:2;column-gap:28px;column-rule:1px solid rgba(20,17,12,.16)}
  #pn-syco .syco-furn--class .syco-furnh{column-span:all}
}
#pn-syco .syco-cl{margin:0 0 13px;break-inside:avoid}
#pn-syco .syco-cl-l{margin:0 0 2px;font:700 10.5px/1.3 ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#14110C}
#pn-syco .syco-cl-b{margin:0;font:400 12.5px/1.45 Georgia,serif;color:rgba(20,17,12,.78)}
#pn-syco .syco-cl-s{margin:2px 0 0;font:400 11px/1.4 Georgia,serif;color:rgba(20,17,12,.62);font-style:italic}

/* the trade ad is the one object on the page written by somebody other than the desk, so it gets
   a rule box — printed matter inside printed matter. Never a filled card. */
#pn-syco .syco-ad{margin:0 0 14px;padding:12px 13px;border:1.5px solid rgba(20,17,12,.55);break-inside:avoid}
#pn-syco .syco-ad-l{margin:4px 0 5px;font:900 15px/1.15 "Bodoni Masthead",Didot,Georgia,serif;letter-spacing:-.01em;color:#14110C}
#pn-syco .syco-ad-b{margin:0 0 6px;font:400 12.5px/1.45 Georgia,serif;color:rgba(20,17,12,.78)}
#pn-syco .syco-ad-f{margin:0;font:600 9.5px/1.3 ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,17,12,.62)}

#pn-syco .syco-lt{margin:0 0 12px}
#pn-syco .syco-lt-b{margin:0;font:400 13px/1.5 Georgia,serif;color:rgba(20,17,12,.82);max-width:58ch}
#pn-syco .syco-lt-s{margin:3px 0 0;font:400 11.5px/1.4 Georgia,serif;color:rgba(20,17,12,.62);font-style:italic}

#pn-syco .syco-corr{margin:0 0 9px;font:400 12.5px/1.5 Georgia,serif;color:rgba(20,17,12,.72);max-width:60ch}

#pn-syco .syco-column{margin:22px 0 0;padding:16px 0 0;border-top:1px solid rgba(20,17,12,.3)}
#pn-syco .syco-colhed{margin:0 0 8px;font:700 18px/1.2 Georgia,serif;color:#14110C;letter-spacing:-.01em}
#pn-syco .syco-colbody{margin:0 0 8px;font:400 14px/1.6 Georgia,serif;color:rgba(20,17,12,.82);max-width:56ch}

#pn-syco .syco-ed--founding .syco-edline{color:rgba(20,17,12,.6)}