/* ============================================================
   THE STICKY-WAGE LEDGER — design system
   data-journalism gravitas · chart ink on paper · paycheque motif
   sober navy + alarming red
   ============================================================ */

:root{
  --paper:      #f5f1e6;
  --paper-2:    #efe9d9;
  --paper-3:    #e9e2cf;
  --ink:        #16233f;   /* sober navy */
  --ink-2:      #2e3f63;
  --ink-3:      #5b6a8c;
  --ink-faint:  #8a93ab;
  --red:        #b23420;   /* alarming red */
  --red-2:      #d2472a;
  --red-wash:   rgba(178,52,32,.085);
  --red-hatch:  rgba(178,52,32,.16);
  --ochre:      #9c7c2e;   /* counterfactual / trend ink */
  --grid:       #d8d0bc;
  --grid-2:     #c2b899;
  --rule:       #1a2742;
  --shadow:     rgba(22,35,63,.14);
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --measure: 38rem;
  --fig-w: 46rem;
  --wide-w: 62rem;
  --pad: clamp(16px, 4vw, 40px);
  --focus: #0d5bd7;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* paper grain — extremely subtle, pure CSS */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(rgba(22,35,63,.022) 1px, transparent 1px);
  background-size:5px 5px;
}
::selection{ background:rgba(178,52,32,.22); }

.skip{
  position:absolute; left:-999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper); padding:8px 14px;
  font-family:var(--sans); font-size:13px; text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }

a{ color:var(--ink-2); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--red); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.neg{ color:var(--red); }
.navy{ color:var(--ink-2); }
.red{ color:var(--red); }

/* ============ MASTHEAD ============ */
.masthead{ max-width:var(--wide-w); margin:0 auto; padding:26px var(--pad) 0; }
.mast-rule{ height:4px; border-top:2px solid var(--rule); border-bottom:1px solid var(--rule); }
.mast-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:10px 2px 8px;
}
.mast-name{
  margin:0; font-family:var(--serif); font-weight:700;
  font-size:clamp(30px, 6vw, 54px); letter-spacing:-.015em; line-height:1.02;
  text-align:center; flex:1 1 auto;
}
.mast-kicker{
  margin:0; font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}
.mast-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px;
  padding:9px 2px; border-bottom:1px solid var(--grid-2);
  font-family:var(--sans); font-size:12.5px; font-weight:500;
}
.mast-nav a{ color:var(--ink-2); text-decoration:none; letter-spacing:.04em; text-transform:uppercase; }
.mast-nav a:hover{ color:var(--red); text-decoration:underline; }
.ticker{ border-bottom:1px solid var(--grid-2); overflow:hidden; }
.ticker-tape{
  margin:0; padding:7px 2px; text-align:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
  color:var(--ink-3); white-space:normal; line-height:2.0;
}
.ticker-tape span{ margin:0 6px; }
.ticker-tape i{ color:var(--grid-2); font-style:normal; }
.ticker-tape b{ color:var(--ink); font-weight:600; }
.ticker-tape b.neg{ color:var(--red); }
@media (max-width:760px){
  .ticker-tape{ white-space:normal; line-height:1.9; }
  .ticker-tape i{ display:none; }
  .mast-kicker{ display:none; }
  .mast-row{ justify-content:center; }
}

/* ============ SHARED LAYOUT ============ */
main{ display:block; }
section.item{ max-width:var(--fig-w); margin:0 auto; padding:clamp(38px,7vw,72px) var(--pad) 0; }
section.item:last-of-type{ padding-bottom:8px; }
.item-head{ border-top:3px solid var(--rule); padding-top:14px; margin-bottom:18px; }
.item-no{
  margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.item-no span{ color:var(--red); }
.item-head h2{
  margin:0 0 8px; font-size:clamp(25px,4.6vw,36px); font-weight:700;
  letter-spacing:-.014em; line-height:1.12;
}
.item-dek{
  margin:0; font-family:var(--serif); font-size:17.5px; line-height:1.55;
  color:var(--ink-2); max-width:var(--measure);
}
.prose{ max-width:var(--measure); margin:18px 0; }
.prose p{ margin:0 0 14px; }
.prose .punch{
  font-size:clamp(20px,3.4vw,26px); line-height:1.35; font-weight:600;
  border-left:4px solid var(--red); padding-left:16px; margin:26px 0;
}

/* ============ HERO ============ */
.hero{ max-width:var(--wide-w); margin:0 auto; padding:clamp(34px,6vw,64px) var(--pad) 10px; }
.kicker{
  margin:0 0 14px; font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
}
.hero-h{
  margin:0 0 18px; font-size:clamp(34px,7.2vw,66px); font-weight:700;
  letter-spacing:-.018em; line-height:1.04; max-width:20ch;
}
.hero-h-sub{ font-weight:400; font-style:italic; font-size:.62em; color:var(--ink-2); letter-spacing:-.008em; }
.br-narrow{ display:none; }
@media (max-width:640px){ .br-narrow{ display:block; } }
.standfirst{
  max-width:44rem; font-size:clamp(17px,2.4vw,20px); line-height:1.6;
  color:var(--ink-2); margin:0 0 34px;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(300px,430px) 1fr;
  gap:clamp(24px,4vw,52px); align-items:start;
}
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-side .lede{ margin-top:0; }
.dropcap{
  float:left; font-size:56px; line-height:.82; font-weight:700;
  padding:6px 8px 0 0; color:var(--ink);
}
.hero-points{
  list-style:none; margin:18px 0 22px; padding:0;
  border-top:1px solid var(--grid-2);
}
.hero-points li{
  padding:9px 2px; border-bottom:1px solid var(--grid);
  font-size:15.5px;
}
.cta{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:14px;
  color:var(--paper); background:var(--ink); padding:11px 20px; border-radius:3px;
  text-decoration:none; letter-spacing:.03em;
}
.cta:hover{ background:var(--red); color:var(--paper); }

/* ---- the paycheque stub ---- */
.stub{
  position:relative; background:#fbf8ef;
  border:1.5px solid var(--ink-2);
  padding:18px 20px 26px;
  font-family:var(--mono); font-size:13px;
  box-shadow:0 10px 28px var(--shadow);
  background-image:repeating-linear-gradient(0deg, transparent 0 27px, rgba(22,35,63,.045) 27px 28px);
}
.stub-head{
  display:flex; justify-content:space-between; gap:8px;
  font-size:10.5px; letter-spacing:.12em; color:var(--ink-3);
  padding-bottom:10px; border-bottom:2px solid var(--ink);
  margin-bottom:10px; font-weight:600;
}
.stub-row{
  display:flex; justify-content:space-between; gap:10px;
  padding:6.5px 0; border-bottom:1px dotted var(--grid-2);
}
.stub-row span{ color:var(--ink-3); font-size:11px; letter-spacing:.06em; padding-top:1px; }
.stub-row b{ font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.stub-rule{ border-top:2px solid var(--ink); margin:4px 0; }
.stub-total{ border-bottom:2px solid var(--ink); }
.stub-total b{ font-size:17px; }
.stub-note{
  margin:12px 0 0; font-family:var(--serif); font-size:13.5px; line-height:1.5;
  color:var(--ink-2);
}
.stub-perf{
  position:absolute; left:0; right:0; bottom:24px; height:0;
  border-top:2px dashed var(--grid-2);
  -webkit-mask-image:linear-gradient(90deg, transparent 0 6px, #000 6px);
          mask-image:linear-gradient(90deg, transparent 0 6px, #000 6px);
}
.stub-tear{
  position:absolute; left:0; right:0; bottom:5px; text-align:center;
  font-size:8.5px; letter-spacing:.28em; color:var(--ink-faint); margin:0;
}

/* ============ FIGURES ============ */
.fig{
  margin:30px 0 8px; padding:0;
  border-top:2px solid var(--rule);
}
.fig-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  padding:10px 2px 4px;
}
.fig-no{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--red); text-transform:uppercase; white-space:nowrap;
}
.fig-title{
  font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:-.01em;
}
.fig-sub{
  flex-basis:100%; font-family:var(--sans); font-size:12.5px; color:var(--ink-3);
}
.fig-body{ margin:10px 0 0; }
.fig-body svg{ display:block; width:100%; height:auto; }
.fig-note{
  font-family:var(--sans); font-size:12.5px; line-height:1.55; color:var(--ink-2);
  margin:10px 2px 0; max-width:var(--measure);
}
.fig-src{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-faint);
  margin:6px 2px 22px; letter-spacing:.02em;
}
.fig-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin:12px 2px 0; padding:10px 12px;
  background:var(--paper-2); border:1px solid var(--grid);
  font-family:var(--sans);
}
.ctl-label{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.ctl-read{ font-family:var(--mono); font-size:12.5px; color:var(--ink); }

.seg{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.seg button, .btn{
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  color:var(--ink-2); background:var(--paper);
  border:1.5px solid var(--ink-3); border-radius:3px;
  padding:7px 12px; min-height:36px; cursor:pointer;
}
.seg button:hover, .btn:hover{ border-color:var(--ink); color:var(--ink); }
.seg button[aria-pressed="true"], .btn[aria-pressed="true"]{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.seg-alt button[aria-pressed="true"]{ background:var(--red); border-color:var(--red); }
.btn{ background:var(--paper); }
.btn[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

input[type="range"]{
  flex:1 1 160px; min-width:130px; accent-color:var(--red); height:34px; cursor:pointer;
}

/* SVG chart text */
.chart text{ font-family:var(--sans); fill:var(--ink-2); }
.chart .t-num{ font-family:var(--mono); }
.chart .grid-ln{ stroke:var(--grid); stroke-width:1; }
.chart .axis-ln{ stroke:var(--ink-2); stroke-width:1.2; }
.chart .tick-txt{ font-size:11px; fill:var(--ink-3); }
.chart .ann{ font-size:11.5px; }
.chart .ann-strong{ font-weight:600; }
.chart .leader{ stroke:var(--ink-3); stroke-width:.8; fill:none; }
.chart .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* chart tooltip */
.tip{
  position:fixed; z-index:50; pointer-events:none;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:11.5px; line-height:1.5;
  padding:7px 10px; border-radius:3px; box-shadow:0 4px 14px rgba(0,0,0,.25);
  max-width:240px; opacity:0; transition:opacity .12s;
}
.tip.on{ opacity:1; }
.tip .tip-h{ color:#c8d0e4; font-size:10px; letter-spacing:.08em; }

/* details data tables */
.fig-data{ margin:8px 2px 0; font-family:var(--sans); }
.fig-data summary{
  cursor:pointer; font-size:12px; font-weight:600; color:var(--ink-3);
  letter-spacing:.05em; text-transform:uppercase; padding:4px 0;
}
.fig-data summary:hover{ color:var(--red); }
.fig-data table{
  border-collapse:collapse; width:100%; max-width:560px; margin:8px 0 4px;
  font-family:var(--mono); font-size:11.5px;
}
.fig-data th,.fig-data td{ border:1px solid var(--grid-2); padding:4px 8px; text-align:right; }
.fig-data th{ background:var(--paper-2); font-weight:600; text-align:left; }
.fig-data td:first-child,.fig-data th:first-child{ text-align:left; }

/* dot grid (fig 6) */
.gridwrap{ display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; }
.dotgrid{ display:grid; grid-template-columns:repeat(10, 1fr); gap:7px; width:min(330px,100%); }
.dot{
  aspect-ratio:1; border-radius:50%;
  background:var(--ink-3); opacity:.85;
  transition:background-color .45s, transform .45s;
}
.dot.lost{ background:var(--red); opacity:1; }
.dot.kept{ background:var(--ink-2); }
.gridcap{
  flex:1 1 220px; font-family:var(--sans); font-size:13px; color:var(--ink-2);
}
.gridcap .big{ font-family:var(--mono); font-size:34px; font-weight:600; color:var(--red); display:block; line-height:1.1; }
.gridcap .big small{ font-size:15px; color:var(--ink-2); font-weight:500; }

/* compare card (fig 8 dent) */
.fig-compare{
  display:flex; flex-wrap:wrap; gap:12px; margin:14px 2px 0;
}
.dent-card{
  flex:1 1 180px; border:1.5px solid var(--ink-2); background:var(--paper-2);
  padding:12px 14px;
}
.dent-card .dc-no{ font-family:var(--mono); font-size:30px; font-weight:600; line-height:1.05; }
.dent-card .dc-no.neg{ color:var(--red); }
.dent-card .dc-lab{ font-family:var(--sans); font-size:12px; color:var(--ink-3); margin-top:3px; }
.dent-arrow{ align-self:center; font-family:var(--mono); font-size:22px; color:var(--ink-3); }

/* costs split */
.costs{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0;
}
@media (max-width:640px){ .costs{ grid-template-columns:1fr; } }
.cost{
  border:1.5px solid var(--ink-2); background:var(--paper-2); padding:16px 18px;
}
.cost h3{
  margin:0 0 4px; font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.cost-big{
  margin:0 0 8px; font-family:var(--mono); font-size:21px; font-weight:600; color:var(--red);
}
.cost:last-child .cost-big{ color:var(--ink-2); }
.cost p{ margin:0; font-size:14.5px; line-height:1.55; }

/* ============ TIMELINE ============ */
#ledger{ max-width:var(--wide-w); }
.tl-wrap{ position:relative; display:flex; align-items:center; gap:8px; }
.timeline{
  list-style:none; margin:0; padding:6px 2px 14px;
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; flex:1;
}
.tl-card{
  scroll-snap-align:start; flex:0 0 215px;
  border:1.5px solid var(--ink-2); background:#fbf8ef;
  padding:13px 15px 15px; position:relative;
}
.tl-card::before{
  content:""; position:absolute; top:-1.5px; left:0; right:0; height:4px; background:var(--ink-2);
}
.tl-card.tl-hot::before{ background:var(--red); }
.tl-date{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; }
.tl-stat{ margin:4px 0 6px; font-family:var(--mono); font-size:27px; font-weight:600; color:var(--ink); }
.tl-stat.neg{ color:var(--red); }
.tl-txt{ margin:0; font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.tl-btn{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--ink-2); background:var(--paper);
  font-size:16px; color:var(--ink-2); cursor:pointer;
}
.tl-btn:hover{ background:var(--ink); color:var(--paper); }
@media (max-width:560px){ .tl-btn{ display:none; } }

/* ============ FOOTER ============ */
.colophon{ max-width:var(--wide-w); margin:56px auto 0; padding:0 var(--pad) 40px; }
.foot-h{ font-size:21px; margin:16px 0 14px; }
.foot-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h3{
  margin:0 0 6px; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--red);
}
.foot-grid p{ margin:0 0 10px; font-size:14px; line-height:1.6; color:var(--ink-2); }
.paper-link{ font-family:var(--sans); font-weight:600; font-size:14px; }
.foot-fine{
  margin:26px 0 12px; font-family:var(--mono); font-size:10.5px;
  color:var(--ink-faint); text-align:center; letter-spacing:.03em;
}

/* ============ MOTION ============ */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.rv.in{ opacity:1; transform:none; }
.draw{ transition:stroke-dashoffset 1.4s ease; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .dot{ transition:none; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}