:root{--paper:#e2dedb;--cream:#cdc6be;--ink:#1d1d1b;--mute:#69645f;--ember:#c03f13;
--fd:'Bodoni Moda','Didot','Times New Roman',serif;--fh:'Playfair Display',Georgia,serif;
--fb:'Source Serif 4',Georgia,'Times New Roman',serif;--fg:'Pirata One','Times New Roman',serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:light}
body{background:var(--paper);color:var(--ink);font:300 17px/1.45 var(--fb);letter-spacing:-.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
p{max-width:62ch}
ul{list-style:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 18px}
@media(min-width:760px){.wrap{padding:0 40px}}

/* ticker */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:9px 0}
.track{display:inline-flex;width:max-content;animation:tick 40s linear infinite}
.track span{padding-right:44px}
.track span::after{content:"\2726";color:var(--ember);margin-left:44px}
@keyframes tick{to{transform:translateX(-50%)}}

/* header */
.bar{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--ink)}
.bar-in{display:flex;justify-content:space-between;align-items:center;height:58px;position:relative}
.brand{font:700 20px var(--fd);text-decoration:none;letter-spacing:-.01em}
.bar-right{position:relative}
.m-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:flex;flex-direction:column;justify-content:space-between;width:28px;height:18px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink)}
.menu{display:none;position:absolute;right:0;top:42px;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--ink);padding:16px 20px;min-width:220px}
.m-toggle:checked ~ .menu{display:flex}
.menu a{text-decoration:none;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
@media(min-width:1000px){
  .burger{display:none}
  .menu{display:flex;position:static;flex-direction:row;gap:26px;border:0;padding:0;background:none;min-width:0}
  .menu a{font-size:12px}
}

/* masthead */
.mast{border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:18px 0 0;text-align:center}
.mast-meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.mast h1{font:700 clamp(64px,14vw,200px)/.86 var(--fd);letter-spacing:-.035em;padding:22px 0 14px;overflow-wrap:break-word}
.split span{display:inline-block;opacity:0;transform:translateY(55%);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes up{to{opacity:1;transform:none}}
.mast .tag{font:500 clamp(18px,2.2vw,26px)/1.25 var(--fh);max-width:30ch;margin:0 auto 22px;padding:0 16px}
.rule-draw{height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;animation:draw 1.4s .4s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{transform:scaleX(1)}}

/* sections */
.sec{padding:56px 0;border-top:1px solid var(--ink)}
.kick{display:flex;gap:14px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.kick b{font:700 15px var(--fd);color:var(--ink);letter-spacing:0}
.head{font:500 clamp(34px,5vw,66px)/1.02 var(--fh);letter-spacing:-.02em;max-width:18ch;margin-bottom:26px}
.two{display:grid;gap:36px}
@media(min-width:900px){.two{grid-template-columns:1fr 1.5fr;gap:56px}}
.cols{columns:1}
@media(min-width:760px){.cols{columns:2;column-gap:44px;column-rule:1px solid var(--ink)}}
.cols p{margin-bottom:16px}
.dropcap::first-letter{float:left;font:700 98px/.8 var(--fd);margin:8px 12px 0 0}
.pull{font:500 clamp(24px,3vw,36px)/1.2 var(--fh);border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:18px 0;margin:26px 0}
.lead{font-size:21px;line-height:1.35}
.note{font-size:14px;color:var(--mute)}
.todo{background:var(--cream);color:var(--ember);padding:1px 6px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:3px double var(--ink);border-left:1px solid var(--ink)}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:22px 18px 26px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.stat .n{font:700 clamp(48px,7vw,96px)/.9 var(--fd);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .l{font-size:15px;margin-top:12px;color:var(--mute);max-width:24ch}

/* cards */
.grid{display:grid;gap:28px}
@media(min-width:760px){.grid.g2{grid-template-columns:1fr 1fr}.grid.g3{grid-template-columns:repeat(3,1fr);gap:0}.grid.g4{grid-template-columns:repeat(4,1fr);gap:0}}
.grid.g3>*,.grid.g4>*{padding:0 0 0 0}
@media(min-width:760px){.grid.g3>*+*,.grid.g4>*+*{border-left:1px solid var(--ink);padding-left:22px}.grid.g3>*:not(:first-child),.grid.g4>*:not(:first-child){padding-left:22px}}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-top:1px solid var(--ink);padding-top:14px;height:100%}
.media{aspect-ratio:4/3;background:#b3aba0;color:var(--paper);display:grid;place-items:center;font-size:11px;letter-spacing:.14em;overflow:hidden;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card:hover .media{transform:scale(1.035)}
.card .kick{margin-bottom:10px}
.card h3{font:500 clamp(22px,2.4vw,28px)/1.12 var(--fh);margin-bottom:10px}
.card p{font-size:16px;color:var(--mute)}
.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.card .meta{margin-top:auto;padding-top:14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.new{display:inline-block;background:var(--ember);color:var(--paper);font-size:11px;line-height:1;padding:4px 6px;margin-left:10px;border-radius:2px;vertical-align:2px;letter-spacing:.06em}
.panel{border:1px solid var(--ink);padding:26px;background:transparent}
.panel h3{font:500 clamp(26px,3vw,38px)/1.1 var(--fh);margin:10px 0 14px}
.ticks li{padding:12px 0;border-bottom:1px solid var(--mute);font-size:17px;line-height:1.3}
.ticks li:first-child{border-top:1px solid var(--mute)}
.link{font-size:17px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;display:inline-block;margin-top:12px}
.link:hover{text-decoration-thickness:2px}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.tabs button{font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--ink);color:var(--ink);padding:9px 15px;cursor:pointer;transition:background .25s,color .25s}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tabs button:hover{background:var(--cream)}
.tabs button[aria-pressed="true"]:hover{background:var(--ink)}
.is-hidden{display:none !important}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}

/* steps */
.steps{display:grid;gap:28px}
@media(min-width:860px){.steps{grid-template-columns:repeat(4,1fr);gap:0}.steps>*{padding:0 22px;border-left:1px solid var(--ink)}.steps>*:first-child{padding-left:0;border-left:0}}
.step .n{font:700 64px/.9 var(--fd);display:block;margin-bottom:12px}
.step h3{font:500 22px/1.15 var(--fh);margin-bottom:8px}
.step p{font-size:16px;color:var(--mute)}

/* reveal on scroll (only when JS runs) */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}

/* closing */
.say{padding:64px 0 72px;border-top:3px double var(--ink)}
.gothic{font:400 clamp(64px,12vw,160px)/1 var(--fg);text-align:center}
.mail-big{display:block;text-align:center;font:500 clamp(26px,4.4vw,60px)/1.05 var(--fh);margin-top:14px;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px;overflow-wrap:anywhere}

/* footer */
.foot{border-top:3px double var(--ink);padding:22px 0 30px;font-size:13px;letter-spacing:.06em;color:var(--mute)}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .track{animation:none}
  .split span,.rule-draw,.rise{animation:none;opacity:1;transform:none}
  .rule-draw{transform:none}
  .card:hover .media{transform:none}
}