*{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; --sand:#BAAA91;
    --light-grey:#e0ddda; --mid-grey:#ddd8d1; --dark-grey:#d0cbc5;
    --white:#fffffe; --green:#69786b; --light-brown:#af9f87; --brown:#697278;
    --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,.95);--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);}
  /* soft neutral for content sections: the light band's type on #EAE8E6 */
  .band-stone {--bg:#eae8e6;--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);}
  /* What we look for on slate: the numerals read in white, not sand */
  .band-slate .crit-i{color:var(--fg);opacity:.95;}
  .band-slate .crit li:hover .crit-i{color:var(--fg);opacity:1;}
  .band-mid   {--bg:#ddd8d1;--fg:#232323;--dim:rgba(35,35,35,.70);--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:27.77px;width:auto;display:block;filter:brightness(0) invert(1);}
  .main-nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);}
  /* centred on the page, not in the space the logo and the right-hand
     links leave, so it shares the axis of the centred hero below; the bar
     is fixed, so this is placed within it and moves with its height */
  @media (min-width:1001px){
    .main-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
  }
  /* 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;}

  /* Over the light hero the bar is clear, the warm-white ground running up
     behind it, with the charcoal logo and type. Past 50px of scroll it fills
     with warm white in .28s, a hairline under it, and clears again at the top. */
  .site-header{background-color:rgba(255,255,254,0);box-shadow:0 1px 0 rgba(35,35,35,0);
    transition:background-color .28s var(--ease),box-shadow .28s var(--ease),height .6s var(--ease);}
  .site-header.is-scrolled{background-color:#fffffe;box-shadow:0 1px 0 rgba(35,35,35,.08);
    backdrop-filter:none;-webkit-backdrop-filter:none;}
  .site-header .logo img{filter:brightness(0);}
  .site-header .main-nav a,
  .site-header .header-right .cta{color:rgba(40,39,37,.78);}
  .site-header .main-nav a:hover,
  .site-header .main-nav a:focus-visible,
  .site-header .main-nav a.is-current,
  .site-header .header-right .cta:hover{color:#282725;}
  .site-header .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(--sand);}
  /* 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(--sand);}
  .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(--sand);}


  .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;}
  }