:root{
  color-scheme:light;
  --ground:#e6e0d2;--ground-2:#d9d2c1;--paper:#f6f3ec;
  --ink:#141414;--muted:#4d4a43;--rule:#141414;
  --green:#18bc42;--amber:#f2b33d;--red:#e0453d;
  --teal:#0e6f68;--teal-card:#d4ece8;
  --display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --m:max(16px,3.2vw);--gap:clamp(12px,2vw,28px);
  --s-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --s-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --s-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --s-h3:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);
  --s-head:clamp(2.375rem,1.3rem + 4.4vw,5rem);
  --s-giant:clamp(3rem,1rem + 8vw,6rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--ground:#0c0c0b;--ground-2:#1a1917;--paper:#1f1e1c;--ink:#e6e0d2;--muted:#b3ad9f;--rule:#e6e0d2;--teal-card:#0d2624;--teal:#2ab0a8}}
:root[data-theme="dark"]{color-scheme:dark;--ground:#0c0c0b;--ground-2:#1a1917;--paper:#1f1e1c;--ink:#e6e0d2;--muted:#b3ad9f;--rule:#e6e0d2;--teal-card:#0d2624;--teal:#2ab0a8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--display);font-size:var(--s-body);line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:var(--ground)}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
h1,h2{font-weight:900;letter-spacing:-.04em;line-height:.95;text-wrap:balance}
h3{font-weight:700;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.wrap{padding-inline:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-60px;z-index:60;background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:4px;font-weight:700}
.skip:focus{top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--ink);color:var(--ground);font:700 var(--s-body)/1 var(--display);text-decoration:none;cursor:pointer;transition:transform .15s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.link{font-weight:700;text-decoration:underline;text-decoration-thickness:3px}
.fd{white-space:nowrap;font-weight:900;letter-spacing:-.03em}
.fd .j{position:relative;display:inline-block;line-height:1}
/* Flag sits over the j stem where the dot would be: measured on Chivo Black (stem starts .051em, x-height .51em, baseline .845em down a 1em box) */
.fd .j svg{position:absolute;left:.051em;top:.105em;width:.24em;height:.171em;overflow:visible}
.fd .j polygon{fill:var(--red)}
.hdr{position:sticky;top:0;z-index:40;background:var(--ground);border-bottom:2px solid var(--rule)}
.hdr__in{display:flex;align-items:center;gap:28px;min-height:68px;position:relative}
.mark{font-size:2rem;line-height:1;text-decoration:none;margin-right:auto}
.nav{display:flex;gap:24px}
.nav a{font-weight:700;font-size:var(--s-small);text-decoration:none;padding:12px 0;background:linear-gradient(currentColor,currentColor) left calc(100% - 6px)/0 3px no-repeat;transition:background-size .25s var(--ease)}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{background-size:100% 3px}
.hdr .btn{min-height:44px;padding:0 18px;font-size:var(--s-small)}
.menu{display:none;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;font:700 var(--s-small)/1 var(--display);cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
@media (max-width:900px){.menu{display:inline-flex;align-items:center}.nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--ground);border-bottom:2px solid var(--rule);padding:8px var(--m) 16px}.nav.open{display:flex}.nav a{padding:12px 0;font-size:var(--s-body)}.hdr .btn{display:none}}
/* page shell */
.phero{padding-block:clamp(56px,10vh,120px) clamp(40px,7vh,80px);border-bottom:2px solid var(--rule)}
.phero h1{grid-column:1/span 10;font-size:var(--s-giant)}
.phero__lead{grid-column:1/span 7;margin-top:28px;font-size:var(--s-lead);line-height:1.4;max-width:38ch}
.phero__meta{grid-column:1/-1;margin-top:28px;font-size:var(--s-small);color:var(--muted)}
@media (max-width:900px){.phero h1,.phero__lead{grid-column:1/-1}}
.prose{max-width:66ch}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:1em}
.prose ul{padding-left:1.1em}
.prose li+li{margin-top:.4em}
.note{font-size:var(--s-small);color:var(--muted)}
/* footer */
.foot{background:#141414;color:#e6e0d2;border-top:2px solid #34322e;padding-block:56px 32px;overflow:hidden}
.foot ::selection{background:#e6e0d2;color:#141414}
.foot :focus-visible{outline-color:#e6e0d2}
.bigmark{font-size:clamp(5rem,24vw,22rem);line-height:.8;letter-spacing:-.02em;margin-left:-.04em}
.foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--gap);margin-top:72px;font-size:var(--s-small)}
.foot__cols h2{font-weight:700;letter-spacing:0;line-height:1.3;font-size:var(--s-small);color:#a29d92;margin-bottom:10px}
.foot__cols ul{list-style:none;padding:0;display:grid;gap:2px}
.foot__cols a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot__cols a:hover{text-decoration:underline}
.foot__legal{margin-top:48px;color:#a29d92;font-size:var(--s-small)}
@media (max-width:700px){.foot__cols{grid-template-columns:1fr 1fr}}
/* shared additions for the live site */
main:focus{outline:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn--light{background:var(--ground);color:var(--ink);box-shadow:inset 0 0 0 2px var(--rule)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.hdr,.foot,.skip,.back-to-top,.guide-toc,.guide-toc-toggle,.print-action{display:none!important}body{background:#fff;color:#000}}
/* Touch targets: 44px tall on every standalone link (Apple's minimum; WCAG 2.5.8 asks 24) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body .foot__cols a{min-height:44px;min-width:44px}
body .mark{display:inline-flex;align-items:center;min-height:44px}
body .foot__cols li + li{margin-top:0}
body .reach li a{display:inline-flex;align-items:center;min-height:44px;margin-top:0}
[id]{scroll-margin-top:80px}
/* Side cameras: with viewport-fit=cover, Safari reports where the camera is and the page keeps clear of it,
   on any phone and either side, in any orientation. */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* iPhone Duo closed (outer screen about 466 x 678 points): its camera sits on the right edge, so Menu moves left */
@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (min-width:440px) and (max-width:520px){
  body .menu{order:-1;padding-left:0;margin-right:4px;min-width:44px}
}
@media (max-width:900px){body .nav a{align-self:flex-start}}