@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Karla:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&family=Caveat:wght@400;600&display=swap");

/* ==========================================================
   HALLENBRICK BREWERY — a record of a drinking place
   ========================================================== */
:root{
  --night:#120c09;
  --night-2:#1c130f;
  --brick:#7c3a2a;
  --brick-2:#a0503a;
  --amber:#e9ab3f;
  --amber-2:#f5c86b;
  --foam:#f7ecd8;
  --paper:#f1e6d3;
  --paper-2:#e6d8bf;
  --ink:#2a1a12;
  --chalk:#f4efe4;
  --board:#1f2a24;
  --muted:#8a7362;
  --muted-d:#a8917c;
  --line:rgba(42,26,18,.16);
  --line-d:rgba(247,236,216,.14);
  --g:clamp(20px,5.5vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Abril Fatface",Georgia,serif;
  --body:Karla,system-ui,sans-serif;
  --chalkf:Caveat,cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--foam);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--amber);color:var(--night)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.96;letter-spacing:.005em}
p{max-width:58ch}
.eyebrow{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}
.muted{color:var(--muted-d)}
.paper .muted{color:var(--muted)}
.chalkf{font-family:var(--chalkf)}

/* ---------- transition: lights down ---------- */
.dim{position:fixed;inset:0;z-index:250;background:var(--night);pointer-events:none;opacity:1;transition:opacity .9s var(--ease)}
.dim.off{opacity:0}
.dim.on{opacity:1;transition:opacity .55s var(--ease)}
.dim:not(.off):not(.on){animation:dimSafe .01s 2.4s forwards}
@keyframes dimSafe{to{opacity:0}}

/* ---------- top ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:22px var(--g);transition:transform .7s var(--ease),background .6s,padding .5s;color:var(--foam)}
.top.scrolled{padding:14px var(--g);background:rgba(18,12,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d)}
.top.hide{transform:translateY(-105%)}
.wordmark{font-family:var(--display);font-size:24px;letter-spacing:.02em;display:flex;align-items:center;gap:14px}
.wordmark .seal{width:38px;height:38px;border-radius:50%;border:2px solid var(--amber);display:grid;place-items:center;font-size:15px;color:var(--amber);position:relative}
.wordmark .seal:after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px dashed rgba(233,171,63,.6)}
.top nav{display:flex;gap:28px}
.top nav a{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.8;position:relative;padding:4px 0;transition:opacity .3s,color .3s}
.top nav a:hover,.top nav a.on{opacity:1;color:var(--amber-2)}
.top nav a.on:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--amber);border-radius:2px}
.top .closed{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line-d);border-radius:4px;color:var(--muted-d)}
.burger{display:none;width:44px;height:44px;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:26px}
.burger.open i:nth-child(1){top:22px;transform:rotate(45deg)}.burger.open i:nth-child(2){top:22px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:95;background:var(--night);display:none;flex-direction:column;justify-content:center;padding:0 var(--g);gap:8px}
.menu.open{display:flex}
.menu a{font-family:var(--display);font-size:clamp(40px,11vw,76px);color:var(--foam);line-height:1.1}
.menu a:hover{color:var(--amber-2)}

/* ---------- POUR hero ---------- */
.pour{position:relative;height:100svh;min-height:640px;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,#2a1a11,var(--night) 60%);isolation:isolate}
.pour canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.pour .glass{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.55);background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 12%,transparent 88%,rgba(255,255,255,.06))}
.pour .tap{position:absolute;left:calc(22% - 34px);top:-6px;z-index:3;width:68px;pointer-events:none;opacity:0;animation:tapIn 1s .1s var(--ease) forwards}
@keyframes tapIn{to{opacity:1}}
.pour .tap svg{width:100%;height:auto}
.pour-copy{position:absolute;inset:0;z-index:4;display:grid;grid-template-rows:1fr auto;padding:120px var(--g) 30px;pointer-events:none}
.pour-copy a{pointer-events:auto}
.pour-head{align-self:center;text-align:center;max-width:16ch;margin:0 auto;mix-blend-mode:normal}
.pour-head .eyebrow{display:block;margin-bottom:22px;opacity:0;animation:rise 1.4s .6s var(--ease) forwards}
.pour-head h1{font-size:clamp(58px,10.4vw,172px);line-height:.88;color:var(--foam);text-shadow:0 6px 40px rgba(0,0,0,.45)}
.pour-head h1 .w{display:inline-block;opacity:0;transform:translateY(30px);animation:rise 1.6s var(--ease) forwards;animation-delay:calc(.9s + var(--i) * .12s)}
.pour-head h1 em{font-style:normal;color:var(--amber-2)}
.pour-head p{margin:26px auto 0;max-width:44ch;font-size:18px;color:rgba(247,236,216,.86);opacity:0;animation:rise 1.4s 1.9s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.pour-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;opacity:0;animation:rise 1.4s 2.4s var(--ease) forwards}
.pour-foot .l,.pour-foot .r{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,236,216,.75)}
.pour-foot .r{text-align:right}
.pour-foot .l b,.pour-foot .r b{color:var(--amber-2)}
.pour-foot .hint{display:grid;justify-items:center;gap:8px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:rgba(247,236,216,.6)}
.pour-foot .hint i{width:1px;height:38px;background:rgba(247,236,216,.35);position:relative;overflow:hidden}
.pour-foot .hint i:after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--amber);animation:drip 2s ease-in-out infinite}
@keyframes drip{to{top:100%}}

/* ---------- ribbon ---------- */
.ribbon{background:var(--brick);color:var(--foam);overflow:hidden;padding:16px 0;border-top:3px solid var(--amber);border-bottom:3px solid var(--amber)}
.ribbon .t{display:flex;width:max-content;animation:rib 42s linear infinite}
.ribbon span{font-family:var(--display);font-size:clamp(20px,2.4vw,34px);padding:0 30px;white-space:nowrap;display:inline-flex;align-items:center;gap:30px}
.ribbon span:after{content:"✦";color:var(--amber-2);font-size:.7em}
@keyframes rib{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:clamp(90px,12vw,180px) var(--g);position:relative}
.paper{background:var(--paper);color:var(--ink)}
.paper-2{background:var(--paper-2);color:var(--ink)}
.night-2{background:var(--night-2)}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline;margin-bottom:clamp(40px,6vw,80px)}
.sec-head .no{font-family:var(--display);font-size:clamp(40px,4.4vw,72px);color:var(--amber);line-height:1}
.paper .sec-head .no,.paper-2 .sec-head .no{color:var(--brick)}
.sec-head h2{font-size:clamp(40px,5.6vw,96px)}
.sec-head h2 em{font-style:normal;color:var(--amber-2)}
.paper .sec-head h2 em,.paper-2 .sec-head h2 em{color:var(--brick)}

/* the room */
.room{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.room p{font-size:19px;line-height:1.6}
.room p+p{margin-top:18px}
.frame{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:4/5;background:#000}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.8s var(--ease)}
.frame.rv-img{clip-path:inset(0 0 100% 0 round 6px);transition:clip-path 1.6s var(--ease)}
.frame.rv-img.in{clip-path:inset(0 round 6px)}
.frame.rv-img.in img,.frame.rv-img.in video{transform:scale(1)}
.frame .cap{position:absolute;left:18px;bottom:16px;font-family:var(--chalkf);font-size:22px;color:var(--foam);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.frame.wide{aspect-ratio:16/10}
.pull{font-family:var(--display);font-size:clamp(30px,3.2vw,48px);line-height:1.15;color:var(--amber-2);border-left:4px solid var(--brick-2);padding-left:24px;margin-top:34px}
.paper .pull{color:var(--brick)}

/* ---------- THE BOARD (chalkboard) ---------- */
.board-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.board{background:var(--board);border:14px solid #4a2c1c;border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 0 80px rgba(0,0,0,.45);padding:clamp(24px,3vw,44px);color:var(--chalk);position:relative;overflow:hidden}
.board:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.08),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(255,255,255,.05),transparent 50%);pointer-events:none}
.board h3{font-family:var(--chalkf);font-weight:600;font-size:clamp(34px,3.6vw,54px);text-align:center;margin-bottom:6px;letter-spacing:.02em}
.board .sub{font-family:var(--chalkf);text-align:center;font-size:20px;color:rgba(244,239,228,.7);margin-bottom:26px}
.board .sub:before,.board .sub:after{content:" ~ "}
.chalk-line{display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px dashed rgba(244,239,228,.22);font-family:var(--chalkf);font-size:clamp(22px,2.2vw,30px);opacity:0;transform:translateX(-8px);transition:opacity .5s var(--d,0ms),transform .6s var(--ease) var(--d,0ms);position:relative}
.chalk-line.in{opacity:1;transform:none}
.chalk-line .n{color:var(--amber-2);font-weight:600}
.chalk-line .b{font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:.06em;color:rgba(244,239,228,.6);text-transform:uppercase}
.chalk-line.house .name{color:var(--amber-2);font-weight:600}
.chalk-line.house:after{content:"house";position:absolute;right:0;top:-6px;font-family:var(--body);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--night);background:var(--amber);padding:3px 7px;border-radius:2px;transform:rotate(3deg)}
.chalk-line:hover .name{text-decoration:underline wavy rgba(233,171,63,.6)}
.board .foot{margin-top:20px;font-family:var(--chalkf);font-size:19px;color:rgba(244,239,228,.6);text-align:center}
.taps{display:flex;gap:10px;justify-content:center;margin-top:30px}
.taps i{width:14px;height:56px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#4a2c1c,#2b1a11);position:relative;box-shadow:0 4px 8px rgba(0,0,0,.5)}
.taps i:before{content:"";position:absolute;left:50%;top:-14px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--amber-2),#8a5a17);transform:translateX(-50%)}
.taps i.house:before{background:radial-gradient(circle at 35% 35%,#ffe1a0,var(--brick))}
.board-side h2{font-size:clamp(40px,4.8vw,80px);margin-bottom:22px}
.board-side h2 em{font-style:normal;color:var(--amber-2)}
.board-side p{font-size:18px}
.medal{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:14px 18px;border:1px solid rgba(233,171,63,.5);border-radius:6px;background:rgba(233,171,63,.06)}
.medal i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd98a,#a3681b);display:grid;place-items:center;font-family:var(--display);font-size:16px;color:var(--night);font-style:normal}
.medal b{display:block;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.medal span{font-size:14px;color:var(--muted-d)}

/* ---------- COASTERS ---------- */
.coasters-sec{background:linear-gradient(180deg,#3b2416,#2a1810 40%,#1d100b);position:relative;overflow:hidden;border-top:6px solid #5a3a26}
.coasters-sec:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px),repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 140px);pointer-events:none}
.coasters-sec .sec-head{position:relative;z-index:2}
.coasters{position:relative;height:min(62vh,560px);z-index:2;touch-action:none;user-select:none}
.coaster{position:absolute;left:0;top:0;width:clamp(150px,17vw,220px);aspect-ratio:1;border-radius:50%;background:#e9dcc3;color:var(--ink);display:grid;place-items:center;text-align:center;padding:14px;cursor:grab;box-shadow:0 14px 30px -10px rgba(0,0,0,.7),inset 0 0 0 6px #e9dcc3,inset 0 0 0 8px var(--brick);will-change:transform;transition:box-shadow .3s}
.coaster.held{cursor:grabbing;box-shadow:0 30px 50px -14px rgba(0,0,0,.85),inset 0 0 0 6px #e9dcc3,inset 0 0 0 8px var(--brick)}
.coaster:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");pointer-events:none}
.coaster b{display:block;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);line-height:1;margin:6px 0 4px}
.coaster small{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--brick)}
.coaster span{display:block;font-size:12px;color:#5a4636;line-height:1.3;margin-top:4px}
.coaster.dark{background:var(--night);color:var(--foam);box-shadow:0 14px 30px -10px rgba(0,0,0,.7),inset 0 0 0 6px var(--night),inset 0 0 0 8px var(--amber)}
.coaster.dark small{color:var(--amber)}
.coaster.dark span{color:var(--muted-d)}
.coasters-hint{position:absolute;right:var(--g);bottom:22px;z-index:3;font-family:var(--chalkf);font-size:22px;color:rgba(247,236,216,.6);transform:rotate(-3deg)}

/* ---------- THEN clock ---------- */
.then{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.then .clock{font-family:var(--display);font-size:clamp(80px,12vw,210px);line-height:.85;color:var(--foam)}
.then .clock small{font-family:var(--body);font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted-d);display:block;margin-top:14px}
.then .state{display:inline-block;margin-top:24px;padding:10px 16px;border-radius:4px;border:1px solid var(--line-d);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d)}
.then .state.lit{border-color:var(--amber);color:var(--amber-2);box-shadow:0 0 30px -6px rgba(233,171,63,.5)}
.then h2{font-size:clamp(40px,5vw,84px);margin-bottom:18px}
.then h2 em{font-style:normal;color:var(--amber-2)}
.then .line{font-family:var(--chalkf);font-size:clamp(24px,2.4vw,34px);color:var(--foam);margin:14px 0 30px}
.hours{border-top:1px solid var(--line-d)}
.hours div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line-d);font-size:15px}
.hours div b{font-weight:700;color:var(--foam)}
.hours div span{color:var(--muted-d)}
.then .fine{font-size:13px;color:var(--muted-d);margin-top:20px}

/* ---------- the record: timeline ---------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--brick)}
.tl{padding:34px 28px 40px 0;position:relative}
.tl+.tl{padding-left:28px;border-left:1px solid var(--line)}
.tl:before{content:"";position:absolute;left:-1px;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--brick);border:3px solid var(--paper)}
.tl+.tl:before{left:-9px}
.tl .y{font-family:var(--display);font-size:clamp(50px,6vw,100px);line-height:1;color:var(--brick)}
.tl h3{font-size:clamp(24px,2.4vw,34px);margin:14px 0 10px}
.tl p{color:#5a4636;font-size:16px}
.memorial{margin-top:clamp(40px,6vw,80px);padding:clamp(28px,4vw,50px);border:1px solid var(--line);border-radius:6px;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;background:rgba(255,255,255,.35)}
.memorial .glassico{width:64px;height:84px;position:relative}
.memorial .glassico:before{content:"";position:absolute;inset:0;border:2px solid var(--brick);border-top:0;border-radius:0 0 10px 10px;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.memorial .glassico:after{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:44px;background:linear-gradient(180deg,var(--amber-2),var(--brick-2));clip-path:polygon(0 0,100% 0,90% 100%,10% 100%)}
.memorial h3{font-size:clamp(26px,2.6vw,40px);margin-bottom:8px}
.memorial p{color:#5a4636}

/* ---------- Hawkins map ---------- */
.hawk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.hawk h2{font-size:clamp(44px,5.6vw,96px);margin-bottom:20px}
.hawk h2 em{font-style:normal;color:var(--amber-2)}
.hawk .addr{font-family:var(--display);font-size:clamp(24px,2.4vw,36px);line-height:1.2;margin:20px 0}
.map{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#20140f;border:1px solid var(--line-d)}
.map .st{position:absolute;background:rgba(247,236,216,.18)}
.map .st.h{left:0;right:0;height:3px}
.map .st.v{top:0;bottom:0;width:3px}
.map .lbl{position:absolute;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,236,216,.55);background:#20140f;padding:2px 6px}
.map .pin{position:absolute;left:46%;top:44%;width:14px;height:14px;border-radius:50%;background:var(--amber);transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(233,171,63,.6);animation:ping 2.4s infinite}
@keyframes ping{to{box-shadow:0 0 0 24px rgba(233,171,63,0)}}
.map .pin-l{position:absolute;left:calc(46% + 14px);top:calc(44% - 8px);font-family:var(--chalkf);font-size:20px;color:var(--amber-2);white-space:nowrap}
.map .n{position:absolute;right:12px;top:10px;font-size:10px;letter-spacing:.2em;font-weight:700;color:rgba(247,236,216,.5)}
.map .cap{position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,236,216,.45)}

/* ---------- last call ---------- */
.last{position:relative;min-height:90vh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:140px var(--g);isolation:isolate}
.last>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.55)}
.last:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(18,12,9,.2),rgba(18,12,9,.85))}
.last h2{font-size:clamp(64px,12vw,220px);line-height:.86}
.last h2 em{font-style:normal;color:var(--amber-2);display:block}
.last p{margin:30px auto 0;font-size:19px;color:rgba(247,236,216,.85);max-width:44ch}
.last .addr{margin-top:36px;font-family:var(--chalkf);font-size:clamp(24px,2.6vw,36px);color:var(--amber-2)}

/* ---------- footer ---------- */
footer{background:#0c0806;color:var(--foam);padding:70px var(--g) 30px;border-top:1px solid var(--line-d)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid var(--line-d)}
.f-grid h4{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}
.f-grid a,.f-grid p{display:block;font-size:15px;line-height:1.9;color:var(--muted-d)}
.f-grid a:hover{color:var(--foam)}
.f-name{font-family:var(--display);font-size:clamp(26px,2.4vw,38px);line-height:1.05;margin-bottom:14px}
.f-name em{font-style:normal;color:var(--amber-2)}
.f-word{font-family:var(--display);font-size:clamp(64px,15vw,270px);line-height:.85;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(233,171,63,.35);white-space:nowrap;overflow:hidden;padding:30px 0 20px;user-select:none;transition:-webkit-text-stroke-color .8s}
footer:hover .f-word{-webkit-text-stroke-color:rgba(233,171,63,.8)}
.f-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#6f5c4d}

/* ---------- inner hero ---------- */
.phero{position:relative;height:78svh;min-height:520px;overflow:hidden;display:grid;align-items:end;padding:150px var(--g) 60px;isolation:isolate}
.phero img,.phero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.7)}
.phero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,12,9,.55),rgba(18,12,9,.05) 40%,rgba(18,12,9,.9))}
.phero .crumb{margin-bottom:18px;display:flex;gap:12px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,236,216,.65)}
.phero .crumb b{color:var(--amber-2)}
.phero h1{font-size:clamp(56px,9vw,160px);line-height:.88;max-width:12ch}
.phero h1 em{font-style:normal;color:var(--amber-2)}
.phero .lead{margin-top:22px;font-size:19px;color:rgba(247,236,216,.85);max-width:46ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.split h2{font-size:clamp(40px,5vw,84px);margin-bottom:22px}
.split h2 em{font-style:normal;color:var(--amber-2)}
.paper .split h2 em,.paper-2 .split h2 em{color:var(--brick)}
.split p{font-size:18px}
.split p+p{margin-top:16px}
.note{font-size:14px;color:var(--muted);margin-top:22px;font-style:italic}
.night-2 .note,.sec:not(.paper):not(.paper-2) .note{color:var(--muted-d)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .f-grid{grid-template-columns:1fr 1fr}
  .board-wrap,.then,.hawk,.room,.split{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .tl+.tl{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .tl:before,.tl+.tl:before{left:-1px;top:-9px}
}
@media(max-width:760px){
  .top nav,.top .closed{display:none}
  .burger{display:block}
  .pour-head h1{font-size:clamp(52px,15vw,96px)}
  .pour-foot{grid-template-columns:1fr}
  .pour-foot .r{text-align:left}
  .pour-foot .hint{display:none}
  .pour .tap{width:48px;left:calc(22% - 24px)}
  .sec-head{grid-template-columns:1fr;gap:8px}
  .coasters{height:440px}
  .coaster{width:132px}
  .coasters-hint{display:none}
  .memorial{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .chalk-line{grid-template-columns:28px 1fr;font-size:20px}
  .chalk-line .b{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.chalk-line,.pour-head h1 .w,.pour-head .eyebrow,.pour-head p,.pour-foot{opacity:1!important;transform:none!important}
  .dim{display:none}
}
.pour-head{max-width:24ch}
.pour-head h1{font-size:clamp(50px,7.4vw,124px)}
.pour-copy{padding-top:110px}
@media(max-width:760px){.pour-head h1{font-size:clamp(46px,13vw,80px)}}
.pour-head{max-width:min(960px,92%)}
.pour-head p{max-width:46ch}