/* =============================================
   How it works

   One job, start to finish. Copy down the left; on the right a stage holds
   still: the clock, Helen's job sheet and Ralph's phone. js/hiw.js ties
   every message, sheet entry and clock change to the scroll position, so
   nothing runs ahead of the reader. Typed carbon on the sheet is the
   office, pencil is Ralph. Everything is under .hw, so none of it rides
   along on the other pages.

   Archivo and Caveat are declared here because only a few pages use them.
============================================= */
@font-face{font-family:'Archivo';src:url('fonts/archivo-condensed.woff2') format('woff2');font-weight:800 900;font-stretch:62% 90%;font-display:swap}
@font-face{font-family:'Caveat';src:url('fonts/caveat-600.woff2') format('woff2');font-weight:600;font-display:swap}

.hw{--bg:#0a0a0b;--surface:#121214;--line:#26262b;--line-2:#323238;--ink:#e8e8ea;--ink-2:#a3a4ae;--ink-3:#6c6c77;
  --sys-ink:#06272a;--sys-line:rgba(92,225,230,.28);
  --paper:#f3eac3;--paper-edge:#dccf98;--print:#bf3a2c;--rule:rgba(191,58,44,.24);--carbon:#21387a;--pencil:#38383b;
  --display:var(--font-display);--body:var(--font-body);--mono:var(--font-mono);
  --cond:'Archivo','Arial Narrow',sans-serif;--hand:'Caveat','Bradley Hand','Segoe Print',cursive;
  --gut:clamp(16px,5vw,64px);--nav:72px;color:var(--ink)}
@media (max-width:860px){.hw{--nav:60px}}
.hw h1,.hw h2,.hw h3{text-wrap:balance}
.hw .acc{color:var(--sys)}
.hw .acc{color:var(--sys)}
.hw .hw-link{font:700 .9375rem/1.3 var(--body);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.hw .hw-link:hover{text-decoration-thickness:2px}
.hw .story{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.hw .story-l{padding-left:var(--gut);padding-right:clamp(16px,3vw,48px);min-width:0}
.hw .stage{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));align-self:start;display:flex;flex-direction:column;padding:clamp(14px,3svh,32px) var(--gut) clamp(12px,2.5svh,28px) 0;min-width:0}
.hw .hw-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:calc(var(--nav) + 40px) 0 60px}
.hw .hw-hero h1{font:600 clamp(2.4rem,1rem + 3.3vw,4.5rem)/.98 var(--display);letter-spacing:-.022em;max-width:15ch}
.hw .hw-sub{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;color:var(--ink-2);max-width:48ch}
.hw .hw-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.hw .hw-price{font:500 .8125rem/1.7 var(--mono);color:var(--ink-2);letter-spacing:.02em}
@media (max-width:520px){
}
.hw .beat{min-height:64svh;display:flex;flex-direction:column;justify-content:center;padding:5svh 0;scroll-margin-top:var(--nav)}
.hw .beat .beat-when{font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hw .beat .beat-t{display:none;font:900 4.2rem/.85 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums;margin-top:10px;color:var(--ink)}
.hw .beat h2{font:600 clamp(1.7rem,1rem + 1.6vw,2.6rem)/1.05 var(--display);letter-spacing:-.012em;max-width:16ch;margin:14px 0 16px}
.hw .beat p{color:var(--ink-2);font-size:1.0625rem;line-height:1.62;max-width:42ch}
.hw .beat p+p{margin-top:14px}
.hw .beat p b{color:var(--ink);font-weight:700}
.hw .beat .go{display:inline-block;margin-top:22px;font:700 .9375rem/1.4 var(--body);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;max-width:42ch}
.hw .beat .go span{color:var(--ink-2);font-weight:500}
.hw .stat{margin-top:26px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;max-width:44ch;padding:14px 0 0;border-top:1px solid var(--line)}
.hw .stat b{font:900 2.6rem/.85 var(--cond);font-stretch:62%;color:var(--loss)}
.hw .stat span{font-size:.9375rem;line-height:1.45;color:var(--ink)}
.hw .stat small{grid-column:1/-1;font:500 .6875rem/1.5 var(--mono);color:var(--ink-3);margin-top:6px}
.hw .beat--end h2{font-size:clamp(2.1rem,1rem + 2.8vw,3.6rem);max-width:15ch}
.hw .beat--end{min-height:72svh}
.hw .readout{position:absolute;right:0;top:0;text-align:right;z-index:4}
.hw .rd-d{font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.hw .rd-t{font:900 5.4rem/.82 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums}
.hw .readout.tick .rd-t,.hw .readout.tick .rd-d{animation:rd .45s cubic-bezier(.2,.8,.25,1)}
@keyframes rd{from{opacity:0;transform:translateY(10px)}}
.hw .props-wrap{flex:1;min-height:0;display:grid;place-items:center}
.hw .props{position:relative;width:720px;height:704px;zoom:var(--k,1)}
.hw .sheet{position:absolute;left:0;top:18px;width:430px;background:
  radial-gradient(120% 80% at 20% 10%,rgba(255,255,255,.35),transparent 60%),
  radial-gradient(90% 60% at 90% 100%,rgba(160,130,40,.10),transparent 70%),var(--paper);
  color:var(--print);border-radius:2px;padding:26px 24px 16px;transform:rotate(-1.6deg);
  box-shadow:0 1px 0 var(--paper-edge),0 36px 60px -26px rgba(0,0,0,.75),0 8px 18px -8px rgba(0,0,0,.4)}
.hw .sheet::before{content:"";position:absolute;left:4px;right:4px;top:8px;height:6px;background:radial-gradient(circle,var(--bg) 2px,transparent 2.5px) 0 0/11px 6px repeat-x;opacity:.92}
.hw .sh-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--print);padding-bottom:7px}
.hw .sh-title{font:900 1.55rem/1 var(--cond);font-stretch:62%;letter-spacing:.07em}
.hw .sh-no{font:800 1.55rem/1 var(--cond);font-stretch:72%;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.hw .sh-no small{font-size:.6em;letter-spacing:.1em;margin-right:4px}
.hw .sh-biz{display:flex;justify-content:space-between;font:700 .5625rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;margin-top:7px}
.hw .sh-f{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin-top:10px;position:relative}
.hw .f{display:flex;align-items:flex-end;gap:8px;min-height:27px;border-bottom:1px solid var(--rule);padding-bottom:4px;min-width:0}
.hw .f--full{grid-column:1/-1}
.hw .k{flex:none;font:800 .5625rem/1 var(--cond);font-stretch:72%;letter-spacing:.13em;text-transform:uppercase;padding-bottom:2px}
.hw .v{font:500 .75rem/1.15 var(--mono);color:var(--carbon);text-shadow:0 0 .7px rgba(33,56,122,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* pencil leans past its box: let it */
.hw .v.p,.hw .lc.p{overflow:visible;padding-right:4px}
.hw .p,.hw .v.p{font:600 1.3rem/.9 var(--hand);color:var(--pencil);text-shadow:none;letter-spacing:.01em}
.hw .sh-st{display:flex;justify-content:space-between;gap:6px;margin-top:12px;padding:8px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hw .st{display:flex;align-items:center;gap:5px;font:800 .5625rem/1 var(--cond);font-stretch:72%;letter-spacing:.11em;text-transform:uppercase}
.hw .st i{position:relative;width:13px;height:13px;border:1.3px solid var(--print);flex:none}
.hw .st i b{position:absolute;left:1px;top:-6px;font:700 .9rem/1 var(--mono);color:var(--carbon)}
.hw .st i b.p{font:600 1.35rem/1 var(--hand);color:var(--pencil);left:0;top:-9px}
.hw .sh-lh{display:grid;grid-template-columns:58px 1fr;gap:10px;margin-top:12px;padding-bottom:4px;border-bottom:1.5px solid var(--print);font:800 .5625rem/1 var(--cond);font-stretch:72%;letter-spacing:.13em;text-transform:uppercase}
.hw .sh-log{list-style:none}
.hw .ln{height:20px;border-bottom:1px solid var(--rule);display:flex;align-items:flex-end}
.hw .lc{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:baseline;width:100%;padding-bottom:3px;white-space:nowrap;overflow:hidden}
.hw .lc .w,.hw .lc .x{font:500 .65rem/1 var(--mono);color:var(--carbon);text-shadow:0 0 .7px rgba(33,56,122,.5)}
.hw .lc.p .w,.hw .lc.p .x{font:600 1.08rem/.8 var(--hand);color:var(--pencil);text-shadow:none}
.hw .sh-ty{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.hw .tb{display:flex;align-items:center;justify-content:space-between;border:1.3px solid var(--print);padding:5px 10px;min-height:38px}
.hw .tb span{font:800 .5625rem/1.15 var(--cond);font-stretch:72%;letter-spacing:.12em;text-transform:uppercase}
.hw .tb b{font:600 1.9rem/.8 var(--hand);color:var(--pencil)}
.hw .tb b.t{font:600 1.2rem/1 var(--mono);color:var(--carbon)}
.hw .tb b.bump{animation:bump .5s cubic-bezier(.2,.8,.25,1)}
@keyframes bump{40%{transform:scale(1.35)}}
.hw .sh-foot{display:flex;justify-content:space-between;margin-top:9px;font:700 .5rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.hw .stamp{position:absolute;font:900 2rem/1 var(--cond);font-stretch:70%;letter-spacing:.08em;color:var(--print);border:3px solid currentColor;padding:5px 12px 3px;border-radius:5px;mix-blend-mode:multiply;opacity:.8;--r:-12deg;transform:rotate(var(--r));pointer-events:none}
.hw .stamp--hot{right:-8px;top:24px;font-size:1.05rem;border-width:2px;padding:7px 9px 5px;border-radius:50%;color:#d24c1d;--r:9deg}
.hw .stamp--won{right:30px;top:376px;font-size:3rem;--r:-13deg;padding:6px 16px 3px}
.hw .phone{position:absolute;right:0;top:106px;width:296px;height:596px;border-radius:44px;background:#0c0d10;border:9px solid #1b1c21;box-shadow:0 50px 80px -30px rgba(0,0,0,.85),0 0 0 1px #2a2b31;overflow:hidden;display:flex;flex-direction:column;color:#e8e8ea}
.hw .ph-bar{display:flex;justify-content:space-between;padding:12px 22px 4px;font:700 .75rem/1 var(--body);font-variant-numeric:tabular-nums}
.hw .ph-who{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 11px;border-bottom:1px solid #222327}
.hw .ph-av{width:34px;height:34px;border-radius:50%;background:#2b2d33;display:grid;place-items:center;font:700 .8125rem/1 var(--body);margin-bottom:3px}
.hw .ph-name{font:700 .875rem/1.2 var(--body)}
.hw .ph-sub{font-size:.6875rem;color:#8a8a96}
.hw .thread{flex:1;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:9px;padding:14px 12px 22px}
.hw .thread::-webkit-scrollbar{display:none}
.hw .b{max-width:84%;padding:9px 12px;border-radius:17px;font-size:.8125rem;line-height:1.42}
.hw .b.out{align-self:flex-end;background:var(--sys);color:var(--sys-ink);border-bottom-right-radius:5px}
.hw .b.in{align-self:flex-start;background:#26272c;color:#ececf0;border-bottom-left-radius:5px}
.hw .b u{text-underline-offset:2px}
.hw .sys{align-self:center;text-align:center;font:500 .625rem/1.35 var(--mono);letter-spacing:.04em;color:#8a8a96;padding:3px 0}
.hw .sys.loss{color:var(--loss)}
.hw .sys.ok{color:var(--sys)}
.hw .meta{align-self:flex-end;display:flex;gap:6px;align-items:center;margin-top:-3px;font:500 .625rem/1 var(--mono);color:#8a8a96}
.hw .meta i{font-style:normal;color:var(--sys);border:1px solid rgba(92,225,230,.35);padding:2px 4px;border-radius:3px}
.js .hw .thread>[data-b]:not(.on){display:none}
.hw .thread>.fresh{animation:pop .42s cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--d,0s)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
.hw .call{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;padding:96px 20px 46px;background:linear-gradient(180deg,#1b2538 0%,#101219 60%,#0c0d10 100%);transition:opacity .45s ease,visibility .45s}
.hw .phone:not(.ringing) .call{opacity:0;visibility:hidden}
.hw .call-k{font:500 .6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9aa3b5}
.hw .call-n{font:600 1.75rem/1.1 var(--display);letter-spacing:-.01em;margin-top:14px}
.hw .call-s{font-size:.8125rem;color:#9aa3b5;margin-top:6px}
.hw .call-btns{margin-top:auto;display:flex;gap:64px}
.hw .call-btns span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff}
.hw .call-btns .no{background:#e5484d}
.hw .call-btns .no svg{transform:rotate(135deg)}
.hw .call-btns .yes{background:#30a46c;animation:ringy 1.1s ease-in-out infinite}
@keyframes ringy{0%,40%,100%{transform:rotate(0)}10%,30%{transform:rotate(-12deg)}20%{transform:rotate(12deg)}}
.hw .call-cap{margin-top:16px;font:500 .6875rem/1 var(--mono);color:#6f7787}
.hw .notif{position:absolute;z-index:3;left:10px;right:10px;top:38px;background:rgba(242,242,245,.97);color:#141416;border-radius:16px;padding:10px 12px 11px;box-shadow:0 18px 30px -12px rgba(0,0,0,.6);transform:translateY(-150%);transition:transform .55s cubic-bezier(.2,.9,.3,1.1) .9s}
.hw .notif.on{transform:none}
.hw .notif-a{display:flex;justify-content:space-between;font:600 .625rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#6a6a73}
.hw .notif b{display:block;margin-top:6px;font:700 .8125rem/1.2 var(--body)}
.hw .notif b i{font-style:normal;color:#e0a100;letter-spacing:1px;margin-right:6px}
.hw .notif p{font-size:.75rem;line-height:1.38;color:#3b3b42;margin-top:3px}
.js .hw .stage [data-b]:not(.on){visibility:hidden}
.hw .stage .v.fresh,.hw .stage .lc.fresh:not(.p),.hw .stage b.fresh:not(.p){animation:type .55s steps(22) backwards;animation-delay:var(--d,0s)}
.hw .stage .p.fresh,.hw .stage .lc.p.fresh{animation:write .9s cubic-bezier(.3,.7,.3,1) backwards;animation-delay:var(--d,0s)}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes write{from{clip-path:inset(-40% 100% -40% 0)}to{clip-path:inset(-40% 0 -40% 0)}}
.hw .stamp.fresh{animation:thump .5s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:var(--d,0s)}
@keyframes thump{from{opacity:0;transform:rotate(var(--r)) scale(1.9)}}
.hw .snip,.hw .who{display:none}
.hw .snip{flex-direction:column;gap:9px;margin-top:26px;max-width:400px;background:#0f1013;border:1px solid var(--line);border-radius:22px;padding:14px 12px 16px}
.hw .who{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.hw .who li{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.4;color:var(--ink)}
.hw .who li::before{content:attr(data-by);font:500 .6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sys)}
.hw .who li[data-by="Ralph"]::before{font:600 1.15rem/1 var(--hand);letter-spacing:0;text-transform:none;color:var(--loss)}
@media (max-width:999px){
.hw .story{display:block}
.hw .story-l{padding-inline:var(--gut)}
.hw .hw-hero{min-height:0;padding:calc(var(--nav) + 48px) 0 56px}
.hw .beat{min-height:0;padding:56px 0 40px;scroll-margin-top:calc(var(--nav) + 48px)}
.hw .beat .beat-t{display:block}
.hw .beat h2{margin-top:16px}
.hw .snip,.hw .who{display:flex}
.hw .who{display:block}
.hw .beat--end{min-height:0;padding-bottom:28px}
.hw .stage{position:static;height:auto;padding:0 var(--gut) 72px;display:block}
.hw .readout,.hw .phone{display:none}
.hw .props-wrap{display:block}
.hw .props{zoom:1;width:auto;height:auto}
.hw .sheet{position:relative;top:0;width:min(100%,430px);margin-inline:auto;transform:rotate(-.8deg)}
.js .hw .stage [data-b]:not(.on){visibility:visible}
.hw .stage [data-b]{animation:none!important}
}
@media (max-width:440px){
.hw .sheet{padding:24px 16px 14px}
.hw .sh-f{grid-template-columns:1fr}
.hw .st{font-size:.5rem;gap:3px}
.hw .lc,.hw .sh-lh{grid-template-columns:50px 1fr;gap:8px}
.hw .lc .x{white-space:normal}
.hw .stamp--won{font-size:2.4rem;top:auto;bottom:130px}
}
.hw .hw-sec{padding:clamp(44px,5.5vw,80px) var(--gut)}
.hw .hw-in{max-width:none}
.hw .hw-h2{font:600 clamp(2.1rem,1rem + 3vw,3.6rem)/1 var(--display);letter-spacing:-.018em;max-width:20ch}
.hw .hw-lede{color:var(--ink-2);font-size:1.0625rem;line-height:1.65;max-width:52ch;margin-top:18px}
.hw .inc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);margin-top:clamp(40px,5vw,64px);align-items:start}
.hw .inc-price{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.hw .inc-price b{font:900 clamp(4rem,2.6rem + 3vw,5.6rem)/.8 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums}
.hw .inc-price span{font:500 .8125rem/1.6 var(--mono);color:var(--ink-2);padding-bottom:4px;max-width:36ch}
.hw .spec div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.hw .spec dt{font:500 .6875rem/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hw .spec dd{line-height:1.5}
.hw .inc-foot{margin-top:26px;color:var(--ink-2);line-height:1.6;max-width:52ch}
.hw .inc-foot a{color:var(--ink);font-weight:700;text-underline-offset:5px}
.hw .list{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.hw .list-top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.hw .list-top b{font:700 .875rem/1 var(--body)}
.hw .list-top span{font:500 .6875rem/1 var(--mono);color:var(--ink-3)}
.hw .lrow{display:grid;grid-template-columns:minmax(0,1.3fr) 54px 48px minmax(0,1.1fr) 70px;gap:10px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);font-size:.875rem}
.hw .lrow:last-child{border-bottom:0}
.hw .lrow--h{font:500 .625rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-block:10px}
.hw .lrow .m{font:500 .75rem/1 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.hw .lrow .ok{color:var(--sys)}
.hw .lrow .r{text-align:right}
.hw .lrow .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw .chip{justify-self:start;font:500 .625rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border:1px solid var(--line-2);border-radius:3px;color:var(--ink-2);white-space:nowrap}
.hw .chip--won{color:var(--sys);border-color:var(--sys-line);background:rgba(92,225,230,.07)}
.hw .lrow--me{background:linear-gradient(90deg,rgba(243,234,195,.07),transparent 70%)}
.hw .lrow--dim{opacity:.55}
.hw .list-cap{font:500 .75rem/1.6 var(--mono);color:var(--ink-2);margin-top:14px;max-width:46ch}
@media (max-width:900px){
.hw .inc-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
.hw .lrow{grid-template-columns:minmax(0,1fr) auto 64px}
.hw .lrow>:nth-child(2),.hw .lrow>:nth-child(3){display:none}
.hw .spec div{grid-template-columns:1fr;gap:4px}
}
.hw .split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px)}
.hw .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
@media (max-width:900px){
.hw .duo{grid-template-columns:1fr}
}
.hw .col2-k{font:500 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sys);padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.hw .col2-k.you{font:600 1.35rem/1 var(--hand);letter-spacing:0;text-transform:none;color:var(--loss)}
.hw .col2 ul{list-style:none}
.hw .col2 li{padding:11px 0;border-bottom:1px solid var(--line);font-size:1.0625rem}
.hw .more-foot{margin-top:22px;color:var(--ink-2);line-height:1.6;max-width:70ch}
.hw .more-foot b{color:var(--ink)}
@media (max-width:520px){
.hw .split2{grid-template-columns:1fr}
}
.hw .more{margin-top:clamp(44px,5vw,64px)}
.hw .more-h{font:600 clamp(1.4rem,1rem + 1vw,1.9rem)/1.1 var(--display)}
.hw .more-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:20px;border-top:1px solid var(--line)}
.hw .more-list li{padding:16px 0;border-bottom:1px solid var(--line)}
.hw .more-list b{display:block;font-weight:700}
.hw .more-list span{display:block;margin-top:4px;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
@media (max-width:900px){
.hw .more-list{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
.hw .more-list{grid-template-columns:1fr}
}
.hw .sheet--wide{position:relative;width:100%;max-width:none;margin-top:0;transform:rotate(-.5deg);top:0;left:0;padding:28px clamp(18px,3vw,32px) 18px}
.hw .days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;border-top:1px solid var(--rule)}
.hw .day{padding:14px 16px 16px;border-right:1px solid var(--rule);position:relative;min-width:0}
.hw .day:first-child{padding-left:0}
.hw .day:last-child{border-right:0;padding-right:0}
.hw .day .k{display:block;font-size:.75rem;padding:0}
.hw .day .ty{display:block;margin-top:10px;font:500 .78rem/1.5 var(--mono);color:var(--carbon);text-shadow:0 0 .7px rgba(33,56,122,.5)}
.hw .day .p{display:block;margin-top:10px;font-size:1.3rem;line-height:1}
.hw .day .stamp{position:absolute;right:6px;bottom:4px;top:auto;font-size:1.7rem;--r:-10deg}
.hw .sheet--wide .sh-ty{max-width:560px}
.hw .setup-note{margin-top:28px;color:var(--ink-2);font-size:.9375rem;line-height:1.6;max-width:60ch}
.hw .day:nth-child(2){border-right:0;padding-right:0}
.hw .day:nth-child(3){padding-left:0}
.hw .day:nth-child(-n+2){border-bottom:1px solid var(--rule)}
@media (max-width:520px){
.hw .days{grid-template-columns:1fr}
.hw .day{border-right:0;padding-inline:0;border-bottom:1px solid var(--rule)}
.hw .day:last-child{border-bottom:0}
.hw .sheet--wide .sh-ty{grid-template-columns:1fr}
}
.hw .close .hw-lede{max-width:56ch}
.hw .close-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(0px,4vw,60px)}
.hw .sign{margin-top:28px;font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hw .sign b{margin-right:10px;color:var(--ink)}

/* scroll-driven reveal: elements come in with a short settle, no timers */
.hw .thread>.fresh{animation:pop .35s cubic-bezier(.2,.8,.25,1) both}
.hw .stage .v.fresh,.hw .stage .lc.fresh:not(.p),.hw .stage b.fresh:not(.p){animation:type .45s steps(20) backwards}
.hw .stage .p.fresh,.hw .stage .lc.p.fresh{animation:write .7s cubic-bezier(.3,.7,.3,1) backwards}
.hw .stamp.fresh{animation:thump .45s cubic-bezier(.2,.8,.25,1) backwards}
.hw .notif{transition-delay:0s}
/* each beat gets scroll room for the messages it plays */
.hw .beat{min-height:calc(14svh + var(--n,3) * 9svh);padding:3svh 0}
@media (max-width:999px){.hw .beat{min-height:0;padding:44px 0 32px}}

/* a light buzz while it rings: two short shakes, then a pause */
.hw .phone.ringing{animation:buzz 1.6s ease-in-out infinite}
@keyframes buzz{0%,30%,100%{transform:translate(0,0) rotate(0)}3%{transform:translate(-2px,0) rotate(-.6deg)}6%{transform:translate(2px,0) rotate(.6deg)}9%{transform:translate(-2px,0) rotate(-.6deg)}12%{transform:translate(2px,0) rotate(.6deg)}15%{transform:translate(-1px,0) rotate(-.3deg)}18%{transform:translate(1px,0) rotate(.3deg)}21%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.hw .phone.ringing{animation:none}}