/* ═══════════════════════════════════════════════════════════════
   PLATEMARK — the TITAN Dispatch theme
   FOUNDATION OF TOKENS: every visual value is named here, once.
   Components below consume tokens only. A raw hex or magic px
   outside this block is a foundation crack.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ground & surfaces */
  --ground:#0F1116; --contour:#191E29; --panel:#171B24; --panel2:#131721;
  --plate-bg:#0D0F14;
  /* ink */
  --ink:#E3E1D8; --muted:#8A8F9C; --line:#2A2F3B;
  /* metals */
  --bronze:#C9A45C; --bronze-dim:#8F7440; --mark:#6B7180;
  /* verdict semantics */
  --good:#6FBF8E; --good-stamp:#7ED49D; --bad:#E07A6A; --bad-stamp:#F08575;
  /* type */
  --serif:"Marcellus",Georgia,serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* scale */
  --fs-body:1rem; --fs-small:.9rem; --fs-agate:.86rem; --fs-caption:.62rem;
  --fs-tab:.62rem; --fs-meta:.72rem; --fs-h2:1.22rem;
  --fs-masthead:clamp(2rem,5vw,2.9rem);
  --fs-stamp:clamp(1.6rem,4.5vw,2.9rem);
  --fs-stamp-hero:clamp(1.5rem,3.6vw,2.5rem);
  --fs-bignum:2.4rem;
  --lh-body:1.6;
  /* space & structure */
  --page-max:70rem; --gap:1.6rem; --pad-panel:1.2rem 1.4rem 1.4rem;
  --rule:1px solid var(--line); --rule-bronze:1px solid var(--bronze-dim);
  /* the tilt dial: full=.55deg, whisper=.25deg, straight=0 */
  --tilt:.55deg;
  /* motion */
  --stamp-ease:cubic-bezier(.2,1.4,.4,1); --stamp-dur:.45s;
  /* shadow */
  --drop:0 14px 30px rgba(0,0,0,.35); --drop-deep:0 14px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
body{
  background:var(--ground); color:var(--ink); margin:0;
  font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body);
  padding:2.4rem 1.2rem 5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23191E29' stroke-width='1'%3E%3Cpath d='M-20,80 C60,40 140,120 210,90 C290,55 350,110 440,70'/%3E%3Cpath d='M-20,110 C60,72 140,150 210,122 C290,88 350,140 440,102'/%3E%3Cpath d='M-20,140 C60,104 140,180 210,154 C290,121 350,170 440,134'/%3E%3Cpath d='M-20,300 C70,260 150,340 230,310 C310,278 370,330 440,292'/%3E%3Cpath d='M-20,330 C70,292 150,370 230,342 C310,310 370,360 440,324'/%3E%3Ccircle cx='330' cy='210' r='26'/%3E%3Ccircle cx='330' cy='210' r='44'/%3E%3Ccircle cx='330' cy='210' r='62'/%3E%3Cpath d='M60,220 l14,0 M67,213 l0,14'/%3E%3C/g%3E%3C/svg%3E");
}
.table{max-width:var(--page-max); margin:0 auto;}
a{color:var(--bronze);}
a:focus-visible{outline:2px solid var(--bronze); outline-offset:2px;}
.skip{position:absolute; left:-999px;}
.skip:focus{position:static; display:inline-block; padding:.3rem .8rem;}

/* masthead */
.masthead{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.6rem 2rem;
  border-bottom:3px double var(--bronze-dim); padding-bottom:.9rem;}
.masthead h1{font-family:var(--serif); font-weight:400; font-size:var(--fs-masthead);
  letter-spacing:.13em; margin:0; color:var(--bronze); text-transform:uppercase;}
.masthead .issue{font-family:var(--mono); font-size:var(--fs-meta); color:var(--muted);
  letter-spacing:.13em; text-transform:uppercase; text-align:right; line-height:1.8;}

/* grid & dossiers */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); margin-top:2rem; align-items:start;}
.dossier{background:var(--panel); border:var(--rule); padding:var(--pad-panel); position:relative; box-shadow:var(--drop);}
.dossier .tab{position:absolute; top:-.78rem; left:1rem; background:var(--panel2); border:var(--rule);
  font-family:var(--mono); font-size:var(--fs-tab); letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); padding:.18rem .6rem;}
.dossier .pin{position:absolute; top:-.34rem; right:1.1rem; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #E9CF96, var(--bronze-dim)); box-shadow:0 2px 4px rgba(0,0,0,.6);}
.tilt-l{transform:rotate(calc(var(--tilt) * -1));} .tilt-r{transform:rotate(calc(var(--tilt) * .82));}

h2{font-family:var(--serif); font-weight:400; font-size:var(--fs-h2); letter-spacing:.1em;
  text-transform:uppercase; color:var(--bronze); margin:0 0 .6rem;}
p{margin:.6rem 0 0;}
.quote{font-style:italic; color:var(--muted);}
.quote b{color:var(--bronze); font-style:normal;}

/* the engraver's plates */
.plate{background:var(--plate-bg); border:var(--rule-bronze); padding:.55rem; box-shadow:var(--drop-deep);}
.plate img{display:block; width:100%; height:auto; filter:sepia(.06) contrast(1.02) brightness(1.14);}
.plate .caption{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:.55rem .25rem .15rem;}
.plate .caption b{color:var(--bronze); font-weight:500;}
.heroplate{grid-column:1/13; position:relative; margin:.4rem 0 0;}
.heroplate .stamp{position:absolute; right:2.2rem; bottom:4.6rem; font-size:var(--fs-stamp-hero);}
.herofoot{grid-column:1/13; display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:1.2rem; margin-top:-.2rem;}

/* the verdict stamp */
.stamp{display:inline-block; transform:rotate(-5deg); border:3px solid var(--good-stamp); color:var(--good-stamp);
  font-family:var(--serif); font-size:var(--fs-stamp); letter-spacing:.14em; text-transform:uppercase;
  padding:.25rem 1rem .15rem; position:relative; line-height:1.15; opacity:.92;
  background:rgba(10,12,16,.18); text-shadow:0 0 14px rgba(0,0,0,.55);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.92 0.05'/%3E%3C/filter%3E%3Crect width='220' height='220' fill='white' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size:220px;}
.stamp::after{content:""; position:absolute; inset:5px; border:1px solid currentColor; pointer-events:none;}
.stamp.is-bad{border-color:var(--bad-stamp); color:var(--bad-stamp);}
.stamp.is-neutral{border-color:var(--bronze); color:var(--bronze);}
@media (prefers-reduced-motion:no-preference){
  .stamp{animation:stampdown var(--stamp-dur) var(--stamp-ease) both;}
  @keyframes stampdown{from{opacity:0; transform:rotate(-5deg) scale(1.6);} to{opacity:.92; transform:rotate(-5deg) scale(1);}}
}
.stampmeta{font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:.8rem;}
.bignums{margin-top:1rem; display:flex; gap:2.4rem; flex-wrap:wrap; align-items:baseline;}
.bignums .n{font-family:var(--serif); font-size:var(--fs-bignum); color:var(--ink); line-height:1;}
.bignums .n.g{color:var(--good);} .bignums .n.b{color:var(--bad);}
.bignums .l{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-top:.3rem;}

/* named grid slots */
.lesson{grid-column:1/8;} .lesson .plate{margin-top:.9rem;}
.iplate{grid-column:8/13; align-self:stretch;} .iplate .plate{transform:rotate(calc(var(--tilt) * 1.1));}
.battle{grid-column:8/13;} .cast{grid-column:1/8;}
.ledger{grid-column:1/13;} .forge{grid-column:1/7;} .watchz{grid-column:7/13;}
.annex{grid-column:1/13;} .teaser{grid-column:1/13;} .morning{grid-column:1/13;}

/* bars */
.bars{display:grid; gap:.45rem; margin-top:.9rem; font-family:var(--mono); font-size:.8rem;}
.bar{display:grid; grid-template-columns:4rem 1fr 3.8rem; align-items:center; gap:.7rem;}
.bar .track{height:9px; background:var(--panel2); position:relative; overflow:hidden;}
.bar .fill{position:absolute; top:0; bottom:0;}
.bar .val{text-align:right; font-variant-numeric:tabular-nums;}
.pos .fill{background:var(--good);} .pos .val{color:var(--good);}
.neg .fill{background:var(--bad);} .neg .val{color:var(--bad);}

/* tables */
table{border-collapse:collapse; width:100%; font-size:var(--fs-agate); font-variant-numeric:tabular-nums; margin-top:.8rem;}
.tablewrap{overflow-x:auto;}
th{font-family:var(--serif); text-transform:uppercase; letter-spacing:.06em; font-weight:400; text-align:left;
   color:var(--bronze); border-bottom:1px solid var(--bronze-dim); padding:.4rem .8rem .4rem 0;}
td{border-bottom:var(--rule); padding:.5rem .8rem .5rem 0; vertical-align:top;}
td:first-child{font-family:var(--mono); font-weight:600; white-space:nowrap;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.good{color:var(--good);} .bad{color:var(--bad);}
.cast strong{color:var(--bronze); letter-spacing:.05em;}

/* telegraph tape */
.tape{list-style:none; padding:0; margin:.9rem 0 0; display:grid; gap:.7rem;}
.tape li{font-family:var(--mono); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  background:var(--panel2); border:var(--rule); padding:.7rem 1rem .7rem 1.1rem; position:relative; color:var(--ink);
  background-image:radial-gradient(circle 1.6px at 8px 50%, var(--ground) 1.6px, transparent 2px),
                   radial-gradient(circle 1.6px at calc(100% - 8px) 50%, var(--ground) 1.6px, transparent 2px);}
.tape li::before{content:"✓ "; color:var(--good);}
.metab{font-family:var(--mono); font-size:.85rem; border:1px dashed var(--bronze-dim); padding:.9rem 1.1rem; margin-top:.8rem; background:var(--panel2);}
.metab b{color:var(--bad); font-weight:600;}
.annex-note{color:var(--muted); font-size:var(--fs-small);}
.annex .twocol{display:grid; grid-template-columns:1fr 1fr; gap:2rem;}

/* teaser & foot */
.teaser-inner{border:var(--rule-bronze); background:linear-gradient(180deg,var(--panel),var(--panel2));
  padding:1.3rem 1.6rem; text-align:center;}
.teaser-inner h2{margin-top:0;}
.teaser-inner p{max-width:44rem; margin:.6rem auto 0;}
.foot{margin-top:2.6rem; border-top:var(--rule); padding-top:1.2rem; font-size:.8rem; color:var(--muted);
  display:grid; grid-template-columns:1fr auto; gap:1.6rem; align-items:center;}
.seal{width:86px; height:86px; flex:none;}
.seal .outer{fill:none; stroke:var(--bronze-dim); stroke-width:2; stroke-dasharray:2.5 3;}
.seal .inner{fill:none; stroke:var(--bronze); stroke-width:1.4;}
.seal text{font-family:var(--serif); fill:var(--bronze); letter-spacing:.2em;}
.mark{font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.18em; color:var(--mark); margin-top:.8rem;}

/* mobile */
@media (max-width:900px){
  .heroplate .stamp{right:.9rem; bottom:5.4rem;}
  .grid{display:block;}
  .grid > *{margin-top:1.8rem;}
  .tilt-l,.tilt-r,.iplate .plate{transform:none;}
  .annex .twocol{grid-template-columns:1fr;}
  .foot{grid-template-columns:1fr; text-align:center;}
  .seal{margin:0 auto;}
}

/* ══ THE HOUSE NAVIGATION (shared by every page) ══ */
.housenav{
  display:flex; flex-wrap:wrap; gap:0 1.6rem; justify-content:center;
  border-bottom:var(--rule); padding:.7rem 0 .8rem; margin-bottom:.4rem;
}
.housenav a{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:.25rem 0; border-bottom:1px solid transparent;
}
.housenav a:hover{color:var(--bronze);}
.housenav a.here{color:var(--bronze); border-bottom-color:var(--bronze-dim);}
.housenav a:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}

/* ══ EDITORIAL PAGES (what-is, names, creed) ══ */
.pagehead{text-align:center; margin-top:2.6rem;}
.pagehead .eyebrow{font-family:var(--mono); font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted);}
.pagehead h1{font-family:var(--serif); font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bronze); font-size:clamp(2.2rem,6vw,3.6rem); margin:.25rem 0 .5rem; line-height:1.05;}
.pagehead .deck{font-family:var(--serif); font-size:clamp(1.1rem,2.4vw,1.5rem); color:var(--ink);
  max-width:34rem; margin:0 auto; line-height:1.45;}
.column{max-width:44rem; margin:0 auto;}
.column p{margin-top:1rem; font-size:1.02rem;}
.column h2{font-family:var(--serif); font-weight:400; font-size:1.35rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bronze); margin:2.8rem 0 .2rem; text-align:center; border:none;}
.column h3{font-family:var(--serif); font-weight:400; font-size:1.08rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bronze); margin:2.2rem 0 .1rem;}
.epigraph{border-left:2px solid var(--bronze-dim); padding-left:1.3rem; margin-top:1.6rem;
  font-style:italic; color:var(--muted);}
.epigraph b{color:var(--bronze); font-style:normal; font-weight:400; letter-spacing:.04em;}
.pull{font-family:var(--serif); font-size:clamp(1.2rem,3vw,1.75rem); line-height:1.45; text-align:center;
  color:var(--ink); margin:2.4rem auto; max-width:36rem; letter-spacing:.02em;}
.pull b{color:var(--gold, #E8C87A); font-weight:400;}
.notblock{background:var(--panel2); border:1px dashed var(--bronze-dim); padding:1.2rem 1.4rem; margin-top:1.8rem;}
.notblock p{margin-top:.5rem;} .notblock p:first-child{margin-top:0;}
.forgemark{text-align:center; font-family:var(--mono); font-size:.66rem; letter-spacing:.24em;
  color:var(--bronze-dim); margin:2.6rem 0 0; text-transform:uppercase;}
.rule-orn{display:flex; align-items:center; gap:1rem; margin:2.6rem 0 0; color:var(--bronze-dim);}
.rule-orn::before,.rule-orn::after{content:""; flex:1; height:1px; background:var(--line);}
.rule-orn span{font-size:.8rem; letter-spacing:.6em;}

/* stat dossiers (the quantified gauntlet) */
.gauntlet{display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1.6rem; margin-top:1.8rem;}
.gcard{background:var(--panel); border:var(--rule); padding:1.2rem 1.3rem 1.3rem; position:relative;}
.gcard h3{font-family:var(--serif); font-weight:400; font-size:1rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bronze); margin:0 0 .2rem;}
.gcard .sub{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase;}
.gstats{display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; margin-top:.9rem; align-items:baseline;}
.gstats .v{font-family:var(--mono); font-weight:600; font-size:.95rem; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
.gstats .k{font-size:.88rem; color:var(--muted);}
.gnote{margin-top:.9rem; font-size:.88rem; color:var(--muted); border-top:var(--rule); padding-top:.7rem;}
.graves{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem;}
.graves li{display:grid; grid-template-columns:1.2rem 1fr; gap:.7rem; font-size:.95rem; align-items:baseline;}
.graves .cross{color:var(--bronze-dim); font-family:var(--serif);}
.graves b{color:var(--ink); font-weight:600;}

/* ══ EDITIONS: the morning brief and the evening dispatch on one page ══ */
.edstrip{display:flex; justify-content:center; align-items:center; gap:.9rem; margin-top:1.1rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);}
.edstrip a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:.15rem;}
.edstrip a:hover{color:var(--bronze); border-bottom-color:var(--bronze-dim);}
.anchor{display:block; height:0; scroll-margin-top:1rem;}

.edition{margin-top:1.8rem;}
.edhead{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  border-bottom:1px solid var(--bronze-dim); padding-bottom:.5rem;}
.edhead .edname{font-family:var(--serif); font-size:1.5rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze);}
.edhead .edtime{font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.edition .lede{font-family:var(--serif); font-size:clamp(1.08rem,2.4vw,1.3rem); line-height:1.55;
  color:var(--ink); margin-top:1rem; max-width:46rem;}
.bignums.dawn{gap:2rem;}
.bignums.dawn .n{font-size:1.7rem; color:var(--bronze);}
.mgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:1.6rem; margin-top:2rem; align-items:start;}
.mgrid table{margin-top:.5rem;}
.mgrid td{font-size:.9rem;} .mgrid td:first-child{font-family:var(--sans); font-weight:400; color:var(--muted); white-space:normal;}
.stakes{list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.55rem;}
.stakes li{display:grid; grid-template-columns:.9rem 1fr; gap:.6rem; font-size:.93rem; align-items:baseline;}
.stakes li::before{content:"◆"; color:var(--bronze-dim); font-size:.6rem;}

/* ══ THE CALL TO THE INTERIOR ══ */
.interior{margin-top:3.2rem;}
.interior-inner{border-top:3px double var(--bronze-dim); border-bottom:3px double var(--bronze-dim);
  padding:2rem 1.4rem 2.2rem; text-align:center;}
.interior .eyebrow{font-family:var(--mono); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);}
.interior h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3.6vw,2.1rem); letter-spacing:.08em;
  text-transform:none; color:var(--bronze); margin:.3rem 0 1.4rem; border:none;}
.rooms{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; text-align:left; max-width:62rem; margin:0 auto;}
.room{border:var(--rule); background:var(--panel2); padding:.85rem 1rem;}
.room b{display:block; font-family:var(--serif); font-weight:400; color:var(--bronze); letter-spacing:.06em; font-size:.98rem;}
.room span{display:block; margin-top:.3rem; font-size:.86rem; color:var(--muted); line-height:1.5;}
.interior .terms{margin-top:1.4rem; font-size:.9rem; color:var(--muted);}
.interior .offer{max-width:42rem; margin:.4rem auto 0; font-size:1.02rem; color:var(--ink);}
.interior .offer b{font-family:var(--serif); font-weight:400; color:var(--bronze); font-size:1.15rem;}

/* the cast shows both selves: plates stack in their column */
.iplate{display:grid; gap:1.1rem; align-content:start;}

/* the masthead brand keeps its look when it is not the page's heading */
.masthead .brandline{font-family:var(--serif); font-weight:400; font-size:var(--fs-masthead);
  letter-spacing:.13em; color:var(--bronze); text-transform:uppercase; line-height:1.1;}
