*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:#232323;}
  a{text-decoration:none;color:inherit;}
  button{font:inherit;background:none;border:none;padding:0;cursor:pointer;color:inherit;}
  img{max-width:100%;}
  ::selection{background:#af9f87;color:#232323;}

  .page{
    --black:#232323; --mid-black:#393939; --slate:#697278;
    --light-grey:#e0ddda; --mid-grey:#ddd8d1; --dark-grey:#d0cbc5;
    --white:#fffffe; --green:#69786b; --light-brown:#af9f87; --brown:#7d6058;
    --ease:cubic-bezier(.165,.84,.44,1);
    --sides:clamp(20px,4vw,50px);
    --maxw:1340px;
    position:relative;width:100%;
    background:var(--black);color:var(--white);
    font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;
    -webkit-font-smoothing:antialiased;overflow-x:clip;
  }

  .band{position:relative;background:var(--bg);color:var(--fg);}
  .band-slate {--bg:#697278;--fg:#fffffe;--dim:rgba(255,255,254,.70);--line:rgba(255,255,254,.14);--chip:rgba(35,35,35,.22);--rule:rgba(255,255,254,.055);--mark:brightness(0) invert(1);}
  .band-black {--bg:#232323;--fg:#fffffe;--dim:rgba(255,255,254,.62);--line:rgba(255,255,254,.10);--chip:rgba(255,255,254,.07);--rule:rgba(255,255,254,.042);--mark:brightness(0) invert(1);}
  .band-light {--bg:#e0ddda;--fg:#232323;--dim:rgba(35,35,35,.66);--line:rgba(35,35,35,.13);--chip:rgba(35,35,35,.07);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
  .band-mid   {--bg:#ddd8d1;--fg:#232323;--dim:rgba(35,35,35,.66);--line:rgba(35,35,35,.13);--chip:rgba(35,35,35,.07);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
  .band-deep  {--bg:#d0cbc5;--fg:#232323;--dim:rgba(35,35,35,.66);--line:rgba(35,35,35,.13);--chip:rgba(35,35,35,.07);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
  .band-white {--bg:#fffffe;--fg:#232323;--dim:rgba(35,35,35,.66);--line:rgba(35,35,35,.11);--chip:rgba(35,35,35,.06);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
  /* ── the light hero ──────────────────────────────────────────────
     Same ground as the section below it (#e0ddda). The field's lines,
     ticks and marks are tokens so the architecture simply re-reads
     dark on a light band; the marks land near #666 and stay at the
     same low opacity, so they read as watermarks. */
  .band-sand  {--bg:#fffffe;--fg:#282725;--dim:#55514e;--line:#b8b1aa;--chip:rgba(40,39,37,.07);--rule:rgba(40,39,37,.05);--mark:brightness(0);
    --tick-rule:#b8b1aa;--pf-line:rgba(40,39,37,.05);--pf-tick:rgba(40,39,37,.18);}

  .shell{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding-inline:var(--sides);}
  .rules{position:absolute;inset:0;z-index:0;pointer-events:none;max-width:var(--maxw);margin-inline:auto;
    display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);}
  .rules span{border-left:1px solid var(--rule);}
  .rules span:last-child{border-right:1px solid var(--rule);}
  .pad{padding-block:clamp(72px,10vw,130px);}
  .pad-sm{padding-block:clamp(52px,6vw,80px);}

  .sf{font-family:'Newsreader',Georgia,'Times New Roman',serif;font-weight:300;}
  .it{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;}
  h1,h2,h3{margin:0;font-weight:300;}
  .display{font-family:'Newsreader',Georgia,serif;font-weight:300;
    font-size:clamp(42px,7.4vw,104px);line-height:1.0;letter-spacing:-.05em;}
  .h2{font-family:'Newsreader',Georgia,serif;font-weight:300;
    font-size:clamp(30px,4.6vw,62px);line-height:1.02;letter-spacing:-.04em;}
  .serif-lede{font-family:'Newsreader',Georgia,serif;font-weight:300;
    font-size:clamp(23px,3.2vw,54px);line-height:1.13;letter-spacing:-.032em;margin:0;}
  /* section title: a quiet italic marker in parentheses at the head of each section */
  .sec-title{margin:0 0 clamp(16px,1.8vw,26px);font-family:'Newsreader',Georgia,serif;
    font-style:italic;font-weight:300;font-size:clamp(12.5px,1.02vw,15px);line-height:1.42;
    letter-spacing:-.01em;color:var(--dim);}
  .row-label .sec-title,.hero-top .sec-title{margin-bottom:0;}
  .body{margin:0;font-size:clamp(14px,1.05vw,15px);line-height:1.62;color:var(--dim);letter-spacing:-.01em;}
  .body + .body{margin-top:1.15em;}
  .body .lead{color:var(--fg);font-weight:500;}
  .fig{font-weight:400;font-size:clamp(40px,6vw,80px);line-height:.92;letter-spacing:-.095em;}

  .cta{position:relative;display:inline-flex;align-items:baseline;gap:9px;padding-bottom:5px;color:var(--fg);
    font-size:clamp(14px,1.08vw,16px);font-weight:500;letter-spacing:-.02em;line-height:1.3;}
  .cta::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:left;transition:transform .65s var(--ease);}
  .cta:hover::after,.cta:focus-visible::after{transform:scaleX(1);}
  .cta svg{flex:none;width:10px;height:10px;align-self:center;transition:transform .55s var(--ease);}
  .cta:hover svg,.cta:focus-visible svg{transform:translate(3px,-3px);}
  .cta:focus-visible{outline:none;}
  .cta-lg{font-size:clamp(15px,1.3vw,19px);}
  .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,2.6vw,38px);}
  .cta-2{color:var(--dim);} .cta-2:hover{color:var(--fg);}

  /* header */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:24px;
    height:87px;padding-inline:var(--sides);transition:background-color .6s var(--ease),height .6s var(--ease);}
  .site-header.is-scrolled{height:68px;background:rgba(35,35,35,.92);backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);}
  .logo{display:inline-flex;align-items:center;min-height:44px;}
  .logo img{height:24.15px;width:auto;display:block;filter:brightness(0) invert(1);}
  .main-nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);}
  /* nav links take the same drawn rule as the text CTAs;
     the current page keeps its rule drawn */
  .main-nav a{position:relative;font-size:14px;letter-spacing:-.02em;color:rgba(255,255,254,.78);transition:color .5s var(--ease);}
  .main-nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);}
  .main-nav a:hover,.main-nav a:focus-visible,.main-nav a.is-current{color:#fffffe;}
  .main-nav a:hover::after,.main-nav a:focus-visible::after,.main-nav a.is-current::after{transform:scaleX(1);}
  .header-right{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);}
  .header-right .cta{font-size:14px;color:rgba(255,255,254,.78);}
  .header-right .cta:hover{color:#fffffe;}
  .nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;color:#fffffe;}

  /* The bar is drawn white for a dark hero. This page's hero is light,
     so until it gains its dark ground on scroll the bar reads dark. */
  .site-header:not(.is-scrolled) .logo img{filter:brightness(0);}
  .site-header:not(.is-scrolled) .main-nav a,
  .site-header:not(.is-scrolled) .header-right .cta{color:rgba(40,39,37,.78);}
  .site-header:not(.is-scrolled) .main-nav a:hover,
  .site-header:not(.is-scrolled) .main-nav a:focus-visible,
  .site-header:not(.is-scrolled) .main-nav a.is-current,
  .site-header:not(.is-scrolled) .header-right .cta:hover{color:#282725;}
  .site-header:not(.is-scrolled) .nav-toggle{color:#282725;}
  .mobile-menu{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--black);color:#fffffe;}
  .mobile-menu-close{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;}
  .mobile-menu nav{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:90px clamp(24px,7vw,56px) 24px;}
  .mobile-menu nav a{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(32px,9vw,52px);letter-spacing:-.04em;}
  .mobile-menu-foot{display:flex;flex-wrap:wrap;gap:22px;padding:0 clamp(24px,7vw,56px) 44px;}

  /* ── page hero: left-set, against the charcoal ───────── */
  .phero{padding-top:clamp(150px,16vw,220px);padding-bottom:clamp(60px,7vw,96px);}
  .phero-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:clamp(26px,3vw,40px);align-items:end;}
  .phero-head{grid-column:1 / span 6;}
  .phero-lede{grid-column:7 / span 3;}
  /* ── the hero's one line ─────────────────────────────────────────
     The field keeps its six columns, but only the rule at 4/6 is drawn:
     the second vertical counting from the right, in its original place,
     colour and weight. Everything else — the other four verticals, both
     horizontals and the surveyor ticks, which would otherwise mark
     crossings that no longer exist — stands down.

     The supporting line then sits in the rectangle that rule opens. The
     field spans the viewport while the copy lives in a centred shell
     capped at 1340px, so the two do not share a coordinate system: the
     offsets below convert between them exactly, which is why there are
     two cases. Up to 1340 the shell fills the viewport; past it the
     shell is centred and the sums carry the difference. */
  /* a 96px first row, the same height the homepage gives its top row,
     so the one horizontal sits at exactly the same line on every page */
  .pfield{grid-template-rows:96px repeat(2,minmax(0,1fr));}
  .pfield .pf-cell{border-right:0;border-bottom:0;}
  .pfield .pf-cell:nth-of-type(6n+4){border-right:1px solid var(--pf-line,rgba(40,39,37,.05));}
  .pfield .pf-cell:nth-of-type(-n+6){border-bottom:1px solid var(--pf-line,rgba(40,39,37,.05));}
  .pfield .pf-cell.mk::after{display:none;}

  @media (min-width:1001px){
    .phero .phero-lede{position:absolute;top:auto;
      left:66.667vw;right:var(--sides);
      bottom:calc(clamp(60px,7vw,96px) - 26px);
      width:auto;max-width:none;margin:0;
      padding-left:clamp(18px,2vw,34px);}
  }
  @media (min-width:1341px){
    .phero .phero-lede{left:calc(16.667vw + 670px);
      right:calc(670px - 50vw + var(--sides));}
  }
  /* below that the copy runs full width, so the vertical would cross it:
     it stands down and the line under the header carries on alone */
  @media (max-width:1000px){
    .pfield .pf-cell:nth-of-type(6n+4){border-right:0;}
  }

  .phero h1{max-width:13ch;}
  .phero h1 .it{color:var(--brown);}
  /* the break holds at every width: these headlines are set as two
     lines by design, not by where the measure happens to run out */

  /* ── specimen rows: the terms of the deal, set as a table ── */
  .spec{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;}
  .spec-row{grid-column:1 / span 9;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:8px;
    padding-block:clamp(20px,2.4vw,34px);border-top:1px solid var(--line);align-items:baseline;}
  .spec-row:last-child{border-bottom:1px solid var(--line);}
  .spec-k{grid-column:1 / span 2;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);}
  .spec-v{grid-column:3 / span 6;margin:0;font-family:'Newsreader',Georgia,serif;font-weight:300;
    font-size:clamp(22px,2.9vw,42px);line-height:1.08;letter-spacing:-.032em;color:var(--fg);}

  /* ── criteria: a numbered editorial list ─────────────── */
  /* six qualities, set two to a row so the page does not become a ladder */
  .crit{list-style:none;margin:clamp(40px,4.6vw,70px) 0 0;padding:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(28px,4vw,80px);}
  .crit li{display:flex;flex-direction:column;gap:12px;
    padding-block:clamp(24px,2.8vw,40px);border-top:1px solid var(--line);}
  .crit li:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
  .crit-i{font-size:11px;letter-spacing:.09em;color:var(--light-brown);font-variant-numeric:tabular-nums;}
  .crit-t{margin:0;max-width:18ch;font-family:'Newsreader',Georgia,serif;font-weight:300;
    font-size:clamp(21px,2.3vw,33px);line-height:1.02;letter-spacing:-.032em;color:var(--fg);}
  .crit-d{margin:0;max-width:44ch;font-size:clamp(14px,1.05vw,15px);line-height:1.62;color:var(--dim);}

  /* ── themes: names at display size, counts at the margin ── */
  .themes{list-style:none;margin:clamp(40px,4.6vw,70px) 0 0;padding:0;}
  .themes li{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(12px,1.6vw,26px);
    padding-block:clamp(16px,1.9vw,26px);border-top:1px solid var(--line);}
  .themes li:last-child{border-bottom:1px solid var(--line);}
  .th-n{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(26px,4vw,56px);
    line-height:1.02;letter-spacing:-.04em;color:var(--fg);opacity:.55;transition:opacity .7s var(--ease);}
  .themes li.in .th-n{opacity:1;}
  .th-d{flex:1 1 280px;min-width:0;margin:0;font-size:clamp(13.5px,1.02vw,15px);line-height:1.6;color:var(--dim);}
  .th-open{font-family:'Newsreader',Georgia,serif;font-style:italic;}

  /* ── roots: masthead then three regions ──────────────── */
  .roots{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:clamp(44px,5vw,74px);align-items:end;}
  .roots-head{grid-column:1 / span 6;}
  .roots-lede{grid-column:7 / span 3;}
  .reg{grid-column:1 / span 9;list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3.2vw,56px);border-top:1px solid var(--line);}
  .reg li{display:flex;flex-direction:column;gap:11px;padding-top:clamp(24px,2.8vw,40px);}
  .reg li + li{border-left:1px solid var(--line);padding-left:clamp(22px,2.6vw,42px);}
  .reg h3{display:flex;align-items:center;gap:11px;font-weight:500;font-size:clamp(16px,1.5vw,21px);letter-spacing:-.025em;color:var(--fg);}
  .reg h3::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--light-brown);}
  .reg p{margin:0;max-width:32ch;font-size:14.5px;line-height:1.6;color:var(--dim);}

  /* ── closing ─────────────────────────────────────────── */
  .closing{text-align:center;}
  .closing-in{max-width:20ch;margin:0 auto;}
  .closing .body{max-width:52ch;margin-inline:auto;}
  .closing .cta-row{justify-content:center;}

  /* ── motion ───────────────────────────────────────────
     Every ruled row on this page answers the pointer in the language
     the homepage already speaks: the divider draws itself across,
     the line steps in, the supporting copy comes up to full
     contrast. Nothing new is added to the page — what is there
     simply responds. */
  .spec-row,.crit li,.themes li{position:relative;}
  .spec-row::after,.crit li::after,.themes li::after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform .9s var(--ease);}
  .spec-row:hover::after,.crit li:hover::after,.themes li:hover::after{transform:scaleX(1);}
  .spec-v,.crit-t{transition:transform .7s var(--ease);}
  .th-n{transition:opacity .7s var(--ease),transform .7s var(--ease);}
  .spec-row:hover .spec-v,.crit li:hover .crit-t{transform:translateX(9px);}
  .themes li:hover .th-n{transform:translateX(9px);opacity:1;}
  .spec-k,.crit-i{transition:color .6s var(--ease);}
  .spec-row:hover .spec-k,.crit li:hover .crit-i{color:var(--brown);}
  .crit-d,.th-d,.reg li p{transition:color .6s var(--ease);}
  .crit li:hover .crit-d,.themes li:hover .th-d,.reg li:hover p{color:var(--fg);}
  /* the regional marks: the dot opens out, the name steps in */
  .reg li h3{transition:transform .6s var(--ease);}
  .reg li h3::before{transition:transform .6s var(--ease),background-color .6s var(--ease);}
  .reg li:hover h3{transform:translateX(6px);}
  .reg li:hover h3::before{transform:scale(1.55);background:var(--brown);}


  .rv{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s);}
  .rv.in{opacity:1;transform:none;}
  /* the cover copy starts its rise on first paint instead of waiting for the
     script: the same 1s fade-and-rise and stagger, run as a CSS animation */
  .hero-mid > .rv,.hero > .hero-scroll.rv,.phero .rv{animation:rvIn 1s var(--ease) var(--d,0s) both;}
  @keyframes rvIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

  /* ── what we look for: entrance, focus and micro-interaction ─────────
     Layout, type, colour and the gridlines are untouched. The dividers
     become a pseudo-element so they can wipe in with their item; the
     li keeps its 1px borders as transparent so nothing shifts. Dimming
     is applied to the three children rather than the li, which leaves
     the li's own opacity to the reveal system and avoids the two
     fighting over the same property. */
  .crit li.rv{transition-duration:.68s;}
  .crit li{border-top-color:transparent;}
  .crit li:nth-last-child(-n+2){border-bottom-color:transparent;}
  .crit li::before{content:'';position:absolute;left:0;right:0;top:-1px;bottom:-1px;
    pointer-events:none;border-top:1px solid var(--line);
    transform:scaleX(0);transform-origin:left;
    transition:transform .68s var(--ease);transition-delay:var(--d,0s);}
  .crit li:nth-last-child(-n+2)::before{border-bottom:1px solid var(--line);}
  .crit li.in::before{transform:scaleX(1);}

  .crit-i{transition:color .6s var(--ease),transform .35s var(--ease),opacity .35s var(--ease);}
  .crit-t{transition:transform .35s var(--ease),opacity .35s var(--ease);}
  .crit-d{transition:color .6s var(--ease),transform .35s var(--ease) .06s,opacity .35s var(--ease);}

  @media (hover:hover) and (pointer:fine){
    .crit li:hover .crit-t{transform:translateY(-4px);}
    .crit li:hover .crit-i{transform:translateX(3px);}
    .crit li:hover .crit-d{transform:translateY(-2px);}
    /* the rest of the list recedes only while a sibling is hovered */
    .crit:hover li .crit-i,.crit:hover li .crit-t,.crit:hover li .crit-d{opacity:.7;}
    .crit li:hover .crit-i,.crit li:hover .crit-t,.crit li:hover .crit-d{opacity:1;}
  }
  @media (hover:none){
    .crit li:hover .crit-t,.crit li:hover .crit-i,.crit li:hover .crit-d{transform:none;}
    .crit li:hover::after{transform:scaleX(0);}
  }


  @media (max-width:1000px){
    .main-nav{display:none;}
    .nav-toggle{display:flex;}
    /* the mobile menu carries these, so the bar keeps logo + toggle only */
    .header-right .cta{display:none;}
    .rules{grid-template-columns:repeat(3,minmax(0,1fr));}
    .rules span:nth-child(n+4){display:none;}
    .phero-head,.phero-lede,.roots-head,.roots-lede{grid-column:1 / span 9;}
    .spec-k{grid-column:1 / span 9;}
    .spec-v{grid-column:1 / span 9;}
    .crit{grid-template-columns:1fr;}
    .crit li:nth-last-child(-n+2){border-bottom:0;}
    .crit li:last-child{border-bottom:1px solid transparent;}
    .crit li:nth-last-child(-n+2)::before{border-bottom:0;}
    .crit li:last-child::before{border-bottom:1px solid var(--line);}
    .reg{grid-template-columns:1fr;}
    .reg li + li{border-left:0;padding-left:0;border-top:1px solid var(--line);}
  }
  @media (max-width:640px){
    .serif-lede{line-height:1.2;}
    .h2{line-height:1.08;}
    .phero{padding-top:128px;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .rv{opacity:1;transform:none;transition:none;}
    .hero-mid > .rv,.hero > .hero-scroll.rv,.phero .rv{animation:none;}
    .th-n{opacity:1;}
    .spec-row::after,.crit li::after,.themes li::after{display:none;}
    .spec-v,.crit-t,.th-n,.reg li h3,.reg li h3::before{transition:none;}
    .crit li::before{transform:none;transition:none;}
    .crit-i,.crit-d{transition:none;}
    .crit li:hover .crit-i,.crit li:hover .crit-d{transform:none;}
    .spec-row:hover .spec-v,.crit li:hover .crit-t,.themes li:hover .th-n,
    .reg li:hover h3,.reg li:hover h3::before{transform:none;}
  }

  /* ── SFDR statement: long-form legal copy on the spec-row grid ── */
  .lg-sec{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:12px;
    padding-block:clamp(34px,4vw,56px);border-top:1px solid var(--line);}
  .lg-sec:last-child{border-bottom:1px solid var(--line);}
  .lg-k{grid-column:1 / span 2;margin:0;padding-top:.5em;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);}
  .lg-v{grid-column:3 / span 6;max-width:72ch;}
  .lg-h{margin:0 0 clamp(18px,2vw,26px);font-family:'Newsreader',Georgia,serif;font-weight:300;
    font-size:clamp(24px,2.3vw,34px);line-height:1.14;letter-spacing:-.015em;color:var(--fg);}
  .lg-sub{margin:clamp(26px,2.8vw,38px) 0 12px;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--fg);}
  .lg-h + .lg-sub{margin-top:0;}
  .lg-list{margin:1.15em 0 0;padding-left:1.2em;}
  .lg-list li + li{margin-top:.6em;}
  .lg-list + .body{margin-top:1.15em;}
  @media (max-width:1000px){
    .lg-k,.lg-v{grid-column:1 / span 9;}
  }