/* Generated by tools/dc_import.py from design/rendered/. Do not edit:
   edit the snapshot, re-render, re-import, reconcile. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-latin-ext.58a6b173d5ca.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-latin-ext.58a6b173d5ca.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geist-latin-ext.58a6b173d5ca.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-latin.9b6f5ff45b27.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-latin.9b6f5ff45b27.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geist-latin.9b6f5ff45b27.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: 'Geist Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/geistmono-latin-ext.745994b5cd95.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geistmono-latin-ext.745994b5cd95.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geistmono-latin-ext.745994b5cd95.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: 'Geist Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/geistmono-latin.5f3d6ad60f29.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geistmono-latin.5f3d6ad60f29.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geistmono-latin.5f3d6ad60f29.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;
}

html,body {margin:0;padding:0;background:#F1EADC;color:#242424}
body {--sans:'Geist',Arial,sans-serif;--mono:'PP Supply Mono','Geist Mono',Menlo,Consolas,monospace;font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a {color:inherit}
a:hover {color:#B91819}
button {font-family:var(--sans)}
@keyframes atcDash {to{stroke-dashoffset:-24}}
@keyframes atcPulse {0%,100%{opacity:1}50%{opacity:.3}}
@keyframes atcRise {from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes atcFade {from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce) {*,*::before,*::after{animation:none !important;transition:none !important}}
button,input {font-family:var(--sans)}
input::placeholder {color:#A2A299}

/* Deliberate departures from the snapshot. Each is load-bearing. */

/* The hero image is `width: 120%; margin-left: -10%`, a bleed that reaches past
   both edges of its column. Nothing clipped the right-hand side, so the page
   scrolled horizontally at every width and showed a strip of page background
   beside the content: 54px of it at 1024, 40px at 768, 20px at 390. Clipping at
   the page edge keeps the bleed the design asked for and drops the scrollbar.
   Clipping the image's own container instead would remove the bleed entirely. */
html,
body {
  overflow-x: hidden;
}

/* runtime-generated hover and focus rules */
.h55e14e8208e8:hover { color: rgb(206, 203, 191) !important; }
.h04fa79fdcb2a:hover { background: rgb(0, 0, 0) !important; }
.hbec1fb97283c:focus { outline: rgb(255, 255, 255) solid 2px !important; outline-offset: -2px !important; }
.h909c38ec9e3b:hover { background: rgb(65, 23, 30) !important; color: rgb(255, 255, 255) !important; }
.he7a2a2bb66ca:focus { outline: rgb(255, 255, 255) solid 2px !important; }
.h64dd0f1f89db:hover { color: rgb(255, 255, 255) !important; }
.hdd183235d9ac:hover { background: rgb(255, 255, 255) !important; color: rgb(185, 24, 25) !important; }
.h63de607ddddd:hover { opacity: 0.85 !important; }
.h6dce7f73a1f5:hover { color: rgb(185, 24, 25) !important; }
.h5127dc91198f:focus { outline: none !important; color: rgb(185, 24, 25) !important; }
.h5421a3fe1807:hover { background: rgb(241, 234, 220) !important; }
.h27d0c229c683:focus { border-color: rgb(36, 36, 36) !important; }
.h5d1bc583f57e:hover { background: rgb(65, 23, 30) !important; }


/* A collapsed tab draws the rule across its own bottom, so the line running along
   the strip carries straight through it and a row of collapsed tabs reads as one
   unbroken bar. An open tab draws nothing there: its own background covers the
   strip's rule, so it reads as continuous with the section it opens.

   Painted, NOT moved. Offsetting the tab by 1px did produce the same picture, but
   the tab visibly jumped on every click, which is a worse bug than the one it
   fixed. Nothing here changes geometry.

   The rule waits out the collapse. The body animates grid-template-rows over
   0.5s, so an undelayed line arrived while the section was still visibly closing,
   before the thing it is meant to close off had finished. Duration stays 0s
   because a 1px rule should land, not fade. Opening is NOT delayed: the tab has
   to stop drawing the line the instant it starts opening. Interpolating from a
   transparent shadow rather than `none` keeps that a well-defined colour change. */
[data-collapse]{box-shadow:inset 0 -1px 0 transparent;transition:box-shadow 0s}
[data-collapse][aria-expanded="false"]{box-shadow:inset 0 -1px 0 rgb(36,36,36);transition:box-shadow 0s 0.5s}

/* Read by assistive tech, never painted. The install line's host is Braille
   glyphs carrying no meaning, so they are aria-hidden and this stands in for
   them; without it a screen reader announces "$ curl -fsSL | sh", a broken
   command that gives no hint anything was withheld. Not `display:none` or
   `visibility:hidden`, which remove the text from the accessibility tree too. */
.atc-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Chopped bottom-right corner, at 45 degrees. Meant to be reused, so the cut is
   parameterised by ONE length: the polygon steps the same distance left along the
   bottom as it steps up the right side, which is what keeps the angle at 45 no
   matter the element's aspect ratio. A percentage would not — percentages in
   clip-path resolve per axis, so `calc(100% - 25%)` is 25% of the width on x and
   25% of the height on y, two different pixel amounts on anything but a square.

   The default scales with the viewport so the cut stays about a quarter of the
   way up a half-width landscape image: ~65px at 1024, ~95px at 1440 and above.
   Override --atc-chop on any element that wants a bigger or smaller bite. */
.atc-chop{--atc-chop:clamp(60px,6.6vw,96px);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--atc-chop)),calc(100% - var(--atc-chop)) 100%,0 100%)}
/* Mirrored: the bite comes out of the bottom-LEFT instead. Overrides the
   clip-path above, so `class="atc-chop atc-chop-left"` reads as the effect
   plus which corner. */
.atc-chop-left{clip-path:polygon(0 0,100% 0,100% 100%,var(--atc-chop) 100%,0 calc(100% - var(--atc-chop)))}

/* Photo left, copy right, at a deliberate 0.45 : 1 split. The page's other
   two-column areas use repeat(auto-fit, minmax(...)) and land on equal columns;
   equal columns here would starve the item grid beside the photo and push it from
   two rows to three, which is what makes this section balloon. Explicit fractions
   need an explicit breakpoint, hence the media query: one column below 900px,
   where the photo goes back above the copy. */
.atc-split{display:grid;gap:clamp(32px,4vw,64px);align-items:start;grid-template-columns:1fr}
/* The item grid is stated, not inferred. auto-fit picks a column count from the
   available width, and the column beside the photo lands in exactly the range
   where that flips: measured 1x4 between 960 and 1152 and 2x2 from 1280 up, so
   the section swung ~170px taller across ordinary laptop widths. Two columns is
   the design, so two columns is written down. */
.atc-split-body > div{grid-template-columns:1fr}
@media (min-width:600px){.atc-split-body > div{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (min-width:900px){
  /* The heading sits alone in the right column's first row; the photo and the
     item grid share the second. That is what lets the photo centre against the
     heading-plus-table block instead of lining up with one edge of it. Doing it
     with a margin would mean guessing the heading's height, and the heading
     rewraps with the viewport. Below 900px the placements drop away and the
     three stack in source order: heading, photo, items.

     1.15fr : 1fr gives the photo the wider column. It was 0.45 : 1 when the
     table still held six items in three columns; four items in two need less
     room, and the photo took the difference. */
  .atc-split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);row-gap:0}
  .atc-split-head{grid-column:2;grid-row:1}
  .atc-split-body{grid-column:2;grid-row:2}
  /* The photo spans both rows and centres itself against them, so it sits
     against the middle of the heading-plus-table block rather than lining up
     with one edge of it. */
  .atc-split-media{grid-column:1;grid-row:1 / span 2;align-self:center}
}