/* ============================================================
   ankerpunt.studio: the whole sheet, for every page.

   This used to live inline in index.html, which was right while there
   was one page. There are four now (home, /prototype, /develop,
   /produce) and they share a header, a set of bands, a type pair and
   the phase rail, so a single file is the only way those stay
   identical. The cost is one request; the win is that the rail cannot
   drift between the page that introduces it and the pages it sits on
   top of.

   404.html and privacy.html deliberately do NOT link this: they carry
   their own font-light subset so an error page never pays for three
   webfaces. That is unchanged.

   Loading note: this is the only stylesheet, and it is uncached
   (see _headers) because there is no build step to hash it. A 304 on
   a small same-origin file over the connection the HTML already
   opened is the price of being able to edit CSS and see it live.
   ============================================================ */
  /* ============================================================
     LAYOUT D, B's SPEC SHEET, SET ON C's BANDS
     From B: the landing view, the 1120px grid, the sticky section
     label in the left column, the stack as a table and the phases
     as BOM-style rows. Density stays.
     From C: the grounds. Every section is full-bleed and alternates
     paper / tint, so the page has edges you can see from across the
     room, and the contact closes on ink.
     The join: --ground and --rule-c are redeclared per band, so the
     ruled cells (which are grid gaps showing through, not borders)
     fill with whatever the band is sitting on. Nothing else in the
     sheet knows or cares which ground it landed on.
     ============================================================ */
  /* ------------------------------------------------------------
  The filenames carry the upstream Google Fonts version (v5 / v20 /
  v24), so they are safe to cache for a year: a new cut of a face
  arrives under a new name. Inter ships one variable file that
  covers both 400 and 500, hence the weight range rather than two
  faces. latin-ext is declared but never fetched unless the copy
  grows a character that needs it.
  ------------------------------------------------------------ */
  /* Instrument Serif italic 400 - latin-ext */
  @font-face{
    font-family:"Instrument Serif";
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url("/fonts/instrument-serif-italic-latin-ext-v5.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;
  }
  /* Instrument Serif italic 400 - latin */
  @font-face{
    font-family:"Instrument Serif";
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url("/fonts/instrument-serif-italic-latin-v5.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;
  }
  /* Instrument Serif normal 400 - latin-ext */
  @font-face{
    font-family:"Instrument Serif";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/fonts/instrument-serif-normal-latin-ext-v5.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;
  }
  /* Instrument Serif normal 400 - latin */
  @font-face{
    font-family:"Instrument Serif";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/fonts/instrument-serif-normal-latin-v5.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;
  }
  /* Inter normal 400 500 - latin-ext */
  @font-face{
    font-family:"Inter";
    font-style:normal;
    font-weight:400 500;
    font-display:swap;
    src:url("/fonts/inter-normal-latin-ext-v20.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;
  }
  /* Inter normal 400 500 - latin */
  @font-face{
    font-family:"Inter";
    font-style:normal;
    font-weight:400 500;
    font-display:swap;
    src:url("/fonts/inter-normal-latin-v20.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;
  }
  /* Libre Baskerville normal 400 - latin-ext */
  @font-face{
    font-family:"Libre Baskerville";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/fonts/libre-baskerville-normal-latin-ext-v24.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;
  }
  /* Libre Baskerville normal 400 - latin */
  @font-face{
    font-family:"Libre Baskerville";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/fonts/libre-baskerville-normal-latin-v24.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;
  }

  :root{
    --paper:#FBFAF8;
    --tint:#F2EFE9;
    --ink:#1A1A1A;
    --body:#403E3A;
    /* The grey half of the type pair, on the light grounds. #8A8781 was
       3.43:1 on paper and 3.12:1 on tint, under the 4.5:1 that text this
       size needs, and this token carries every label, number and gloss on
       the page. #6B6862 is 5.32 and 4.84. It is the lightest value that
       clears the harder of the two grounds; #706D67 misses tint by 0.01. */
    --soft:#6B6862;
    /* The same role on the ink band, where the old value already measured
       4.86:1 and darkening it would make it worse, not better. */
    --soft-ink:#8A8781;
    --rule:#E2DFD9;
    --rule-on-tint:#DCD7CE;
    --red:#FF4D4D;
    /* Red as reading matter. --red is 3.14:1 on paper, which passes for the
       big hero line (large text) and for marks and rules, and fails for
       every link hover, the button's hover fill and "Not a fit". This is
       the same red carried far enough to be read: 5.59 on paper, 5.08 on
       tint. Marks, rules, nodes and the hero line all stay on --red, so the
       page still spends its red in the same places. */
    --red-text:#C42222;
    --dot-lit:rgba(210,42,42,.38);
    /* The height of the whole pinned bar, which is what an anchor on a
       phase page has to clear. On :root rather than on the bar because
       .phase needs it for its scroll-margin and is not a descendant of the
       bar -- a custom property inherits down the tree and would never reach
       it. Measured, not derived: the bar is a wordmark row, a gap and a row
       of stops, and adding those up by hand is how it drifts.

       A value ABOVE the bar shows as a one-row sliver of the previous band's
       tint above each phase's ink rule on arrival, and the browser
       quantises the scroll offset it settles on, so this has to sit a
       little UNDER the measured box rather than equal to it. The bar
       measures 116.70 at both 905 and 1280; 116 lands 0.4-0.8px inside it
       and 117 lands a fraction clear of it. Landing inside the bar is
       invisible.

       It was 161 while the stops took two lines each. They take one now, so
       the whole second row costs about what the wordmark row above it does
       rather than a screen and a half of it. */
    --railh:116px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  /* Clicking a stop on /phases is a jump within the page, and a jump that
     animates is the one that tells you the stops are in an order.

     The class matters. Smooth scrolling declared on html applies to the
     LANDING scroll too, so arriving at /phases#produce -- which is where
     the old /produce URL now redirects -- would animate 2700px past two
     phases you did not ask to see. rail.js adds the class once the page
     has loaded and the fragment has been honoured, so arrivals are instant
     and only clicks glide. Off entirely for anyone who has asked for less
     motion, in which case every jump is instant. */
  @media (prefers-reduced-motion:no-preference){
    html.railsmooth{scroll-behavior:smooth;}
  }
  body{
    /* the containing block for .dots, which spans the whole document */
    position:relative;
    background:var(--paper);
    color:var(--ink);
    font-family:"Inter",system-ui,sans-serif;
    font-size:15px;
    line-height:1.52;
    -webkit-font-smoothing:antialiased;
  }
  /* the measure, and the only thing that centres anything */
  .in{position:relative;z-index:1;width:100%;max-width:1120px;margin:0 auto;padding:0 30px;}