/* 01-tokens.css */
/* ==========================================================================
   OOTG design tokens
   Extracted from the live site 10 September 2026. See docs/DESIGN-TOKENS.md.
   Single-theme by intent: the warm cream ground is the brand identity.
   ========================================================================== */
:root{
  /* brand ---------------------------------------------------------------- */
  --green:#1D8B42;          /* brand green: fills, marks, pattern, rules     */
  --green-btn:#187A3A;      /* button fill: white on this is 5.41:1          */
  --green-dark:#167234;     /* green text at body size: 5.75:1 on cream      */
  --green-light:#24A34E;    /* green on navy: 5.02:1                         */
  --green-glow:rgba(29,139,66,.12);

  --navy:#1A1F2E;
  --navy-light:#242B3D;
  --stone:#F2EDE4;
  --stone-warm:#E8E0D2;
  --stone-dark:#D4C9B8;
  --cream:#FAFAF7;
  --white:#fff;

  --text-dark:#1A1F2E;
  --text-body:#3A4259;
  --text-muted:#6B7280;
  --text-light:#E8E0D2;
  --text-light-muted:#9CA3AF;

  /* type ----------------------------------------------------------------- */
  --display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  /* Fluid scale. Every step has a floor that stays legible on a 320px
     phone, so nothing has to be special-cased per breakpoint later.        */
  --fs-xs:.78rem;           /* 12.5px floor: meta, captions                  */
  --fs-sm:.86rem;
  --fs-base:1rem;
  --fs-md:1.06rem;
  --fs-lg:clamp(1.2rem,1rem + .7vw,1.4rem);
  --fs-xl:clamp(1.4rem,1.15rem + 1.1vw,1.75rem);
  --fs-2xl:clamp(1.7rem,1.3rem + 1.9vw,2.35rem);
  --fs-3xl:clamp(2.1rem,1.5rem + 2.9vw,3.2rem);
  --fs-4xl:clamp(2.4rem,1.6rem + 3.9vw,3.9rem);

  /* Labels and overlines. 0.72rem is 11.5px, above the 11px floor the
     audit checks for, so uppercase labels stay readable on a phone.        */
  --fs-label:.72rem;
  --ls-label:.13em;

  --lh-tight:1.14;
  --lh-body:1.7;

  /* space ---------------------------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px;
  --s-6:30px; --s-7:40px; --s-8:56px; --s-9:72px;
  --sec-y:clamp(40px,6vw,64px);      /* vertical section rhythm             */
  --band-y:clamp(44px,7vw,60px);

  /* layout --------------------------------------------------------------- */
  --wrap:1200px;
  --gut:clamp(18px,4vw,24px);
  --measure:65ch;
  --nav-h:72px;

  /* shape and depth ------------------------------------------------------ */
  --r:6px; --r-md:12px;
  --shadow-sm:0 1px 3px rgba(26,31,46,.06);
  --shadow-md:0 4px 16px rgba(26,31,46,.08);
  --shadow-lg:0 8px 32px rgba(26,31,46,.12);
  --ease:.3s cubic-bezier(.4,0,.2,1);

  /* interaction ----------------------------------------------------------
     WCAG 2.2 AA (2.5.8) wants 24px minimum. Standalone controls get 44px,
     which is the comfortable thumb target, and is applied through the
     .tap utility rather than left to each component to remember.          */
  --tap-min:24px;
  --tap:44px;
}

/* 02-base.css */
/* ==========================================================================
   Base: reset, elements, accessibility primitives
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;    /* stop iOS inflating text in landscape */
  scroll-behavior:smooth;
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--text-body);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;         /* long tickers and URLs cannot overflow */
}

h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:400;
  line-height:var(--lh-tight);
  color:var(--text-dark);
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
p{margin:0;max-width:var(--measure)}

img,svg,video{max-width:100%;display:block}
img{height:auto}

a{color:inherit;text-decoration:none}
a:hover{color:var(--green-dark)}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}

table{border-collapse:collapse}

/* focus ------------------------------------------------------------------ */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--green-dark);
  outline-offset:3px;
  border-radius:2px;
}
/* On dark bands the green outline loses contrast, so switch it there. */
.band-dark :focus-visible{outline-color:var(--stone-warm)}

/* motion ----------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* accessibility utilities ------------------------------------------------ */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--s-3);top:calc(-1 * var(--tap) - 20px);
  z-index:200;background:var(--navy);color:var(--white);
  padding:var(--s-3) var(--s-5);font-weight:700;font-size:var(--fs-sm);
  border-radius:0 0 var(--r) var(--r);transition:top var(--ease);
}
.skip-link:focus{top:0;color:var(--white)}

/* Minimum target size, applied where a control is standalone.
   Uses a pseudo-element so the visual size is not forced to change. */
.tap{position:relative}
.tap::before{
  content:'';position:absolute;left:50%;top:50%;
  width:100%;height:100%;min-width:var(--tap);min-height:var(--tap);
  transform:translate(-50%,-50%);
}
.tap-sm::before{min-width:var(--tap-min);min-height:var(--tap-min)}

/* print ------------------------------------------------------------------ */
@media print{
  .site-header,.site-footer,.nav-toggle,.newsletter{display:none}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* 03-layout.css */
/* ==========================================================================
   Layout: page shell, header, navigation, footer
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px}
.section{padding-block:var(--sec-y)}
.band{border-block:1px solid var(--stone-dark)}
.band-stone{background:var(--stone)}
.band-dark{background:var(--navy);color:var(--text-light)}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--white)}

/* topographic contour, the signature texture ----------------------------- */
.topo{position:relative;isolation:isolate}
.topo::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.07;background-size:520px;
  background-image:url('/assets/img/contour.svg');
}
.band-dark .topo::before{opacity:.06;background-image:url('/assets/img/contour-light.svg')}

/* ---------------------------------------------------------------- header */
.site-header{
  background:var(--cream);
  border-bottom:1px solid var(--stone-dark);
  position:sticky;top:0;z-index:60;
}
.header-inner{
  display:flex;align-items:center;gap:var(--s-5);
  min-height:var(--nav-h);
}
.brand{display:flex;align-items:center;flex-shrink:0;margin-right:auto}
.brand svg{height:42px;width:auto}

.primary-nav ul{display:flex;gap:var(--s-6);list-style:none;margin:0;padding:0}
.primary-nav a{
  display:flex;align-items:center;min-height:var(--tap);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-body);
  border-bottom:2px solid transparent;transition:var(--ease);
}
.primary-nav a:hover,.primary-nav a[aria-current]{
  color:var(--green-dark);border-bottom-color:var(--green);
}

.search-trigger{
  display:flex;align-items:center;gap:var(--s-2);
  min-height:var(--tap);padding-inline:var(--s-3);
  border:1px solid var(--stone-dark);border-radius:var(--r);
  background:var(--white);color:var(--text-muted);flex-shrink:0;
}
.search-trigger:hover{border-color:var(--green);color:var(--green-dark)}
.search-trigger svg{width:16px;height:16px;flex-shrink:0}
.search-trigger .label{font-size:var(--fs-sm);font-weight:500}
.search-trigger kbd{
  font-family:var(--body);font-size:var(--fs-label);font-weight:700;
  border:1px solid var(--stone-dark);border-radius:3px;padding:1px 5px;
  color:var(--text-muted);
}

/* menu button, shown only when the inline nav is not ---------------------- */
.nav-toggle{
  display:none;align-items:center;justify-content:center;gap:var(--s-2);
  min-width:var(--tap);min-height:var(--tap);padding-inline:var(--s-3);
  border:1px solid var(--stone-dark);border-radius:var(--r);
  background:var(--white);color:var(--text-dark);
  font-size:var(--fs-sm);font-weight:700;flex-shrink:0;
}
.nav-toggle:hover{border-color:var(--green)}
.nav-toggle .bars{display:grid;gap:4px;width:17px}
.nav-toggle .bars span{
  display:block;height:2px;background:currentColor;border-radius:1px;
  transition:transform var(--ease),opacity var(--ease);
}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--navy);color:var(--text-light-muted);padding-block:var(--s-8) var(--s-6)}
.footer-grid{
  display:grid;gap:var(--s-7);
  grid-template-columns:1.6fr repeat(3,1fr);
  padding-bottom:var(--s-6);
  border-bottom:1px solid rgba(232,224,210,.16);
}
.site-footer h2,.site-footer h3{
  font-family:var(--body);font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--white);margin-bottom:var(--s-4);
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-footer li a{
  display:flex;align-items:center;min-height:var(--tap-min);
  font-size:var(--fs-sm);color:var(--text-light-muted);
}
.site-footer li a:hover{color:var(--green-light)}
.footer-about{font-size:var(--fs-sm);line-height:1.7;max-width:38ch;margin-top:var(--s-4)}
.disclaimer{
  margin-top:var(--s-6);font-size:var(--fs-xs);line-height:1.7;
  color:var(--text-light-muted);max-width:96ch;
}
.disclaimer strong{color:var(--text-light);font-weight:700}
.footer-base{
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid rgba(232,224,210,.1);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  font-size:var(--fs-xs);
}
.footer-base nav{display:flex;gap:var(--s-4);flex-wrap:wrap}
.footer-base a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
/* The ownership line wraps as one sentence on a phone, so the company name
   never ends up stranded on a line of its own. */
.footer-owner{max-width:52ch}
.footer-owner a{color:var(--text-light);text-decoration:underline;text-underline-offset:2px}
.footer-owner a:hover{color:var(--green-light)}

/* ==========================================================================
   Responsive. Breakpoints are named for what changes, not for devices.
   1040px  the five-item nav stops fitting beside the logo and search
   860px   two-column editorial layouts stop earning their keep
   560px   single column, denser padding, stacked meta
   ========================================================================== */
@media(max-width:1040px){
  .primary-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--cream);border-bottom:1px solid var(--stone-dark);
    box-shadow:var(--shadow-md);
    padding:var(--s-3) 0 var(--s-4);
  }
  .primary-nav[data-open]{display:block}
  .primary-nav ul{
    flex-direction:column;gap:0;
    max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  }
  .primary-nav li + li{border-top:1px solid var(--stone-warm)}
  .primary-nav a{
    min-height:var(--tap);font-size:var(--fs-md);font-weight:700;
    border-bottom:0;border-left:3px solid transparent;padding-left:var(--s-3);
  }
  .primary-nav a:hover,.primary-nav a[aria-current]{
    border-bottom:0;border-left-color:var(--green);background:var(--stone);
  }
  .site-header{position:relative}
  .nav-toggle{display:inline-flex}
  .search-trigger .label,.search-trigger kbd{display:none}
}

/* No JavaScript: the menu button is useless, so show the nav instead of
   hiding it behind a control that cannot work. */
.no-js .nav-toggle{display:none}
@media(max-width:1040px){
  .no-js .primary-nav{display:block;position:static;box-shadow:none;padding:0 0 var(--s-3)}
}

@media(max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-6)}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:var(--s-5)}
  .footer-base{flex-direction:column;gap:var(--s-2)}
}

/* 04-components.css */
/* ==========================================================================
   Components
   ========================================================================== */

/* ------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap);padding:var(--s-3) var(--s-6);
  font-family:var(--body);font-weight:700;font-size:var(--fs-sm);
  border:2px solid transparent;border-radius:var(--r);
  transition:var(--ease);text-align:center;
}
.btn-primary{background:var(--green-btn);color:var(--white)}
.btn-primary:hover{background:var(--green-dark);color:var(--white)}
.btn-secondary{border-color:var(--stone-dark);color:var(--text-dark)}
.btn-secondary:hover{border-color:var(--green);color:var(--green-dark)}
.btn-block{width:100%}

/* ------------------------------------------------------- section heading */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-5);flex-wrap:wrap;
  margin-bottom:var(--s-6);padding-bottom:var(--s-3);
  border-bottom:2px solid var(--navy);
}
/* The heading block shrinks so the "all of it" link stays on the right. Its
   natural width is a whole sentence on one line, which without this pushes
   the link onto a row of its own in any column narrower than the page. */
.section-head > div:has(p){flex:1 1 34ch;min-width:0}
.section-head p{font-size:var(--fs-sm);color:var(--text-muted);max-width:56ch;margin-top:var(--s-1)}
.overline{
  font-size:var(--fs-label);font-weight:800;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--green-dark);margin-bottom:var(--s-4);
}
.band-dark .overline{color:var(--green-light)}
.link-more{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--tap-min);
  font-size:var(--fs-sm);font-weight:700;color:var(--green-dark);white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;
}
.link-more svg{width:14px;height:14px;transition:transform var(--ease)}
.link-more:hover svg{transform:translateX(3px)}

/* ==========================================================================
   Market rail
   Grouped by pricing type so the benchmark and its date are stated once per
   group rather than repeated on every row. That removes the run of five
   identical "monthly average" labels and makes the difference between a
   daily benchmark and a monthly average the structure of the component.
   ========================================================================== */
.market-rail{
  background:var(--white);border:1px solid var(--stone-dark);
  border-radius:var(--r-md);overflow:hidden;
}
.rail-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--stone-warm);
}
.rail-head h2{
  font-family:var(--body);font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-dark);
}
.period-toggle{display:flex}
.period-toggle button{
  min-height:32px;padding-inline:var(--s-3);
  font-size:var(--fs-label);font-weight:700;letter-spacing:.04em;
  border:1px solid var(--stone-dark);background:var(--white);color:var(--text-muted);
  transition:var(--ease);
}
.period-toggle button:first-child{border-radius:var(--r) 0 0 var(--r)}
.period-toggle button:last-child{border-radius:0 var(--r) var(--r) 0}
.period-toggle button + button{margin-left:-1px}
.period-toggle button:hover{color:var(--green-dark);border-color:var(--green)}
.period-toggle button[aria-pressed="true"]{
  background:var(--navy);border-color:var(--navy);color:var(--white);position:relative;z-index:1;
}

/* group heading carries the benchmark and the date, once */
.rail-group{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  flex-wrap:wrap;
  padding:var(--s-3) var(--s-5) var(--s-2);
  background:var(--stone);border-bottom:1px solid var(--stone-warm);
}
.rail-group + .rail-rows{border-top:0}
.rail-group h3{
  font-family:var(--body);font-size:var(--fs-label);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-dark);
}
.rail-group .as-of{font-size:var(--fs-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}

.rail-rows{list-style:none;margin:0;padding:0}
.rail-rows li{
  display:grid;grid-template-columns:1fr auto auto;
  gap:var(--s-2) var(--s-4);align-items:baseline;
  padding:var(--s-3) var(--s-5);
  border-bottom:1px solid var(--stone-warm);
}
.rail-rows li:last-child{border-bottom:0}
.metal-name{font-weight:700;font-size:var(--fs-sm);color:var(--text-dark)}
.metal-price{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-sm);
  color:var(--text-dark);text-align:right;white-space:nowrap;
}
.metal-price .unit{font-weight:500;font-size:var(--fs-xs);color:var(--text-muted);margin-left:5px}
.metal-change{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-sm);
  text-align:right;white-space:nowrap;min-width:76px;
}
.metal-change.is-up{color:var(--green-dark)}
.metal-change.is-down{color:var(--navy)}
.metal-change .arrow{font-size:.82em}
/* When a period has no figure for a whole group, the group says so once
   and the rows simply show no change value. */
.metal-change.is-none{color:var(--stone-dark);font-weight:600}
.rail-note{
  padding:var(--s-2) var(--s-5) var(--s-3);
  background:var(--stone);
  font-size:var(--fs-xs);color:var(--text-muted);line-height:1.55;
}
.rail-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  flex-wrap:wrap;
  padding:var(--s-3) var(--s-5);border-top:1px solid var(--stone-warm);
  background:var(--white);
}
.rail-foot .src{font-size:var(--fs-xs);color:var(--text-muted)}
.rail-foot .src a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Entry: a review, guide, document or podcast in a list.
   The whole row is the click target, not just the title. One real link
   carries the destination and a stretched pseudo-element covers the row,
   so assistive technology still announces exactly one link per entry.
   ========================================================================== */
/* Entry lists are reading lists. Capping the measure stops the rules running
   far past the text on full-width pages, so a row ends where its content does. */
.entry-list{list-style:none;margin:0;padding:0;max-width:900px}
.entry{
  position:relative;
  /* 100px, because the longest label is "Calculator" at 92px and it must not
     wrap onto a second line. */
  display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--s-5);
  padding:var(--s-5) var(--s-4);
  margin-inline:calc(var(--s-4) * -1);
  border-top:1px solid var(--stone-dark);
  border-radius:var(--r);
  transition:background var(--ease);
}
.entry-list > li:first-child .entry{border-top:0}
.entry:hover{background:var(--stone)}
.entry:has(a:focus-visible){background:var(--stone)}
.entry-kind{
  font-size:var(--fs-label);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-dark);padding-top:6px;line-height:1.5;
  white-space:nowrap;
}
.entry-title{font-size:var(--fs-xl);margin-bottom:var(--s-1)}
.entry-title a{color:var(--text-dark)}
.entry:hover .entry-title a{color:var(--green-dark)}
/* the stretched hit area */
.entry-title a::after{content:'';position:absolute;inset:0;z-index:1}
.entry-summary{font-size:var(--fs-sm);color:var(--text-muted);max-width:66ch;margin-bottom:var(--s-2)}
.entry-meta{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--text-muted);
}
.entry-meta .ticker{font-weight:800;color:var(--text-dark);letter-spacing:.03em}
.entry-meta .sep{color:var(--stone-dark)}
.entry-meta .doc{display:inline-flex;align-items:center;gap:5px}
.entry-meta .doc svg{width:13px;height:13px;flex-shrink:0}
/* anything genuinely separate must sit above the stretched link */
.entry-meta a,.entry .secondary-action{position:relative;z-index:2}

/* ------------------------------------------------------------ aside list */
.panel{border:1px solid var(--stone-dark);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.panel > h2,.panel > h3{
  font-family:var(--body);font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-dark);
  padding:var(--s-4) var(--s-4);background:var(--stone);
  border-bottom:1px solid var(--stone-dark);margin:0;
}
.panel-foot{padding:var(--s-3) var(--s-4);background:var(--stone);border-top:1px solid var(--stone-dark)}
.panel-body{padding:var(--s-2) var(--s-4)}

/* Numbered steps. Numbers because the order is real, not decoration. */
.step-list{list-style:none;margin:0;padding:0;counter-reset:step}
.step-list li{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s-3);
  align-items:start;padding-block:var(--s-3);border-bottom:1px solid var(--stone-warm);
}
.step-list li:last-child{border-bottom:0}
.step-list li::before{
  counter-increment:step;content:counter(step);
  width:22px;height:22px;border-radius:50%;
  background:var(--green);color:var(--white);
  font-size:var(--fs-xs);font-weight:800;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.step-list strong{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--text-dark);line-height:1.4}
.step-list span{display:block;font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;margin-top:2px}

.company-list{list-style:none;margin:0;padding:0}
.company-list li{border-bottom:1px solid var(--stone-warm)}
.company-list li:last-child{border-bottom:0}
.company-list a{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:var(--tap);padding:var(--s-2) var(--s-4);
  transition:background var(--ease);
}
.company-list a:hover{background:var(--stone)}
.ticker-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;                     /* one column, so names line up whether
                                         or not a ticker is confirmed        */
  font-weight:800;font-size:var(--fs-xs);color:var(--white);background:var(--navy);
  padding:3px 7px;border-radius:3px;letter-spacing:.04em;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
/* Placeholder for a company whose ticker we have not verified. It reads as
   absent rather than pretending to be a symbol. */
.ticker-chip.is-unknown{
  background:transparent;border:1px dashed var(--stone-dark);color:var(--text-muted);
  font-weight:600;
}
.company-name{font-size:var(--fs-sm);font-weight:600;color:var(--text-dark);line-height:1.4}
.company-name small{display:block;font-weight:500;font-size:var(--fs-xs);color:var(--text-muted)}

/* ------------------------------------------------------------- heatmap */
.heatmap{border:1px solid var(--stone-dark);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.heatmap-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.heat{width:100%;min-width:600px}
table.heat caption{
  text-align:left;padding:var(--s-4) var(--s-5);font-size:var(--fs-xs);color:var(--text-muted);
  background:var(--stone);border-bottom:1px solid var(--stone-warm);
}
table.heat th,table.heat td{
  padding:var(--s-3) var(--s-4);text-align:right;font-size:var(--fs-sm);
  border-bottom:1px solid var(--stone-warm);font-variant-numeric:tabular-nums;
}
/* No sticky header. The container scrolls horizontally only, so a sticky
   thead buys nothing, and it makes the document element report the table's
   full width, which shows up as a horizontally scrolling page on a phone. */
table.heat thead th{
  font-family:var(--body);font-size:var(--fs-label);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);
  background:var(--white);
}
table.heat th[scope="row"]{text-align:left;font-weight:700;color:var(--text-dark)}
table.heat th[scope="row"] small{display:block;font-weight:500;font-size:var(--fs-xs);color:var(--text-muted)}
table.heat tbody tr:last-child th,table.heat tbody tr:last-child td{border-bottom:0}
.heat-cell{
  display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;
  padding:5px 9px;border-radius:var(--r);font-weight:700;min-width:88px;
}
.heat-cell.is-up{background:rgba(29,139,66,.13);color:var(--green-dark)}
.heat-cell.is-up.lvl-2{background:rgba(29,139,66,.24)}
.heat-cell.is-up.lvl-3{background:rgba(29,139,66,.36)}
.heat-cell.is-down{background:rgba(26,31,46,.09);color:var(--navy)}
.heat-cell.is-down.lvl-2{background:rgba(26,31,46,.17)}
.heat-cell.is-down.lvl-3{background:rgba(26,31,46,.26)}
.heat-cell.is-none{
  background:repeating-linear-gradient(135deg,var(--stone) 0 6px,var(--white) 6px 12px);
  color:var(--text-muted);font-weight:600;font-size:var(--fs-xs);justify-content:center;
}

/* --------------------------------------------------------------- forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-sm);font-weight:700;color:var(--text-dark)}
.field input,.field textarea{
  min-height:var(--tap);padding:var(--s-3) var(--s-4);
  font-size:var(--fs-base);      /* 16px stops iOS zooming the page on focus */
  border:1px solid var(--stone-dark);border-radius:var(--r);
  background:var(--cream);color:var(--text-dark);
}
.field input:focus,.field textarea:focus{
  border-color:var(--green);outline:3px solid var(--green-glow);outline-offset:0;
}
.honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------ company logo */
.company-logo{display:grid;place-items:center;background:var(--white);
  border:1px solid var(--stone-dark);border-radius:var(--r);overflow:hidden}
.company-logo img{width:auto;height:auto;object-fit:contain;display:block}
.company-logo-md{width:88px;height:88px;padding:10px;flex-shrink:0}
.company-logo-md img{max-width:66px;max-height:66px}
.company-logo-sm{width:64px;height:48px;padding:6px}
.company-logo-sm img{max-width:52px;max-height:36px}

.hero-title-row{display:flex;gap:var(--s-4);align-items:center;
  margin-bottom:var(--s-4);flex-wrap:wrap}
.hero-title-row h1{margin:0;flex:1;min-width:min(100%,16ch)}

/* A row with a logo keeps the same 78px first column, so logo and non-logo
   entries stay aligned in the same list. */
.entry.has-logo > .company-logo{align-self:start;justify-self:start}

@media(max-width:560px){
  .company-logo-md{width:64px;height:64px;padding:8px}
  .company-logo-md img{max-width:48px;max-height:48px}
  .hero-title-row{gap:var(--s-3)}
}

/* 05-pages.css */
/* ==========================================================================
   Page compositions
   ========================================================================== */

/* --------------------------------------------------------------- hero */
.hero{background:var(--stone);border-bottom:1px solid var(--stone-dark)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,4vw,60px);
  padding-block:clamp(36px,5vw,64px) clamp(32px,4.5vw,56px);
  align-items:start;
}
.hero-copy h1{margin-bottom:var(--s-5)}
.hero-copy h1 em{font-style:italic;color:var(--green-dark)}
.hero-lead{font-size:var(--fs-md);max-width:44ch;margin-bottom:var(--s-6)}
.hero-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-6)}
/* the three things a first-time visitor is actually asking */
.hero-facts{
  display:flex;gap:var(--s-6);flex-wrap:wrap;
  padding-top:var(--s-5);border-top:1px solid var(--stone-dark);
}
.hero-fact{display:flex;flex-direction:column;gap:2px}
.hero-fact .n{
  font-family:var(--display);font-size:var(--fs-xl);color:var(--text-dark);
  line-height:1;font-variant-numeric:tabular-nums;
}
.hero-fact .l{font-size:var(--fs-xs);color:var(--text-muted);font-weight:600}

/* --------------------------------------------------- the ground today */
.ground-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:clamp(32px,4vw,56px);padding-block:var(--band-y);
}
.ground-stamp{
  font-size:var(--fs-xs);color:var(--text-light-muted);
  margin-bottom:var(--s-5);font-variant-numeric:tabular-nums;
}
.ground-lead{font-size:var(--fs-md);line-height:1.75;color:var(--text-light);max-width:60ch;margin-bottom:var(--s-6)}
.ground-items{list-style:none;margin:0;padding:0}
.ground-items li{
  display:grid;grid-template-columns:96px 1fr;gap:var(--s-4);
  align-items:baseline;padding-block:var(--s-4);
  border-top:1px solid rgba(232,224,210,.18);
}
.ground-tag{
  font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-light);
}
.ground-text{font-size:var(--fs-sm);color:var(--text-light);line-height:1.65;max-width:62ch}
.ground-aside{border-left:1px solid rgba(232,224,210,.18);padding-left:var(--s-6)}
.ground-aside h2{
  font-family:var(--body);font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--green-light);margin-bottom:var(--s-4);
}
.catalyst-list{list-style:none;margin:0;padding:0}
.catalyst-list li{padding-block:var(--s-3);border-bottom:1px solid rgba(232,224,210,.14)}
.catalyst-list li:last-child{border-bottom:0}
.catalyst-co{font-weight:700;font-size:var(--fs-sm);color:var(--white)}
.catalyst-co span{font-weight:600;color:var(--text-light-muted)}
.catalyst-ev{font-size:var(--fs-xs);color:var(--text-light-muted);line-height:1.5;max-width:none}
.catalyst-when{font-size:var(--fs-xs);font-weight:700;color:var(--green-light);letter-spacing:.03em}

/* ------------------------------------------------------- editorial grid */
.editorial{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(32px,4vw,56px)}
.editorial-aside > .panel{position:sticky;top:calc(var(--nav-h) + var(--s-5))}

/* ------------------------------------------------------------- podcast */
.podcast-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(32px,4vw,56px);padding-block:var(--band-y);align-items:start;
}
.episode-feature{background:var(--white);border:1px solid var(--stone-dark);border-radius:var(--r-md);padding:clamp(22px,3vw,30px)}
.episode-feature h2{font-size:var(--fs-xl);margin-bottom:var(--s-2)}
.episode-guest{font-size:var(--fs-sm);font-weight:700;color:var(--text-dark);margin-bottom:var(--s-3)}
.episode-guest span{font-weight:500;color:var(--text-muted)}
.episode-summary{font-size:var(--fs-sm);color:var(--text-body);margin-bottom:var(--s-5);max-width:56ch}
.player{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-3) var(--s-4);background:var(--stone);
  border:1px solid var(--stone-dark);border-radius:var(--r);
}
.player-btn{
  width:var(--tap);height:var(--tap);border-radius:50%;
  background:var(--green-btn);color:var(--white);
  display:grid;place-items:center;flex-shrink:0;transition:var(--ease);
}
.player-btn:hover{background:var(--green-dark)}
.player-btn svg{width:15px;height:15px;margin-left:2px}
.player-track{flex:1;height:4px;background:var(--stone-dark);border-radius:2px;min-width:40px}
.player-time{font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.episode-list{list-style:none;margin:0;padding:0}
.episode-list li{border-top:1px solid var(--stone-dark)}
.episode-list li:first-child{border-top:0}
.episode-list a{display:block;padding-block:var(--s-3);min-height:var(--tap);transition:var(--ease)}
.episode-list a:hover .ep-title{color:var(--green-dark)}
.ep-title{font-size:var(--fs-sm);font-weight:700;color:var(--text-dark);line-height:1.45}
.ep-meta{font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- newsletter */
.newsletter{padding-block:var(--sec-y)}
.newsletter-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3.5vw,44px);
  align-items:center;
  border:1px solid var(--stone-dark);border-radius:var(--r-md);
  background:var(--white);padding:clamp(24px,3.5vw,38px) clamp(22px,3.5vw,40px);
}
.newsletter h2{font-size:var(--fs-2xl);margin-bottom:var(--s-2)}
.newsletter p{font-size:var(--fs-sm);color:var(--text-muted);max-width:48ch}
.newsletter form{display:flex;gap:var(--s-3);flex-wrap:wrap}
.newsletter input[type=email]{min-width:min(260px,100%);flex:1}

/* ---------------------------------------------------------------- 404 */
.error-page{padding-block:clamp(48px,7vw,88px)}
.error-code{
  font-family:var(--display);font-size:clamp(4rem,12vw,7rem);line-height:1;
  color:var(--green);margin-bottom:var(--s-4);
}
.error-page h1{font-size:var(--fs-3xl);margin-bottom:var(--s-4)}
.error-page > .wrap > p{font-size:var(--fs-md);max-width:52ch;margin-bottom:var(--s-6)}
.error-search{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-8);max-width:520px}
.error-search input{flex:1;min-width:min(240px,100%)}
.error-routes{
  display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding-top:var(--s-6);border-top:1px solid var(--stone-dark);
}
.error-routes h2{
  font-family:var(--body);font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-dark);margin-bottom:var(--s-3);
}
.error-routes ul{list-style:none;margin:0;padding:0}
.error-routes li a{
  display:flex;align-items:center;min-height:var(--tap-min);
  font-size:var(--fs-sm);color:var(--text-body);
}
.error-routes li a:hover{color:var(--green-dark)}

/* ==========================================================================
   Responsive compositions
   ========================================================================== */
/* minmax(0,1fr), never a bare 1fr: a bare 1fr track keeps the automatic
   minimum, so one wide child such as a data table forces the whole column
   open and the page scrolls sideways. */
@media(max-width:1040px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
  .hero-lead{max-width:56ch}
  .editorial-aside > .panel{position:static}
}
@media(max-width:860px){
  .ground-grid,.podcast-grid,.editorial{grid-template-columns:minmax(0,1fr)}
  .ground-aside{border-left:0;border-top:1px solid rgba(232,224,210,.18);padding-left:0;padding-top:var(--s-6)}
  .newsletter-inner{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .entry{grid-template-columns:minmax(0,1fr);gap:var(--s-2);padding-inline:var(--s-3);margin-inline:calc(var(--s-3) * -1)}
  .entry-kind{padding-top:0}
  .ground-items li{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
  .hero-facts{gap:var(--s-5)}
  .newsletter form{flex-direction:column}
  .newsletter .btn{width:100%}
  .rail-rows li{grid-template-columns:1fr auto;row-gap:2px}
  .metal-change{grid-column:2;min-width:0}
  .error-search{flex-direction:column}
  .error-search .btn{width:100%}
}

/* ------------------------------------------------- expected next (band) */
.catalyst-band{padding-block:var(--band-y)}
.catalyst-band-head{border-bottom-color:var(--green)}
.catalyst-band-head h2{color:var(--white)}
.catalyst-band-head p{color:var(--text-light-muted)}
.catalyst-band-head .link-more{color:var(--green-light)}
.catalyst-empty{color:var(--text-light-muted)}
.catalyst-grid{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(232,224,210,.16);border:1px solid rgba(232,224,210,.16);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.catalyst-grid li{background:var(--navy)}
.catalyst-grid a{
  display:grid;gap:5px;padding:var(--s-5) var(--s-4);height:100%;
  align-content:start;transition:background var(--ease);
}
.catalyst-grid a:hover{background:var(--navy-light)}
.cat-when{font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-light)}
.cat-event{font-family:var(--display);font-size:var(--fs-lg);color:var(--white);line-height:1.25}
.cat-co{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--fs-sm);font-weight:600;color:var(--text-light)}
.cat-tick{font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;
  background:rgba(232,224,210,.14);color:var(--stone-warm);padding:2px 6px;border-radius:3px}
.cat-meta{font-size:var(--fs-xs);color:var(--text-light-muted)}
@media(max-width:560px){ .catalyst-grid{grid-template-columns:1fr} }

/* ==========================================================================
   Invitation to suggest a company.

   A rule and two columns rather than a panel. The newsletter box sits a
   little further down the page, and two bordered boxes in a row would read
   as a pair of adverts instead of as part of the publication.
   ========================================================================== */
/* Two rows, so the note beside the copy starts level with the paragraph
   rather than with the overline. Done with the grid instead of a padding on
   the note, because the heading takes one line or two depending on width and
   any fixed offset would be wrong at one of them. */
.invite{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  column-gap:clamp(24px,4vw,56px);row-gap:0;
  padding-top:var(--s-6);border-top:2px solid var(--navy);
}
.invite-head{grid-column:1;grid-row:1}
.invite-copy{grid-column:1;grid-row:2}
.invite-note{grid-column:2;grid-row:2}
.invite h2{font-size:var(--fs-2xl);margin-bottom:var(--s-5)}
.invite-copy > p{font-size:var(--fs-md);max-width:54ch;margin-bottom:var(--s-5)}
.invite .hero-actions{margin-bottom:0}
.invite-note{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.65}
.invite-note p{max-width:46ch}
.invite-note p + p{margin-top:var(--s-3)}
.invite-note strong{color:var(--text-dark);font-weight:700}
@media(max-width:860px){
  .invite{grid-template-columns:minmax(0,1fr)}
  .invite-head,.invite-copy,.invite-note{grid-column:1;grid-row:auto}
  .invite-note{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--stone-dark)}
}

/* ------------------------------------------------- routes onto the site
   The same green rule the glossary uses for an example, because these are
   the same kind of thing: an aside from the main argument that a reader
   may want to skim rather than read in order. */
.route-list{display:grid;gap:var(--s-5);margin-bottom:var(--s-6)}
.route{padding-left:var(--s-4);border-left:3px solid var(--green)}
.route h3{font-size:var(--fs-lg);margin-bottom:4px}
.route p{font-size:var(--fs-sm);color:var(--text-body);max-width:62ch}

/* 06-interactive.css */
/* ==========================================================================
   Filters, glossary, search, calculators, map, stage track
   ========================================================================== */

/* ------------------------------------------------------------- filters */
.filters{border:1px solid var(--stone-dark);border-radius:var(--r-md);
  background:var(--white);padding:var(--s-4)}
.filter-grid{display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.field-inline{display:flex;flex-direction:column;gap:5px}
.field-inline > span{font-size:var(--fs-xs);font-weight:700;color:var(--text-dark)}
.field-inline small{font-size:var(--fs-xs);color:var(--text-muted);font-weight:400}
/* The hint sits inside the label block, so each control has exactly one
   variable-height element above it. Reserving two lines there means a label
   that wraps no longer pushes its input out of line with its neighbours.
   Below the single-column breakpoint each field owns its row, so it is off. */
@media(min-width:561px){
  .field-inline > .fi-label{
    display:block;min-height:2.8em;
    line-height:1.4;align-content:end;
  }
  .field-inline > .fi-label small{display:block;line-height:1.35}
}
.field-inline select,.field-inline input{
  min-height:var(--tap);padding:var(--s-2) var(--s-3);
  font-family:var(--body);font-size:var(--fs-base);   /* 16px: stops iOS zooming */
  border:1px solid var(--stone-dark);border-radius:var(--r);
  background:var(--cream);color:var(--text-dark);width:100%;
}
.field-inline select:focus,.field-inline input:focus{
  border-color:var(--green);outline:3px solid var(--green-glow);outline-offset:0}
.filter-status{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--text-muted);
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ glossary */
.alpha-nav{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:var(--s-6);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--stone-dark)}
.alpha-nav a,.alpha-nav span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap-min);min-height:var(--tap-min);padding:0 4px;
  font-size:var(--fs-sm);font-weight:700;border-radius:var(--r)}
.alpha-nav a{color:var(--green-dark)}
.alpha-nav a:hover{background:var(--stone)}
.alpha-nav span{color:var(--stone-dark)}
.alpha-head{font-size:var(--fs-2xl);color:var(--green-dark);
  margin:var(--s-6) 0 var(--s-3);padding-bottom:var(--s-2);
  border-bottom:2px solid var(--navy);scroll-margin-top:calc(var(--nav-h) + 12px)}
.glossary{margin:0}
.term{padding:var(--s-4) 0;border-bottom:1px solid var(--stone-warm);
  scroll-margin-top:calc(var(--nav-h) + 12px)}
.term:last-child{border-bottom:0}
.term dt{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  font-family:var(--display);font-size:var(--fs-lg);color:var(--text-dark);margin-bottom:6px}
.term-cat{font-family:var(--body);font-size:var(--fs-label);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.term-anchor{font-family:var(--body);font-size:var(--fs-sm);color:var(--stone-dark);
  text-decoration:none;margin-left:auto;
  min-height:var(--tap-min);min-width:var(--tap-min);   /* 24x24 minimum */
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.term:hover .term-anchor,.term-anchor:focus{color:var(--green-dark)}
.term dd{margin:0}
.term dd p{max-width:70ch}
.term-related{margin-top:8px;font-size:var(--fs-sm);color:var(--text-muted)}
.term-related a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
.term.is-hit{background:var(--stone);border-radius:var(--r);
  padding-inline:var(--s-3);margin-inline:calc(var(--s-3) * -1)}

/* -------------------------------------------------------------- search */
.search-type{font-size:var(--fs-label);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-dark)}
mark{background:rgba(29,139,66,.2);color:inherit;padding:0 2px;border-radius:2px}

/* --------------------------------------------------------- calculators */
.calc{border:1px solid var(--stone-dark);border-radius:var(--r-md);
  background:var(--white);padding:var(--s-5)}
.calc-fields{display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.calc-error{margin-top:var(--s-4);padding:var(--s-3);border-radius:var(--r);
  background:#FBEDEB;border:1px solid #D9B4AE;color:#8A2A20;font-size:var(--fs-sm)}
.calc-result{margin-top:var(--s-5);padding-top:var(--s-5);border-top:2px solid var(--navy)}
.calc-out dl{display:grid;gap:var(--s-2);margin:0}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding:var(--s-2) 0;border-bottom:1px solid var(--stone-warm)}
.calc-row:last-child{border-bottom:0}
.calc-row dt{font-size:var(--fs-sm);color:var(--text-muted)}
.calc-row dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text-dark);text-align:right}
.calc-row.is-headline dd{font-family:var(--display);font-size:var(--fs-xl);font-weight:400}
.calc-caveat{margin-top:var(--s-4);padding:var(--s-3);background:var(--stone);
  border-radius:var(--r);font-size:var(--fs-sm);color:var(--text-body)}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm);
  background:var(--stone);border:1px solid var(--stone-dark);border-radius:var(--r);
  padding:var(--s-4);max-width:none;overflow-x:auto}

/* ----------------------------------------------------------------- map */
.map-canvas{height:min(62vh,540px);border:1px solid var(--stone-dark);
  border-radius:var(--r-md);margin-bottom:var(--s-3);background:var(--stone)}
.map-note{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--s-7)}
.map-note a{color:var(--green-dark);text-decoration:underline}
.ootg-pin{display:grid;place-items:center}
.ootg-pin-dot{display:block;width:14px;height:14px;border-radius:50%;
  background:var(--green);border:2px solid var(--cream);
  box-shadow:0 1px 3px rgba(26,31,46,.4)}
.ootg-pin:hover .ootg-pin-dot,.ootg-pin:focus .ootg-pin-dot{background:var(--green-dark);transform:scale(1.15)}
.leaflet-popup-content{font-family:var(--body);font-size:var(--fs-sm)}
.leaflet-popup-content strong{display:block;font-size:var(--fs-base);color:var(--text-dark)}
.leaflet-popup-content a{color:var(--green-dark);font-weight:700}

/* --------------------------------------------------------- stage track */
.stage-track{list-style:none;margin:0;padding:0;position:relative}
.stage-track::before{content:'';position:absolute;left:17px;top:18px;bottom:18px;
  width:2px;background:var(--stone-dark)}
.stage{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);
  gap:var(--s-4);padding-bottom:var(--s-6);scroll-margin-top:calc(var(--nav-h) + 12px)}
.stage-marker{width:36px;height:36px;border-radius:50%;background:var(--green);
  color:var(--white);display:grid;place-items:center;font-weight:800;
  font-size:var(--fs-sm);position:relative;z-index:1;font-variant-numeric:tabular-nums}
.stage-body h2{font-size:var(--fs-xl);margin-bottom:6px}
.stage-body > p{font-size:var(--fs-sm);color:var(--text-body);max-width:62ch}
/* ==========================================================================
   Projects sitting at a stage.

   Closed by default, and grouped by company. Two of the nine stages hold
   almost every project we cover, so listing each project on its own line
   made the sequence of stages, which is the point of the page, the hardest
   thing on it to see. The count sits on the summary, so a reader still
   learns how much is at each stage without opening anything.

   A details element rather than a script: it works with JavaScript off, is
   keyboard operable as it stands, and needs no inline handler, which the
   content policy would block anyway.
   ========================================================================== */
.stage-projects{
  margin-top:var(--s-3);max-width:660px;
  background:var(--stone);border:1px solid var(--stone-dark);border-radius:var(--r);
}
.stage-projects summary{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:var(--tap-min);padding:var(--s-3) var(--s-4);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);
  cursor:pointer;list-style:none;
}
.stage-projects summary::-webkit-details-marker{display:none}
.stage-projects summary:hover{color:var(--green-dark)}
.sp-label{flex:1}
.sp-count{
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.03em;
  color:var(--text-dark);background:var(--white);
  border:1px solid var(--stone-dark);border-radius:3px;padding:1px 7px;
  font-variant-numeric:tabular-nums;
}
/* Drawn from two borders rather than loaded as an icon. */
.stage-projects summary::after{
  content:'';width:7px;height:7px;flex-shrink:0;margin-left:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--ease);
}
.stage-projects[open] summary::after{transform:translateY(1px) rotate(225deg)}
.stage-projects[open] summary{border-bottom:1px solid var(--stone-dark)}

.sp-list{list-style:none;margin:0;padding:var(--s-1) var(--s-4) var(--s-3)}
.sp-list li{padding-block:var(--s-3);border-bottom:1px solid var(--stone-warm)}
.sp-list li:last-child{border-bottom:0}
/* flex-start, not center: a company name long enough to wrap would otherwise
   float its ticker between the two lines instead of beside the first. */
.sp-list a{display:inline-flex;align-items:flex-start;gap:8px;min-height:var(--tap-min)}
.sp-list .ticker-chip{margin-top:1px}
.sp-co{font-size:var(--fs-sm);font-weight:700;color:var(--text-dark)}
.sp-list a:hover .sp-co{color:var(--green-dark)}
.sp-projects{
  display:block;margin-top:2px;
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55;max-width:58ch;
}

/* -------------------------------------------------------- contact form */
.contact-form{max-width:560px}
.form-note{font-size:var(--fs-sm);color:var(--text-muted);max-width:60ch;
  margin-bottom:var(--s-5);scroll-margin-top:calc(var(--nav-h) + 12px)}
.contact-form .field{margin-bottom:var(--s-4)}

@media(max-width:560px){
  .calc-fields{grid-template-columns:1fr}
  .stage{grid-template-columns:30px minmax(0,1fr);gap:var(--s-3)}
  .stage-marker{width:30px;height:30px;font-size:var(--fs-xs)}
  .stage-track::before{left:14px}
}

.term-example{margin-top:var(--s-2);padding:var(--s-2) var(--s-3);
  background:var(--stone);border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0;
  font-size:var(--fs-sm);color:var(--text-body);max-width:66ch}
.term-example span{display:block;font-size:var(--fs-label);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}

/* A hint under a field, rather than beside its label, so the label stays the
   thing a screen reader announces and the explanation follows the control. */
.form-hint{display:block;font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;max-width:52ch}
.field label small{font-weight:500;color:var(--text-muted)}

/* 07-utilities.css */
/* ==========================================================================
   Utility classes generated from what the templates actually used.

   These replace inline style attributes. A style attribute cannot be
   covered by a CSP hash, so as long as any remained the policy needed
   style-src 'unsafe-inline', which weakens it for every page. Moving them
   here let that be removed.

   Generated by scripts/extract-inline-styles.py. Do not hand-edit.
   ========================================================================== */
.u-ta-left{text-align:left}
.u-mb-7{margin-bottom:var(--s-7)}
.u-2b092db{font-size:var(--fs-lg)}
.u-mb-4{margin-bottom:var(--s-4)}
.u-mb-6{margin-bottom:var(--s-6)}
.u-mb-5{margin-bottom:var(--s-5)}
.u-547ae4f{font-size:var(--fs-xs);color:var(--text-muted)}
.u-8823227{padding:var(--s-6) 0}
.u-a6e605f{margin-top:var(--s-8)}
.u-e2f7782{font-size:var(--fs-md)}
.u-fs-xl{font-size:var(--fs-xl)}
.u-mb-8{margin-bottom:var(--s-8)}
.u-8d1f8a9{font-size:var(--fs-sm);color:var(--text-muted)}
.u-fdf33f2{margin-bottom:8px}
.u-mb-3{margin-bottom:var(--s-3)}
.u-f7104a5{border:0;background:none;cursor:pointer}
.u-one-col{grid-template-columns:1fr}
.u-rule-thin{border-bottom-width:1px}
.u-pt-0{padding-top:0}
.u-a74e936{font-weight:700;color:var(--text-dark);margin-bottom:6px}
.hero-pad{padding-block:clamp(30px,4.5vw,52px)}
.crumb-list{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-muted)}
.u-link{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
.crumb-sep{color:var(--stone-dark);margin-left:8px}
.u-fs-3xl{font-size:var(--fs-3xl)}
.hero-lead-alt{font-size:var(--fs-md);max-width:58ch}
.u-12ec1f3{border:1px solid var(--stone-dark);border-radius:var(--r-md);padding:var(--s-6);background:var(--stone)}
.u-ba40f4b{font-weight:700;color:var(--text-dark);margin-bottom:8px}
.u-a07cb6b{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s-4)}
.u-39e0b22{margin-top:var(--s-6);font-size:var(--fs-xs);color:var(--text-muted)}
.u-0f12daf{margin-top:var(--s-4);font-size:var(--fs-xs);color:var(--text-muted)}
.u-flex-1{flex:1}
.u-f033961{font-size:var(--fs-xl);margin-bottom:var(--s-3);padding-bottom:var(--s-2);border-bottom:1px solid var(--stone-dark)}
.u-d8f36f9{border-bottom-width:1px;margin-bottom:var(--s-4)}
.u-fcfffe3{padding:var(--s-6) 0;font-size:var(--fs-md)}
.u-d81a1b2{margin-top:var(--s-4)}
.u-2fdd496{color:inherit;text-decoration:underline;text-underline-offset:2px}
.u-50bc96d{margin-top:var(--s-6);font-size:var(--fs-sm);color:var(--text-muted);max-width:60ch}
.u-04391f0{max-width:520px}
.u-list-inset-5{padding-left:20px;margin-bottom:var(--s-5)}
.u-d4c50e1{font-weight:600;color:var(--text-muted)}
.u-2ae5f56{border:1px solid var(--stone-dark);border-radius:var(--r-md);padding:var(--s-5);background:var(--stone);margin-bottom:var(--s-7)}
.u-3e8a026{margin:0 0 var(--s-7) 0;padding-left:20px}
.u-mb-6px{margin-bottom:6px}
.u-d5fca4c{padding:var(--s-4);font-size:var(--fs-sm);color:var(--text-muted)}
.u-f5d3daf{border:1px solid var(--stone-dark);border-radius:var(--r-md);padding:var(--s-5);background:var(--stone);margin-bottom:var(--s-6)}
.u-8026e12{margin-top:var(--s-7)}
.u-list-inset{padding-left:20px;margin-bottom:var(--s-6)}
.u-list-pad{padding-left:20px}
.u-mt-7{margin-top:var(--s-7)}