/* ============================================================
   M A Mohiemen Tanim
   v3: measured document.

   Concept: ink on drafting paper. Every figure sits on a rule.
   The one rule that keeps this coherent: --measure appears ONLY
   where something is genuinely measured or marked. Never as
   decoration, never on a button, never on a heading.
   ============================================================ */

/* ---------- fonts: self-hosted, no third-party request ---------- */
@font-face{
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face{
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}

:root{
  /* palette: five values, measured for contrast against --paper */
  --paper:    #F6F7F5;   /*
                            graph-paper bone */
  --ink:      #14171A;   /* 16.74:1 */
  --graphite: #5B6167;   /*  5.83:1 */
  --rule:     #CDD2CE;   /*  1.43:1, dividers only, never an indicator */
  --measure:  #B42318;   /*  6.12:1 */

  --figure: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* type scale: one ratio (1.25), seven steps */
  --t-xs: 14px;
  --t-s:  17px;
  --t-m:  21px;
  --t-l:  27px;
  --t-xl: 33px;
  --t-2xl: 42px;
  --t-3xl: 52px;

  /* spacing scale: ten steps */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  --max: 1080px;
  --gutter: clamp(20px, 5vw, 56px);
  --rail: 108px;          /* the measurement rail */
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-s);
  line-height: 1.65;           /* serif wants more than the old sans had */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }

h1,h2,h3{
  font-family: var(--figure);
  font-weight: 600;
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p{ margin: 0 0 var(--s-4); max-width: 68ch; }
p:last-child{ margin-bottom: 0; }

/* every figure on this site sits in a column or on a rule */
.fig, .rail-fig, .count, .stat-n, .yr{
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- the rail grid: figures left, prose right ---------- */
.railed{
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--s-6);
  align-items: start;
}
.rail{
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--graphite);
  padding-top: var(--s-1);
}
.rail b{ display:block; color: var(--ink); font-weight: 600; font-size: var(--t-m); }
@media (max-width: 720px){
  .railed{ grid-template-columns: 1fr; gap: var(--s-3) 0; }
  .rail{ padding-top: 0; }
  .rail b{ display:inline; font-size: var(--t-s); margin-right: var(--s-2); }
}

/* ---------- dimension line: a rule with tick ends ---------- */
.dim{
  position: relative;
  border-top: 1px solid var(--ink);
  margin: var(--s-8) 0 var(--s-6);
  padding-top: var(--s-3);
}
.dim::before, .dim::after{
  content: ''; position: absolute; top: -5px;
  width: 1px; height: 11px; background: var(--ink);
}
.dim::before{ left: 0; }
.dim::after{ right: 0; }
.dim h2{
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;         /* deliberately not an all-caps eyebrow */
  color: var(--graphite);
}

/* ---------- masthead ---------- */
.masthead{
  border-bottom: 1px solid var(--ink);
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
}
.masthead .wrap{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  height: 60px;
}
.mark{
  font-family: var(--figure);
  font-weight: 600; font-size: var(--t-xs);
  letter-spacing: 0.02em;
  text-decoration: none;
  display: flex; align-items: center; gap: var(--s-3);
}
.mark img{ width: 26px; height: 26px; border-radius: 50%; }
.mark i{ font-style: normal; color: var(--graphite); font-weight: 500; }
.nav{ display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav a{
  font-family: var(--figure);
  font-size: var(--t-xs); font-weight: 500;
  color: var(--graphite); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav a:hover{ color: var(--ink); }
.nav a[aria-current="page"]{ color: var(--ink); border-bottom-color: var(--ink); }

.nav-toggle{ display:none; background:none; border:none; padding:0; cursor:pointer; }
@media (max-width: 640px){
  .nav{
    position: fixed; inset: 60px 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav.open{ max-height: 260px; }
  .nav li{ border-top: 1px solid var(--rule); }
  .nav a{ display:block; padding: var(--s-4) var(--gutter); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; width:26px; height:18px;
    justify-content:center;
  }
  /* The role label wrapped to a second line next to the name and pushed the
     masthead past its 60px. The name alone carries the identity at this size. */
  .mark i{ display:none; }
  .nav-toggle span{ display:block; height:1.5px; background: var(--ink); }
}

/* ---------- opening ---------- */
.open{ padding: var(--s-9) 0 var(--s-7); }
.open h1{
  font-size: clamp(var(--t-2xl), 5.4vw, var(--t-3xl));
  max-width: 19ch;
  margin-bottom: var(--s-5);
}
.open .lede{
  font-size: var(--t-m);
  color: var(--graphite);
  max-width: 56ch;
  line-height: 1.5;
}
.ident{
  font-family: var(--figure);
  font-size: var(--t-xs); font-weight: 500;
  color: var(--graphite);
  margin-bottom: var(--s-6);
}

/* ---------- career dimension line (the hero drawing) ---------- */
.span-figure{ margin: 0; }
.span-line{
  position: relative;
  padding-left: var(--s-6);
  border-left: 1px solid var(--rule);
}
/* the drawn line: one orchestrated moment, once, on load */
.span-line::before{
  content:''; position:absolute; left:-1px; top:0; width:1px; bottom:0;
  background: var(--ink);
  transform-origin: top;
  animation: draw 900ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes draw{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce){
  .span-line::before{ animation: none; transform: none; }
}

.station{ position: relative; padding: 0 0 var(--s-6); }
.station:last-child{ padding-bottom: 0; }
.station::before{
  content:''; position:absolute; left: calc(-1 * var(--s-6) - 4px); top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
}
.station.now::before{ background: var(--measure); border-color: var(--measure); }
.station .yr{
  font-size: var(--t-xs); font-weight: 600; color: var(--graphite);
  display:block; margin-bottom: 2px;
}
.station.now .yr{ color: var(--measure); }
.station h3{ font-size: var(--t-s); font-weight: 600; margin-bottom: 2px; }
.station .org{ font-size: var(--t-xs); color: var(--graphite); }
.station p{ font-size: var(--t-xs); color: var(--graphite); margin-top: var(--s-2); }

/* ---------- problem inventory: the spine ---------- */
.inv{ width: 100%; border-collapse: collapse; }
.inv caption{
  text-align: left; color: var(--graphite); font-size: var(--t-xs);
  padding-bottom: var(--s-3);
}
.inv th{
  text-align: left; font-family: var(--figure); font-size: var(--t-xs);
  font-weight: 600; color: var(--graphite);
  border-bottom: 1px solid var(--ink);
  padding: 0 var(--s-4) var(--s-2) 0;
}
.inv th:last-child, .inv td:last-child{ text-align: right; padding-right: 0; width: 5.5em; }
.inv td{
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  vertical-align: baseline;
}
.inv tr:last-child td{ border-bottom: 1px solid var(--ink); }
.count{
  font-size: var(--t-m); font-weight: 600;
}
.count.high{ color: var(--measure); }   /* a measurement, so it earns the red */
.inv td .unit{ font-family: var(--figure); font-size: var(--t-xs); color: var(--graphite); }

/* ---------- register rows ---------- */
.reg{ margin: 0; padding: 0; list-style: none; }
.reg li{
  border-bottom: 1px solid var(--rule);
  padding: var(--s-4) 0;
  display: grid;
  grid-template-columns: 3.5em minmax(0,1fr) 9em;
  gap: var(--s-4);
  align-items: baseline;
}
.reg li:first-child{ border-top: 1px solid var(--ink); }
.reg li:last-child{ border-bottom: 1px solid var(--ink); }
.reg .n{
  font-family: var(--figure); font-variant-numeric: tabular-nums;
  font-size: var(--t-xs); color: var(--graphite);
}
.reg .what{ font-size: var(--t-s); }
.reg .disc{
  font-family: var(--figure); font-size: var(--t-xs); font-weight: 500;
  color: var(--graphite); text-align: right;
}
@media (max-width: 640px){
  .reg li{ grid-template-columns: 2.5em minmax(0,1fr); }
  .reg .disc{ grid-column: 2; text-align: left; }
}

/* ---------- filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap: var(--s-4); margin-bottom: var(--s-5); }
.filter{
  font-family: var(--figure); font-size: var(--t-xs); font-weight: 500;
  background: none; border: none; padding: 0 0 3px;
  border-bottom: 1px solid var(--rule);
  color: var(--graphite); cursor: pointer;
}
.filter:hover{ color: var(--ink); border-bottom-color: var(--graphite); }
.filter[aria-pressed="true"]{ color: var(--measure); border-bottom-color: var(--measure); }

/* ---------- prose blocks ---------- */
.prose{ max-width: 68ch; }
.prose h3{ font-size: var(--t-m); margin: var(--s-6) 0 var(--s-3); }
.lead-claim{
  font-size: var(--t-l);
  line-height: 1.35;
  max-width: 22ch;
  margin: 0;
}

/* ---------- link + button ---------- */
.link{
  font-family: var(--figure); font-size: var(--t-xs); font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.link:hover{ border-bottom-width: 2px; }

/* ---------- contact block ---------- */
.contact{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--s-6); }
.contact dt{
  font-family: var(--figure); font-size: var(--t-xs); font-weight: 500;
  color: var(--graphite); margin-bottom: var(--s-2);
}
.contact dd{ margin: 0; font-size: var(--t-s); }
.contact dd a{ text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact dd a:hover{ border-bottom-color: var(--ink); }

/* ---------- footer ---------- */
footer{
  border-top: 1px solid var(--ink);
  margin-top: var(--s-9);
  padding: var(--s-5) 0 var(--s-8);
}
.foot{
  display:flex; justify-content:space-between; gap: var(--s-4); flex-wrap:wrap;
  font-family: var(--figure); font-size: var(--t-xs); color: var(--graphite);
}
.foot a{ text-decoration:none; }
.foot a:hover{ color: var(--ink); }

/* ---------- sections ---------- */
section{ padding: var(--s-7) 0; }

/* ---------- focus: one rule, nothing overrides it ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--measure);
  outline-offset: 3px;
}

/* ============================================================
   v4: the working band.

   The v3 page was one texture for 4200px: no focal point, no
   colour, no change in density. This is the correction. One
   dark, dense, interactive band per page carries the weight;
   everything around it stays quiet paper.

   Honesty rule for this section: every number it prints is
   arithmetic the visitor can check, computed from THEIR inputs.
   It never states a client outcome, because none are publishable.
   ============================================================ */

:root{
  --water:  #2E7DB0;   /* dyehouse blue, data only */
  --save:   #4FA37A;   /* the delta, never decoration */
  --band:   #14171A;   /* the band ground, same ink */
  --on-band:#EDEFEC;
  --on-band-dim:#9AA3A6;
}

.band{
  background: var(--band);
  color: var(--on-band);
  padding: var(--s-8) 0 var(--s-9);
  margin: var(--s-9) 0 0;
}
.band h2{ color: var(--on-band); font-size: var(--t-l); max-width: 26ch; }
.band .sub{ color: var(--on-band-dim); max-width: 54ch; margin-top: var(--s-4); }
.band .note{
  color: var(--on-band-dim); font-family: var(--figure);
  font-size: var(--t-xs); margin-top: var(--s-6); max-width: 62ch;
}

.calc{
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s-7);
  margin-top: var(--s-7);
  align-items: start;
}
@media (max-width: 860px){ .calc{ grid-template-columns: 1fr; gap: var(--s-6); } }

.ctrl{ margin-bottom: var(--s-5); }
.ctrl label{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--figure); font-size: var(--t-xs); font-weight: 500;
  color: var(--on-band-dim); margin-bottom: var(--s-2);
}
.ctrl label b{
  font-variant-numeric: tabular-nums; color: var(--on-band);
  font-size: var(--t-s); font-weight: 600;
}
.ctrl input[type=range]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; background: #3A4045; outline: none; margin: 0;
}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--on-band); cursor: grab; border: 0;
}
.ctrl input[type=range]::-moz-range-thumb{
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--on-band); cursor: grab; border: 0;
}
.ctrl input[type=range]:focus-visible{ outline: 2px solid var(--on-band); outline-offset: 6px; }

/* the one typographic event on the page */
.readout .big{
  font-family: var(--figure); font-variant-numeric: tabular-nums;
  font-size: clamp(56px, 8vw, 104px); line-height: 0.92;
  letter-spacing: -0.045em; font-weight: 600;
  display: block;
}
.readout .big{ display: flex; align-items: baseline; gap: var(--s-3); }
.readout .big-unit{
  font-family: var(--figure); font-size: var(--t-m); color: var(--on-band-dim);
  letter-spacing: 0; font-weight: 500;
}
.readout .cap{
  font-family: var(--figure); font-size: var(--t-xs); color: var(--on-band-dim);
  margin-bottom: var(--s-3);
}

.bars{ margin-top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); }
.bar-row{ display: grid; grid-template-columns: 7.5em minmax(0,1fr) 6em; gap: var(--s-4); align-items: center; }
.bar-row .k{ font-family: var(--figure); font-size: var(--t-xs); color: var(--on-band-dim); }
.bar-track{ height: 12px; background: #262B2F; position: relative; }
.bar-fill{ position: absolute; inset: 0 auto 0 0; background: var(--water); transition: width .18s ease; }
.bar-fill.alt{ background: #3A4045; }
/* Per-year is a different unit on a different scale, so it gets no bar.
   A bar beside the litre bars would read as comparable and is not. */
.bar-row.total{ border-top: 1px solid #2A3034; padding-top: var(--s-4); margin-top: var(--s-2); }
.bar-row.total .tot-note{ color: #6E7679; }
.bar-row .v{
  font-family: var(--figure); font-variant-numeric: tabular-nums;
  font-size: var(--t-s); text-align: right;
}
.delta{ color: var(--save); font-weight: 600; }
@media (max-width: 560px){
  .bar-row{ grid-template-columns: 6em minmax(0,1fr) 5em; gap: var(--s-3); }
}