/* ============================================================================
   birkdal.css - the one stylesheet for birkdalpartners.com
   ----------------------------------------------------------------------------
   Built 2026-10-09 by folding the six stylesheets the site had accumulated
   into one file, in the order they used to load, so the cascade is unchanged.
   Removed on the way: rules for classes no published page or script uses, the
   optical-size settings left from the Fraunces era (Fira has no axes), and the
   duplicate :root blocks (now one, below). Brand colours are tokens.

   Sections:  0 FONTS  .  TOKENS  .  1 STRUCTURE  2 MATERIAL  3 REVEAL
              4 REGISTER  5 TYPE  6 COMPOSITION
   Page-specific: corridor.css (Library price map) loads after this file.
   Palette and type rules: README.md section 4. History: DESIGN-LEDGER.md.
   ========================================================================= */


/* ==========================================================================
   0  FONTS - self-hosted, SIL Open Font License (assets/fonts/OFL-*.txt).
   Same files and unicode-ranges Google Fonts served; latin + latin-ext only.
   ========================================================================== */

@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-500-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-500-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-extra-condensed-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-extra-condensed-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-extra-condensed-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-extra-condensed-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-extra-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/fira-sans-extra-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-wordmark.woff2) format('woff2');
  unicode-range: U+20, U+41-42, U+45, U+4e, U+50, U+52-54, U+61, U+64-65, U+69, U+6b-6c, U+6e, U+72-74;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-wordmark.woff2) format('woff2');
  unicode-range: U+20, U+41-42, U+45, U+4e, U+50, U+52-54, U+61, U+64-65, U+69, U+6b-6c, U+6e, U+72-74;
}

/* ==========================================================================
   TOKENS - every custom property, final values
   ========================================================================== */

:root {
  --forest: #1F3A30;
  --field: #3A5E4E;
  --bronze: #A6875A;
  --ink: #121514;
  --on-dark: #DCE0DC;
  --on-dark-dim: #AFB8B2;
  --bronze-lt: #C9AE82;
  --maxw: 1120px;
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%231F3A30' stroke-width='1.1'%3E%3Cpath d='M0 40 C 100 0, 200 80, 300 40 C 400 0, 500 80, 600 40'/%3E%3Cpath d='M0 115 C 100 85, 200 145, 300 115 C 400 85, 500 145, 600 115'/%3E%3Cpath d='M0 190 C 100 145, 200 235, 300 190 C 400 145, 500 235, 600 190'/%3E%3Cpath d='M0 265 C 100 240, 200 290, 300 265 C 400 240, 500 290, 600 265'/%3E%3Cpath d='M0 340 C 100 302, 200 378, 300 340 C 400 302, 500 378, 600 340'/%3E%3Cpath d='M0 415 C 100 383, 200 447, 300 415 C 400 383, 500 447, 600 415'/%3E%3Cpath d='M0 490 C 100 448, 200 532, 300 490 C 400 448, 500 532, 600 490'/%3E%3Cpath d='M0 565 C 100 537, 200 593, 300 565 C 400 537, 500 593, 600 565'/%3E%3C/g%3E%3C/svg%3E");
  --contour-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%23C9AE82' stroke-width='1.1'%3E%3Cpath d='M0 40 C 100 0, 200 80, 300 40 C 400 0, 500 80, 600 40'/%3E%3Cpath d='M0 115 C 100 85, 200 145, 300 115 C 400 85, 500 145, 600 115'/%3E%3Cpath d='M0 190 C 100 145, 200 235, 300 190 C 400 145, 500 235, 600 190'/%3E%3Cpath d='M0 265 C 100 240, 200 290, 300 265 C 400 240, 500 290, 600 265'/%3E%3Cpath d='M0 340 C 100 302, 200 378, 300 340 C 400 302, 500 378, 600 340'/%3E%3Cpath d='M0 415 C 100 383, 200 447, 300 415 C 400 383, 500 447, 600 415'/%3E%3Cpath d='M0 490 C 100 448, 200 532, 300 490 C 400 448, 500 532, 600 490'/%3E%3Cpath d='M0 565 C 100 537, 200 593, 300 565 C 400 537, 500 593, 600 565'/%3E%3C/g%3E%3C/svg%3E");
  --plate: #13221C;
  --plate-deep: #0E1814;
  --shadow-sm: none;
  --shadow-md: 0 1px 0 var(--line-strong);
  --rule-gold: var(--bronze);
  --cine-bg: #0D1512;
  --cine-ink: #E9ECEA;
  --cine-dim: #AFB8B2;
  --cine-line: rgba(201, 174, 130, .30);
  --hdr: 75px;
  --paper: #FFFFFF;
  --paper2: #F2F4F3;
  --line: #DADEDB;
  --line-strong: #BEC4C0;
  --muted: #4E5351;
  --bronze-text: #735C33;
  --radius: 4px;
  --plate-rule: rgba(201, 174, 130, .30);
  --serif: "Fira Sans Extra Condensed", "Arial Narrow", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --sans: "Fira Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --brand: "Montserrat", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
}

/* ==========================================================================
   1  STRUCTURE - grid, components, charts (was site.css)
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:var(--sans);color:var(--ink);background:var(--paper);
       line-height:1.65;-webkit-font-smoothing:antialiased;font-size:17px}
  img,svg{max-width:100%}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:3px}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,32px)}
  h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.14;letter-spacing:-0.015em}
  .eyebrow{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
           color:var(--bronze);font-weight:600;font-family:var(--sans)}
  .dark .eyebrow{color:var(--bronze-lt)}

  
  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);
         backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
         border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
  .brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
  .brand svg{width:38px;height:31px;display:block}
  .brand .word{font-family:var(--serif);font-size:22px;line-height:1.05;color:var(--forest)}
  .brand .word small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.32em;
                     text-transform:uppercase;color:var(--bronze);margin-top:3px;font-weight:600}
  .navlinks{display:flex;gap:clamp(18px,2.6vw,32px);align-items:center;font-size:15px}
  .navlinks a{color:var(--muted);transition:color .18s}
  .navlinks a:hover{color:var(--forest)}

  .btn{display:inline-block;background:var(--forest);color:var(--paper);padding:13px 24px;
       border-radius:4px;font-size:15px;font-weight:500;transition:background .2s,transform .2s;
       font-family:var(--sans)}
  .btn:hover{background:var(--field)}
  .btn.ghost{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest)}
  .btn.ghost:hover{background:var(--forest);color:var(--paper)}
  .btn.light{background:var(--paper);color:var(--forest)}
  .btn.light:hover{background:#fff}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:clamp(64px,10vw,110px) 0 0}
  
  
  .hero h1{font-size:clamp(38px,6.6vw,72px);max-width:15ch;margin:20px 0 26px}
  .hero p.lead{font-size:clamp(18px,2.1vw,21px);color:var(--muted);max-width:56ch;margin-bottom:36px}
  

  
  
  
  
  

  /* ---------- bands ---------- */
  section[id],footer[id]{scroll-margin-top:92px}
  section.band{padding:clamp(64px,8.5vw,104px) 0}
  .dark{background:var(--forest);color:var(--on-dark)}
  .dark h2,.dark h3{color:var(--paper)}
  .tint{background:var(--paper2)}
  h2.title{font-size:clamp(28px,4.2vw,46px);margin:14px 0 0;max-width:20ch}
  
  

  
  
  

  /* ---------- five-verb model ---------- */
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.4vw,26px);margin-top:52px}
  .step{position:relative;padding-top:22px;border-top:1px solid var(--line)}
  .step::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:3px;
                background:var(--bronze);transform:translateY(-1px)}
  .step .n{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--bronze);font-weight:600}
  .step h3{font-size:21px;margin:8px 0 9px;color:var(--forest)}
  .step p{font-size:14.5px;color:var(--muted);line-height:1.6}

  /* ---------- services ---------- */
  
  
  
  
  
  
  

  /* ---------- audiences ---------- */
  .wins{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,24px);margin-top:52px}
  
  
  
  

  /* ---------- proof ---------- */
  
  
  
  
  
  

  /* ---------- contact ---------- */
  .contact{text-align:center;padding:clamp(72px,10vw,120px) 0}
  .contact h2{font-size:clamp(30px,4.6vw,52px);margin:16px auto 20px;max-width:18ch}
  .contact p{color:var(--muted);font-size:18px;max-width:50ch;margin:0 auto 32px}
  .contact .mail{display:inline-block;font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);
                 color:var(--forest);border-bottom:1px solid var(--bronze);padding-bottom:4px}
  .contact .mail:hover{color:var(--field)}
  .contact p.alt{font-size:15px;color:var(--muted);margin:26px auto 0}
  .contact p.alt a{color:var(--forest);font-weight:500}
  .contact p.alt a:hover{color:var(--bronze)}

  /* ---------- footer ---------- */
  footer{background:var(--forest);color:var(--on-dark-dim);padding:60px 0 44px;font-size:14.5px}
  .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;align-items:start}
  .foot svg{width:34px;height:28px;display:block;margin-bottom:14px}
  .foot .word{font-family:var(--serif);font-size:19px;color:var(--paper)}
  .foot h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-lt);
           font-weight:600;font-family:var(--sans);margin-bottom:12px}
  .foot a{color:var(--on-dark);transition:color .18s}
  .foot a:hover{color:var(--paper)}
  .foot p{line-height:1.75;max-width:34ch}
  .footbar{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;
           display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;
           color:var(--on-dark-dim)}
  .li{display:inline-flex;align-items:center;gap:8px}
  .li svg{width:16px;height:16px;margin:0;fill:currentColor}

  @media(max-width:900px){
    .navlinks a:not(.btn){display:none}
    
    .steps{grid-template-columns:repeat(2,1fr);gap:28px}
    
    
    
    
    .foot{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){
     .steps,
.wins,
.foot {grid-template-columns:1fr}
    
    
    
  }
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ======================================================================
   MULTI-PAGE ADDITIONS — content build, 2026-09-09
   Structural only. The design pass comes later; these are plumbing
   components so the copy has somewhere to sit. Palette untouched.
   ====================================================================== */

/* ---------- page head (interior pages) ---------- */
.pagehead{padding:clamp(48px,7vw,76px) 0 clamp(28px,4vw,40px);border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(32px,5.2vw,56px);max-width:18ch;margin:16px 0 0}
.pagehead p.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:62ch;margin-top:20px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}
.crumb a{color:var(--muted);border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--forest)}

/* ---------- sub navigation ---------- */
.subnav{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:74px;z-index:15}
.subnav .wrap{display:flex;gap:clamp(14px,2.4vw,28px);overflow-x:auto;font-size:14.5px;
              scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{padding:15px 0;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--forest)}
.subnav a[aria-current="true"]{color:var(--forest);border-bottom-color:var(--bronze)}

/* ---------- status chips ---------- */
.chip{display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;
      text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:3px;
      border:1px solid var(--line);color:var(--muted);vertical-align:middle}

.chip.dev{color:var(--bronze-text);border-color:#D3C3A0;background:#F5F6F5}

.dark .chip{border-color:rgba(255,255,255,.28);color:var(--on-dark)}

/* ---------- prose ---------- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(24px,3.2vw,34px);margin:clamp(44px,5vw,60px) 0 16px}
.prose h3{font-size:20px;color:var(--forest);margin:32px 0 10px}
.prose p{margin-bottom:18px;color:var(--ink)}

.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:9px}
.prose strong{font-weight:600}
.prose a.link{color:var(--forest);border-bottom:1px solid var(--bronze)}
.prose blockquote{border-left:3px solid var(--bronze);padding-left:20px;margin:24px 0;
                  font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--forest)}

/* ---------- callout / disclosure ---------- */
.note{border:1px solid var(--line);border-left:3px solid var(--bronze);background:var(--paper2);
      padding:clamp(20px,2.6vw,28px);border-radius:0 6px 6px 0;margin:32px 0}
.note h4{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
         color:var(--bronze);font-weight:600;margin-bottom:10px}
.note p{font-size:15.5px;color:var(--muted);margin-bottom:12px}
.note p:last-child{margin-bottom:0}
.note.warn{border-left-color:#8A2F2F;background:#FBEDED;border-color:#E0B4B4}
.note.warn h4{color:#8A2F2F}

/* ---------- process stages ---------- */
.stage{border-top:1px solid var(--line);padding:clamp(28px,3.4vw,40px) 0;
       display:grid;grid-template-columns:minmax(0,7.5rem) 1fr;gap:clamp(20px,4vw,48px)}
.stage .marker .n{font-family:var(--serif);font-size:38px;color:var(--bronze);line-height:1}
.stage .marker .t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
                  margin-top:6px;font-weight:600}
.stage h3{font-size:clamp(21px,2.6vw,26px);color:var(--forest);margin-bottom:12px}
.stage p{color:var(--muted);margin-bottom:14px;max-width:62ch}

/* ---------- deliverable / spec tables ---------- */
.tablewrap{overflow-x:auto;margin:28px 0;border:1px solid var(--line);border-radius:6px}
table.dt{border-collapse:collapse;width:100%;font-size:15px;min-width:520px;background:var(--paper)}
table.dt th,table.dt td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);
                        vertical-align:top}
table.dt th{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
            color:var(--muted);font-weight:600;background:var(--paper2)}
table.dt tr:last-child td{border-bottom:0}
table.dt td b{color:var(--forest);font-weight:600}

/* ---------- library ---------- */

.entry{border-bottom:1px solid var(--line);padding:clamp(24px,3vw,32px) 0;
       display:grid;grid-template-columns:minmax(0,9.5rem) 1fr;gap:clamp(18px,3.5vw,40px)}
.entry .meta{font-size:13px;color:var(--muted);line-height:1.6}
.entry .meta .date{display:block;font-weight:600;color:var(--ink)}
.entry .meta .kind{display:block;margin-top:4px;letter-spacing:.1em;text-transform:uppercase;
                   font-size:10.5px;font-weight:600;color:var(--bronze)}
.entry h3{font-size:clamp(20px,2.4vw,25px);color:var(--forest);margin-bottom:10px;max-width:34ch}
.entry h3 a:hover{color:var(--field)}
.entry p{font-size:15.5px;color:var(--muted);max-width:64ch;margin-bottom:12px}
.entry .foot{font-size:13px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.entry .foot a{border-bottom:1px solid var(--line);color:var(--forest)}

/* ---------- data / stat rows ---------- */

/* ---------- pillar cards (home) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px);margin-top:52px}
.pillar{border:1px solid var(--line);border-radius:10px;padding:clamp(26px,3vw,34px);
        background:var(--paper);display:flex;flex-direction:column}
.pillar .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);
                font-weight:600}
.pillar h3{font-size:23px;color:var(--forest);margin:12px 0 12px}
.pillar p{font-size:15.5px;color:var(--muted);margin-bottom:18px}
.pillar .more{margin-top:auto;font-size:15px;color:var(--forest);font-weight:500;
              border-bottom:1px solid var(--bronze);align-self:flex-start;padding-bottom:2px}

/* ---------- misc ---------- */
.kv{display:grid;grid-template-columns:minmax(0,13rem) 1fr;gap:14px 28px;font-size:15.5px;
    margin:26px 0}
.kv dt{font-weight:600;color:var(--forest)}
.kv dd{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}

@media(max-width:900px){
  .pillars{grid-template-columns:1fr}
  
  .split{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:4px 0}
  .kv dd{margin-bottom:14px}
}
@media(max-width:560px){
  .stage,.entry{grid-template-columns:1fr;gap:14px}
  
  .pagehead h1{font-size:clamp(28px,8vw,38px)}
}

/* ======================================================================
   LIBRARY-FIRST HOME — 2026-09-09 restructure
   The library is the landing page. Masthead, featured lead report,
   entry list with a sticky sidebar.
   ====================================================================== */

/* ---------- publication masthead ---------- */
.masthead{border-bottom:2px solid var(--forest);padding:clamp(36px,5vw,56px) 0 clamp(22px,3vw,30px)}
.masthead .rule{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
                flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:26px}

.masthead h1{font-size:clamp(30px,4.4vw,52px);max-width:20ch;margin:0 0 18px}
.masthead p.claim{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:60ch;margin-bottom:26px}

/* ---------- library grid with sidebar ---------- */
.libgrid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:clamp(32px,5vw,64px);
         align-items:start}
.libside{position:sticky;top:98px;display:flex;flex-direction:column;gap:20px}
.sidecard{border:1px solid var(--line);border-radius:8px;padding:22px;background:var(--paper)}
.sidecard.dark-card{background:var(--forest);border-color:var(--forest)}
.sidecard h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
             color:var(--bronze);font-weight:600;margin-bottom:14px}
.sidecard.dark-card h4{color:var(--bronze-lt)}
.sidecard p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.sidecard.dark-card p{color:var(--on-dark)}

.sidecard .btn{width:100%;text-align:center}

/* ---------- featured lead report ---------- */

/* ---------- section rule ---------- */
.secrule{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
         border-bottom:2px solid var(--forest);padding-bottom:10px;margin:clamp(40px,5vw,60px) 0 4px}
.secrule h2{font-size:clamp(20px,2.4vw,26px);color:var(--forest);margin:0}
.secrule .aside{font-size:13px;color:var(--muted)}

/* ---------- series blocks: generated by tools/build_library.py ---------- */
.series + .series{margin-top:clamp(64px,8vw,96px)}
.series > .secrule:first-child{margin-top:0}
.series-desc p{color:var(--muted);font-size:16.5px;max-width:64ch;margin:18px 0 8px}

/* ---------- the edge strip ---------- */
.edge{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);margin-top:44px}
.edge .e b{display:block;font-family:var(--serif);font-size:21px;color:var(--paper);margin-bottom:10px}
.edge .e p{font-size:15px;color:var(--on-dark);line-height:1.65}

/* ---------- fine print ---------- */
.fineprint{font-size:12.5px;color:var(--muted);line-height:1.7;max-width:90ch;margin-top:14px}
.fineprint a{border-bottom:1px solid var(--line)}
footer .fineprint{color:var(--on-dark-dim)}
footer .fineprint a{color:var(--on-dark)}

@media(max-width:980px){
  .libgrid{grid-template-columns:1fr}
  .libside{position:static;flex-direction:row;flex-wrap:wrap}
  .libside .sidecard{flex:1 1 260px}
}
@media(max-width:700px){
  .edge{grid-template-columns:1fr}
  .libside{flex-direction:column}
}

  /* ---------- figures & charts ---------- */
  .fig{margin:34px 0 30px;border-top:1px solid var(--line);padding-top:20px;max-width:760px}
  .fig-head{display:block;margin-bottom:20px}
  .fig-n{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
         color:var(--bronze);font-weight:600;margin-bottom:7px}
  .fig-head b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.4vw,23px);
              color:var(--forest);line-height:1.22}
  .fig-sub{display:block;font-size:13px;color:var(--muted);margin-top:7px}

  /* ---- horizontal bar chart (HTML/CSS: text never scales with a viewBox) ---- */
  /* --lab and --gut are shared so every row, the axis and the annotation align
     on one column grid; per-row max-content would size each row independently. */
  
  
  
  

  /* bar: 22px thick, 4px rounded data-end, square at the baseline */
  .bbar{position:absolute;left:0;top:8px;height:22px;width:var(--w);
        background:#3F7560;border-radius:0 4px 4px 0;transition:background .15s}
  
  
  
  

  /* gridlines: hairline, solid, recessive; behind the bars */
  
  /* containing block is .brows, which is already the content box -- so right:0,
     not right:var(--gut), or the lines drift left of their axis ticks. */
  
  
  

  
  
  

  /* spread annotation */
  
  
  
  
  
  
  

  .fig-foot{display:block;margin-top:22px}
  .fig-foot p{font-size:15px;color:var(--muted);max-width:62ch;margin-bottom:11px;line-height:1.62}
  .fig-foot p b{color:var(--ink);font-weight:600}
  .fig-foot .src{font-size:12.5px;line-height:1.55}

  .tbl{margin-top:14px}
  .tbl summary{cursor:pointer;color:var(--field);font-weight:500;font-size:13px;padding:4px 0}
  .tbl summary:hover{color:var(--forest)}
  .tbl table{border-collapse:collapse;margin-top:10px;width:100%;max-width:430px;font-size:13px}
  .tbl th,.tbl td{text-align:left;padding:7px 14px 7px 0;border-bottom:1px solid var(--line)}
  .tbl th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .tbl td{color:var(--ink)}
  .tbl .n{text-align:right;font-variant-numeric:tabular-nums}

  /* hover tooltip */
  .fig-plot{position:relative}
  .tip{position:absolute;pointer-events:none;z-index:6;background:var(--forest);color:var(--paper);
       padding:9px 12px;border-radius:5px;font-size:12.5px;line-height:1.45;
       box-shadow:0 4px 14px rgba(18,21,20,.20);min-width:120px}
  .tip b{display:block;font-weight:600;font-size:13.5px}
  .tip span{display:block;color:var(--on-dark-dim);font-size:11.5px}
  .tip u{display:block;text-decoration:none;font-weight:600;margin-top:4px;font-size:15px;
         font-variant-numeric:tabular-nums}
  .tip u i{font-style:normal;font-size:11px;color:var(--on-dark-dim);font-weight:400}

  /* chart inside a dark band */
  .dark .bbar{background:#93B3A3}
  
  
  
  
  
  
  
  
  .dark .fig-head b{color:var(--paper)}
  .dark .fig-foot p,.dark .fig-sub{color:var(--on-dark)}
  .dark .fig-foot p b,.dark .tbl td{color:var(--paper)}

  

  @media print,(forced-colors:active){
    .bbar{background:ButtonText;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .tip{display:none}
    .tbl[open] summary{display:none}
  }

  /* compact chart for the lead-report teaser */
  
  
  
  
  
  
  
  

  /* ---- stacked part-to-whole bar ----
     One-hue ordinal ramp: brand green and bronze collapse under protanopia
     (dE 5.4), so identity here comes from lightness order + legend, not hue. */
  .sbar{display:flex;width:100%;height:44px;margin:6px 0 0}
  .sseg{position:relative;width:var(--w);background:var(--seg);
        border-right:2px solid var(--paper);display:flex;align-items:center;
        justify-content:center;transition:filter .15s;cursor:default}
  .sseg:last-child{border-right:0}
  .sseg:first-child{border-radius:3px 0 0 3px}
  .sseg:last-child{border-radius:0 3px 3px 0}
  .sseg b{font-size:13px;font-weight:600;color:var(--paper);letter-spacing:.01em}
  .sseg:hover,.sseg:focus-visible{filter:brightness(1.12)}
  .sseg:focus{outline:none}
  .sseg:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
  .sseg.s1{--seg:var(--forest)}
  .sseg.s2{--seg:#4A7563}
  .sseg.s3{--seg:#8EAD9E}

  .skey{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px;max-width:460px}
  .skey li{display:grid;grid-template-columns:13px minmax(0,1fr) max-content max-content;
           align-items:center;gap:11px;font-size:13.5px;color:var(--muted)}
  .skey i{width:13px;height:13px;border-radius:3px;background:var(--seg)}
  .skey i.s1{--seg:var(--forest)}
  .skey i.s2{--seg:#4A7563}
  .skey i.s3{--seg:#8EAD9E}
  .skey b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
  .skey em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;
           min-width:44px;text-align:right}

  .dark .sseg{border-right-color:var(--forest)}
  .dark .sseg.s1{--seg:#8EAD9E}
  .dark .sseg.s3{--seg:var(--forest)}
  .dark .sseg b{color:var(--forest)}
  .dark .skey li{color:var(--on-dark)}
  .dark .skey b{color:var(--paper)}

  @media (max-width:600px){
    .sbar{height:38px}
    .sseg b{font-size:12px}
    .skey li{font-size:12.5px;gap:9px}
  }
  @media print,(forced-colors:active){
    .sseg{border-right-color:Canvas;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  }

  /* ---- xy chart: SVG marks, HTML labels ----
     The svg scales uniformly (viewBox 640x300); labels are absolutely positioned in
     percentages of the same box, so type stays at document size at every width. */
  .xy{position:relative;width:100%}
  .xy svg{display:block;width:100%;height:auto}

  .xygrid line{stroke:var(--line);stroke-width:1}
  .xyaxis{stroke:#C2C7C4;stroke-width:1}
  .xyzone{fill:var(--bronze);opacity:.07}
  .xyband{fill:#3F7560;opacity:.13}
  .xyedge{stroke:#3F7560;stroke-width:1.5;opacity:.55}
  .xycase{stroke-width:2;stroke-linecap:round}
  .xycase.a{stroke:var(--ink)}
  .xycase.b{stroke:#957A4C}
  .xyspot{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
  .xydot{stroke:var(--paper);stroke-width:2}
  .xydot.a{fill:var(--ink)}
  .xydot.b{fill:#957A4C}

  .xyl{position:absolute;font-size:12px;color:var(--muted);white-space:nowrap;
       font-variant-numeric:tabular-nums;pointer-events:none}
  /* width is a % of the same box the svg scales in, so labels track the axis
     (which sits at 62/640 = 9.69%) instead of drifting at small widths. */
  .xyl.yt{left:0;width:8.2%;text-align:right;transform:translateY(-50%)}
  .xyl.xt{top:80%;transform:translateX(-50%)}
  .xyl.xunit{left:9.69%;top:90.5%;font-size:11.5px}
  .xyl.case{font-size:12px;font-weight:600;transform:translateY(-125%)}
  .xyl.case.a{color:var(--ink)}
  .xyl.case.b{color:#957A4C}
  .xyl.zone{font-size:11.5px;font-weight:600;color:#957A4C;transform:translateX(-50%)}
  .xyl.spot{font-size:11.5px;transform:translateX(-50%)}

  .xykey{max-width:none;margin-top:18px}
  .xykey li{grid-template-columns:16px minmax(0,1fr)}
  .xykey i{width:16px;height:3px;border-radius:2px}
  .xykey i.k-band{height:11px;border-radius:2px;background:#3F7560;opacity:.35;
                  box-shadow:inset 0 0 0 1px #3F7560}
  .xykey i.k-a{background:var(--ink)}
  .xykey i.k-b{background:#957A4C}

  .dark .xygrid line{stroke:rgba(220,224,220,.16)}
  .dark .xyaxis{stroke:rgba(220,224,220,.34)}
  .dark .xyband{fill:#93B3A3;opacity:.18}
  .dark .xyedge{stroke:#93B3A3}
  .dark .xycase.a{stroke:var(--paper)}
  .dark .xycase.b{stroke:var(--bronze-lt)}
  .dark .xydot{stroke:var(--forest)}
  .dark .xydot.a{fill:var(--paper)}
  .dark .xydot.b{fill:var(--bronze-lt)}
  .dark .xyl{color:var(--on-dark-dim)}
  .dark .xyl.case.a{color:var(--paper)}
  .dark .xyl.case.b,.dark .xyl.zone{color:var(--bronze-lt)}
  .dark .xykey i.k-a{background:var(--paper)}
  .dark .xykey i.k-b{background:var(--bronze-lt)}

  @media (max-width:600px){
    .xyl{font-size:10.5px}
    .xyl.case{font-size:10.5px}
    .xyl.zone,.xyl.spot,.xyl.xunit{font-size:10px}
  }

  /* ---- xy crosshair ---- */
  .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
                   overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .xy{cursor:crosshair}
  .xy:focus{outline:none}
  .xy:focus-visible{outline:2px solid var(--bronze);outline-offset:4px;border-radius:4px}

  .xhline{position:absolute;top:8.67%;bottom:22.67%;width:1px;background:var(--ink);
          opacity:.42;left:0}
  .xhdot{position:absolute;width:9px;height:9px;border-radius:50%;background:#3F7560;
         border:2px solid var(--paper);transform:translate(-50%,-50%)}
  .xhair{position:absolute;inset:0;pointer-events:none;z-index:3}

  .xytip{position:absolute;z-index:6;pointer-events:none;background:var(--forest);
         color:var(--paper);padding:10px 12px;border-radius:5px;
         box-shadow:0 4px 16px rgba(18,21,20,.22);min-width:186px}
  .xytip .fx{display:block;font-size:12px;color:var(--on-dark-dim);
             letter-spacing:.02em;margin-bottom:7px}
  .xytip .r{display:grid;grid-template-columns:14px max-content minmax(0,1fr);
            align-items:baseline;gap:9px;margin-top:5px}
  .xytip .r i{height:3px;border-radius:2px;align-self:center}
  .xytip .r i.k-band{background:#93B3A3}
  .xytip .r i.k-a{background:var(--paper)}
  .xytip .r i.k-b{background:var(--bronze-lt)}
  .xytip .r b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
              color:var(--paper);white-space:nowrap}
  .xytip .r span{font-size:11.5px;color:var(--on-dark-dim);line-height:1.35}
  .xytip .gap{display:block;font-size:11px;margin-top:1px}
  .xytip .gap.short{color:#F0B8A0}
  .xytip .gap.clear{color:#B5CABE}

  @media (max-width:600px){
    .xytip{min-width:168px;padding:9px 10px}
    .xytip .r b{font-size:13px}
  }
  @media (hover:none){ .xy{cursor:default} }

/* ======================================================================
   GOVERNING-DOCUMENT COMPONENTS — 2026-09-14
   Contents list, numbered document sections, formula blocks, symbol
   anatomy, record-schema comparison, API code blocks, fixed/extended
   columns. Palette untouched; identity in the anatomy comes from position
   and direct labels, never from hue alone.
   ====================================================================== */

.docsec{border-top:2px solid var(--forest);margin-top:clamp(56px,7vw,84px);padding-top:18px}
.docsec > .num{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
               color:var(--bronze);font-weight:600}
.docsec > h2{font-size:clamp(26px,3.4vw,36px);color:var(--forest);margin:8px 0 14px;max-width:28ch}
.docsec h3{font-size:20px;color:var(--forest);margin:32px 0 10px}
.docsec p{max-width:70ch;margin-bottom:14px}
.docsec p.std{color:var(--muted);font-size:17px}
.docsec ol.plain{margin:0 0 16px 22px;max-width:70ch}
.docsec ol.plain li{margin-bottom:6px}

pre.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;
         line-height:1.65;background:#16372A;color:#E6EEE8;border-radius:6px;padding:18px 20px;
         margin:20px 0;overflow-x:auto;white-space:pre}
pre.code .k{color:#D2BA8E}
pre.code .c{color:#9FB9A8}

/* symbol anatomy */
.anatomy{border:1px solid var(--line);border-radius:8px;background:var(--paper);
         padding:clamp(22px,3vw,32px);margin:24px 0}
.anatomy + .anatomy{margin-top:-8px}
.sym{display:flex;flex-wrap:wrap;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
     font-size:clamp(28px,6vw,48px);letter-spacing:.04em;line-height:1}
.sym span{padding:6px 10px 10px;border-bottom:4px solid;color:var(--forest)}
.sym .p{border-color:var(--forest)}
.sym .b{border-color:#4A7563}
.sym .s{border-color:#8EAD9E}
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.parts div{border-top:1px solid var(--line);padding-top:12px}
.parts b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
         color:var(--forest)}
.parts em{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--bronze);font-weight:600;margin-top:4px}
.parts span{display:block;font-size:14px;color:var(--muted);margin-top:6px;line-height:1.55}

/* record schema: exchange source record -> Birkdal series record */

.pillars.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){ .pillars.two{grid-template-columns:1fr} }

/* fixed conventions vs extended basket */

@media(max-width:760px){
   .parts {grid-template-columns:1fr}
  
  
}

/* maize map */
/* RN 001 Figure 1 and the lead-report strip (assets/maize-map.js). Colours,
   hatch and the thin-data stroke come from birkdal-chart-theme.js, which sets
   them on .mm as --bk-* custom properties; fallbacks are the site tokens. */
.fig.mm-fig{max-width:none}
.mm{position:relative;--row:46px;--gut:62px;font-family:var(--sans)}
.mm-nojs{font-size:13px;color:var(--muted);margin:8px 0}
.mm-vlabel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
           font-weight:600;margin:0 0 10px}

/* month control */
.mm-ctl{margin:0 0 18px}
.mm-nav{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mm-now{flex:1;min-width:0;text-align:center;margin:0}
.mm-now b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;
          color:var(--bk-forest,var(--forest))}
.mm-now span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.mm-step{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px 0 9px;
         border:1px solid var(--line);border-radius:6px;background:var(--bk-paper,#FFFFFF);
         color:var(--bk-forest,var(--forest));font:500 13px/1 var(--sans);cursor:pointer}
.mm-step.next{padding:0 9px 0 14px}
.mm-step svg{flex:none}
.mm-step:hover:not(:disabled){border-color:var(--bk-forest,var(--forest))}
.mm-step:disabled{color:#A7A99F;cursor:default}
.mm-months{display:flex;gap:14px}
.mm-year{min-width:0}
.mm-yr{display:block;font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:5px}
.mm-mrow{display:grid;grid-template-columns:repeat(var(--cols,12),minmax(0,1fr));gap:3px}
.mm-m{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
      min-height:48px;padding:4px 2px;border:1px solid var(--line);border-radius:4px;
      background:var(--bk-paper,#FFFFFF);color:var(--ink);font:500 13px/1.1 var(--sans);cursor:pointer}
.mm-m small{font-size:12px;font-weight:400;line-height:1.05;color:var(--muted);text-align:center}
.mm-m:hover:not(:disabled){border-color:var(--bk-forest,var(--forest))}
.mm-m[aria-pressed="true"]{background:var(--bk-forest,var(--forest));border-color:var(--bk-forest,var(--forest));
                           color:var(--bk-ground,var(--paper))}
.mm-m:disabled{cursor:not-allowed;color:var(--muted);
  background:repeating-linear-gradient(45deg,var(--bk-hatch-stroke,#D5D9D6) 0 var(--bk-hatch-w,1.2px),
             var(--bk-hatch-fill,#FFFFFF) var(--bk-hatch-w,1.2px) var(--bk-hatch-gap,6px))}

/* legend */
.mm-legend{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 30px;margin:0 0 22px}
.mm-ramp{width:200px;flex:none}
.mm-ramp-cap{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.mm-ramp-bar{display:block;height:10px;border-radius:2px;background:var(--bk-seq);
             box-shadow:inset 0 0 0 1px rgba(18,21,20,.12)}
.mm-ramp-ticks{position:relative;display:block;height:16px;margin-top:3px}
.mm-ramp-ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:12px;color:var(--muted);
                    font-variant-numeric:tabular-nums}
.mm-keys{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--ink);padding-bottom:18px}
.mm-keys span{display:inline-flex;align-items:center;gap:7px}
.mm-k{display:inline-block;width:18px;height:18px;border-radius:50%;box-sizing:border-box;
      border:var(--bk-thin-stroke,2.5px) solid;box-shadow:0 0 0 1px rgba(18,21,20,.3)}

/* views: map left 55%, strip right; stacked on a phone */
.mm-views{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:28px clamp(24px,3.5vw,44px);
          align-items:start}
.mm-col{min-width:0}
.mm-map{position:relative}
.mm-svg{display:block;overflow:visible}
.mm-mk{cursor:pointer;outline:none}
.mm-mk:focus-visible .mm-edge{stroke:var(--bk-bronze,var(--bronze));stroke-width:2;stroke-opacity:1}
.mm-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.mm-lab{position:absolute;white-space:nowrap;font-size:12.5px;line-height:1;padding:3px 5px;border-radius:3px;
        background:rgba(255,255,255,.92);color:var(--ink)}
.mm-lab b{font-weight:500}
.mm-lab em{font-style:normal;font-weight:600;margin-left:4px;font-variant-numeric:tabular-nums}
.mm-lab.review em{font-weight:400;color:var(--muted)}
.mm-mapnote{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.mm-mapnote:empty{display:none}
.mm .tip b,.mm .tip span{white-space:nowrap}

/* ranked strip */
.mm-rows{position:relative;transition:height .3s ease}
.mm-sgrid{position:absolute;left:0;right:var(--gut);top:0;bottom:0;pointer-events:none;z-index:0}
.mm-row{position:absolute;left:0;right:0;height:var(--row);z-index:1;transition:top .3s ease,opacity .3s ease}
.mm-rhead{display:flex;align-items:baseline;gap:8px;height:24px;padding-top:3px;min-width:0}
.mm-name{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.mm-zone{font-size:12px;color:var(--muted);white-space:nowrap}
.mm-chip{margin-left:auto;font-size:12px;line-height:1;padding:3px 6px;border-radius:3px;white-space:nowrap;
         background:var(--bk-paper2,var(--paper2));color:var(--ink)}
.mm-chip.thin{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--bk-baseline,#C2C7C4)}
.mm-track{position:relative;height:18px;margin-right:var(--gut)}
.mm-bar{position:absolute;left:0;top:2px;height:14px;width:var(--w);box-sizing:border-box;
        border:0 solid transparent;border-radius:0 4px 4px 0;box-shadow:0 0 0 1px rgba(18,21,20,.16);
        transition:width .3s ease,background-color .3s ease,border-color .3s ease}
.mm-val{position:absolute;left:var(--w);top:50%;transform:translateY(-50%);margin-left:8px;font-size:12.5px;
        font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;transition:left .3s ease}
.mm-saxis{position:relative;height:18px;margin:6px var(--gut) 0 0}
.mm-saxis span{position:absolute;top:0;transform:translateX(-50%);font-size:12px;color:var(--muted);
               font-variant-numeric:tabular-nums}
.mm-scap{font-size:12px;color:var(--muted);margin:4px 0 0}

/* pair ribbon */
.mm-pair{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.mm-pair-lead{font-size:15.5px;color:var(--ink);max-width:62ch;margin:0 0 6px;line-height:1.55}
.mm-pair-key{font-size:12.5px;color:var(--muted);max-width:70ch;margin:0 0 12px;line-height:1.5}
.mm-pairbox{position:relative;max-width:760px}
.mm-pairbox svg{display:block}
.mm-players{position:absolute;inset:0}
.mm-plab{position:absolute;font-size:12px;line-height:1;color:var(--muted);white-space:nowrap;
         font-variant-numeric:tabular-nums;pointer-events:none}
.mm-plab.tick{transform:translateY(-50%);text-align:right}
.mm-plab.mon{transform:translateX(-50%);color:var(--ink)}
.mm-plab.ratio{transform:translateY(-50%);font-size:12.5px;font-weight:600;color:var(--bk-bronze-tx,#957A4C)}
.mm-pcol{position:absolute;top:0;bottom:0;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer}
.mm-pcol:hover{box-shadow:inset 0 0 0 1px var(--line)}

/* numbers table */
.mm-tblwrap{overflow-x:auto}
.mm-fig .tbl table{max-width:none;min-width:560px}
.mm-fig .fig-n,.mm-fig .tbl th{font-size:12px}
.mm-table caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--muted);padding:0 0 4px}
.mm-thin{font-size:12px;color:var(--muted)}

/* lead-report strip */

@media (max-width:860px){
  .mm-views{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .mm-months{flex-direction:column;gap:10px}
  .mm-mrow{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mm-step span{display:none}
  .mm-step,.mm-step.next{padding:0 12px}
  .mm{--gut:58px}
}
@media (max-width:520px){
  /* phone rows: name and depth chip on the first line, zone tag under the name */
  .mm{--row:58px}
  .mm-rhead{flex-wrap:wrap;height:auto;row-gap:0;line-height:1.3}
  .mm-name{order:1}
  .mm-chip{order:2}
  .mm-zone{order:3;flex-basis:100%}
}
.mm-plab.mon{white-space:pre;text-align:center;line-height:1.25}
.mm-plab.ratio.under{transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){
  .mm *{transition:none!important}
}
@media print,(forced-colors:active){
  .mm-m:disabled{background:none}
  .mm .tip{display:none}
}

/* crisis window */
/* Publisher's statement figure (assets/crisis-window.js). The canvas takes its
   colours from birkdal-chart-theme.js; these rules style the HTML around it:
   unit toggle, legend, event key, tooltip body and table. */
.fig.cw-fig{max-width:none}
.cw{position:relative}
.cw-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:0 0 12px}
.cw-units{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:none}
.cw-unit{min-height:42px;padding:0 14px;border:0;background:#FFFFFF;color:var(--forest);
         font:500 13px/1 var(--sans);cursor:pointer}
.cw-unit + .cw-unit{border-left:1px solid var(--line)}
.cw-unit:hover{background:var(--paper2)}
.cw-unit[aria-pressed="true"]{background:var(--forest);color:var(--paper)}
.cw-unitlab{font-size:12.5px;color:var(--muted)}
.cw-legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 8px;padding:0;
           font-size:12.5px;color:var(--ink)}
.cw-legend li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cw-legend svg{flex:none}
.cw-chart{position:relative;width:100%;height:540px;border-radius:4px}
.cw-chart:focus{outline:none}
.cw-chart:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.cw-hint{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.cw-events{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
           display:grid;gap:7px;font-size:13.5px;color:var(--ink);max-width:70ch}
.cw-events li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:baseline}
.cw-events b{font-weight:600;color:#957A4C;font-variant-numeric:tabular-nums}
.cw-events time{color:var(--muted);margin-right:8px;white-space:nowrap}
.cw-events a{color:var(--forest);border-bottom:1px solid var(--bronze);margin-left:8px;font-size:12.5px}
.cw-read{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cw-nojs{font-size:13px;color:var(--muted);margin:8px 0}

/* tooltip body (ECharts places it inside .cw-chart) */
.cw-t{font-weight:600;font-size:13px;margin-bottom:4px;white-space:nowrap}
.cw-t2{display:flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap;margin-top:2px}
.cw-t3{font-size:12px;color:#AFB8B2;white-space:nowrap;margin-top:2px}
.cw-k{display:inline-block;flex:none;width:9px;height:9px;box-sizing:border-box;background:#DCE0DC}
.cw-k.circle{border-radius:50%}
.cw-k.diamond{transform:rotate(45deg) scale(.78)}
.cw-k.hollow{background:transparent;border:2px solid #DCE0DC}

/* numbers table */
.cw-tblwrap{overflow-x:auto}
.cw-fig .tbl table{max-width:none;min-width:640px}
.cw-fig .fig-n,.cw-fig .tbl th{font-size:12px}
.cw-table td.na{color:var(--muted)}
.cw-table td small{font-size:12px;color:var(--muted)}
.cw-table caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--muted);padding:0 0 4px}

@media (max-width:600px){
  .cw-chart{height:470px}
  .cw-legend{gap:5px 14px}
}
@media print,(forced-colors:active){
  .cw-chart{height:auto;min-height:0}
}

/* freight split */
/* RN 001 Figure 2 (assets/freight-split.js). The canvas takes its colours from
   birkdal-chart-theme.js; these rules style the HTML around it. */
.fs{position:relative}
.fs-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin:0 0 6px}
.fs-toggle{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.fs-btn{min-height:42px;padding:6px 14px;border:0;background:#FFFFFF;color:var(--forest);
        font:500 13px/1.25 var(--sans);cursor:pointer}
.fs-btn + .fs-btn{border-left:1px solid var(--line)}
.fs-btn:hover{background:var(--paper2)}
.fs-btn[aria-pressed="true"]{background:var(--forest);color:var(--paper)}
.fs-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--ink)}
.fs-legend li{display:inline-flex;align-items:center;gap:7px}
.fs-sw{display:inline-block;flex:none;width:18px;height:12px;border-radius:2px}
.fs-sw.haul{background:var(--forest)}
.fs-sw.rest{background:repeating-linear-gradient(45deg,#BFCEC6 0 1.5px,#E2E8E4 1.5px 6px);
            box-shadow:inset 0 0 0 1px rgba(18,21,20,.12)}
.fs-note{min-height:1.6em;margin:6px 0 0;font-size:14px;font-weight:500;color:var(--ink)}
.fs-chart{width:100%;height:210px;overflow:hidden}
.fs-chart:focus{outline:none}
.fs-chart:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.fs-read{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fs-nojs{font-size:13px;color:var(--muted);margin:8px 0}
.fs-rest{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--ink)}
.fs-rest p{margin:0 0 4px}
.fs-rest ul{margin:0 0 0 20px;padding:0}
.fs-rest li{margin-bottom:2px}
.fs-rest a.link{color:var(--forest);border-bottom:1px solid var(--bronze)}
.fs-t{font-weight:600;font-size:13px;margin-bottom:2px}
.fs-t2{font-size:12.5px;line-height:1.4}
.fs-tblwrap{overflow-x:auto}
.fs-fig .tbl table{max-width:none;min-width:560px}
.fs-fig .fig-n,.fs-fig .tbl th{font-size:12px}

@media (max-width:600px){
  .fs-top{flex-direction:column;align-items:stretch}
  .fs-toggle{display:flex}
  .fs-btn{flex:1 1 0}
  .fs-chart{height:230px}
}
@media (prefers-reduced-motion:reduce){
  .fs *{transition:none!important}
}

/* ==========================================================================
   2  MATERIAL - contour paper, the dark plate, furniture (was editorial.css)
   ========================================================================== */

/* ==========================================================================
   1  CONTOUR PAPER
   The ground was one flat cream. It is now warm paper with a contour field
   pressed into it at 3.5% - land, which is what the company is about, and
   the same figure as the mark. Fixed attachment so the page reads as one
   sheet moving under the type rather than a stack of tinted boxes.
   ========================================================================== */

body {
  background-color: var(--paper);
  background-image: none;
  background-repeat: no-repeat;
}
/* The contour rides on its own fixed layer at 3.5%, below all content and
   above the page ground. Sections that carry their own background simply
   cover it, which is the intent - the texture belongs to the open paper. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: var(--contour);
  background-size: 600px 600px;
  opacity: .018;
}

/* Tinted bands lift off the sheet instead of merely changing colour. */
.tint {
  background: var(--paper2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}

/* ==========================================================================
   2  MASTHEAD PLATE
   Every interior page opened on cream type on cream ground - no arrival.
   .pagehead is now a dark plate: the page states itself, then hands over to
   the reading surface. It also rhymes with the front door without borrowing
   its machinery - no canvas, no script, no scroll dependency.
   ========================================================================== */

.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The highlight is held at .40. At .55 its brightest point composites to
     ~#214D39 and the breadcrumb falls to 3.78:1 - the plate would have been
     handsome and unreadable. At .40 every element on it clears AA. */
  background: var(--plate);
  border-bottom: 0;
  padding: clamp(52px, 8vw, 96px) 0 clamp(38px, 5.5vw, 60px);
  margin-bottom: 0;
}
.pagehead::before {                 /* the contour field, gold, on the plate */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--contour-gold);
  background-size: 600px 600px;
  opacity: .045;
  -webkit-mask-image: linear-gradient(105deg, transparent 18%, #000 72%);
  mask-image: linear-gradient(105deg, transparent 18%, #000 72%);
}
.pagehead::after {                             /* the bronze plate edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--bronze);
}
.pagehead h1 {
  color: var(--paper);
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}
.pagehead .eyebrow { color: var(--bronze-lt); }
.pagehead p.lead {
  color: #C7D6CA;
  border-left: 2px solid rgba(166, 135, 90, .55);
  padding-left: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(20px, 2.6vw, 28px);
}
.pagehead .crumb { color: #B3BBB5; }          /* 5.7:1 on the plate's lightest point */
.pagehead .crumb a { color: #C9D6CB; border-bottom-color: rgba(201, 174, 130, .45); }
.pagehead .crumb a:hover { color: var(--paper); }

/* The sub-navigation sits directly under the plate and reads as its footer
   rail rather than as the first thing on the paper. */
 .pagehead + .subnav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   3  DISPLAY CUT
   Fraunces carries an optical-size axis and site.css was leaving it on the
   default. Below, anything set large is driven to opsz 144 - the display cut,
   with the fine hairlines and high stroke contrast that makes a serif look
   drawn rather than typed. Body text stays at the text cut, where it belongs.
   ========================================================================== */

 h1,
.contact h2,
h2.title {
  letter-spacing: -0.026em;
}
 h2,
.entry h3,
.pillar h3,
.stage h3 {
}
.prose h2 { letter-spacing: -0.02em; }

/* Numerals that sit in columns must not dance. */
 table.dt td,
.kv dd,
.fig-plot,
.entry .meta {
  font-variant-numeric: tabular-nums;
}

/* The eyebrow gets a rule, so a section announces itself. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--rule-gold);
}
.dark .eyebrow::after {
  background: var(--bronze-lt);
}
.pagehead .eyebrow::after {
  background: var(--bronze-lt);
}
/* .contact centres its own text; a flex eyebrow would left-align inside it,
   and the trailing rule would hang off one side. */
.contact .eyebrow { justify-content: center; }
.contact .eyebrow::after { display: none; }

/* Links in running text: the underline is bronze and thickens on hover,
   instead of a flat border that reads as a mistake. */
.prose a.link, .prose p a, .fineprint a {
  text-decoration: underline;
  text-decoration-color: rgba(166, 135, 90, .55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  border-bottom: 0;
  transition: text-decoration-color .2s, color .2s;
}
.prose a.link:hover, .prose p a:hover, .fineprint a:hover {
  color: var(--forest);
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   4  FURNITURE
   ========================================================================== */

/* ---- the note / disclosure block ----
   25 of these across the site and they were the plainest thing on the page.
   Now a printed sidebar: tinted, ruled, with the label sitting on the rule. */
.note {
  position: relative;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bronze);
  border-radius: 0 8px 8px 0;
  box-shadow: var(--shadow-sm);
}
.note h4 {
  display: inline-block;
  background: var(--bronze);
  color: #fff;
  padding: 4px 10px 5px;
  border-radius: 3px;
  letter-spacing: .14em;
}
.note.warn { border-left-color: #8A2F2F; }
.note.warn h4 { background: #8A2F2F; }

/* ---- figures ---- */
.fig, .figslot {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(20px, 2.8vw, 30px);
  box-shadow: var(--shadow-sm);
  border-top: 1px solid var(--line);
}
.fig { max-width: none; margin: clamp(32px, 4vw, 46px) 0; }
.fig-n { color: var(--bronze); }
.fig-head b { }

/* ---- tables ---- */
.tablewrap {
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  border-color: var(--line);
}
table.dt th {
  background: var(--paper2);
  color: var(--forest);
  border-bottom: 1px solid #CED3D0;
}
table.dt tbody tr { transition: background-color .15s; }
table.dt tbody tr:hover { background: rgba(166, 135, 90, .05); }

/* ---- process stages: the numeral becomes the ornament ---- */
.stage { border-top-color: var(--line); }
.stage .marker .n {
  font-size: clamp(40px, 5vw, 54px);
  line-height: .95;
}
/* Outlined numerals only where the stroke is actually supported - otherwise
   colour:transparent would erase them. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .stage .marker .n {
    color: transparent;
    -webkit-text-stroke: 1px var(--bronze);
  }
}

/* ---- cards get depth, not decoration ---- */
 .pillar,
.sidecard {
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s, border-color .28s;
}
 .pillar,
.sidecard:not(.dark-card) {
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
 .pillar:hover,
.sidecard:not(.dark-card):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(166, 135, 90, .42);
}
.sidecard.dark-card {
  background: var(--plate);
  box-shadow: var(--shadow-md);
}

/* ---- the publication index ----
   A list of research should read like a contents page: the row is the target,
   the rule under it is the affordance. */
.entry {
  position: relative;
  transition: background-color .22s;
}
.entry::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--bronze);
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.entry:hover::after { width: 100%; }
.entry:hover { background-color: rgba(255, 255, 255, .7); }
.entry .meta .kind { color: var(--bronze); }

/* ---- dark bands stop being flat forest ----
   Depth here costs contrast: site.css set --on-dark-dim against a flat
   #1F3A30, and a lighter gradient plus a strong highlight dropped it to
   3.6:1. The gradient is kept at or below forest, the highlight held to .28,
   and the dim tone lifted - together they restore 5.4:1. */
.dark, section.band.dark {
  background: var(--forest);
  position: relative;
  isolation: isolate;
  --on-dark-dim: #AFB8B2;
}
.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--contour-gold);
  background-size: 600px 600px;
  opacity: .04;
  -webkit-mask-image: linear-gradient(150deg, transparent 22%, #000 78%);
  mask-image: linear-gradient(150deg, transparent 22%, #000 78%);
}
.edge .e { position: relative; padding-top: 20px; border-top: 1px solid rgba(201, 174, 130, .3); }
.edge .e::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 34px; height: 2px;
  background: var(--bronze-lt);
}

/* ---- footer ---- */
footer {
  background: var(--plate);
  position: relative;
  isolation: isolate;
  --on-dark-dim: #AFB8B2;      /* same correction as the dark bands, 5.5:1 */
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--contour-gold);
  background-size: 600px 600px;
  opacity: .06;
}
footer .word { }

/* ---- contact ---- */
.contact .mail {
  border-bottom-width: 2px;
  transition: border-color .2s, color .2s;
}
.contact .mail:hover { border-bottom-color: var(--forest); }

/* ---- buttons: a little more substance ---- */
.btn {
  box-shadow: 0 1px 2px rgba(20, 30, 25, .18), 0 8px 20px -12px rgba(20, 30, 25, .55);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ---- the section rule keeps its weight but gains the plate's accent ---- */
.secrule { position: relative; }
.secrule::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 64px; height: 2px;
  background: var(--bronze);
}

/* ==========================================================================
   RESPECT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
   .pillar,
.sidecard,
.entry::after,
.btn { transition: none; }
   .pillar:hover,
.sidecard:hover,
.btn:hover { transform: none; }
}

/* The fixed contour costs a repaint on every scroll frame on mobile GPUs,
   and buys least there - it is the one surface small screens do without. */
@media (max-width: 700px) {
  body { background-attachment: scroll, scroll, scroll; }
  .pagehead::before, .dark::before, footer::before { opacity: .06; }
}

@media print {
  body { background: #fff; }
  body::before, .pagehead::before, .dark::before, footer::before { display: none; }
  .pagehead { background: #fff; }
  .pagehead h1, .pagehead p.lead { color: #000; }
}

/* ==========================================================================
   5  THE MOBILE MENU
   site.css hid the primary links below 900px and put nothing in their place,
   so phones had no navigation at all. Two states below the breakpoint:

     no JS       the links are restored and the header wraps to two rows.
                 Plainer, but reachable - navigation must not depend on a
                 script that might not arrive.
     html.nav-js the links become a disclosure panel behind a toggle, which
                 nav.js adds in the same pass that sets the class.
   ========================================================================== */

.navtoggle { display: none; }

@media (max-width: 900px) {

  /* ---- the fallback: undo site.css's blanket hide ----
     .navlinks is a flex row that never wrapped, because site.css only ever
     had one visible child down here. Restoring five children without also
     letting it wrap overflows the viewport at 375px. */
  .navlinks a:not(.btn) { display: inline-flex; }
  .navlinks { flex-wrap: wrap; row-gap: 10px; column-gap: 18px; }
  .nav { flex-wrap: wrap; height: auto; padding-block: 14px; row-gap: 12px; }

  /* ---- the enhanced layout ---- */
  html.nav-js .nav { flex-wrap: nowrap; height: 74px; padding-block: 0; }
  html.nav-js .navlinks a:not(.btn) { display: flex; }

  html.nav-js .navtoggle {
    display: block;
    position: relative;
    width: 46px;
    height: 46px;
    margin-right: -11px;          /* optical: aligns the bars to the gutter */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .navtoggle span {
    position: absolute;
    left: 12px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--forest);
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s, background-color .35s;
  }
  .navtoggle span:nth-child(1) { top: 16px; }
  .navtoggle span:nth-child(2) { top: 22px; }
  .navtoggle span:nth-child(3) { top: 28px; }
  .navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* The bars invert while the dark menu panel is open. */
  body.nav-open .navtoggle span { background: #E9ECEA; }

  /* ---- the panel ----
     absolute, not fixed: header carries backdrop-filter, which makes it the
     containing block for fixed descendants, so position:fixed would resolve
     against the header rather than the viewport. The header is sticky at the
     top, so absolute + top:100% lands in the same place and cannot drift. */
  html.nav-js .navlinks {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px clamp(20px, 5vw, 32px) calc(22px + env(safe-area-inset-bottom, 0px));
    background: var(--plate);
    border-bottom: 2px solid var(--bronze);
    box-shadow: 0 34px 64px -34px rgba(0, 0, 0, .72);
    max-height: calc(100dvh - var(--hdr));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* No body scroll lock - overflow:hidden on body is unreliable on iOS and
       fights the homepage's sticky stage. Instead a scroll that starts in the
       panel stays in the panel rather than chaining through to the page. */
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    /* Closing: fade first, drop visibility only once the fade has finished. */
    transition: opacity .26s ease, transform .26s cubic-bezier(.22,.61,.36,1),
                visibility 0s linear .26s;
  }
  /* Opening: visibility flips at once, with no delay. Transitioning it both
     ways left the panel visibility:hidden for its first frame, where focus()
     is a silent no-op - the menu opened with keyboard focus stranded on the
     toggle behind it. */
  html.nav-js .navlinks.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .26s ease, transform .26s cubic-bezier(.22,.61,.36,1),
                visibility 0s linear 0s;
  }

  html.nav-js .navlinks a {
    min-height: 54px;                       /* comfortably over the 44px floor */
    align-items: center;
    color: #D8E2DA;
    font-size: 17px;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(201, 174, 130, .16);
    transition: color .18s, padding-left .18s;
  }
  html.nav-js .navlinks a:hover { color: #fff; padding-left: 4px; }
  html.nav-js .navlinks a[aria-current="page"] {
    color: var(--bronze-lt);
    font-weight: 500;
  }
  /* the call to action keeps its weight, full width at the foot of the panel */
  html.nav-js .navlinks a.btn {
    justify-content: center;
    margin-top: 18px;
    min-height: 52px;
    border-bottom: 0;
    background: var(--bronze-lt);
    color: var(--plate-deep);
    font-size: 15.5px;
    font-weight: 600;
  }
  html.nav-js .navlinks a.btn:hover { background: #D2BA8E; color: var(--plate-deep); padding-left: 0; }

  /* While the panel is open the header goes solid so the two read as one
     surface, whatever is scrolling underneath. */
  body.nav-open header {
    background: var(--plate);
    border-bottom-color: transparent;
  }
  body.nav-open .brand .word { color: var(--paper); }
  body.nav-open .brand .word small { color: var(--bronze-lt); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html.nav-js .navlinks { transition: none; }
  .navtoggle span { transition: none; }
  html.nav-js .navlinks a:hover { padding-left: 0; }
}

/* ==========================================================================
   3  REVEAL - the Library fade-in, gated on html.reveal-on (was cinema.css; nothing else kept)
   ========================================================================== */

html.reveal-on .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .66s cubic-bezier(.22, .61, .36, 1),
              transform .66s cubic-bezier(.22, .61, .36, 1);
}
html.reveal-on .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   4  REGISTER - flat surfaces, controls, imagery, tone pass (was design.css)
   ========================================================================== */

/* ==========================================================================
   1  TOKENS
   Bronze #A6875A measures 2.90:1 on paper, so every eyebrow and kind label
   set in it was under AA. --bronze-text (5.48:1 on paper, 5.07 on paper2)
   carries small text; --bronze stays for rules, marks and accents only.
   ========================================================================== */

/* ==========================================================================
   2  SURFACES
   ========================================================================== */

/* tinted bands: one flat tone, no gradient */
.tint { background: var(--paper2); }

/* header: solid paper, a hairline, no frosted glass */
header {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
/* .navlinks a (0,1,1) outranked .btn and greyed the button label */
.navlinks a.btn, .navlinks a.btn:hover { color: var(--paper); }
@media (min-width: 901px) {
  .navlinks a:not(.btn) { position: relative; padding: 8px 0; color: #3A3F3D; }
  .navlinks a:not(.btn):hover { color: var(--forest); }
  .navlinks a[aria-current="page"] { color: var(--forest); }
  .navlinks a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--bronze);
  }
}

/* cards: flat, ruled, still on hover */
 .pillar,
.sidecard:not(.dark-card) {
  background: var(--paper);
  box-shadow: none;
  border-radius: var(--radius);
}
 .pillar:hover,
.sidecard:not(.dark-card):hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line-strong);
}
.sidecard { border-radius: var(--radius); }
.sidecard.dark-card { box-shadow: none; }

.note {
  background: var(--paper2);
  box-shadow: none;
  border-radius: 0;
  border-left-width: 2px;
}
.note h4 {                       /* was white on bronze: 3.22:1 */
  display: block;
  background: none;
  color: var(--bronze-text);
  padding: 0;
  border-radius: 0;
  letter-spacing: .16em;
}
.note.warn h4 { background: none; color: #8A2F2F; }

.fig, .figslot {
  border-radius: var(--radius);
  box-shadow: none;
  background: #FFFFFF;
}
.tablewrap { border-radius: var(--radius); box-shadow: none; }
table.dt th {
  background: var(--paper2);
  color: var(--forest);
  border-bottom: 1px solid var(--line-strong);
}
table.dt td { font-variant-numeric: tabular-nums; }
table.dt tbody tr:hover { background: rgba(20, 30, 25, .035); }

 .pagehead + .subnav {
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   3  TYPE
   ========================================================================== */
body { line-height: 1.68; }

 .eyebrow,
.entry .meta .kind,
.fig-n,
.sidecard h4,
.pillar .kicker,
.step .n,
.docsec > .num,
.figslot > figcaption,
.parts em,
.xyl.case.b,
.xyl.zone,
.cw-events b,
.mm-plab.ratio {
  color: var(--bronze-text);
}
/* struck-through schema fields: dim, but still readable (was 2.78:1) */

/* outlined stage numerals: the stroke is the glyph, so it carries the contrast */
@supports (-webkit-text-stroke: 1px currentColor) {
  .stage .marker .n { -webkit-text-stroke-color: var(--bronze-text); }
}
.eyebrow { letter-spacing: .18em; font-size: 11.5px; }

.pagehead { padding: clamp(60px, 9vw, 116px) 0 clamp(40px, 5.5vw, 64px); }
.pagehead h1 {
  font-size: clamp(34px, 5.4vw, 64px);
  max-width: 20ch;
  margin-top: 18px;
}
.pagehead p.lead {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.62;
  max-width: 60ch;
  border-left-width: 1px;
}

h2.title { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; }

.prose { max-width: 66ch; }
.prose p, .docsec p { line-height: 1.75; }
.prose h2 { margin-top: clamp(56px, 6.4vw, 80px); }
.docsec { margin-top: clamp(64px, 8vw, 96px); padding-top: 22px; }
.docsec > h2 { font-size: clamp(28px, 3.4vw, 40px); }

.entry h3 { font-weight: 400; line-height: 1.2; }
.entry p { line-height: 1.65; }
.secrule { border-bottom-width: 1px; padding-bottom: 12px; }
.secrule h2 { font-size: clamp(22px, 2.4vw, 28px); }

.contact h2 { max-width: 20ch; line-height: 1.08; }

/* ==========================================================================
   3b WEIGHTS from the Montserrat period (2026-09-17 to 09-28). Section 5
   (TYPE) resets the faces and display weights; the weights below still hold
   wherever section 5 does not restate them.
   ========================================================================== */
body { font-size: 16px; line-height: 1.72; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; }

.pagehead h1 {
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
}
h2.title, .contact h2 {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.026em;
}
.prose h2, .docsec > h2 {
  font-size: clamp(23px, 2.7vw, 32px);
  font-weight: 700;
  letter-spacing: -0.022em;
}

.secrule h2 { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; }
.entry h3 { font-size: clamp(18px, 1.9vw, 22px); font-weight: 600; }
 .stage h3,
.pillar h3,
.prose h3,
.docsec h3 { font-weight: 600; }
.fig-head b, .mm-now b { font-weight: 600; }
 .pagehead p.lead,
.hero-i .claim { font-weight: 400; }
.pagehead p.lead { font-size: clamp(16px, 1.45vw, 18px); line-height: 1.7; }

.brand .word { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
footer .word { font-weight: 700; }
.contact .mail { font-weight: 600; }
 .edge .e b { font-weight: 600; }

.stage .marker .n { font-weight: 600; }

/* ==========================================================================
   4  CONTROLS
   ========================================================================== */
.btn {
  border-radius: 3px;
  box-shadow: none;
  letter-spacing: .01em;
  padding: 13px 22px;
}
.btn:hover, .btn:active { transform: none; }
.btn.light { box-shadow: none; }

/* library filters: text tabs on a rule, not pills */

 .entry .foot a { transition: color .2s; }
 .link { text-underline-offset: 3px; }

/* ==========================================================================
   5  HOMEPAGE - the hero
   The masthead copy that used to sit inside Act I, set as a research
   house sets its front page: large type, one rule, one photograph.
   ========================================================================== */
.hero-i { padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6.4vw, 88px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 440px);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero-i .kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze-text);
}
.hero-i .kicker::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--rule-gold);
}
.hero-i h1 {
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--forest);
  max-width: 19ch;
  margin: 26px 0 0;
  text-wrap: balance;
}
.hero-i .claim {
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.7;
  color: var(--muted);
  max-width: 50ch;
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
}
.hero-media { margin: 0; border-top: 3px solid var(--bronze); }
.hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;              /* landscape: sits level with the title */
  object-fit: cover;
  object-position: 50% 40%;
  background: var(--paper2);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-media img { aspect-ratio: 3 / 2; object-position: 50% 62%; }
}

/* ==========================================================================
   6  READING - contents rail and progress rule (assets/reading.js)
   Long documents only. The rail is built from the page's own h2s, so it adds
   no copy. Neither element moves inside the reading column.
   ========================================================================== */
html.has-progress header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--bronze);
  transform-origin: 0 50%;
  transform: scaleX(var(--read, 0));
  pointer-events: none;
}
.rail { display: none; }
/* Shown only where the left margin can hold it, so the reading column stays
   on the same line as the page head and the header above it. */
@media (min-width: 1520px) {
  .wrap.has-rail { position: relative; }
  .rail {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    margin-right: 16px;
    width: min(220px, calc((100vw - 1120px) / 2 - 40px));
  }
  .rail nav {
    position: sticky;
    top: 150px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .rail a {
    display: block;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--muted);
    padding: 7px 0 7px 15px;
    border-left: 1px solid var(--line);
    transition: color .2s, border-color .2s;
  }
  .rail a:hover { color: var(--forest); border-left-color: var(--line-strong); }
  .rail a[aria-current="true"] {
    color: var(--forest);
    border-left: 2px solid var(--bronze);
    padding-left: 14px;
  }
}

/* ==========================================================================
   7  IMAGERY
   Photographs run in their own colours (duotone retired 2026-09-28); crop
   and size come from tools/build_photos.py. Decorative and uncaptioned.
   ========================================================================== */
.photoband {
  margin: 0;
  height: clamp(160px, 22vw, 320px);
  overflow: hidden;
  background: var(--plate);
  border-bottom: 1px solid var(--line);
}
.photoband img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.pagehead.has-media .ph-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.ph-media { margin: 0; border-top: 2px solid var(--bronze-lt); }
.ph-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}
/* .media-lg: a larger portrait photo for a page whose image has to show
   what the people in it are doing (Forward supply). Type steps down to
   make the room. */
.pagehead.media-lg .ph-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
  align-items: center;
}
@media (min-width: 901px) {             /* stacked below that: no need */
  .pagehead.media-lg h1 { font-size: clamp(32px, 3.4vw, 44px); }
  .pagehead.media-lg p.lead { font-size: clamp(16px, 1.3vw, 17px); }
}
.pagehead.media-lg .ph-media img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .pagehead.has-media .ph-grid { grid-template-columns: 1fr; }
  .ph-media { max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
   .rail a { transition: none; }
}
@media print {
  .rail, .photoband, .hero-media, .ph-media { display: none; }
  html.has-progress header::after { display: none; }
}

/* ==========================================================================
   TONE PASS (2026-09-23) - headings in ink
   Green is kept for the dark bands, buttons, links and the active state;
   on white the headings and display figures are near-black. That leaves
   the green scarce, which makes it read as a brand colour rather than the
   colour of everything.
   ========================================================================== */
 .hero h1,
.masthead h1,
h2.title,
.secrule h2,
.docsec > h2,
.docsec h3,
.prose h3,
.entry h3,
.stage h3,
.step h3,
.pillar h3,
.kv dt,
table.dt th,
table.dt td b,
.fig-head b {
  color: var(--ink);
}
/* ...but never on a dark surface: those keep paper, as site.css set them. */
:is(.dark, .pagehead, footer, .dark-card) :is(h1, h2, h3, h4, b, dt, th) { color: var(--paper); }

/* ==========================================================================
   About page: tighter rhythm between sections (2026-09-23).
   ========================================================================== */
.about section.band { padding: clamp(40px, 5vw, 64px) 0; }
.about .prose h2 { margin-top: clamp(32px, 3.6vw, 44px); }
.about .pillars { margin-top: clamp(32px, 3.6vw, 44px); }
.about .contact { padding: clamp(48px, 6vw, 72px) 0; }

/* Homepage lines of business: full-width cards stacked (2026-09-25).
   On wide screens each card runs as a row, title left, text and link right. */
.pillars.stacked { grid-template-columns: 1fr; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 901px) {
  .pillars.stacked .pillar {
    display: grid;
    grid-template-columns: minmax(0, 18rem) 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    padding: clamp(32px, 3.6vw, 44px);
  }
  .pillars.stacked .pillar .kicker { grid-column: 1; grid-row: 1; }
  .pillars.stacked .pillar h3 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .pillars.stacked .pillar p { grid-column: 2; grid-row: 1 / 3; align-self: end; font-size: 17px; margin: 0; }
  .pillars.stacked .pillar .more { grid-column: 2; grid-row: 3; margin-top: 18px; justify-self: start; align-self: start; }
}

/* One photograph per line of business (2026-09-28): a third column on wide
   screens, above the kicker on narrow ones. True colour, 3:2, no overlay. */
.pillar-media { margin: 0 0 22px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--paper2); }
.pillar-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 901px) {
  /* Equal flexible rows above and below the text, so the text block sits
     on the photo's vertical centre rather than its top edge. */
  .pillars.stacked .pillar {
    grid-template-columns: minmax(0, 16rem) 1fr minmax(0, 20rem);
    grid-template-rows: 1fr auto auto auto 1fr;
  }
  .pillars.stacked .pillar .kicker { grid-row: 2; }
  .pillars.stacked .pillar h3 { grid-row: 3; }
  .pillars.stacked .pillar p { grid-row: 2 / 4; }
  .pillars.stacked .pillar .more { grid-row: 4; }
  .pillars.stacked .pillar .pillar-media { grid-column: 3; grid-row: 1 / 6; align-self: center; margin: 0; }
}
@media print { .pillar-media { display: none; } }

/* ==========================================================================
   Footer: the column headings sit on the line of the wordmark, not the
   mark above it. Offset = mark (28px) + its margin (14px) + half the
   difference between the wordmark line (33px) and a heading line (19px).
   ========================================================================== */
@media (min-width: 901px) {
  .foot { grid-template-columns: 1.4fr 1fr 1fr; }   /* three columns since Practices was removed */
  .foot > div:not(:first-child) { padding-top: 49px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .foot > div:nth-child(2) { padding-top: 49px; }
}

/* ==========================================================================
   Symbol anatomy (Methodology 08): symbols are delimited, so the full
   stops and the spread slash sit between the underlined parts, unruled.
   ========================================================================== */
.sym { align-items: flex-end; gap: 2px; }
.sym i { font-style: normal; color: var(--muted); padding: 6px 0 14px; }
@media (max-width: 560px) {
  .sym { font-size: 22px; }
  .sym span { padding: 4px 4px 8px; }
  .sym i { padding: 4px 0 11px; }
}

/* ==========================================================================
   5  TYPE - Fira Sans and Fira Sans Extra Condensed (was type.css)
   ========================================================================== */

body { font-size: 17px; line-height: 1.66; }

h1, h2 { font-weight: 400; letter-spacing: 0; }
h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

.pagehead h1 {
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.04;
}
h2.title, .contact h2 {
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
}
.prose h2, .docsec > h2 {
  font-size: clamp(27px, 3.1vw, 38px);
  font-weight: 500;
  letter-spacing: 0;
}
.hero-i h1 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 400; letter-spacing: 0; line-height: 1.04; }
.hero h1, .masthead h1 { font-weight: 400; letter-spacing: 0; }

.secrule h2 { font-size: clamp(22px, 2.2vw, 26px); font-weight: 500; letter-spacing: 0; }
.entry h3 { font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; }

/* big figures in the display face, tracked open */

/* the wordmark keeps its original face */
.brand .word, footer .word { font-family: var(--brand); }

/* tabular figures wherever numbers line up */
 table,
.dt,
.fig,
.fig-head { font-variant-numeric: tabular-nums lining-nums; }

/* ==========================================================================
   6  COMPOSITION - page heads, folios, homepage, grids (was refine.css)
   ========================================================================== */

/* ==========================================================================
   1  PLATE
   The breadcrumb and the page label become one running head on a hairline,
   as a research house sets a section front. The headline then gets the
   scale the plate was built for.
   ========================================================================== */
.pagehead { padding: clamp(28px, 4vw, 44px) 0 clamp(52px, 7.5vw, 104px); }

.pagehead > .wrap:not(.ph-grid),
.pagehead .ph-grid > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0;
  align-items: end;
}
.pagehead > .wrap:not(.ph-grid) > *,
.pagehead .ph-grid > div > * { grid-column: 1 / -1; }

.pagehead .crumb,
.pagehead .eyebrow {
  grid-row: 1;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--plate-rule);
  font-size: 13px;
  line-height: 1.3;
}
.pagehead .crumb { grid-column: 1; }
.pagehead .crumb:not(:has(~ .eyebrow)) { grid-column: 1 / -1; }
.pagehead .eyebrow {
  grid-column: 2;
  display: block;
  padding-left: 24px;
  font-size: 12px;
  letter-spacing: .16em;
  text-align: right;
}
.pagehead .eyebrow::after { display: none; }
/* phones: no room for both on one line, so the label drops under the crumb */
@media (max-width: 640px) {
  .pagehead > .wrap:not(.ph-grid),
  .pagehead .ph-grid > div { grid-template-columns: minmax(0, 1fr); }
  .pagehead .crumb { border-bottom: 0; padding-bottom: 8px; }
  .pagehead .eyebrow { grid-column: 1; grid-row: 2; text-align: left; padding-left: 0; }
}
/* no breadcrumb (the homepage): the label runs the full width on its own */
.pagehead > .wrap > .eyebrow:first-child,
.pagehead .ph-grid > div > .eyebrow:first-child { grid-column: 1 / -1; text-align: left; padding-left: 0; }

.pagehead h1 {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.005em;
  max-width: 16ch;
  margin: clamp(40px, 5.4vw, 76px) 0 0;
}
.pagehead p.lead {
  border-left: 0;
  padding-left: 0;
  max-width: 46ch;
  margin-top: clamp(22px, 2.8vw, 34px);
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.5;
}

/* Forward Supply: the portrait stays; the type no longer steps down for it */
@media (min-width: 901px) {
  .pagehead.media-lg h1 { font-size: clamp(40px, 4.6vw, 64px); }
  .pagehead.media-lg p.lead { font-size: clamp(17px, 1.4vw, 19px); }
  .pagehead.has-media .ph-grid { align-items: end; }
}

/* Homepage: headline at full display scale on the left, the lead set
   against its last line on the right, so the plate is composed edge to edge */
@media (min-width: 1000px) {
  .about .pagehead > .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    column-gap: clamp(40px, 5vw, 88px);
  }
  /* :not(.ph-grid) matches the specificity of the full-width rule above */
  .about .pagehead > .wrap:not(.ph-grid) > h1 {
    grid-column: 1;
    grid-row: 2;
    max-width: 13ch;
    font-size: clamp(60px, 6.6vw, 96px);
  }
  .about .pagehead > .wrap:not(.ph-grid) > p.lead {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 0 0 .5em;
    padding-top: 16px;
    border-top: 1px solid var(--plate-rule);
    font-size: 18px;
  }
}

.photoband { height: clamp(200px, 27vw, 400px); }

/* ==========================================================================
   2  FOLIO
   A section label is a ruled line with a word on it, not a tracked chip with
   a trailing stroke. The heading below it does the talking.
   ========================================================================== */
.band .wrap > .eyebrow,
.contact > .eyebrow {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ink);
}
.band .wrap > .eyebrow::after,
.contact > .eyebrow::after { display: none; }
.band.tint .wrap > .eyebrow { border-top-color: var(--ink); }

h2.title {
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.02;
  margin-top: clamp(22px, 2.6vw, 34px);
}

/* ==========================================================================
   3  HOME
   ========================================================================== */
.about section.band { padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 5vw, 72px); }

/* Overview: the firm in one sentence, set as a statement */
/* the rule is a grid item, so it spans the content box, not the gutter */
.overview { display: grid; gap: 18px; }
.overview::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--ink); margin-bottom: -2px; }
.overview h2 {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.1;
  color: var(--ink);
}
.overview p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 300;
  line-height: 1.34;
  color: var(--ink);
}
@media (min-width: 901px) {
  .overview { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 64px); }
}

/* Three lines of business: an editorial three-up, not three boxed rows */
.pillars.stacked {
  gap: clamp(48px, 6vw, 64px) clamp(24px, 3vw, 40px);
  margin-top: clamp(56px, 7vw, 96px);
}
.pillars.stacked .pillar,
.pillars.stacked .pillar:hover {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.pillars.stacked .pillar .pillar-media {
  margin: 0 0 22px;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
}
.pillars.stacked .pillar .pillar-media img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.pillars.stacked .pillar:hover .pillar-media img { transform: scale(1.025); }
.pillars.stacked .pillar h3 {
  margin: 0 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.1;
}
.pillars.stacked .pillar p {
  align-self: stretch;
  margin: 0 0 20px;
  max-width: 34ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}
.pillars.stacked .pillar .more { margin-top: auto; align-self: flex-start; }
@media (min-width: 901px) {
  .pillars.stacked { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Enquiries: two columns on a ruled line. .about .contact used to zero the
   side padding .wrap gives it, so on a phone the copy ran to the glass. */
.about .contact.wrap {
  padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 32px) clamp(72px, 9vw, 120px);
  text-align: left;
}
.about .contact > * { margin-left: 0; margin-right: 0; }
.about .contact h2 { margin: clamp(22px, 2.6vw, 34px) 0 14px; max-width: 14ch; }
.about .contact p { margin: 0 0 28px; max-width: 40ch; }
.about .contact p.alt { margin: 22px 0 0; }
@media (min-width: 901px) {
  .about .contact {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: end;
  }
  .about .contact > .eyebrow { grid-column: 1 / -1; }
  .about .contact h2 { grid-column: 1; grid-row: 2; }
  .about .contact > p:not(.alt) { grid-column: 1; grid-row: 3; margin-bottom: 0; }
  .about .contact .mail { grid-column: 2; grid-row: 2; justify-self: start; align-self: end; margin-bottom: 14px; }
  .about .contact p.alt { grid-column: 2; grid-row: 3; margin: 0; }
}

/* ==========================================================================
   4  PAGES
   ========================================================================== */

/* The Library: its hero was the one light page head on the site. It joins
   the plate, with the same contour field and bronze edge. */
.hero-i {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--plate);
  padding: clamp(52px, 7.5vw, 104px) 0;
}
.hero-i::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--contour-gold);
  background-size: 600px 600px;
  opacity: .045;
  -webkit-mask-image: linear-gradient(105deg, transparent 18%, #000 72%);
  mask-image: linear-gradient(105deg, transparent 18%, #000 72%);
}
.hero-i::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--bronze);
}
.hero-i h1 {
  color: var(--paper);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.005em;
  max-width: 17ch;
  margin-top: clamp(32px, 4vw, 52px);
}
.hero-i .kicker { color: var(--bronze-lt); font-size: 12px; letter-spacing: .16em; }
.hero-i .kicker::after { background: var(--plate-rule); max-width: none; }
.hero-media { border-top-color: var(--bronze-lt); }
.hero-grid { align-items: end; }
.hero-i + .pi-wrap { margin-top: clamp(48px, 6vw, 88px); }

/* Origination: six stages as a three-by-two grid. The numerals carry the
   sequence, so they stay, set solid in text bronze instead of outlined. */
.band div:has(> .stage) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
}
@media (min-width: 640px) { .band div:has(> .stage) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .band div:has(> .stage) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.band div:has(> .stage) .stage {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 18px;
  padding: 18px 0 clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--ink);
}
.stage .marker .n {
  color: var(--bronze-text);
  -webkit-text-stroke: 0 transparent;
  font-size: clamp(44px, 4.2vw, 60px);
  font-weight: 400;
  line-height: .9;
}
.band div:has(> .stage) .stage h3 { font-size: clamp(22px, 2vw, 26px); margin-bottom: 10px; }
.band div:has(> .stage) .stage p { max-width: 36ch; margin-bottom: 0; }

/* Data: four tiers side by side on a wide screen, so the ladder reads left
   to right - each one is "everything in the tier before, plus". */
@media (min-width: 1100px) {
  #tiers .pillars.two { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  #tiers .pillar { padding: 26px 22px; }
  #tiers .pillar h3 { font-size: 22px; }
}
#tiers .pillar .kicker { letter-spacing: .14em; }
/* The four cards share row tracks, so the tier label, the name, the
   description and the list each start on the same line in every card, however
   long the description runs. */
#tiers .pillars.two > .pillar {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  align-content: start;
  position: relative;
}
/* Four across, "In build" would wrap under its name and push that card's rows
   down; it sits on the tier-label line instead, top right. */
@media (min-width: 1100px) {
  #tiers .pillar h3 .chip { position: absolute; top: 23px; right: 22px; }
}

/* Methodology and the notes: the band below a plate starts on the plate's
   rhythm, not a page-local one */
.pagehead + .band { padding-top: clamp(56px, 7vw, 96px) !important; }

/* ==========================================================================
   5  SURFACES
   ========================================================================== */
::selection { background: var(--forest); color: var(--paper); }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* One authored moment: the page states itself. Headline then lead, once,
   on load. Nothing moves on scroll. */
@media (prefers-reduced-motion: no-preference) {
  .pagehead h1, .hero-i h1 { animation: refine-rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .pagehead p.lead { animation: refine-rise .8s .12s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes refine-rise { from { opacity: 0; transform: translateY(12px); } }
}

@media print {
  .pagehead, .hero-i { background: #fff; }
  .hero-i h1 { color: #000; }
}

/* Kind labels in the Library list were 10.5px: up to the 11px floor and over */
.entry .meta .kind, .sidecard h4 { font-size: 11.5px; }

/* Library price map: tick labels, chapter captions and neighbour names sat
   at 3.1-3.9:1. Darkened to clear AA; same hues, no change to the marks. */
.pi .pi-gr, .pi .pv-ticks span, .pi .pv-fxlabs span, .pi.pi-cut .pi-col .ml span { color: #5E6763; }
.pi .pi-nb { color: #6B7470; }
.pi .pi-nb.is-sea { color: #4F6B60; }

/* ==========================================================================
   7  ACCESS AND HEADS (2026-10-09)
   ========================================================================== */
/* Skip link: off-screen until a keyboard user tabs to it */
.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 3px;
  background: var(--forest);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  transition: top .2s cubic-bezier(.16, 1, .3, 1);
}
.skip:focus { top: 12px; }
main:focus { outline: none; }
#main { scroll-margin-top: 76px; }      /* lands below the sticky header */

/* Heads that open straight on the headline (the homepage, the Library): the
   repeated page label is gone, so the headline takes the top of the plate */
.pagehead > .wrap:not(.ph-grid) > h1:first-child,
.pagehead .ph-grid > div > h1:first-child { margin-top: clamp(28px, 4vw, 56px); }
.hero-i .hero-copy > h1:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }