/* ==========================================================================
   Roma–Econ
   1 Tokens (both themes)   2 Base   3 Header   4 Hero
   5 Offering index   6 Approach   7 Clients   8 Contact & footer
   9 Practice pages   10 Figures   11 Responsive   12 Reduced motion
   ========================================================================== */

/* 0 · Fonts ---------------------------------------------------------------
   Self-hosted rather than fetched from Google, so no visitor's address leaves the
   site and the type still loads offline. All three families are variable, so one
   file per subset serves every weight; latin-ext only downloads if a page uses it.
   SIL Open Font Licence 1.1, see fonts/README.txt. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/source-serif-4-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/source-serif-4-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:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/hanken-grotesk-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/hanken-grotesk-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:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-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}

/* 1 · Tokens ------------------------------------------------------------- */
:root{
  /* The house green, No. 26 deep moss, set as "moss and gold": cream ink, a saffron-gold accent,
     cream forecast bands and a gold wash for policy shading. One palette; there is no day/night switch. */
  --ground:#455727; --tint:#4A5C2D;
  --ink:#F4F0E3; --ink-2:#DFDDCC; --ink-3:#CDCEB9;
  --rule:#59693D; --rule-strong:#8F9876;
  --accent:#ECD065;          /* gold: text and marks that must read */
  --mark:#ECD065;            /* gold: fills, focus */
  --mark-soft:rgba(236,208,101,.15);
  --band:#EBE5CF;            /* forecast fan bands */
  --header-bg:rgba(69,87,39,.9);

  --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --maxw:1240px;
  --gutter:clamp(20px,4vw,48px);
  --col-gap:clamp(16px,2.4vw,32px);
  --head-h:61px;             /* sticky header height, for anchor offsets */
  color-scheme:dark;
}

/* 2 · Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* the ground sits on <html> so the fixed .bg layer below can paint above it */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ground)}
body{margin:0;background:transparent;color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;font-kerning:normal;overflow-wrap:break-word;transition:color .4s ease}

/* 2b · The ground --------------------------------------------------------
   Three layers behind everything. Bottom to top: tonal blooms for depth, a static
   CSS dot screen, and the live halftone drawn on canvas by script.js, which takes
   over from the static screen once it has painted.
   No contour lines here on purpose: every figure on this site is line work, and a
   second field of hairlines competes with them. A dot screen is tonal instead, and
   it is the same screen printed over the seal and the six plates.
   The blooms parallax by --sp (scroll progress 0..1) so the travel stays bounded
   however long the page is; the static grid shifts by --sy in pixels because a 6px
   grid tiles seamlessly. The canvas owns all the shape change, so nothing is keyframed.
   Every dot is DARKER than the ground, so text contrast can only improve. */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.bg-layer{position:absolute;inset:-40% -12%;will-change:transform}
.bg-blooms{transform:translate3d(0,calc(var(--sp,0) * -7%),0)}
.bg-blooms i{position:absolute;inset:0;display:block;
  background:
    /* the depth runs downward from the ground: only one light lift, held at the
       tint, because anything lighter drops --ink-3 under 4.5:1 for small text */
    radial-gradient(38vmax 30vmax at 16% 10%,#4A5D2A 0,transparent 62%),
    radial-gradient(34vmax 27vmax at 84% 26%,#33421A 0,transparent 60%),
    radial-gradient(42vmax 32vmax at 28% 62%,#3C4C1E 0,transparent 64%),
    radial-gradient(36vmax 29vmax at 78% 88%,#2C3915 0,transparent 62%);
  opacity:.82}
/* the live screen takes over once it has painted a frame; if the canvas never
   paints, the static CSS screen simply stays and nothing is lost */
.bg-dots.off{opacity:0}
.bg-field{position:absolute;left:0;top:0;display:block;opacity:0;transition:opacity 1.1s ease}
.bg-field.on{opacity:1}
.bg-dots{background-image:radial-gradient(circle,rgba(0,0,0,.5) .9px,transparent 1px);
  background-size:6px 6px;background-position:0 calc(var(--sy,0px) * -.22);opacity:.19;transition:opacity .8s ease}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}
p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.mono{font-family:var(--mono);font-size:.88em}
main section[id]{scroll-margin-top:calc(var(--head-h) + 12px)}
.lede{font-size:clamp(1.05rem,1.3vw,1.18rem);line-height:1.55;color:var(--ink-2);max-width:40ch}

/* 3 · Header ------------------------------------------------ */
.top{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid transparent;transition:border-color .3s,background-color .4s}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top{background:var(--header-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
.top.scrolled{border-bottom-color:var(--rule)}
.top-row{display:flex;align-items:center;gap:clamp(20px,3vw,40px);min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 20px/1 var(--serif);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;padding-block:8px}
.brand .dash{color:var(--accent);padding-inline:.06em}
.brand-mark{width:34px;height:34px;flex:none}
.nav{display:flex;gap:clamp(18px,2.4vw,30px);margin-left:auto}
.nav a{font-size:14.5px;color:var(--ink-2);padding-block:10px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:transparent;transition:color .2s,text-decoration-color .2s}
.nav a:hover{color:var(--ink);text-decoration-color:var(--rule-strong)}
/* Two groups: the sections of the home page, then the pages of their own, split by a short hairline */
.nav-group{display:flex;align-items:center;gap:inherit}
.nav-group+.nav-group{position:relative;padding-left:clamp(18px,2.4vw,30px)}
.nav-group+.nav-group::before{content:"";position:absolute;left:0;top:50%;height:16px;margin-top:-8px;border-left:1px solid var(--rule-strong)}
.nav a[aria-current="page"]{color:var(--ink);text-decoration-color:var(--accent)}
/* Contact is the one link that matters commercially: it stands apart, as the house
   button, and on a phone it stays in the top row instead of scrolling out of sight */
.nav-cta{flex:none;padding:7px 14px 8px;border:1px solid var(--ink-2);color:var(--ink);font-size:14.5px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--ground)}
/* Just above the phone layout the one-row header is at its tightest: keep every link on
   one line (a wrapped link would make the header taller than --head-h) and close the gaps */
.nav a{white-space:nowrap}
@media (min-width:861px) and (max-width:960px){
  .top-row{gap:18px}
  .nav{gap:16px}
  .nav-group+.nav-group{padding-left:16px}
}

/* 4 · Hero: an opening spread, copy left, the plate bleeding right ------- */
.hero{position:relative;border-bottom:1px solid var(--rule)}
.hero-inner{min-height:clamp(540px,50vw,720px)}
.hero-copy{grid-column:1 / span 6;display:flex;flex-direction:column;justify-content:space-between;gap:44px;padding-block:clamp(28px,3.4vw,48px) clamp(24px,2.8vw,36px);padding-right:clamp(8px,2.5vw,40px)}
.descriptor{font-size:14px;color:var(--ink-3)}
.hero-main{display:grid;gap:24px}
.hero h1{font-family:var(--serif);font-size:clamp(2.4rem,4.3vw,4.1rem);line-height:1.06;letter-spacing:-.02em}
.cta-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 30px;padding-top:6px}
.cta,.cta-quiet{font-size:15.5px;text-decoration-line:underline;text-underline-offset:6px;transition:color .2s,text-decoration-color .2s}
.cta{font-weight:600;text-decoration-thickness:2px;text-decoration-color:var(--ink)}
.cta:hover{color:var(--accent);text-decoration-color:var(--mark)}
.cta-quiet{color:var(--ink-2);text-decoration-thickness:1px;text-decoration-color:var(--rule-strong)}
.cta-quiet:hover{color:var(--ink);text-decoration-color:var(--ink)}
.notation{display:grid;gap:4px;max-width:36rem;padding-top:14px;border-top:1px solid var(--rule)}
.notation div{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:12px;align-items:baseline}
.notation dt{font-size:13px;color:var(--ink-3)}
.notation dd{font:400 12.5px/1.65 var(--mono);color:var(--ink-2)}

/* Plate I: a drawn figure on the right half. Its top rule sits level with the descriptor, its caption
   with the foot of the copy, and its right edge on the column grid rather than the window edge */
.plate{position:absolute;top:0;right:0;bottom:0;width:50%;margin:0;display:flex;flex-direction:column;
  padding:calc(clamp(28px,3.4vw,48px) + 5px) calc(max(0px,(100% - var(--maxw)) / 2) + var(--gutter)) clamp(24px,2.8vw,36px) calc(var(--col-gap) / 2 + clamp(14px,2.2vw,36px))}
.hero-fig{position:relative;flex:1 1 auto;min-height:0;border-top:1px solid var(--ink)}
/* drawn at its measured size by hero() in script.js; 14px here is HERO_TOP there */
.hero-fig svg{position:absolute;top:14px;left:0;display:block;width:100%;height:calc(100% - 14px);overflow:visible}

/* Utilities ---------------------------------------------------------------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Pages of their own: who we are, and all the work examples ------------- */
.page{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,100px)}
.page-head{margin-bottom:clamp(26px,3.4vw,40px)}
.page-head h1{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.08;letter-spacing:-.018em}
.page-head h1:focus{outline:none}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(24px,4vw,56px);padding-top:clamp(22px,3vw,32px);border-top:2px solid var(--ink)}
.person{display:grid;align-content:start;gap:12px}
.person-photo{display:block;width:100%;max-width:300px;height:auto;padding-bottom:clamp(10px,1.4vw,16px);border-bottom:1px solid var(--rule)}
.person-bio{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:46ch}
/* Reading pages sit on cream; the firm's own pages stay on the house green.
   Who we are and the work examples are read rather than sold from, so they share
   one quieter ground. Every token is re-set on the page itself, so each component,
   and each figure drawn inside it, picks the darker values up through the same
   custom properties. Text clears 4.5:1 against the cream; rules, marks and the two
   club colours clear 3:1 on the cream and on the pitch. */
#view-who,#view-work,main[data-case]{
  --ground:#F2EAD8; --tint:#E6DBC0;
  --ink:#23271A; --ink-2:#454A35; --ink-3:#61664B;
  --rule:#DCD3BC; --rule-strong:#8C8060;
  --accent:#6B5810; --mark:#6B5810; --mark-soft:rgba(107,88,16,.15);
  --band:#454A35;
  --cs-juve:#7D5B00; --cs-inter:#2A5A9A; --cs-on-fill:#FBF6EA; --cs-tip-bg:#FBF7EE;
  background:var(--ground);
  color:var(--ink);
  /* fill the viewport so the cream does not stop short above the footer */
  min-height:calc(100vh - var(--head-h));
  min-height:calc(100svh - var(--head-h));
}
.person h2{font:500 clamp(1.3rem,1.8vw,1.6rem)/1.2 var(--serif);letter-spacing:-.01em}
.person-role{margin-top:-6px;font-size:14.5px;color:var(--ink-3)}
.person-mail{margin-top:-4px;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule-strong);transition:color .2s,text-decoration-color .2s}
.person-mail:hover{color:var(--accent);text-decoration-color:var(--mark)}
.work-list{display:flex;flex-direction:column;max-width:62rem}
.work-kind{display:block;margin-bottom:6px;font-size:13.5px;color:var(--ink-3)}

/* 5 · Offering: a contents page ----------------------------------------- */
.offering{padding-block:clamp(64px,8vw,112px) clamp(40px,5vw,72px)}
.sec-head{align-items:end;align-items:last baseline;row-gap:14px;margin-bottom:clamp(28px,3.6vw,44px)}
.sec-head h2{grid-column:1 / span 6;font-family:var(--serif);font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1.1;letter-spacing:-.015em}
.sec-head p{grid-column:8 / span 5;color:var(--ink-2);max-width:44ch}

.index{border-top:2px solid var(--ink)}
.index > li{border-bottom:1px solid var(--rule)}
.entry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:20px;align-items:start;margin-inline:-16px;padding:clamp(26px,3vw,40px) 16px;text-decoration:none;color:inherit;transition:background-color .25s}
.entry:hover{background:var(--tint)}
.entry:focus-visible{outline-offset:-2px}
.entry-text{grid-column:1 / span 7;align-self:baseline;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.entry h3{font-family:var(--serif);font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.15;letter-spacing:-.012em}
.entry-sub{margin-top:-6px;font-size:14.5px;color:var(--ink-3)}
.entry-desc{color:var(--ink-2);max-width:50ch}
.methods{font:400 12.5px/1.6 var(--mono);color:var(--ink-2)}
.entry-link{margin-top:4px;font-size:14.5px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--rule-strong);transition:text-decoration-color .2s}
.entry:hover .entry-link{text-decoration-color:var(--ink)}
.glyph{grid-column:9 / span 4;align-self:center;aspect-ratio:2/1}
.glyph svg{display:block;width:100%;height:100%;overflow:visible}
.note{margin:clamp(22px,3vw,32px) 0 0;max-width:64ch;font-size:15px;color:var(--ink-2)}
.note b{font-weight:600;color:var(--ink)}

/* 6 · Approach: a statement with principles set against it ------------- */
.approach{border-top:1px solid var(--rule);padding-block:clamp(56px,6.5vw,92px)}
.approach h2{grid-column:1 / span 4;font-family:var(--serif);font-size:clamp(1.6rem,2.2vw,2.05rem);line-height:1.18;letter-spacing:-.012em}
.principles{grid-column:6 / span 7;border-bottom:1px solid var(--rule)}
.principles li{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);column-gap:20px;row-gap:4px;align-items:baseline;padding-block:17px 19px;border-top:1px solid var(--rule)}
.principles li:first-child{border-top-color:var(--ink)}
.principles h3{font:600 16px/1.4 var(--sans)}
.principles p{font-size:15.5px;color:var(--ink-2);max-width:46ch}

/* 7 · Clients: two domains, read across ------------------------------- */
.clients{border-top:1px solid var(--rule);padding-block:clamp(52px,6vw,84px) clamp(56px,7vw,100px)}
.clients h2{font:600 clamp(1.1rem,1.4vw,1.25rem)/1.3 var(--sans);letter-spacing:-.005em;margin-bottom:18px}
.audience{align-items:baseline;row-gap:12px;padding-block:clamp(22px,2.8vw,32px);border-top:1px solid var(--rule)}
.audience:first-of-type{border-top:2px solid var(--ink)}
.audience:last-child{border-bottom:1px solid var(--rule)}
.audience-label{grid-column:1 / span 3;font-size:14px;color:var(--ink-3)}
.audience-body{grid-column:4 / span 5}
.audience h3{font-family:var(--serif);font-size:clamp(1.35rem,1.8vw,1.65rem);line-height:1.2;letter-spacing:-.01em;margin-bottom:10px}
.audience-body p{color:var(--ink-2);max-width:42ch}
.topics{grid-column:10 / span 3;display:grid;gap:5px;font-size:15px;line-height:1.45}

/* 8 · Contact & footer -------------------------------------------------- */
.contact{border-top:2px solid var(--ink);padding-block:clamp(60px,8vw,120px) clamp(56px,7vw,100px)}
.contact h2{grid-column:1 / span 7;font-family:var(--serif);font-size:clamp(2.4rem,4.8vw,4.3rem);line-height:1.04;letter-spacing:-.022em}
.contact-body{grid-column:9 / span 4;align-self:end;display:grid;justify-items:start;gap:22px}
.contact-body p{color:var(--ink-2);max-width:38ch}
.btn{display:inline-block;padding:12px 22px 13px;border:1px solid var(--ink);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;transition:background-color .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--ground)}
/* How working with us runs, set as the same ruled list as the principles */
.engage{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);margin-top:clamp(56px,7vw,96px)}
.engage h3{grid-column:1 / span 4;font-family:var(--serif);font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:500;line-height:1.2;letter-spacing:-.01em}
.engage-list h4{font:600 16px/1.4 var(--sans)}
.engage-note{grid-column:6 / span 7;margin-top:14px;max-width:52ch;font-size:14px;color:var(--ink-3)}
footer{border-top:1px solid var(--rule)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-block:20px 28px;font-size:13px;color:var(--ink-3)}
footer a{text-decoration-color:var(--rule-strong);text-underline-offset:3px}
footer a:hover{color:var(--ink)}

/* 9 · Practice pages ---------------------------------------------------- */
.d-nav{border-bottom:1px solid var(--rule)}
.d-nav-row{display:flex;align-items:stretch;gap:clamp(18px,2.6vw,36px);overflow-x:auto;scrollbar-width:thin}
.d-nav-row a:focus-visible{outline-offset:-3px}
.back{flex:none;display:flex;align-items:center;min-height:50px;padding-right:clamp(16px,2.4vw,32px);border-right:1px solid var(--rule);font-size:14px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.back:hover{color:var(--ink)}
.d-index{display:flex;gap:clamp(18px,2.6vw,34px)}
.d-index a{display:flex;align-items:center;gap:8px;min-height:50px;font-size:14px;color:var(--ink-2);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:color .2s,box-shadow .2s}
.d-index a:hover{color:var(--ink)}
.d-index a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.d-index .short{display:none}

.d-hero{row-gap:clamp(32px,4vw,48px);padding-block:clamp(40px,5vw,72px) clamp(44px,5vw,68px)}
.d-title{grid-column:1 / span 5}
.d-no{display:flex;gap:.7em;margin-bottom:16px;font-size:14px;color:var(--ink-3)}
.d-hero h1{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.08;letter-spacing:-.018em}
.d-hero h1:focus{outline:none}
.d-title .lede{margin-top:20px}
.d-facts{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule);max-width:44ch;font-size:14.5px;color:var(--ink-2)}
.d-facts b{font-weight:600;color:var(--ink)}
/* Who the work example is for, and the decision it informs */
.d-for{margin-top:16px;max-width:44ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.d-for b{font-weight:600;color:var(--ink)}
.d-chart{grid-column:7 / span 6;align-self:end;padding-top:14px;border-top:1px solid var(--ink)}
/* Causal: the event study is the argument, so it takes the full measure */
.practice--causal .d-title{grid-column:1 / span 7;align-self:end}
.practice--causal .d-intro{grid-column:8 / span 5;align-self:end}
.practice--causal .d-chart{grid-column:1 / -1}

.block{align-items:start;row-gap:14px;padding-block:clamp(30px,3.6vw,48px);border-top:1px solid var(--rule)}
.block-label{grid-column:1 / span 3;padding-top:3px;font:600 15px/1.45 var(--sans)}
.models,.applied{grid-column:4 / span 9}
.questions{grid-column:4 / span 8}
.deliverables{grid-column:4 / span 6}

.questions li{max-width:34em;padding-block:14px;border-bottom:1px solid var(--rule);font:400 clamp(1.12rem,1.5vw,1.32rem)/1.38 var(--serif)}
.questions li:first-child{padding-top:0}
.questions li:last-child{padding-bottom:0;border-bottom:0}
.questions--lead li:first-child{padding-bottom:20px;font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:500;line-height:1.2;letter-spacing:-.012em}
.questions--lead li + li{font-size:clamp(1.05rem,1.3vw,1.15rem)}

.deliverables li{padding-block:11px;border-bottom:1px solid var(--rule)}
.deliverables li:first-child{padding-top:1px}
.deliverables li:last-child{padding-bottom:0;border-bottom:0}

.models{display:grid;grid-template-columns:minmax(9.5rem,max-content) minmax(0,1fr);column-gap:32px}
.models dt,.models dd{padding-block:13px;border-bottom:1px solid var(--rule)}
.models dt{padding-top:15px;font:500 13px/1.55 var(--mono);color:var(--ink)}
.models dd{color:var(--ink-2)}
.models dd b{font-weight:600;color:var(--ink)}
.models dt:first-of-type{padding-top:3px}
.models dd:first-of-type{padding-top:1px}
.models dt:last-of-type,.models dd:last-of-type{padding-bottom:0;border-bottom:0}

.applied{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);column-gap:var(--col-gap);row-gap:18px;align-items:start}
.inventory{columns:2;column-gap:var(--col-gap);font-size:15.5px;line-height:1.4}
.inventory li{break-inside:avoid;padding-bottom:9px}
.aside{max-width:40ch;padding-left:18px;border-left:1px solid var(--rule);font-size:15px;color:var(--ink-2)}

/* Data: the pipeline is a real sequence, so it reads left to right and leads */
.block--pipeline{padding-top:0;border-top:0}
.block--pipeline .block-label{grid-column:1 / -1}
.pipeline{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink)}
.pipeline li{display:grid;align-content:start;gap:6px;padding:16px 20px 4px;border-left:1px solid var(--rule)}
.pipeline li:first-child{padding-left:0;border-left:0}
.pipeline h3{font:600 16px/1.3 var(--sans)}
.pipeline p{font-size:14.5px;color:var(--ink-2)}

.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(20px,4vw,48px);border-top:2px solid var(--ink)}
.next a{display:grid;align-content:start;gap:6px;padding-block:20px 40px;text-decoration:none;color:inherit}
.next a:first-child{padding-right:24px}
.next a + a{padding-left:24px;border-left:1px solid var(--rule);text-align:right}
.next .k{font-size:13.5px;color:var(--ink-3)}
.next .t{font:500 clamp(1.15rem,1.7vw,1.45rem)/1.25 var(--serif);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color .2s}
.next a:hover .t{text-decoration-color:currentColor}

/* The macro entry on the overview leads to the practice and to each of its two branches:
   the title's link covers the card, the branch links sit above it */
.entry--split{position:relative}
.entry-main{color:inherit;text-decoration:none}
.entry-main::after{content:"";position:absolute;inset:0}
.entry-main:focus-visible{outline:none}
.entry--split:has(.entry-main:focus-visible){outline:2px solid var(--mark);outline-offset:-2px}
.entry-branches{position:relative;z-index:1;display:grid;width:100%;max-width:34rem;margin-top:2px;border-top:1px solid var(--rule)}
.entry-branches a{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;transition:text-decoration-color .2s}
.entry-branches a:hover{text-decoration-color:currentColor}

/* Macro practice: an index of its two branches, then each branch with its own opening and figure */
.sub-index{grid-column:7 / span 6;align-self:end;display:grid;border-top:1px solid var(--ink)}
.sub-index a{display:grid;grid-template-columns:minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px 0 18px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.sub-index .t{font:500 clamp(1.1rem,1.5vw,1.3rem)/1.25 var(--serif);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;transition:text-decoration-color .2s}
.sub-index .s{font-size:14.5px;color:var(--ink-2);max-width:48ch}
.sub-index a:hover .t{text-decoration-color:currentColor}
.branch{border-top:2px solid var(--ink);scroll-margin-top:calc(var(--head-h) + 50px)}
.branch-head{row-gap:clamp(28px,3.5vw,40px);padding-block:clamp(36px,4.5vw,60px) clamp(36px,4.5vw,56px)}
.branch-title{grid-column:1 / span 5;align-self:end}
.branch-title h2{font-family:var(--serif);font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.1;letter-spacing:-.015em}
.branch-title h2:focus{outline:none}
.branch-title .lede{margin-top:18px}
.branch-head .d-chart{grid-column:7 / span 6}
.block--applied{border-top:2px solid var(--ink)}

/* 10 · Figures ---------------------------------------------------------- */
.d-chart svg{display:block;width:100%;height:auto;overflow:visible}
.c-grid{stroke:var(--rule);stroke-width:1}
.c-axis{stroke:var(--ink-2);stroke-width:1}
.c-zero{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.c-now{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3}
.c-hist{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.c-proj{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.c-band{fill:var(--band)}
.c-dot{fill:var(--ink)}
.c-dot.post{fill:var(--accent)}
.c-ci{stroke:var(--ink-3);stroke-width:1.2}
.c-ci.post{stroke:var(--accent)}
.c-policy{fill:var(--mark-soft)}
.c-raw{fill:var(--ink-3)}
.c-cell{fill:var(--ink-2)}
.c-cell.hi{fill:var(--accent)}
.c-flow{fill:none;stroke:var(--rule-strong);stroke-width:1}
.c-bar{fill:var(--ink-2)}
.c-bar.hi{fill:var(--accent)}
.c-label{fill:var(--ink-2);font:400 11.5px var(--sans)}
.c-label.strong{fill:var(--ink);font-weight:600}
.c-label.soft{fill:var(--ink-3)}
.c-num{fill:var(--ink-3);font:400 10.5px var(--mono)}
.draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:0}
.animate .draw{animation:draw 1.2s cubic-bezier(.4,.1,.2,1) both}
.animate .fade{animation:fade .8s ease both;animation-delay:.3s}
@keyframes draw{from{stroke-dashoffset:var(--len,1000)}}
@keyframes fade{from{opacity:.2}}

/* Plate I: the data become a shape. Every mark sits at its final place in CSS; the intro only animates it in
   from the scatter (--dx, --dy), so the resting state and reduced motion both show the finished shape */
.b-pt{fill:var(--ink-2)}
.b-pt.acc{fill:var(--accent)}
.b-pt.give{opacity:0}  /* points that fly in, then give way to a drawn stroke */
.b-deck{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.b-line{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-linejoin:round}
.b-thick{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round}
.b-acc{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.b-water{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:6 5}
.b-grid{fill:none;stroke:var(--rule);stroke-width:1;opacity:0}
.b-axis{fill:none;stroke:var(--ink-2);stroke-width:1;opacity:0}
/* The intro, 4.5 s in all, then still. --o is time already played, so a plate redrawn mid-intro carries on */
.hero-fig.animate .draw{animation:draw var(--t,1.2s) cubic-bezier(.4,.1,.2,1) calc(var(--d,0s) - var(--o,0s)) both}
.hero-fig.animate .fade{animation:hfade var(--t,.5s) ease calc(var(--d,0s) - var(--o,0s)) both}
.hero-fig.animate .b-grid{animation:scaffold 2.3s linear calc(0s - var(--o,0s)) both}
.hero-fig.animate .b-axis.draw{animation:draw .6s cubic-bezier(.4,.1,.2,1) calc(0s - var(--o,0s)) both,scaffold 2.3s linear calc(0s - var(--o,0s)) both}
.hero-fig.animate .b-deck.draw{animation:draw .6s cubic-bezier(.4,.1,.2,1) calc(.9s - var(--o,0s)) both,deck 1s cubic-bezier(.6,.05,.25,1) calc(1.5s - var(--o,0s)) both}
.hero-fig.animate .b-pt{animation:hfade .45s ease calc(var(--a) - var(--o,0s)) both,morph 1.1s cubic-bezier(.6,.05,.25,1) calc(var(--d) - var(--o,0s)) both}
.hero-fig.animate .b-pt.acc{animation-name:hfade,morph-acc}
.hero-fig.animate .b-pt.give{opacity:1;animation:hfade .45s ease calc(var(--a) - var(--o,0s)) both,morph 1.1s cubic-bezier(.6,.05,.25,1) calc(var(--d) - var(--o,0s)) both,solid .5s ease calc(3.55s - var(--o,0s)) forwards}
@keyframes hfade{from{opacity:0}}
@keyframes solid{from{opacity:1}to{opacity:0}}
@keyframes scaffold{0%{opacity:0}12%{opacity:1}60%{opacity:1}100%{opacity:0}}
@keyframes deck{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r0)) scaleX(var(--k)) rotate(var(--r1));stroke:var(--accent)}}
@keyframes morph{from{transform:translate(var(--dx),var(--dy))}}
@keyframes morph-acc{from{transform:translate(var(--dx),var(--dy));fill:var(--ink-2)}}

/* Figure 1.1, macroeconometrics: the dashed long-run path, the gold gap bars, per-mark timing (--d delay,
   --t duration). Every mark rests in its final state; the intro (4 s) only animates it in */
.mx-eq{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:6 4}
.mx-gap{stroke:var(--accent);stroke-width:1.6}
.mx-gap.sm{stroke-width:2.2}
.animate .mx.draw{animation:draw var(--t,1s) cubic-bezier(.4,.1,.2,1) var(--d,0s) both}
.animate .mx.fade{animation:hfade var(--t,.45s) ease var(--d,0s) both}

/* Figure 1.2, CGE: sectors × regions. The resting state is the new equilibrium; the intro plays it in from a
   uniform baseline table (--k0): the shock (.7 s), its row and column (from .9 s), second-round effects,
   then every total at once (3.25 s), still by 4 s. Gains are filled gold, losses open */
.cg-span{fill:none;stroke:var(--rule-strong);stroke-width:1}
.cg-wash,.cg-arm{fill:var(--mark-soft)}
.cg-v{fill:var(--accent);transform-box:fill-box;transform-origin:center}
.cg-bar{fill:var(--accent)}
.cg-v.neg,.cg-bar.neg{fill:var(--ink-3);fill-opacity:0;stroke:var(--ink-2);stroke-width:1;vector-effect:non-scaling-stroke}
.cg-frame{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.cg-arm,.cg-bar{transform-box:fill-box}
.cg-arm.l,.cg-bar.h.neg{transform-origin:100% 50%}
.cg-arm.r,.cg-bar.h.pos{transform-origin:0 50%}
.cg-arm.u,.cg-bar.v.pos{transform-origin:50% 100%}
.cg-arm.dn,.cg-bar.v.neg{transform-origin:50% 0}
.animate .cg-v{animation:hfade .4s ease var(--a) both,cg-set .7s cubic-bezier(.5,.05,.25,1) var(--d) both}
.animate .cg-v.neg{animation-name:hfade,cg-set-neg}
.animate .cg-arm.l,.animate .cg-arm.r{animation:cg-sx var(--t) linear var(--d) both}
.animate .cg-arm.u,.animate .cg-arm.dn{animation:cg-sy var(--t) linear var(--d) both}
.animate .cg-bar.h{animation:cg-sx .5s cubic-bezier(.4,.1,.2,1) var(--d) both}
.animate .cg-bar.v{animation:cg-sy .5s cubic-bezier(.4,.1,.2,1) var(--d) both}
.animate .cg-pop{animation:cg-pop .45s cubic-bezier(.3,.1,.2,1) var(--d) both}
.animate .cg-late{animation:hfade .35s ease var(--d) both}
@keyframes cg-set{from{transform:scale(var(--k0));fill:var(--ink-3);fill-opacity:.5}}
@keyframes cg-set-neg{from{transform:scale(var(--k0));fill-opacity:.5;stroke-opacity:0}}
@keyframes cg-sx{from{transform:scaleX(0)}}
@keyframes cg-sy{from{transform:scaleY(0)}}
@keyframes cg-pop{from{transform:scale(1.8);opacity:0}}

/* 11 · Responsive -------------------------------------------------------- */
@media (max-width:1100px){
  .entry-text{grid-column:1 / span 8}
  .approach h2{grid-column:1 / span 5}
  .audience-body{grid-column:4 / span 6}
  .contact h2{grid-column:1 / span 8}
}
@media (max-width:980px){
  .principles li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  :root{--head-h:103px}
  .top-row{flex-wrap:wrap;column-gap:16px;row-gap:0;min-height:0;padding-top:4px}
  .brand{padding-block:12px}
  .brand-mark{width:28px;height:28px}
  .nav{order:3;flex:1 0 100%;margin-left:0;gap:22px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--rule)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding-block:11px;white-space:nowrap}
  .nav-cta{margin-left:auto;padding:6px 12px 7px;font-size:14px}

  .hero{display:flex;flex-direction:column}
  .plate{position:relative;order:-1;width:100%;aspect-ratio:4/3;padding:18px var(--gutter) 12px}
  .hero-inner{min-height:0}
  .hero-copy{grid-column:1 / -1;gap:34px;padding:30px 0 34px}

  .sec-head h2,.sec-head p{grid-column:1 / -1}
  .entry{row-gap:16px}
  .entry-text{grid-column:1 / -1}
  .glyph{grid-column:1 / -1;width:100%;max-width:440px}
  .note{margin-left:0}

  .approach h2,.principles{grid-column:1 / -1}
  .approach h2{max-width:18ch;margin-bottom:26px}

  .audience{row-gap:10px}
  .audience-label,.audience-body,.topics{grid-column:1 / -1}
  .topics{margin-top:4px}

  .contact h2,.contact-body{grid-column:1 / -1}
  .engage h3,.engage-note{grid-column:1 / -1}
  .engage h3{margin-bottom:22px}
  .contact-body{margin-top:26px}

  .practice .d-title,.practice .d-intro,.practice .d-chart{grid-column:1 / -1}
  .sub-index,.branch-title{grid-column:1 / -1}
  .block-label,.models,.questions,.deliverables,.applied{grid-column:1 / -1}
  .applied{grid-template-columns:1fr}
  .aside{padding-left:14px}
  .pipeline{grid-template-columns:1fr}
  .pipeline li{row-gap:4px;padding:14px 0;border-left:0;border-top:1px solid var(--rule)}
  .pipeline li:first-child{border-top:0}
  .next{grid-template-columns:1fr}
  .next a:first-child{padding-right:0}
  .next a + a{padding-left:0;border-left:0;border-top:1px solid var(--rule);text-align:left}
}
@media (max-width:560px){
  :root{--head-h:103px}
  .people{grid-template-columns:minmax(0,1fr)}
  .person-photo{max-width:230px}
  .person h2{font-size:1.15rem}
  body{font-size:15.5px}
  .hero h1{font-size:clamp(2.1rem,9.4vw,2.6rem)}
  .plate{aspect-ratio:5/4}
  .notation div{grid-template-columns:3.6rem minmax(0,1fr);gap:10px}
  .entry{row-gap:12px}
  .entry-text,.glyph{grid-column:1 / -1}
  .d-hero h1{font-size:clamp(1.85rem,7.8vw,2.3rem)}
  .contact h2{font-size:clamp(2.2rem,10vw,2.7rem)}
  .models{grid-template-columns:1fr}
  .models dt{padding-bottom:0;border-bottom:0}
  .models dd{padding-top:3px}
  .inventory{columns:1}
  .next .t{font-size:1.12rem}
  .d-index .full{display:none}
  .d-index .short{display:inline}
}

@media (max-width:400px){
  .top-row{column-gap:10px}
}

/* 12 · Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}