/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jakarta);font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px;border-radius:4px}
.on-ink :focus-visible,.on-oxblood :focus-visible{outline-color:var(--paper)}
::selection{background:var(--oxblood);color:var(--paper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- type ---------- */
h1,h2,h3,.display{font-family:var(--fraunces);font-weight:600;font-variation-settings:"opsz" 144;letter-spacing:-.022em;line-height:1.04;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.012em;font-variation-settings:"opsz" 48}
h1 em,h2 em,h3 em,.display em{font-style:italic;font-weight:500;color:var(--oxblood)}
.on-ink em,.on-oxblood em{color:inherit}
p{text-wrap:pretty}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-2);max-width:40em}
.on-ink .lede,.on-oxblood .lede{color:rgba(243,238,228,.82)}
.kicker{display:flex;align-items:center;gap:.9em;font-size:var(--fs-small);font-weight:600;letter-spacing:.02em;color:var(--oxblood);margin-bottom:1.4rem}
.kicker::before{content:"";width:2.2em;height:1px;background:currentColor}
.on-ink .kicker,.on-oxblood .kicker{color:var(--stone)}
.prose p+p{margin-top:1.1em}
.prose{max-width:38em}
.sig{font-family:var(--fraunces);font-style:italic;font-weight:500;font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);color:var(--oxblood);letter-spacing:-.01em}

/* hand-drawn underline, drawn by motion.js */
.ul{position:relative;white-space:nowrap}
.ul svg{position:absolute;left:-2%;bottom:-.3em;width:104%;height:.34em;overflow:visible;pointer-events:none}
.ul path{fill:none;stroke:var(--oxblood);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--max) + var(--pad-l) + var(--pad-r));margin-inline:auto;padding-left:var(--pad-l);padding-right:var(--pad-r)}
.sec{padding-block:var(--sec)}
.sec-tight{padding-block:calc(var(--sec) * .6)}
.sec-head{display:grid;gap:1.2rem;margin-bottom:clamp(2.2rem,5vw,4rem);max-width:46rem}
.split{display:grid;gap:clamp(2rem,6vw,6rem);align-items:start}
@media (min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.split.rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.band{position:relative}
.hair{border:0;height:1px;background:var(--line);margin:0}

/* the oxblood margin rule that runs down every page and fills as you scroll */
.margin-rule{position:fixed;left:var(--rule-x);top:0;bottom:0;width:2px;z-index:40;pointer-events:none;background:rgba(123,35,50,.16)}
.margin-rule i{display:block;width:100%;height:100%;background:var(--oxblood);transform-origin:top;transform:scaleY(var(--progress,0))}
/* where scroll timelines exist the rule fills from the page's own scroll, with no JavaScript */
@supports (animation-timeline: scroll()) {
  .margin-rule i{animation-name:margin-fill;animation-duration:auto;animation-timing-function:linear;
    animation-fill-mode:both;animation-timeline:scroll(root block)}
  @keyframes margin-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
html:not(.js) .margin-rule i{transform:none}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.95em 1.7em;border:0;border-radius:999px;background:var(--oxblood);color:var(--paper);font-weight:600;font-size:.97rem;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(123,35,50,.7);background:#6B1D2A}
.btn:active{transform:translateY(0);box-shadow:none}
.btn svg{width:1.1em;height:1.1em;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.on-oxblood .btn{background:var(--paper);color:var(--oxblood)}
.lnk{display:inline-flex;align-items:center;gap:.5em;font-weight:600;text-decoration:none;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .3s var(--ease),color .2s}
.lnk:hover{color:var(--oxblood);background-size:0 1px;background-position:100% 100%}
.lnk svg{width:1.05em;height:1.05em;transition:transform .25s var(--ease)}
.lnk:hover svg{transform:translateX(4px)}
.on-ink .lnk,.on-oxblood .lnk{color:var(--paper)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:2rem}

/* ---------- logo lockup ---------- */
.lockup{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:var(--word);font-size:1.32rem}
.lockup .mark{width:1.55em;height:1.55em;flex:none}
.wm{font-family:var(--fraunces);font-weight:600;font-variation-settings:"opsz" 48;letter-spacing:-.015em;line-height:1;white-space:nowrap}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.5rem;height:var(--header-h);padding-left:var(--pad-l);padding-right:var(--pad-r);background:rgba(243,238,228,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--sage);transition:height .3s var(--ease)}
.site-nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem);margin-left:auto;font-size:.95rem;font-weight:500}
.site-nav a:not(.btn){text-decoration:none;position:relative;padding:.4em 0}
.site-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--oxblood);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.site-nav a:not(.btn):hover::after,.site-nav a[aria-current]::after{transform:scaleX(1)}
.site-nav a[aria-current]{color:var(--oxblood)}
.nav-cta{display:none}
.header-cta{padding:.8em 1.4em;font-size:.92rem}
.menu-btn{display:none;position:relative;width:44px;height:44px;margin-right:-8px;border:0;background:none;cursor:pointer}
.menu-btn i{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-btn i:nth-of-type(1){top:17px}.menu-btn i:nth-of-type(2){top:26px}
.menu-btn[aria-expanded="true"] i:nth-of-type(1){top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-of-type(2){top:21px;transform:rotate(-45deg)}

@media (max-width:960px){
  :root{--header-h:62px}
  .site-header{gap:1rem;background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}   /* a filtered ancestor would trap the fixed menu inside the header on iOS */
  .lockup{font-size:1.06rem}
  .header-cta{display:none}                 /* the button lives in the menu and in the bar at the foot of the screen */
  .menu-btn{display:block;margin-left:auto}
  .site-nav{position:fixed;inset:var(--header-h) 0 0 0;z-index:49;flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;margin:0;padding:2rem var(--pad-r) 4rem var(--pad-l);background:var(--paper);font-family:var(--fraunces);font-weight:600;font-size:clamp(2rem,9vw,3rem);letter-spacing:-.02em;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease),opacity .3s,visibility 0s .5s;overflow-y:auto}
  .site-nav.open{visibility:visible;opacity:1;clip-path:inset(0);transition:clip-path .5s var(--ease),opacity .3s}
  .site-nav a:not(.btn){opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
  .site-nav.open a:not(.btn){opacity:1;transform:none;transition-delay:calc(.06s * var(--i, 0))}
  .site-nav .nav-cta{display:inline-flex;margin-top:1.8rem;font-family:var(--jakarta);font-size:1rem;letter-spacing:0}
  body.menu-open{overflow:hidden}
}
@media (max-width:360px){.lockup .wm{font-size:.95rem}}

/* a quiet bar at the foot of the screen once the hero is behind you */
.reach{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  padding:10px var(--pad-r) calc(10px + env(safe-area-inset-bottom)) var(--pad-l);
  background:rgba(243,238,228,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--ease);transform:translateY(110%)}
.reach .btn{width:100%}
.reach.up{opacity:1;pointer-events:auto;transform:translateY(0)}
@media (max-width:960px){.js .reach{display:block}}
@media (prefers-reduced-motion:reduce){.reach{transition:none}}
@media (max-width:430px){.header-cta{padding:.68em .95em;font-size:.8rem;letter-spacing:-.01em}}

/* ---------- footer ---------- */
.site-footer{padding-block:clamp(56px,8vw,96px) 32px;font-size:.95rem}
.footer-grid{display:grid;gap:2.5rem}
@media (min-width:800px){.footer-grid{grid-template-columns:1.4fr 1fr 1.2fr}}
.footer-desc{margin-top:1.1rem;color:rgba(243,238,228,.72)}
.footer-nav,.footer-contact{display:grid;gap:.6rem;align-content:start}
.site-footer a{text-decoration:none;color:rgba(243,238,228,.86);transition:color .2s}
.site-footer a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.footer-base{margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1px solid rgba(243,238,228,.16);display:grid;gap:1rem;font-size:var(--fs-small);color:rgba(243,238,228,.66)}
.footer-base .crisis{max-width:56em;color:rgba(243,238,228,.86)}
.footer-base .crisis b{color:var(--paper)}
.footer-base .crisis a{text-decoration:underline;text-underline-offset:3px}

/* ---------- page head (inner pages) ---------- */
.page-head{padding-block:clamp(56px,9vw,130px) clamp(40px,6vw,80px)}
.page-head h1{max-width:14em}
.page-head .lede{margin-top:1.6rem}

/* ---------- cross-page transition: walk through the doorway ---------- */
@media (min-width:900px){@view-transition{navigation:auto}}   /* on a phone the two pages overlapped mid-move, so plain navigation there */
@keyframes door-in{from{clip-path:inset(100% 50% 0 50% round 50vw 50vw 0 0)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes door-out{to{opacity:.35;transform:scale(.985)}}
::view-transition-old(root){animation:door-out .5s var(--ease) both}
::view-transition-new(root){animation:door-in .7s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}