@font-face{font-family:Oswald;font-weight:700;src:url(fonts/oswald-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Montserrat;font-weight:500;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Montserrat;font-weight:600;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Baskerville;font-weight:400;src:url(fonts/libre-baskerville-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Baskerville;font-weight:400;font-style:italic;src:url(fonts/libre-baskerville-latin-400-italic.woff2) format("woff2");font-display:swap}
:root{--slate:#283033;--cream:#FFF0E1;--paper:#E0D4C6;--ink:#660403;--soft:#B4BAB9;--muted:#4f585b;
--grain-dark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .19  0 0 0 0 .2  0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
--grain-light:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--slate);font:400 18px/1.75 Baskerville,Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero :focus-visible,.fresh :focus-visible,footer :focus-visible{outline-color:#fff}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
img{max-width:100%;height:auto;display:block}
/* texture + specks (static by default) */
.grain::before{content:"";position:absolute;inset:0;background-image:var(--grain-dark);opacity:.10;pointer-events:none;z-index:0}
.grain.on-dark::before{background-image:var(--grain-light);opacity:.06}
.specks{position:absolute;left:0;right:0;top:-18%;height:136%;pointer-events:none;z-index:1;overflow:clip}
.specks svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .8s ease-out}
.specks.b{top:-30%;height:160%}
/* hero */
.hero{position:relative;background:var(--cream);overflow:clip;color:#fff;padding-bottom:84px}
.blob{position:absolute;left:14%;bottom:0;width:420vmax;height:420vmax;transform:translate(-50%,50%) scale(0);animation:spread 2s cubic-bezier(.55,.05,.2,1) .1s forwards;z-index:0}
.blob path{fill:var(--slate)}
@keyframes spread{to{transform:translate(-50%,50%) scale(1)}}
.nav-spacer{height:94px}
html{scroll-padding-top:84px}
.bar{--th:clamp(18px,3vw,30px);position:fixed;left:0;right:0;top:0;z-index:50;background:transparent;transition:transform .38s cubic-bezier(.2,.7,.2,1),background-color .3s;will-change:transform}
.bar.solid{background:var(--slate);box-shadow:0 3px 0 var(--slate)}
.bar.hide{transform:translateY(calc(-100% - var(--th)))}
.barin{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:26px;transition:padding .3s}
.bar.solid .barin{padding-block:10px}
.bar .home{display:block;padding:4px 0}
.bar .home img{height:42px;width:auto;display:block;transition:height .3s}
.bar.solid .home img{height:36px}
.bar ul{list-style:none;display:flex;align-items:center;gap:clamp(14px,3vw,30px)}
.bar a{color:var(--soft);text-decoration:none}
.bar .lk{position:relative;display:block;padding:14px 2px;font:600 14px/1 Montserrat,sans-serif;letter-spacing:.06em}
.bar .lk:hover,.bar .lk[aria-current="true"]{color:#fff}
.bar .lk::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:6px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'><path d='M1 4 C 10 1, 18 6, 30 3 S 50 2, 59 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .35s ease}
.bar .lk[aria-current="true"]::after{clip-path:inset(0 0 0 0)}
.bar .soc{display:flex;gap:4px;margin-left:6px}
.bar .soc a{display:grid;place-items:center;width:44px;height:44px;color:var(--soft)}
.bar .soc a:hover{color:#fff}
.bar .soc svg{width:21px;height:21px}
.bar :focus-visible{outline-color:#fff}
.bartear{position:absolute;left:0;right:0;top:calc(100% - 2px);width:100%;height:var(--th);display:block;transform:scaleY(-1);opacity:0;transition:opacity .3s;pointer-events:none}
.bar.solid .bartear{opacity:1}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:40;width:48px;height:48px;border-radius:50%;border:2px solid var(--cream);background:var(--slate);color:var(--cream);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px rgba(40,48,51,.35);opacity:0;visibility:hidden;translate:0 14px;transition:opacity .3s,translate .3s,visibility 0s .3s}
.totop.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .3s,translate .3s}
.totop svg{width:22px;height:22px;transition:translate .25s}
.totop:hover svg{translate:0 -3px}
.totop :focus-visible,.totop:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:520px){
 .bar .lk{font-size:12.5px;letter-spacing:.04em}
 .bar .home img{height:36px}.bar.solid .home img{height:32px}
 .bar .soc{margin-left:0;gap:0}.bar .soc a{width:38px}
 .barin{gap:8px}
}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding-top:8px}
.hero-text .logo{width:min(470px,100%)}
.hero-text p{max-width:440px;margin-top:26px;color:var(--soft)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-block;padding:16px 26px;border:2px solid currentColor;border-radius:999px;font:600 14px/1 Montserrat,sans-serif;letter-spacing:.04em;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.solid{background:#fff;color:var(--slate);border-color:#fff}
.btn.solid:hover{background:var(--cream);border-color:var(--cream)}
.btn.ghost:hover{background:#fff;color:var(--slate)}
.stage{container-type:inline-size;position:relative;aspect-ratio:1/1.02;width:100%;max-width:560px;margin-left:auto}
.stage .bubble{position:absolute;left:0;top:0;width:76%;z-index:1}
.stage .says{position:absolute;left:calc(76% * .17);top:calc(76% * .22);width:calc(76% * .66);height:calc(76% * .36);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--slate);font:700 6.2cqw/1.1 Oswald,sans-serif;letter-spacing:.02em;text-transform:uppercase;z-index:2}
.stage .bard{position:absolute;right:-3%;bottom:-4%;width:54%;z-index:3}
.stage>*{opacity:0;transform:translateY(16px);animation:rise .7s ease forwards;transition:rotate .55s ease-out,margin .7s ease-out}
.stage .bubble{animation-delay:.35s}.stage .says{animation-delay:.55s}.stage .bard{animation-delay:.75s}
@keyframes rise{to{opacity:1;transform:none}}
/* tear edge */
.tear{--th:clamp(26px,4.2vw,50px);position:absolute;left:0;right:0;top:calc(var(--th)*-1 + 2px);width:100%;height:var(--th);display:block;z-index:3;pointer-events:none}
section{position:relative;padding:92px 0 80px}
h2{font:700 clamp(36px,6vw,58px)/1.05 Oswald,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.inkline{display:block;width:170px;height:12px;margin-top:10px;overflow:visible}
.inkline path{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.fresh .inkline path{stroke:#fff}
.lead{max-width:560px;margin-top:14px;font-style:italic;color:var(--muted)}
/* schedule */
.sched{margin-top:44px;list-style:none}
.row{display:grid;grid-template-columns:150px 1fr;gap:6px 28px;padding:26px 0;align-items:baseline;border-top:1px solid rgba(40,48,51,.18)}
.row:last-child{border-bottom:1px solid rgba(40,48,51,.18)}
.day{font:600 15px/1.4 Montserrat,sans-serif;color:var(--muted)}
.row h3{font:700 clamp(40px,7vw,72px)/1 Oswald,sans-serif;letter-spacing:.03em;transition:translate .35s ease;width:max-content;max-width:100%}
.row:hover h3{translate:10px 0}
.row .full{font:600 15px/1.5 Montserrat,sans-serif;margin-top:6px}
.row p{font-style:italic;color:var(--muted);max-width:480px}
.row .status{font:600 14px/1.4 Montserrat,sans-serif;margin-top:6px}
.row.live h3,.row.live .status{color:var(--ink)}
.row.soon h3{font-size:clamp(32px,5vw,46px);color:var(--muted)}
.row.soon .status{color:var(--muted)}
/* fresh ink */
.fresh{background:var(--slate);color:#fff;padding-bottom:84px;overflow-x:clip}
.fresh .lead{color:var(--soft)}
.fresh .wrap{position:relative}
/* handwritten Inky: written in left to right after the drop lands (progress --v is set from scroll) */
.inkword{position:absolute;z-index:0;right:14%;top:-36px;width:min(36%,360px);height:auto;rotate:-3deg;pointer-events:none;opacity:.94;
 -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--v,0)*112% - 12%),#0000 calc(var(--v,0)*112%));mask-image:linear-gradient(90deg,#000 calc(var(--v,0)*112% - 12%),#0000 calc(var(--v,0)*112%))}
@media (scripting:none){.inkword{--v:1}}
.fresh .wrap>*:not(.inkword){position:relative;z-index:1}
.drip{position:absolute;left:0;top:0;width:15px;height:26px;z-index:2;opacity:0;pointer-events:none;overflow:visible;transform-origin:50% 100%}
.drip path{fill:#fff}
.ripple{position:absolute;left:0;top:0;width:120px;height:40px;z-index:2;pointer-events:none;overflow:visible}
.ripple ellipse{fill:none;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0}
.ripple .pud{fill:#fff;stroke:none}
.embeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:40px}
.embeds:empty,.embed:empty{display:none}
/* about */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.about p{max-width:560px;margin-top:20px}
.about p+p{margin-top:14px}
.about .signoff{font:700 clamp(28px,4.5vw,38px)/1.1 Oswald,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-top:26px}
.about .scroll{width:min(320px,80%);justify-self:center;rotate:3deg;filter:drop-shadow(0 10px 14px rgba(40,48,51,.25))}
.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.trail path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.85}
.inkdrop{position:absolute;left:0;top:0;width:15px;height:26px;z-index:1;opacity:0;pointer-events:none;overflow:visible}
.inkdrop path{fill:var(--ink)}

.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:#fff;color:var(--slate);padding:12px 18px;border-radius:8px;font:600 14px/1 Montserrat,sans-serif;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
main:focus{outline:none}
body.nf{background:var(--slate);color:var(--cream);min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
body.nf img{width:150px;height:auto;margin:0 auto 28px;display:block}
body.nf h1{font:700 clamp(28px,6vw,44px)/1.1 Oswald,sans-serif;text-transform:uppercase;margin-bottom:12px}
body.nf p{color:var(--soft);margin-bottom:28px}
@media print{
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .bar,.totop,.skip,.trail,.inkdrop,.drip,.ripple{display:none!important}
 .row,.row h3,.stage>*,.about .scroll,.tear g,.specks svg,.inkline path{animation:none!important;opacity:1!important;clip-path:none!important;translate:none!important;transform:none!important;stroke-dashoffset:0!important}
 .inkword{--v:1;-webkit-mask-image:none;mask-image:none}
 .nav-spacer{height:24px}
 section,.row{break-inside:avoid}
}
/* footer */
footer{background:var(--slate);color:var(--soft);padding:48px 0 56px;position:relative}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.foot img{height:52px;width:auto}
.foot ul{list-style:none;font:500 15px/1.9 Montserrat,sans-serif}
.foot a{text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:44px}.foot svg{width:22px;height:22px;flex:none}.foot a:hover{color:#fff}
.copy{margin-top:28px;font:500 13px/1.4 Montserrat,sans-serif}
@media (max-width:820px){
 .hero-grid{grid-template-columns:1fr;gap:30px}
 .inkword{position:relative;right:auto;top:auto;display:block;margin:30px 0 -6px auto;width:min(84%,340px)}
 .hero-text{display:contents}
 .hero-text .logo{order:1;max-width:420px}
 .stage{margin:0 auto;max-width:480px;order:4}
 .hero-text p{order:2;margin-top:0}
 .hero-text .cta{order:3;margin-top:0}
 .about-grid{grid-template-columns:1fr}
 .about .scroll{order:-1;width:200px;justify-self:start}
 .row{grid-template-columns:1fr}
}
@media (max-width:560px){body{font-size:17px}section{padding:72px 0 64px}}

/* ---------- MOTION (all opt-in, static by default) ---------- */
/* Motion is intentionally forced on for every visitor, regardless of the device's reduced-motion setting (owner's decision). */
@media all{
 /* finite thinking breath on the bubble: 2 cycles, under 5 seconds */
 .stage .bubble{animation:rise .9s ease 1.4s forwards,breathe 2.2s ease-in-out 2.5s 2}
 .stage .says{animation:rise .9s ease 1.65s forwards,breathe 2.2s ease-in-out 2.5s 2}
 @keyframes breathe{50%{scale:1.025}}
}
@supports (animation-timeline:view()){
@media all{
 /* background specks drift with scroll, two depths */
 .specks.a svg{animation:driftA linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 .specks.b svg{animation:driftB linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 /* specks also float on touch screens, where there is no pointer to follow */
 @media (hover:none) and (pointer:coarse){
  .specks.a svg{animation:driftA linear both,floatA 15s ease-in-out infinite alternate;animation-timeline:view(),auto;animation-range:cover 0% cover 100%,normal}
  .specks.b svg{animation:driftB linear both,floatB 21s ease-in-out infinite alternate;animation-timeline:view(),auto;animation-range:cover 0% cover 100%,normal}
  @keyframes floatA{from{transform:translate(-14px,8px)}to{transform:translate(14px,-8px)}}
  @keyframes floatB{from{transform:translate(20px,-12px)}to{transform:translate(-20px,12px)}}
 }
 @keyframes driftA{from{translate:0 70px}to{translate:0 -70px}}
 @keyframes driftB{from{translate:0 -110px}to{translate:0 110px}}
 /* hero depth: bubble sits behind and moves slower than Shakespeare */
 .stage .bard{animation:rise .9s ease 1.9s forwards,parBard linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%}
 .stage .bubble{animation:rise .9s ease 1.4s forwards,breathe 2.2s ease-in-out 2.5s 2,parBub linear both;animation-timeline:auto,auto,view();animation-range:normal,normal,exit 0% exit 100%}
 .stage .says{animation:rise .9s ease 1.65s forwards,breathe 2.2s ease-in-out 2.5s 2,parBub linear both;animation-timeline:auto,auto,view();animation-range:normal,normal,exit 0% exit 100%}
 @keyframes parBard{to{translate:0 -140px}}
 @keyframes parBub{to{translate:0 -60px}}
 /* touch screens have no pointer to react to, so the bubble sways gently on a loop */
 @media (hover:none) and (pointer:coarse){
  .stage .bubble{animation:rise .9s ease 1.4s forwards,breathe 2.2s ease-in-out 2.5s 2,parBub linear both,sway 7s ease-in-out 3s infinite,bob 6s ease-in-out 3s infinite;animation-timeline:auto,auto,view(),auto,auto;animation-range:normal,normal,exit 0% exit 100%,normal,normal}
  .stage .says{animation:rise .9s ease 1.65s forwards,breathe 2.2s ease-in-out 2.5s 2,parBub linear both,sway 7s ease-in-out 3s infinite,bob 6s ease-in-out 3s infinite;animation-timeline:auto,auto,view(),auto,auto;animation-range:normal,normal,exit 0% exit 100%,normal,normal}
  .stage .bard{animation:rise .9s ease 1.9s forwards,parBard linear both,swayB 8s ease-in-out 3.2s infinite,bobB 7s ease-in-out 3.2s infinite;animation-timeline:auto,view(),auto,auto;animation-range:normal,exit 0% exit 100%,normal,normal}
  @keyframes sway{0%,100%{rotate:-2.6deg}50%{rotate:2.6deg}}
  @keyframes swayB{0%,100%{rotate:1.8deg}50%{rotate:-1.8deg}}
  @keyframes bob{0%,100%{margin-top:0}50%{margin-top:-14px}}
  @keyframes bobB{0%,100%{margin-top:0}50%{margin-top:10px}}
 }
 /* schedule: rows rise in, acronyms ink in left to right */
 .row{animation:rowin linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
 @keyframes rowin{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
 .row h3{animation:wipe linear both;animation-timeline:view();animation-range:entry 15% entry 75%}
 @keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
 /* hand-drawn underline draws as the heading arrives */
 .inkline path{animation:draw linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
 @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
 /* torn edges slide against each other and the sheet underneath opens a little as you scroll past */
 .tear g{animation-timeline:view();animation-range:cover 0% cover 100%;animation-fill-mode:both;animation-timing-function:linear}
 .tear .t1{animation-name:ripA}.tear .t2{animation-name:ripB}.tear .t3{animation-name:ripC}
 @keyframes ripA{from{translate:60px 0}to{translate:-60px 7px}}
 @keyframes ripB{from{translate:-24px 0}to{translate:24px 0}}
 @keyframes ripC{from{translate:-24px 0}to{translate:24px 0}}
 /* scroll on the about page settles into place */
 .about .scroll{animation:settle linear both,drift 8s ease-in-out infinite;animation-timeline:view(),auto;animation-range:entry 0% cover 60%,normal}
 @keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1.6deg)}}
 @keyframes settle{from{rotate:9deg;translate:0 50px}to{rotate:3deg;translate:0 0}}
}}