/* =====================================================================
   BUFFALO TECH SYSTEMS — "Set by hand"
   ---------------------------------------------------------------------
   Deliberately NOT the layout used on the client sites. Rules broken on
   purpose, so this page cannot be mistaken for the same kit:

     no hero object beside the headline   the type IS the hero
     no centred nav, no pill button       a hairline top line, and a
                                          fixed index down the left edge
     no rounded corners, no cards         ink blocks and printed rules
     no cream                             cool lilac-grey stock, grained
     no serif display                     wood-type condensed grotesque

   The logo still supplies everything: traces with a node and a jog,
   and the three colours sampled from the SVG (#6b4ea8 #b9a8d8 #2a2230).
   ===================================================================== */

@font-face{font-family:"Archivo";src:url("/assets/font/archivo.woff2") format("woff2-variations");
  font-weight:600 800;font-stretch:62% 80%;font-display:swap}
@font-face{font-family:"InterVar";src:url("/assets/font/inter.woff2") format("woff2-variations");
  font-weight:400 700;font-display:swap}
@font-face{font-family:"MonoVar";src:url("/assets/font/mono.woff2") format("woff2-variations");
  font-weight:400 600;font-display:swap}

:root{
  --paper:#f2eff4; --paper-2:#e9e4ec;
  --ink:#1b1520; --ink-2:#4a4152; --ink-3:#665d70;
  --violet:#6b4ea8; --violet-d:#553d87; --lilac:#b9a8d8; --lilac-d:#8f79bd;
  --deep:#211433; --on-deep:#f2eff4; --on-deep-2:#c0b6cb; --on-deep-3:#978ca4;
  --rule:#cdc4d2; --rule-2:#ded6e2;

  --wood:"Archivo",system-ui,sans-serif;      /* condensed, heavy, set large */
  --sans:"InterVar",system-ui,-apple-system,sans-serif;
  --mono:"MonoVar",ui-monospace,monospace;

  --t-mono:clamp(.66rem,.63rem + .12vw,.73rem);
  --t-s:clamp(.86rem,.83rem + .14vw,.94rem);
  --t-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --t-1:clamp(1.1rem,1.02rem + .36vw,1.32rem);
  --t-2:clamp(1.6rem,1.15rem + 2vw,2.9rem);
  --t-3:clamp(2rem,1.2rem + 3.6vw,4.4rem);

  --sp1:.4rem; --sp2:.8rem; --sp3:1.4rem; --sp4:2.2rem;
  /* The three big steps scale with the viewport. 128px of section padding is
     right on a desktop and absurd on a phone. Upper bounds match the old fixed
     values, so nothing changes above ~1440px. */
  --sp5:clamp(2.4rem,3.9vw,3.5rem);
  --sp6:clamp(3.4rem,6.1vw,5.5rem);
  --sp7:clamp(4.4rem,9.4vw,8rem);
  /* The floor is set by the weave, not by taste: the line runs at x=16 and
   needs a visible channel beside the text. At the old 1.15rem floor the
   content column cleared it by 2px. */
  --gut:clamp(2.25rem,3.6vw,2.6rem);
  --index:0rem;                                /* left index gutter, set at 1100px+ */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* The site had no keyboard focus style anywhere outside the form. */
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.foot :focus-visible{outline-color:var(--lilac)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{position:relative;margin:0;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");color:var(--ink-2);font-family:var(--sans);
  font-size:var(--t-0);line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--paper)}

/* ---- the stock -------------------------------------------------------
   This was a fixed, full-viewport overlay with mix-blend-mode:multiply
   sitting above everything at z-index 90. A blend layer that size forces
   the browser to re-composite the whole screen against its backdrop on
   every animated frame, which made every transition on the page more
   expensive than it needed to be. It also carried a stray
   will-change:transform, pinning it into its own layer permanently.

   It is now simply the paper's background. No blending, no extra layer,
   no cost, and the type sits crisply on top of the texture instead of
   underneath it, which is how ink on paper actually behaves.

   It is on the paper only. feTurbulence produces MID-GREY noise, so
   without the old multiply blend it lightens a dark ground instead of
   darkening it: laid over the aubergine footer it turned it milky. */

/* =====================================================================
   TYPE — wood type for display, plain sans for reading
   ===================================================================== */
.wood{font-family:var(--wood);font-weight:800;font-variation-settings:"wdth" 64,"wght" 800;
  letter-spacing:-.012em;line-height:.86;text-transform:uppercase;color:var(--ink);
  margin:0;display:block}
h1{font-size:clamp(3.2rem,14.5vw,8.6rem)}
h2{font-size:clamp(2rem,8.4vw,5rem)}
h3{font-family:var(--sans);font-size:var(--t-1);font-weight:650;color:var(--ink);
  letter-spacing:-.014em;line-height:1.26;margin:0}
p{margin:0 0 var(--sp3);max-width:54ch}
p:last-child{margin-bottom:0}
a{color:var(--violet-d)}
.lede{font-size:var(--t-1);line-height:1.5;color:var(--ink);max-width:38ch}
p b{font-weight:650;color:var(--ink)}
.caps{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;color:var(--ink-3);display:block}
.hl{color:var(--violet)}
.hollow{color:transparent;-webkit-text-stroke:clamp(1.5px,.24vw,3.6px) var(--ink);
  paint-order:stroke fill}
@supports not (-webkit-text-stroke:1px #000){.hollow{color:var(--ink)}}

.wrap{max-width:1320px;margin-inline:auto;
  padding-left:calc(var(--gut) + var(--index));padding-right:var(--gut)}
.band{position:relative;z-index:2;padding-block:var(--sp7)}

/* =====================================================================
   THE WEAVE
   One continuous trace, generated from the real section positions. It
   runs down the outer margin, crosses the page at every section
   boundary with a chamfered PCB corner, and comes back down the other
   side. The dull copy is the whole run; the orchid copy is drawn in by
   your scroll position, with a lit node at the head. This replaces both
   the drifting background lines and the six separate dividers, so the
   page is threaded by a single object instead of decorated by many.
   ===================================================================== */
#weave{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;
  overflow:visible}
#weave path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#weave .track{stroke:var(--rule);stroke-width:2}
#weave .lit{stroke:var(--violet);stroke-width:3}
#weave .pins circle{fill:var(--rule)}
#weave .whead{fill:var(--violet)}
#weave .halo{fill:var(--violet);opacity:.15}
@media(prefers-reduced-motion:reduce){#weave .halo{display:none}}

/* =====================================================================
   CHROME — a hairline top line and a fixed index. No bar, no pill.
   ===================================================================== */
.top{position:relative;z-index:4;display:flex;align-items:center;gap:var(--sp3);
  padding-block:var(--sp3);flex-wrap:wrap}
.top img{height:30px;width:auto}
.top .sp{margin-left:auto}
.top a{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:.2rem;transition:border-color .3s,color .3s}
.top a:hover{color:var(--violet);border-color:var(--violet)}
.top a.plain{border:0;padding:0}
/* On a phone the auto spacer pushed the phone number right and dropped the
   CTA to a second row on the left. Give the logo its own row instead. */
@media(max-width:560px){
  .top{gap:var(--sp2) var(--sp3)}
  .top .sp{display:none}
  .top a.plain{flex:1 0 100%}        /* the logo link carries .plain, not .brand */
}

/* A printed contents block, not a menu bar. The numerals are the same
   condensed wood type as the section heads, and the marker is the same
   node-and-run trace as the weave, so this reads as part of the page
   rather than a component dropped onto it. The vertical rule beside it
   is the weave itself, which is why there is no border here.

   It is drawn TWICE, stacked: once in the light-ground palette and once
   in the plum-ground palette. A clip-path splits the pair exactly on the
   footer's top edge, so the list stays fully visible and correctly
   coloured no matter what is behind it. */
#index{position:fixed;left:0;top:0;bottom:0;width:var(--index);z-index:30;display:none}
.ix-in{position:absolute;left:var(--gut);right:0;top:50%;
  transform:translateY(-50%) translateY(var(--push,0px));
  display:flex;flex-direction:column;align-items:flex-start;gap:.42rem}

.ix-cap{font-family:var(--mono);font-size:.63rem;letter-spacing:.24em;
  text-transform:uppercase;font-weight:500;color:var(--ink-3);
  border-bottom:1px solid var(--rule-2);padding-bottom:.55rem;margin-bottom:.5rem;
  width:100%;max-width:7.5rem}
.ix-in::after{content:"";display:block;width:30px;height:1px;
  background:var(--rule-2);margin-top:.55rem;flex:none}

.ix-in a{display:flex;align-items:center;gap:.5rem;width:100%;height:1.6rem;
  line-height:1;text-decoration:none;color:var(--ink-2);
  transition:color .35s var(--ease)}

/* NOTE: these are scoped to .ix-in, not #index. An ID here would outrank
   the    palette, which is exactly what it did. */
/* Per-row tick: structure only, no state. The highlight is no longer seven
   markers switching on and off, it is ONE marker that travels. */
.ix-in a i{position:relative;flex:none;width:24px;height:8px}
.ix-in a i::before{content:"";position:absolute;left:0;top:1.5px;
  width:5px;height:5px;border-radius:50%;background:var(--rule);
  transition:background .35s var(--ease),opacity .3s var(--ease)}
.ix-in a:hover i::before{background:var(--lilac-d)}
.ix-in a.at i::before{opacity:0}          /* the traveling node stands in its place */

/* THE TRAVELING MARKER
   One node-and-run that slides down the list, the same way the weave's lit
   node rides down the page: the two are now visibly the same mechanism.
   Its run is not decoration either. It fills 0 -> 1 with how far you have
   read through the section it is sitting on, so the marker reports position
   AND remaining, using the shape that was already there. */
/* wider than the row's 24px tick slot on purpose: the marker is absolutely
   positioned, so its run can reach across the gap toward the numeral and get
   half again as much travel without moving anything in the layout. */
.ix-mark{position:absolute;left:0;top:0;width:31px;height:8px;pointer-events:none;
  opacity:0;transition:transform .55s var(--ease),opacity .35s var(--ease)}
.ix-mark.on{opacity:1}
.ix-mark .n{position:absolute;left:-.5px;top:1px;width:6px;height:6px;border-radius:50%;
  background:var(--violet)}
.ix-mark .r{position:absolute;left:8px;top:3.2px;width:22px;height:1.6px;border-radius:1px;
  background:var(--violet);transform:scaleX(0);transform-origin:left center}

/* numerals in the same wood type as the section heads */
.ix-in a b{font-family:var(--wood);font-variation-settings:"wdth" 68,"wght" 700;
  font-size:.95rem;line-height:1;width:1.5rem;text-align:right;flex:none;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
  transition:color .35s var(--ease),font-size .35s var(--ease)}

.ix-in a span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;white-space:nowrap;
  transition:font-size .35s var(--ease),letter-spacing .35s var(--ease)}

.ix-in a:hover{color:var(--ink)}

/* the active item is set larger. The row height is fixed, so growing it
   never nudges its neighbours. */
.ix-in a.at{color:var(--ink)}
.ix-in a.at b{color:var(--violet);font-size:1.2rem}
.ix-in a.at span{font-size:.815rem;letter-spacing:.1em}

@media(min-width:1190px){:root{--index:13rem}#index{display:block}}

#rail{position:fixed;top:0;left:0;height:2px;width:0;background:var(--violet);z-index:40}

/* =====================================================================
   MOBILE NAVIGATION
   The fixed index only earns its space above 1190px. Below that the page
   had no way to navigate at all, which is backwards: the phone is the
   common case. A sticky bar carries the section you are in and opens a
   full-screen index set in the same language as the desktop one.
   ===================================================================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

#mobbar{position:fixed;top:0;left:0;right:0;z-index:60;display:none;
  background:var(--paper);border-bottom:1px solid var(--rule-2);
  transform:translateY(-101%);transition:transform .45s var(--ease)}
#mobbar.on{transform:none}
#mobbar .in{display:flex;align-items:center;gap:var(--sp3);
  padding:.55rem var(--gut)}
#mobbar img{height:26px;width:26px}
#mobbar .where{margin-left:auto;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* the button is three traces, the same mark the rest of the page is built from */
.mbtn{flex:none;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;align-content:center;justify-items:end;gap:6px}
.mbtn i{display:block;height:2px;border-radius:1px;background:var(--ink);
  transition:width .3s var(--ease)}
.mbtn i:nth-child(2){width:30px}
.mbtn i:nth-child(3){width:20px}
.mbtn i:nth-child(4){width:26px}
.mbtn:hover i:nth-child(3){width:30px}

#menu{position:fixed;inset:0;z-index:70;background:var(--paper);
  flex-direction:column;padding:var(--gut);overflow-y:auto;overscroll-behavior:contain}
#menu[hidden]{display:none}
#menu.open{display:flex}
.menu-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--sp3);border-bottom:1px solid var(--rule-2)}
.mclose{font-family:var(--sans);font-size:2rem;line-height:1;background:none;border:0;
  color:var(--ink);cursor:pointer;padding:0 .2rem}
.menu-list{display:flex;flex-direction:column;margin-top:var(--sp4);flex:1}
.menu-list a{display:flex;align-items:center;gap:.8rem;text-decoration:none;
  color:var(--ink-2);padding:.85rem 0;border-bottom:1px solid var(--rule-2)}
.menu-list a i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--rule)}
.menu-list a b{font-family:var(--wood);font-variation-settings:"wdth" 68,"wght" 700;
  font-size:1.35rem;line-height:1;width:1.9rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.menu-list a span{font-family:var(--mono);font-size:.86rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500}
.menu-list a.at{color:var(--ink)}
.menu-list a.at i{background:var(--violet)}
.menu-list a.at b{color:var(--violet)}
.menu-foot{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;
  margin-top:var(--sp4);padding-top:var(--sp3);border-top:1px solid var(--ink)}
.menu-foot a{font-family:var(--mono);font-size:var(--t-s);color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.15rem}

@media(max-width:1189px){#mobbar{display:block}}
@media(prefers-reduced-motion:reduce){#mobbar,.mbtn i{transition:none}}

/* =====================================================================
   HERO — the type is the object. Nothing sits beside it.
   ===================================================================== */
.hero{position:relative;z-index:2;padding-bottom:var(--sp6);overflow:hidden}
.head{margin-top:clamp(1.5rem,5vw,4rem)}
.head .l{display:block;overflow:hidden}
.head .l > i{display:block;font-style:normal;transform:translateY(105%)}
.head.go .l > i{transform:none;transition:transform .85s var(--ease)}
.head.go .l:nth-child(2) > i{transition-delay:.08s}
.head.go .l:nth-child(3) > i{transition-delay:.16s}
.head .l:nth-child(2){padding-left:min(4.5vw,64px)}  /* the line that is set off. The
                                                        cap matters: the column stops
                                                        growing at 1320px, the indent
                                                        would not. */
.head .l:nth-child(3){padding-left:min(1.5vw,22px)}

.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp5);
  align-items:end;margin-top:var(--sp5)}
@media(max-width:900px){.hero-foot{grid-template-columns:1fr;gap:var(--sp4);align-items:start}}

/* the ledger: this page, measured in the visitor's own browser */
.ledger{display:flex;gap:0;border-top:1px solid var(--ink);padding-top:.55rem}
.ledger div{padding-right:var(--sp4);margin-right:var(--sp4);
  border-right:1px solid var(--rule)}
.ledger div:last-child{border:0;margin:0;padding:0}
.ledger dt{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .15rem}
.ledger dd{margin:0;font-family:var(--wood);font-variation-settings:"wdth" 76,"wght" 700;
  font-size:var(--t-2);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ledger dd.slow{color:var(--ink-3)}
.ledger dd u{text-decoration:none;font-family:var(--mono);font-size:.3em;
  letter-spacing:.12em;color:var(--ink-3);margin-left:.15rem;
  font-variation-settings:normal}
/* Three labelled cells plus their gutters need ~320px. Below that they wrap
   instead of being clipped by body{overflow-x:hidden}. */
@media(max-width:560px){
  .ledger{flex-wrap:wrap;row-gap:var(--sp3)}
  .ledger div{padding-right:0;margin-right:0;border-right:0;flex:1 0 100%}
}

/* =====================================================================
   BUTTONS — ink blocks and underlined text. Square, always.
   ===================================================================== */
.blk{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:1.05rem 1.6rem;text-decoration:none;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);transition:background .35s var(--ease),color .35s var(--ease)}
.blk:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.blk.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.blk.ghost:hover{background:var(--ink);color:var(--paper)}
.acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--sp4)}

/* =====================================================================
   SECTION HEAD — number set in the margin, title hanging beside it
   ===================================================================== */
.shead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp3);
  align-items:baseline;margin-bottom:var(--sp5)}
.shead .no{font-family:var(--wood);font-variation-settings:"wdth" 68,"wght" 700;
  font-size:clamp(2rem,5vw,3.4rem);line-height:.8;color:var(--rule);
  font-variant-numeric:tabular-nums}
.shead .t .caps{margin-bottom:.5rem}
/* on a phone the hanging numeral pushed the heading out of alignment with
   everything below it, so it stacks instead */
@media(max-width:700px){.shead{grid-template-columns:1fr;gap:var(--sp2)}}

/* =====================================================================
   WORK — off grid on purpose. Nothing lines up with anything.
   ===================================================================== */
.job{position:relative;display:grid;gap:var(--sp3) var(--sp5);
  grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;
  padding-block:var(--sp6) 0}
.job .shot{grid-column:1/9;position:relative}
.job .shot{transform:translateY(0);will-change:transform;
  transition:transform .38s cubic-bezier(.22,.61,.35,1)}
.job:hover .shot{transform:translateY(-9px)}
.job .chrome{display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--ink);border-bottom:0;background:var(--paper-2);
  padding:.5rem .7rem}
.job .chrome .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);
  flex:none}
.job .chrome .url{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.06em;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job .shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;object-position:top center;border:1px solid var(--ink)}
.job .say{grid-column:9/13}
.job:nth-of-type(even) .shot{grid-column:5/13}
.job:nth-of-type(even) .say{grid-column:1/5;order:-1}
.job .jn{display:block;font-family:var(--wood);
  font-variation-settings:"wdth" 66,"wght" 800;
  font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:.8;color:var(--rule);
  font-variant-numeric:tabular-nums;margin-bottom:var(--sp2)}
.job h3{margin:.6rem 0 .5rem}
.job p{font-size:var(--t-s);margin:0 0 var(--sp3)}
.job .say .caps{margin-bottom:.2rem}
.job .ms{font-family:var(--wood);font-variation-settings:"wdth" 74,"wght" 700;
  font-size:var(--t-2);line-height:1;color:var(--violet);font-variant-numeric:tabular-nums;
  display:block}
.job .ms u{text-decoration:none;font-family:var(--mono);font-size:.3em;letter-spacing:.12em;
  color:var(--ink-3);margin-left:.2rem;font-variation-settings:normal}
.job a.go{display:inline-block;margin-top:var(--sp3);font-family:var(--mono);
  font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:.2rem;transition:border-color .3s,color .3s}
.job a.go:hover{color:var(--violet);border-color:var(--violet)}
@media(max-width:860px){
  .job{grid-template-columns:1fr;padding-block:var(--sp5) 0}
  .job .shot,.job .say,.job:nth-of-type(even) .shot,.job:nth-of-type(even) .say{grid-column:1/-1}
  .job:nth-of-type(even) .say{order:0}
}

/* =====================================================================
   THE CHART — a printed measurement, not a glossy bar graph
   ===================================================================== */
.chart{margin-top:var(--sp5)}
.axis{position:relative;height:var(--sp3);margin-left:14rem;border-bottom:1px solid var(--ink)}
.axis span{position:absolute;bottom:.35rem;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.1em;color:var(--ink-3);transform:translateX(-50%)}
.axis span:last-child{transform:translateX(-100%)}
.axis span:last-child::after{left:100%}
.axis span::after{content:"";position:absolute;left:50%;bottom:-.55rem;width:1px;height:5px;
  background:var(--ink-3)}
.row{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:0;align-items:stretch;
  border-bottom:1px solid var(--rule-2)}
.row .name{padding:.75rem var(--sp3) .75rem 0;text-align:right;align-self:center}
.row .name b{display:block;font-size:var(--t-s);font-weight:600;color:var(--ink);
  line-height:1.3}
.row .name em{font-style:normal;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.row .plot{position:relative;height:100%;display:flex;align-items:center;
  border-left:1px solid var(--ink);padding:.75rem 0}
.row .fill{height:15px;width:0;background:var(--violet);position:relative}
.row .fill::after{content:attr(data-v);position:absolute;left:calc(100% + .55rem);top:50%;
  transform:translateY(-50%);font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.1em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.row.miss .fill{background:repeating-linear-gradient(135deg,var(--ink-3) 0 3px,
  transparent 3px 7px);border:1px solid var(--ink-3)}
.row.miss .fill::after{color:var(--ink-3);left:auto;right:0;top:-1.5rem;transform:none}
.row.miss{padding-top:.6rem}
.chart-foot{display:flex;flex-wrap:wrap;gap:var(--sp3);align-items:flex-start;
  margin-top:var(--sp4)}
.chart-foot .sp{margin-left:auto}
/* stranded on the right on a phone; reads better under the note */
@media(max-width:640px){.chart-foot .sp{display:none}}
.note{font-family:var(--mono);font-size:var(--t-mono);line-height:1.95;letter-spacing:.03em;
  color:var(--ink-3);max-width:64ch;text-transform:none}
.again{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;background:none;border:1px solid var(--ink);color:var(--ink);
  padding:.7rem 1.2rem;cursor:pointer;transition:background .3s,color .3s}
.again:hover{background:var(--ink);color:var(--paper)}
@media(max-width:760px){
  .axis{margin-left:0}
  .row{grid-template-columns:1fr}
  .row .name{text-align:left;padding:.75rem 0 .3rem}
  .row .plot{border-left:0;padding-bottom:1.9rem}
  .row .fill::after{left:0;top:calc(100% + .3rem);transform:none}
}

/* =====================================================================
   INCLUDED — a numbered list, hung on printed rules
   ===================================================================== */
.list{border-top:1px solid var(--ink)}
.list > div{display:grid;grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.45fr);
  gap:var(--sp3);padding-block:var(--sp4);border-bottom:1px solid var(--rule-2);
  align-items:start}
.list .k{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;
  color:var(--violet);padding-top:.35rem}
.list p{margin:0;font-size:var(--t-s)}
@media(max-width:820px){
  .list > div{grid-template-columns:2.6rem minmax(0,1fr)}
  .list p{grid-column:2}}

/* =====================================================================
   PRICE — the numbers ARE the section
   ===================================================================== */
.rates{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp5) var(--sp5);
  border-top:1px solid var(--ink);padding-top:var(--sp4)}
.rate .fig{font-family:var(--wood);font-variation-settings:"wdth" 66,"wght" 800;
  font-size:clamp(4.4rem,15vw,12rem);line-height:.8;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block}
.rate.two .fig{color:var(--violet)}
.rate .when{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin:var(--sp3) 0 var(--sp3);
  border-top:1px solid var(--rule);padding-top:var(--sp2)}
.rate ul{list-style:none;margin:0;padding:0}
.rate li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;font-size:var(--t-s)}
.rate li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--violet)}
.rate li::after{content:"";position:absolute;left:8px;top:calc(.62em + 2.5px);width:11px;
  height:1px;background:var(--violet);opacity:.5}
@media(max-width:760px){.rates{grid-template-columns:1fr}}

/* =====================================================================
   WEEK
   ===================================================================== */
.week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp4);
  border-top:1px solid var(--ink);padding-top:var(--sp4)}
.week article{position:relative;padding-left:var(--sp3);border-left:1px solid var(--rule)}
.week article:first-child{padding-left:0;border-left:0}
.week h3{margin:.5rem 0 .5rem}
.week p{font-size:var(--t-s);margin:0}
@media(max-width:860px){.week{grid-template-columns:1fr 1fr;gap:var(--sp4) var(--sp3)}
  .week article:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:520px){.week{grid-template-columns:1fr}
  .week article{padding-left:0;border-left:0;border-top:1px solid var(--rule-2);
    padding-top:var(--sp3)}
  .week article:first-child{border-top:0;padding-top:0}}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{max-width:840px;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule-2);padding:var(--sp3) 0}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:var(--sp3);
  justify-content:space-between;align-items:center;font-family:var(--sans);
  font-size:var(--t-1);font-weight:650;color:var(--ink);letter-spacing:-.014em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:14px;height:14px;flex:none}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;
  background:var(--violet);transition:transform .4s var(--ease)}
.faq summary .pm::before{left:0;right:0;top:6px;height:2px}
.faq summary .pm::after{top:0;bottom:0;left:6px;width:2px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details p{margin:var(--sp2) 0 0;font-size:var(--t-s);max-width:64ch}

/* =====================================================================
   CONTACT — a paper form. Fields are filled boxes ruled underneath in
   ink, the way a printed form is, rather than rounded input widgets.
   ===================================================================== */
.contact{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:var(--sp5) var(--sp6);align-items:start}
@media(max-width:900px){.contact{grid-template-columns:minmax(0,1fr);gap:var(--sp5)}}

/* trace bullets: the same node-and-run used everywhere else. This was
   referenced by the markup but never defined, so the list fell back to
   browser default discs. */
.traced{list-style:none;margin:0;padding:0}
.traced li{position:relative;padding-left:1.7rem;margin-bottom:.6rem}
.traced li:last-child{margin-bottom:0}
.traced li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--violet)}
.traced li::after{content:"";position:absolute;left:8px;top:calc(.62em + 2.5px);width:11px;
  height:1px;background:var(--violet);opacity:.5}
.pitch .traced li{font-size:var(--t-s)}
.direct{margin-top:var(--sp4);padding-top:var(--sp3);border-top:1px solid var(--ink);
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.direct a{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.06em;
  overflow-wrap:anywhere;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:.15rem;transition:color .3s,border-color .3s}
.direct a:hover{color:var(--violet);border-color:var(--violet)}

.cform .f{margin-bottom:var(--sp3)}
.cform .f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
@media(max-width:560px){.cform .f2{grid-template-columns:1fr}}
.cform label{display:block;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-3);
  margin-bottom:.5rem}
.cform label em{font-style:normal;opacity:.7}
.cform input,.cform select,.cform textarea{
  width:100%;display:block;font-family:var(--sans);font-size:var(--t-0);
  line-height:1.5;color:var(--ink);background:var(--paper-2);
  border:1px solid transparent;border-bottom:1px solid var(--ink);border-radius:0;
  padding:.8rem .9rem;appearance:none;-webkit-appearance:none;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.cform textarea{resize:vertical;min-height:7.5rem}
.cform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236b4ea8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.4rem}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;background:#fff;border-bottom-color:var(--violet);
  border-top-color:var(--rule-2);border-left-color:var(--rule-2);
  border-right-color:var(--rule-2)}
.cform .f.bad input,.cform .f.bad select,.cform .f.bad textarea{
  border-bottom-color:#a01f16;background:#faeceb}
.cform .cf-turnstile{margin:var(--sp3) 0}
/* Turnstile renders a fixed 300px-wide iframe. On a 320px phone the form
   column is ~268px, so the widget pushed the whole document 13px wider than
   the viewport. body{overflow-x:hidden} hid the scrollbar but the content was
   still being clipped. Scale it to fit and reserve the scaled height, since a
   transform does not affect layout. */
@media(max-width:560px){
  .cform .cf-turnstile{transform:scale(.85);transform-origin:left top;height:57px}
}
/* the wider page gutter leaves ~248px of column on a 320px phone, so the
   300px widget needs to come down further still */
@media(max-width:379px){
  .cform .cf-turnstile{transform:scale(.75);height:51px}
}
.cform .blk{width:100%;justify-content:center;margin-top:var(--sp2)}
.cform .blk[disabled]{opacity:.6;cursor:default}
.fnote{margin:var(--sp3) 0 0;font-family:var(--mono);font-size:var(--t-mono);
  line-height:1.8;letter-spacing:.04em;color:var(--ink-3);max-width:none}
.fnote.error{color:#a01f16}
.fnote.ok{color:var(--violet-d)}
.fnote a{color:inherit}

/* =====================================================================
   FOOTER — a colophon, in the printing sense: a note at the end of the
   work stating how the work was made. Which is the whole sales pitch.
   ===================================================================== */
.foot{position:relative;z-index:2;background:var(--deep);color:var(--on-deep-2);
  padding-block:var(--sp5) var(--sp4);margin-top:var(--sp6)}
.foot .caps{color:var(--on-deep-3)}
.foot p{font-size:var(--t-s);color:var(--on-deep-2)}

/* the weave stops just above; this is where it lands */
.foot .arrive{display:flex;align-items:stretch;height:18px;color:var(--lilac);
  opacity:.55;margin-bottom:var(--sp5)}
.foot .arrive i{display:block;background:currentColor;border-radius:2px}
.foot .arrive .n{width:8px;height:8px;border-radius:50%;flex:none;margin-top:10px}
.foot .arrive .a{height:3px;flex:0 0 clamp(48px,10vw,150px);margin-top:12.5px}
.foot .arrive .j{flex:none;color:inherit}
.foot .arrive .b{height:3px;flex:1;margin-top:2.5px;opacity:.38}

.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1.35fr;
  gap:var(--sp5) var(--sp4);align-items:start}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr;gap:var(--sp5) var(--sp4)}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr;gap:var(--sp4)}}

.fbrand img{height:34px;width:auto;margin-bottom:var(--sp3)}
.fbrand p{max-width:32ch}

.fcol{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.fcol .caps{margin-bottom:.4rem}
.fcol a{font-size:var(--t-s);line-height:1.4;color:var(--on-deep-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:.12rem;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.fcol a:hover{color:var(--on-deep);border-bottom-color:var(--lilac)}
.fcol.colophon{gap:var(--sp2)}
.fcol.colophon p{max-width:38ch}

.foot .direct{margin-top:var(--sp4);padding-top:var(--sp3);
  border-top:1px solid rgba(242,239,244,.18)}
.foot .direct a{color:var(--on-deep);border-bottom-color:rgba(242,239,244,.28)}
.foot .direct a:hover{color:var(--lilac);border-bottom-color:var(--lilac)}

.foot .base{display:flex;flex-wrap:wrap;gap:var(--sp3);align-items:center;
  margin-top:var(--sp6);padding-top:var(--sp3);border-top:1px solid rgba(242,239,244,.16)}
.foot .base .sp{margin-left:auto}

/* =====================================================================
   MOTION
   ===================================================================== */
[data-up]{opacity:0;transform:translateY(14px)}
[data-up].seen{opacity:1;transform:none;
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .head .l > i,.head.go .l > i{transform:none;transition:none}
  [data-up],[data-up].seen{opacity:1;transform:none;transition:none}
  .blk,.job .shot,.faq summary .pm::before,.faq summary .pm::after,
  .ix-in a,.ix-in a b,.ix-in a span,
  .ix-in a i::before,.ix-mark{transition:none}
  .job:hover .shot{transform:none}
}