/* Pull Up a Chair: the site, built on look 3 (Sign Painter). Tokens and parts live in look.css. */
@font-face{font-family:"Courier Prime";src:url(../fonts/courier-prime-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/courier-prime-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --gutter:56px;
  --maxw:1240px;
  /* one spacing system for every board and chalkboard */
  --pad-y:32px;   /* board padding */
  --pad-x:36px;
  --line:11px;    /* a board's pinstripe ends this far in from its edge */
  --gap:18px;     /* between the parts of a board */
  --frame:12px;   /* chalkboard frame; its gold line ends 6px further in */
  --block:64px;   /* between sections */
  --chalk-gold:#E3B95C;
  --chalk-red:#E9806F;
  --chalk-cream:#F7F2E6;
  --font-receipt:"Courier Prime", monospace; /* the receipt and the ASCII mug only */
  --z-sticky:20;
  --z-skip:30;
}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-size:17px;line-height:1.45}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
:focus-visible{outline:3px dashed var(--color-gold-hi);outline-offset:3px}
button{font:inherit;color:inherit}
.skip{position:absolute;left:12px;top:-80px;z-index:var(--z-skip);background:var(--color-paper);color:var(--color-ink);padding:10px 14px;font-weight:700;border:3px solid var(--color-ink)}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.block{padding:var(--block) 0}
.cite{font-size:.7em;font-weight:800;vertical-align:.4em;line-height:0;text-decoration:none;color:var(--color-accent);padding:0 1px}
.cite:hover{text-decoration:underline}
.chalkboard .cite,.wall-point .cite,.till-notes .cite,.hub .cite{color:var(--chalk-gold)}
.door .cite{color:#FBEFE0}

/* ---- the awning: stripes scroll away, the valance with the nav stays ---- */
header.top{position:sticky;top:-72px;height:132px;z-index:var(--z-sticky)}
header.top .awning{position:absolute;inset:0}
.nav{position:absolute;left:0;right:0;top:88px;display:flex;justify-content:center;gap:clamp(18px,3vw,40px);z-index:2}
.nav a{color:var(--color-paper);text-decoration:none;font-weight:800;font-size:14px;letter-spacing:.2em;text-transform:uppercase;line-height:1}
.nav a:hover,.nav a[aria-current="true"]{color:var(--color-gold-hi)}

/* ---- the window ---- */
.window{position:relative;padding:18px var(--gutter) 0;overflow:hidden;margin-top:-6px}
.window > *{position:relative}
.through{position:absolute !important;inset:0}
.through video{display:block;width:100%;height:100%;object-fit:cover;opacity:.62}
.reflect{position:absolute !important;inset:0;background:url(../img/reflection.png) 50% 40%/cover no-repeat;opacity:.2;pointer-events:none}
.streak{position:absolute !important;top:-20px;height:1200px;background:#fff;opacity:.035;transform:skewX(-24deg);pointer-events:none}
.leafline{position:absolute !important;left:28px;right:28px;top:4px;bottom:0;border:3px solid var(--color-gold);border-top:none;pointer-events:none}
#wm{width:1080px;max-width:100%;margin:0 auto}
.below{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:48px;margin-top:18px;padding-bottom:24px}
.campaign{font-family:var(--font-display);font-weight:400;font-size:clamp(42px,4.8vw,64px);line-height:1;color:var(--color-paper);text-shadow:3px 3px 0 var(--color-accent),5px 5px 0 var(--color-accent),6px 6px 0 var(--color-ink)}
.line{color:var(--color-paper);font-size:20px;line-height:1.35;margin-top:16px;font-weight:500;max-width:38ch}
.tag{font-family:var(--font-display);color:var(--color-gold);font-size:23px;line-height:1.15;margin-top:16px;text-wrap:balance}
.from{color:var(--color-paper);font-size:15px;font-weight:650;margin-top:8px;opacity:.9}

/* the hanging door sign: the demo affordance */
.demo{display:inline-flex;align-items:center;gap:14px;margin-top:44px;padding:14px 22px 14px 14px;background:var(--color-paper);color:var(--color-accent);border:3px solid var(--color-ink);box-shadow:5px 5px 0 var(--color-ink);position:relative;transform:rotate(-1.5deg);text-align:left;cursor:pointer;transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
.demo:hover,.demo:focus-visible{transform:rotate(0deg) translate(-2px,-2px);box-shadow:7px 7px 0 var(--color-ink)}
.play{width:46px;height:46px;border-radius:50%;background:var(--color-accent);display:grid;place-items:center;flex:none}
.play::after{content:"";width:16px;height:18px;background:var(--color-paper);clip-path:polygon(0 0,100% 50%,0 100%);margin-left:4px}
.demo b{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1;display:block}
.demo small{display:block;color:var(--color-ink);font-weight:650;font-size:14px;margin-top:4px}
.demo::before,.demo::after{content:"";position:absolute;top:-36px;width:3px;height:36px;background:var(--color-gold)}
.demo::before{left:24%}.demo::after{right:24%}

/* photos taped in the window */
.prints{position:relative;min-height:340px}
.print{position:absolute;padding:8px;background:var(--color-paper)}
.print img{aspect-ratio:4/3;height:auto}
.print .tape{width:70px;height:20px;top:-11px}
.print figcaption{font-weight:700;font-size:14px;line-height:1.25;color:var(--color-bg);padding-top:6px}
.p1{width:44%;left:0;top:34px;transform:rotate(-3deg)}
.p2{width:40%;left:35%;top:-6px;transform:rotate(2.5deg)}
.p3{width:34%;left:66%;top:84px;transform:rotate(-2deg)}
.p1 .tape{left:38%;transform:rotate(-3deg)}.p2 .tape{left:36%;transform:rotate(4deg)}.p3 .tape{left:34%;transform:rotate(-2deg)}
.prints .print{animation:stick var(--motion-slow) var(--motion-ease) both}
.p1{animation-delay:2.6s !important}.p2{animation-delay:2.9s !important}.p3{animation-delay:3.2s !important}
@keyframes stick{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
.glass-note{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:flex-end;align-items:center;padding:10px 0 18px;font-size:13px;line-height:1.35;color:var(--color-paper)}
.glass-note span{max-width:62ch;opacity:.85;text-align:right}
.room-toggle{background:transparent;border:2px solid var(--color-gold);color:var(--color-gold-hi);font-weight:700;font-size:13px;padding:4px 10px;cursor:pointer}
.sill{height:16px;background:var(--color-accent);border-top:4px solid var(--color-ink);border-bottom:4px solid var(--color-ink)}

/* ---- shared parts: boards, chalkboards, headings ---- */
.board{display:flex;flex-direction:column;gap:var(--gap);padding:var(--pad-y) var(--pad-x)}
.board::before{inset:8px;border-width:3px}
.board > *{margin:0}
.framed{display:flex;flex-direction:column;gap:var(--gap);border:var(--frame) solid var(--color-ink);outline:4px solid var(--color-gold);outline-offset:calc(-6px - var(--frame));padding:calc(var(--pad-y) - var(--line) + 6px) calc(var(--pad-x) - var(--line) + 6px)}
.framed > *{margin:0;position:relative}
.sec-h{font-size:clamp(30px,3.2vw,40px)}
.disc{width:38px;height:38px;font-size:15px}
.point{font-size:20px;max-width:60ch}
.sub{font-family:var(--font-display);font-weight:400;color:var(--color-bg);font-size:21px;line-height:1.1;margin:0 0 10px}
.wall-h{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,4.2vw,52px);line-height:1.05;color:var(--color-paper);text-shadow:2px 2px 0 var(--color-accent),3px 3px 0 var(--color-accent),4px 4px 0 var(--color-ink)}
.wall-h .disc{text-shadow:none;background:var(--color-gold);color:var(--color-bg)}
.wall-h.small{font-size:clamp(30px,3vw,40px)}
.wall-point{color:var(--color-paper);font-size:20px;line-height:1.35;max-width:58ch;margin-top:14px;font-weight:500}
.chalk-h{font-weight:400;font-size:clamp(32px,3.6vw,44px);line-height:1.05}
.chalk-h small{font-size:.6em;margin-right:6px;color:var(--chalk-gold)}
.sp-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.sp-head .lede{flex:1 1 360px}
.chalkboard .lede{max-width:62ch;font-size:17px;color:var(--chalk-cream);filter:url(#chalk-soft)}
.chalkboard .lede b{color:#F5CF86}
ul.dia{list-style:none}
ul.dia li{position:relative;padding-left:18px}
ul.dia li + li{margin-top:6px}
ul.dia li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;background:var(--color-accent);transform:rotate(45deg)}
ul.dia.cool li::before{background:var(--color-bg)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--color-ink);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:var(--color-gold);border:4px solid var(--color-ink)}
input[type=range]::-moz-range-track{height:4px;background:var(--color-ink)}
input[type=range]::-moz-range-thumb{box-sizing:border-box;width:28px;height:28px;border-radius:50%;background:var(--color-gold);border:4px solid var(--color-ink)}
.note{font-size:15px}
.fine{font-size:13px;line-height:1.35;color:#5b5b55}

/* ---- watch ---- */
.watch-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:start}
.watch-main .screen{margin-top:30px}
.watch-main .thesis{color:var(--color-paper);font-size:20px;line-height:1.42;font-weight:500;margin:26px 0 0;max-width:56ch}
.screen{background:var(--color-ink);padding:10px;border:3px solid var(--color-gold);box-shadow:0 0 0 9px var(--color-ink);margin:9px}
.player{position:relative;aspect-ratio:16/9;background:var(--color-bg-deep)}
.player video{display:block;width:100%;height:100%;object-fit:contain;background:var(--color-bg-deep)}
.play-sign{position:absolute;inset:0;display:grid;place-items:center;background:transparent;border:0;cursor:pointer}
.play-sign .play{width:96px;height:96px;border:4px solid var(--color-ink);box-shadow:4px 4px 0 var(--color-ink);transition:transform var(--motion-fast) var(--motion-ease)}
.play-sign .play::after{width:30px;height:34px;margin-left:8px}
.play-sign:hover .play,.play-sign:focus-visible .play{transform:scale(1.06) rotate(-4deg)}
.player.on .play-sign{display:none}
.missing{position:absolute;left:12px;right:12px;bottom:12px;background:var(--color-paper);color:var(--color-ink);border:3px solid var(--color-ink);padding:10px 14px;font-weight:700;font-size:16px;line-height:1.3}
.toc{list-style:none;display:grid;gap:2px}
.toc a{display:flex;align-items:center;gap:12px;padding:4px 0;text-decoration:none;font-weight:650;font-size:17px}
.toc a:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:5px}
.toc .disc{width:30px;height:30px;font-size:12px}
.menu .pdf{align-self:flex-start}
.pdf{display:inline-flex;align-items:center;gap:10px;background:var(--color-accent);color:var(--color-paper);text-decoration:none;font-weight:750;font-size:16px;padding:12px 18px;border:3px solid var(--color-ink);box-shadow:4px 4px 0 var(--color-ink);transition:transform var(--motion-fast) var(--motion-ease)}
.pdf::before{content:"";width:12px;height:15px;background:var(--color-paper);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.pdf:hover{transform:translate(-2px,-2px)}

/* ---- 01: the chairs, the slider, the facts ---- */
.sit{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px;align-items:center}
.traffic{display:flex;flex-direction:column;gap:10px}
.chairs{display:block;width:100%;height:auto}
.chairs .chair{fill:var(--color-bg);stroke:var(--color-bg);stroke-width:1.3;transition:fill var(--motion-fast) var(--motion-ease),stroke var(--motion-fast) var(--motion-ease)}
.chairs .chair.empty{fill:transparent;stroke:var(--color-accent);stroke-width:1.1;stroke-dasharray:2 1.4}
.traffic figcaption{font-size:16px;line-height:1.35}
.traffic output{font-weight:700;color:var(--color-accent)}
.traffic output b{font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1;margin-right:2px}
.ends{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--color-bg)}
.facts{display:flex;flex-direction:column;gap:12px}
.fact{display:flex;align-items:baseline;gap:14px;font-size:17px;font-weight:600;line-height:1.2}
.fact b{flex:none;width:118px;font-family:var(--font-display);font-weight:400;font-size:38px;line-height:1;color:var(--color-accent)}
.vs2{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding-top:14px;border-top:3px solid var(--color-bg)}
.cap{font-size:15px;line-height:1.3;color:#3b3b36}
.hb{display:grid;grid-template-columns:118px minmax(0,1fr) 52px;align-items:center;gap:12px}
.hb span{font-weight:650;font-size:16px}
.hb i{display:block;height:18px;width:var(--w);background:var(--color-bg);border-radius:0 4px 4px 0}
.hb.dim i{background:#9AA59F}
.hb b{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1;text-align:right;color:var(--color-bg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:var(--gap);border-top:3px solid var(--color-bg)}
.who{font-size:16px;color:#2b2b28}
.who b{color:var(--color-bg)}

/* ---- 02: reserved table tents, each with its table from above ---- */
.tents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:30px;align-items:end;padding:0 6px}
.tent{display:block;background:none;border:0;padding:0;text-align:left;cursor:pointer;perspective:1100px}
.tent:nth-child(1){transform:rotate(-1.2deg)}.tent:nth-child(2){transform:rotate(.8deg)}.tent:nth-child(3){transform:rotate(-.5deg)}
.tent-in{display:grid;transform-style:preserve-3d;transition:transform var(--motion-slow) var(--motion-ease)}
.tent[aria-pressed="true"] .tent-in{transform:rotateY(180deg)}
.face{grid-area:1/1;position:relative;display:flex;flex-direction:column;gap:6px;padding:28px 28px 24px;background:var(--color-paper);color:var(--color-ink);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face::before{content:"";position:absolute;inset:7px;border:2px solid var(--color-accent);pointer-events:none}
.face::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:var(--color-ink);opacity:.14}
.face > *{position:relative}
.tt{display:block;align-self:flex-start;height:60px;width:auto;margin-bottom:6px}
.tt .top{fill:var(--color-gold);stroke:var(--color-ink);stroke-width:1.2}
.tt .seat{fill:var(--color-accent)}
.res{font-family:var(--font-display);color:var(--color-accent);font-size:16px;line-height:1}
.nm{font-family:var(--font-display);color:var(--color-bg);font-size:30px;line-height:1.05}
.age{font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--color-accent)}
.txt{font-size:17px;line-height:1.38}
.turn{margin-top:auto;padding-top:10px;font-weight:750;font-size:14px;color:var(--color-bg)}
.turn::after{content:" \2192"}
.face.back{transform:rotateY(180deg);background:var(--color-accent);color:var(--color-paper);justify-content:center;gap:16px}
.face.back::before{border-color:var(--color-paper)}
.io{font-family:var(--font-display);font-size:26px;line-height:1.12}
.io small{display:block;font-family:var(--font-body);font-weight:750;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;color:var(--color-gold-hi)}
.face.back .turn{color:var(--color-paper);margin-top:0}
.tent:hover .face.front{background:#FBF5E9}
.table-edge{height:16px;background:var(--color-accent);border-top:4px solid var(--color-ink);border-bottom:4px solid var(--color-ink);margin:0 -10px}

/* ---- 03: the channel map, and what we skip ---- */
.chan{display:grid;grid-template-columns:minmax(0,1.1fr) 76px minmax(0,1fr);grid-template-rows:auto auto;row-gap:16px}
.chan .cn{font-family:var(--font-display);font-size:25px;line-height:1.05}
.chan .cd{font-family:var(--font-body);font-size:15px;font-weight:800;color:var(--color-gold-hi);margin-left:8px;vertical-align:.15em}
.chan .cs{font-size:16px;line-height:1.35}
.hub{grid-row:1;grid-column:1;display:flex;flex-direction:column;justify-content:center;gap:8px;background:var(--color-bg);color:var(--color-paper);padding:20px 24px;border-radius:4px}
.hub .cs{color:#EDE6D6}
.hub b{color:var(--color-gold-hi)}
.arrows{grid-row:1;grid-column:2;display:grid;grid-template-rows:1fr 1fr;row-gap:14px;align-items:center;padding:0 16px 0 12px}
.arrows i{position:relative;display:block;height:4px;background:var(--color-accent)}
.arrows i::after{content:"";position:absolute;right:-12px;top:-7px;border-left:14px solid var(--color-accent);border-top:9px solid transparent;border-bottom:9px solid transparent}
.spokes{grid-row:1;grid-column:3;display:grid;grid-template-rows:1fr 1fr;row-gap:14px}
.spoke{display:flex;flex-direction:column;justify-content:center;gap:6px;border:3px solid var(--color-bg);padding:14px 20px;border-radius:4px}
.spoke .cn{color:var(--color-bg)}
.door{grid-row:2;grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;background:var(--color-accent);color:var(--color-paper);padding:16px 24px;border-radius:4px}
.door .cs{color:#FBEFE0}
.door b{color:var(--color-paper)}
.skips{padding-top:var(--gap);border-top:3px dashed rgba(19,52,42,.35)}
.struck{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 28px}
.struck li{display:flex;flex-direction:column;gap:4px}
.struck s{font-family:var(--font-display);font-size:20px;line-height:1.15;color:var(--color-bg);text-decoration:line-through 3px var(--color-accent)}
.struck span{font-size:15px;line-height:1.3}

/* ---- 04: sixteen phones, and video #1 ---- */
.units{list-style:none;display:grid;grid-template-columns:6fr 5fr 3.6fr 2.8fr;gap:24px;align-items:start}
.u svg{display:block;height:60px;width:auto;max-width:100%;fill:rgba(201,52,42,.08);stroke:var(--color-accent);stroke-width:2.4}
.u svg *{vector-effect:non-scaling-stroke}
.u p{font-size:15px;line-height:1.3;margin-top:10px}
.u b{display:block;font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.1;color:var(--color-bg);margin-bottom:2px}
.story{display:flex;flex-direction:column;background:rgba(207,154,52,.16);padding:22px 26px;border-radius:4px}
.frames{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.frame{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center}
.frame + .frame::before{content:"\2192";position:absolute;left:-42px;top:50%;translate:0 -50%;font-weight:800;font-size:28px;line-height:1;color:var(--color-accent)}
.frame .scr{position:relative;aspect-ratio:9/16;border:4px solid var(--color-ink);border-radius:12px;background:var(--color-bg) center/cover no-repeat;overflow:hidden}
.f1 .scr{background-image:url(../img/booth-crop.jpg)}
.f2 .scr{background-image:url(../img/spaghetti-crop.jpg)}
.f3 .scr{background:var(--color-accent)}
.frame .scr span{position:absolute;left:5px;right:5px;top:8px;padding:3px 4px;background:var(--color-ink);color:var(--color-paper);font-weight:800;font-size:12px;line-height:1.2}
.f3 .scr span{top:auto;bottom:8px;background:var(--color-paper);color:var(--color-ink)}
.frame p{font-size:16px;line-height:1.35}
.frame b{display:block;font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.1;color:var(--color-accent);margin-bottom:2px}
.rules3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:var(--gap);border-top:3px solid var(--color-bg);font-size:16px}
.rules3 b{color:var(--color-bg)}

/* ---- 05: the specials board ---- */
.dishes{display:grid;grid-template-columns:1fr 1fr;gap:36px 52px}
.dish{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:20px;padding-top:20px;border-top:2px solid rgba(236,231,218,.45)}
.side{display:flex;flex-direction:column;align-items:center;gap:10px}
.ci{display:block;width:70px;height:auto}
.chalkline{fill:none;stroke:var(--color-chalk-line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalk)}
.chalkline .fill{fill:rgba(232,191,98,.55);stroke:#E8BF62}
.price{font-weight:700;font-size:13px;white-space:nowrap;color:var(--chalk-cream);border:1.5px solid rgba(236,231,218,.6);padding:1px 6px;border-radius:2px}
.dish .body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dish h3{font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1.08;color:var(--chalk-gold);filter:url(#chalk)}
.dish .body > p{color:var(--chalk-cream);filter:url(#chalk-soft)}
.dish .body > p.why{color:#F5CF86;font-weight:650}
.chalkboard button{font-weight:700;font-size:16px;color:var(--color-chalk-line);background:transparent;border:2px solid rgba(236,231,218,.72);padding:8px 14px;cursor:pointer;border-radius:3px;transition:background var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}
.chalkboard button:hover{border-color:var(--chalk-gold);color:var(--chalk-gold)}
.chalkboard button[aria-pressed="true"]{background:var(--chalk-gold);border-color:var(--chalk-gold);color:var(--color-chalk)}
.vote{border:0;display:flex;flex-wrap:wrap;gap:8px}
.vote legend{font-weight:700;font-size:16px;margin-bottom:8px;float:left;width:100%}
.vote .note{width:100%;margin-top:2px}
.famcard{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.stamps{display:flex;gap:8px}
.stamps i{width:32px;height:32px;border:2px dashed rgba(236,231,218,.7);border-radius:50%;display:grid;place-items:center;font-style:normal}
.stamps i.on{border:3px solid var(--chalk-red);background:var(--chalk-red);transform:rotate(-14deg);animation:thunk var(--motion-fast) var(--motion-ease)}
.stamps i.on::after{content:"B";font-family:var(--font-display);font-size:16px;color:var(--color-chalk);line-height:1}
@keyframes thunk{from{transform:scale(1.5) rotate(-14deg);opacity:.4}to{transform:scale(1) rotate(-14deg);opacity:1}}
.famcard .note{width:100%}
.wallgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;width:100%;max-width:400px}
.wallgrid .ph{background:#F7F3EA;padding:4px 4px 10px;transform:rotate(var(--r,0deg))}
.wallgrid .ph svg{display:block;width:100%;height:auto;background:#DCD3C0}
.wallgrid .you{background:transparent;border:2px dashed rgba(236,231,218,.6);display:grid;place-items:center;font-weight:700;font-size:11px;line-height:1.1;text-align:center;color:var(--color-chalk-line)}
.wallgrid .you.filled{background:#F7F3EA;border:3px solid var(--chalk-gold);color:var(--color-accent);animation:stick var(--motion-slow) var(--motion-ease) both;padding:3px 3px 2px;display:block;font-family:var(--font-display);font-weight:400;font-size:12px}
.wallgrid .you.filled svg{display:block;width:100%;height:auto;background:#DCD3C0}
.sunday{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;width:100%}
.longtable{width:100%;max-width:340px;height:auto;filter:url(#chalk);overflow:visible}
.longtable .seat{fill:transparent;stroke:var(--color-chalk-line);stroke-width:2.4;stroke-dasharray:4 4;transition:fill var(--motion-fast) var(--motion-ease)}
.longtable .seat.taken{fill:var(--chalk-gold);stroke:var(--chalk-gold);stroke-dasharray:none}
.ascii{font-family:var(--font-receipt);white-space:pre;letter-spacing:0;margin:0}
.mug{font-size:8.5px;line-height:1.1;color:var(--color-chalk-line);filter:url(#chalk-soft)}
.mug .m{color:var(--chalk-red)}.mug .c{color:var(--chalk-gold)}.mug .p{color:#BDB8AC}

/* ---- 06: arrow-shaped stages, a funnel that narrows ---- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:30px}
.steps li{display:grid;grid-template-rows:132px auto;align-items:center;gap:10px}
.steps button{display:flex;flex-direction:column;justify-content:center;gap:6px;height:var(--hh);padding:12px 32px 12px 34px;background:var(--color-paper);color:var(--color-bg);border:0;cursor:pointer;text-align:left;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%,18px 50%);transition:background var(--motion-fast) var(--motion-ease)}
.steps li:first-child button{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%);padding-left:22px}
.steps li:nth-child(1){--hh:132px}.steps li:nth-child(2){--hh:122px}.steps li:nth-child(3){--hh:112px}.steps li:nth-child(4){--hh:102px}.steps li:nth-child(5){--hh:92px}
.steps b{font-family:var(--font-display);font-weight:400;font-size:25px;line-height:1}
.steps span{font-weight:600;font-size:14px;line-height:1.3}
.steps li:nth-child(3) button{background:var(--color-accent);color:var(--color-paper)}
.steps button:hover{background:var(--color-gold-hi);color:var(--color-ink)}
.steps button[aria-pressed="true"]{background:var(--color-gold);color:var(--color-ink)}
.count{font-size:14px;font-weight:700;color:var(--color-gold-hi);padding-left:22px}
.step-detail{display:grid;margin-top:22px;--at:0}
.step-detail::after{content:"";position:absolute;top:-13px;left:calc((100% + 8px) / 5 * var(--at) + (100% - 32px) / 10 - 14px);border-bottom:14px solid var(--color-paper);border-left:14px solid transparent;border-right:14px solid transparent;transition:left var(--motion-fast) var(--motion-ease)}
.step-detail > p{grid-area:1/1;font-size:18px;line-height:1.4}
.step-detail > p[hidden]{display:block;visibility:hidden}
.step-detail b{font-family:var(--font-display);font-weight:400;color:var(--color-accent)}

/* ---- 07: the receipt and the break-even board ---- */
.budget-grid{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:44px;align-items:start;margin-top:30px}
.till-tabs{display:flex;gap:8px;margin-bottom:18px}
.till-tabs button{font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border:3px solid var(--color-ink);background:var(--color-bg-deep);color:var(--color-paper);cursor:pointer}
.till-tabs button[aria-pressed="true"]{background:var(--color-gold);color:var(--color-ink)}
.receipt{position:relative;background:#FBF7EE;color:var(--color-ink);font-family:var(--font-receipt);font-size:15px;line-height:1.35;padding:24px 24px 26px;margin:10px 0;transform:rotate(-.6deg)}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:10px;background-size:16px 10px;background-repeat:repeat-x}
.receipt::before{top:-10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 10 8 0 16 10Z' fill='%23FBF7EE'/%3E%3C/svg%3E")}
.receipt::after{bottom:-10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 0 8 10 16 0Z' fill='%23FBF7EE'/%3E%3C/svg%3E")}
.r-head,.r-foot{text-align:center;text-transform:uppercase;font-weight:700}
.r-foot{font-size:13px;font-weight:400}
.r-rule{overflow:hidden;white-space:nowrap;margin:8px 0;color:#6b6b6b}
.r-rule::before{content:"------------------------------------------------------------------------------------------------"}
.r-rule.dbl::before{content:"================================================================================================"}
.r-when{text-transform:uppercase;margin:4px 0 2px;color:var(--color-accent);font-weight:700}
.r-line{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;margin:12px 0}
.r-name{text-transform:uppercase;font-weight:700}
.r-amt{font-weight:700;text-align:right}
.r-bar{grid-column:1/-1;color:var(--color-accent);white-space:pre;letter-spacing:.04em;min-height:1.35em}
.r-what{grid-column:1/-1;font-size:13px;line-height:1.3;color:#4d4a44;padding-left:2ch}
.r-line.total{margin:4px 0}
.till-notes{display:flex;flex-direction:column;gap:10px;margin-top:22px;color:var(--color-paper)}
.till-notes b,.credits b{color:var(--color-gold-hi)}
.calc{color:var(--chalk-cream)}
.calc .chalk-h{font-size:clamp(28px,2.5vw,34px);line-height:1.1;padding-right:140px;color:var(--chalk-gold)}
.sum{font-size:17px;filter:url(#chalk-soft)}
.sum p{display:grid;grid-template-columns:6.4em minmax(0,1fr);gap:12px;align-items:baseline;padding:3px 0}
.sum .a{font-family:var(--font-display);font-size:22px;color:var(--chalk-gold);text-align:right;white-space:nowrap}
.sum .eq{border-top:2px solid rgba(236,231,218,.6);margin-top:4px;padding-top:7px}
.dials{display:grid;gap:10px}
.calc .try{font-weight:700;font-size:15px;filter:url(#chalk-soft)}
.dial{display:grid;grid-template-columns:172px minmax(0,1fr) 112px;align-items:center;gap:14px}
.dial label{font-family:var(--font-display);font-size:20px;line-height:1.1;color:var(--color-chalk-line);filter:url(#chalk)}
.calc input[type=range]::-webkit-slider-runnable-track{background:var(--color-chalk-line);opacity:.85}
.calc input[type=range]::-webkit-slider-thumb{background:var(--color-chalk);border-color:var(--chalk-gold)}
.calc input[type=range]::-moz-range-track{background:var(--color-chalk-line)}
.calc input[type=range]::-moz-range-thumb{background:var(--color-chalk);border-color:var(--chalk-gold)}
.num{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;font-family:var(--font-display);font-size:25px;color:var(--chalk-gold)}
.num input{width:3.4ch;background:transparent;border:0;border-bottom:2px solid rgba(236,231,218,.55);color:inherit;font:inherit;text-align:right;padding:0;-moz-appearance:textfield;appearance:textfield}
.num input::-webkit-outer-spin-button,.num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num input[aria-invalid="true"]{color:var(--chalk-red);border-bottom-color:var(--chalk-red)}
.err{color:var(--chalk-red);font-weight:700;font-size:16px}
.err:empty{display:none}
.result{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:22px;padding:18px 24px;background:var(--color-bg);border:3px solid var(--color-gold);transition:opacity var(--motion-fast)}
.result.stale{opacity:.45}
#be-guests{width:190px}
.result .big{font-family:var(--font-display);font-size:26px;line-height:1.05;color:var(--color-paper)}
.result .day{font-size:18px;color:var(--color-gold-hi);font-weight:650;margin-top:6px}
.tallies{display:flex;flex-direction:column;gap:8px}
.tally-h{font-family:var(--font-display);font-size:19px;color:var(--chalk-red);filter:url(#chalk)}
.tally{min-height:50px;overflow:hidden}
.tally svg{display:block;max-width:100%;height:auto;filter:url(#chalk)}
.tally p{font-size:15px;margin-top:6px}
.calc .small{font-size:15px;color:#F5CF86;font-weight:600;filter:url(#chalk-soft)}
.calc .print{position:absolute;right:-22px;top:-52px;width:156px;transform:rotate(4deg);z-index:3}
.calc .print img{aspect-ratio:520/414}
.calc .print .tape{left:60px;top:-9px;transform:rotate(-3deg);width:56px}
.calc .print figcaption{font-size:13px}

/* ---- 08: the timeline, scrubbed a month at a time ---- */
.gantt{--cg:4px;--c:2;position:relative;display:grid;grid-template-columns:minmax(150px,230px) repeat(6,minmax(0,1fr));column-gap:var(--cg);row-gap:10px;align-items:center}
.g-hl{position:absolute;grid-column:var(--c) / span 1;top:-6px;bottom:-6px;left:0;right:0;background:rgba(207,154,52,.2);border-radius:4px;pointer-events:none}
.g-scrub{grid-column:2 / -1;padding:0 calc((100% - 5 * var(--cg)) / 12 - 14px)}
.g-scrub input{display:block}
.g-month{grid-column:1;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5b5b55}
.ticks{grid-column:2 / -1;list-style:none;display:grid;grid-template-columns:subgrid}
.ticks button{display:block;width:100%;background:none;border:0;border-bottom:2px solid rgba(19,52,42,.25);cursor:pointer;font-weight:800;font-size:16px;color:var(--color-bg);padding:2px 0 4px;opacity:.6}
.ticks button[aria-pressed="true"]{opacity:1;color:var(--color-accent);border-bottom-color:var(--color-accent)}
.gl{grid-column:1;font-size:16px;line-height:1.2;font-weight:600;transition:opacity var(--motion-fast) var(--motion-ease)}
.gantt > i{display:block;height:18px;background:var(--color-bg);border-radius:4px;transition:opacity var(--motion-fast) var(--motion-ease)}
.gantt > i.hand{background:var(--color-accent)}
.gantt > i.off{opacity:.3}
.gl.off{opacity:.55}
.months{display:grid}
.months > div{grid-area:1/1;animation:fadein var(--motion-fast) var(--motion-ease)}
.months > div[hidden]{display:block;visibility:hidden}
.months h3{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.1;color:var(--color-accent)}
.months p{font-size:18px;line-height:1.4;margin-top:4px;max-width:64ch}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.week-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-top:var(--gap);border-top:3px solid var(--color-bg)}
.hours{display:flex;gap:2px;height:30px;margin-bottom:10px}
.hours span{display:flex;align-items:center;padding-left:8px;font-size:14px;font-weight:700;color:var(--color-paper);white-space:nowrap;overflow:hidden}
.hours span:nth-child(1),.hours-key li:nth-child(1)::before{background:var(--color-bg)}
.hours span:nth-child(2),.hours-key li:nth-child(2)::before{background:#3E6656}
.hours span:nth-child(3),.hours-key li:nth-child(3)::before{background:#7E9A8B}
.hours span:nth-child(4),.hours-key li:nth-child(4)::before{background:#B8C6BC}
.hours-key{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;font-weight:650;font-size:14px}
.hours-key li{display:flex;align-items:center;gap:6px}
.hours-key li::before{content:"";width:12px;height:12px}

/* ---- 09: the scoreboard ---- */
.when{display:flex;flex-wrap:wrap;gap:10px}
.when button{font-family:var(--font-display);font-weight:400;font-size:21px;padding:8px 18px}
.score{width:100%;border-collapse:collapse}
.score th,.score td{padding:11px 10px;text-align:left;vertical-align:baseline;border-top:2px solid rgba(236,231,218,.3)}
.score thead th{border-top:0;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-gold);padding-bottom:6px}
.score tbody th{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.1;filter:url(#chalk);width:24%}
.score td{font-size:16px;color:var(--chalk-cream);filter:url(#chalk-soft)}
.score .v{text-align:right;width:28%}
.score td.v{font-family:var(--font-display);font-size:26px;line-height:1.1;color:var(--chalk-gold);filter:url(#chalk)}
.score td.v.words{font-size:20px}
.score td.v.nil{font-family:var(--font-body);font-weight:700;color:rgba(236,231,218,.7);filter:none}
.score td.v.wipe{animation:wipe var(--motion-slow) var(--motion-ease)}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.scores .foot{font-size:15px}

/* ---- 10: pinned clippings, number first ---- */
.clips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:36px;align-items:start}
.clip{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--color-paper);padding:26px 24px 24px}
.clip:nth-child(1){transform:rotate(-1.2deg)}
.clip:nth-child(2){transform:rotate(1deg);margin-top:18px}
.clip:nth-child(3){transform:rotate(.6deg);margin-top:4px}
.clip:nth-child(4){transform:rotate(-.8deg);margin-top:22px}
.clip .tape{left:40%;top:-10px;width:74px;height:20px;transform:rotate(-3deg)}
.clip .big{font-family:var(--font-display);font-size:38px;line-height:1;white-space:nowrap;color:var(--color-accent)}
.clip h3{font-size:17px;font-weight:800;line-height:1.2;color:var(--color-bg)}
.clip h3 small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b5b55;margin-top:2px}
.clip p:last-child{font-size:16px;line-height:1.38}

/* ---- 11: if this happens ---- */
.ifs > div{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;padding:14px 0;border-top:2px solid rgba(19,52,42,.22)}
.ifs dt{font-family:var(--font-display);font-size:22px;line-height:1.15;color:var(--color-accent)}
.ifs dd{font-size:17px}

/* ---- sources and credits ---- */
.sources{padding-bottom:48px}
.srcs{columns:2;column-gap:44px;margin-top:24px;padding-left:28px;color:var(--color-paper);font-size:15px;line-height:1.4}
.srcs li{break-inside:avoid;margin-bottom:10px;padding-left:4px}
.srcs li::marker{color:var(--color-gold);font-weight:800}
.srcs a,.credits a:not(.pdf){color:var(--color-gold-hi)}
.srcs li:target{outline:3px solid var(--color-gold);outline-offset:4px}
.credits{margin-top:30px;padding-top:20px;border-top:3px solid var(--color-gold);color:var(--color-paper);font-size:15px;line-height:1.45}
.credits p{max-width:84ch;margin-top:12px}
.credits .pdf{margin-top:10px}

/* ---- the demo player, opened from the window ---- */
.theater{border:0;padding:0;background:transparent;width:min(1100px,94vw);max-width:none;margin:auto;overflow:visible}
.theater::backdrop{background:rgba(12,38,32,.92)}
.theater .player{border:10px solid var(--color-ink);outline:3px solid var(--color-gold);outline-offset:-14px}
.theater-close{display:flex;justify-content:flex-end;margin-bottom:12px}
.theater-close button{background:var(--color-paper);color:var(--color-ink);border:3px solid var(--color-ink);font-weight:800;font-size:15px;padding:8px 14px;cursor:pointer}

/* ---- narrower screens ---- */
@media (max-width:1100px){
  .budget-grid{grid-template-columns:minmax(0,1fr);max-width:720px}
  .clips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clip:nth-child(n){margin-top:0}
  .frames{gap:44px}
  .frame{grid-template-columns:minmax(0,1fr);justify-items:start;align-items:start}
  .frame .scr{width:96px}
  .frame + .frame::before{top:80px}
}
@media (max-width:900px){
  .watch-grid,.sit{grid-template-columns:minmax(0,1fr)}
  .sit{gap:28px}
  .tents{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dishes{grid-template-columns:minmax(0,1fr)}
  .struck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .units{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
  .rules3{grid-template-columns:minmax(0,1fr);gap:10px}
  .steps{grid-template-columns:minmax(0,1fr);gap:6px}
  .steps li{grid-template-rows:none;grid-template-columns:minmax(0,1fr) 150px;gap:16px}
  .steps li:nth-child(n){--hh:auto}
  .steps button,.steps li:first-child button{min-height:78px;padding:12px 20px 26px;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),50% 100%,0 calc(100% - 14px));flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:4px 12px}
  .steps li:nth-child(2) button{margin:0 3%}.steps li:nth-child(3) button{margin:0 6%}.steps li:nth-child(4) button{margin:0 9%}.steps li:nth-child(5) button{margin:0 12%}
  .count{padding-left:0}
  .step-detail::after{display:none}
  .step-detail > p[hidden]{display:none}
}
@media (max-width:760px){
  :root{--gutter:16px;--pad-y:24px;--pad-x:20px;--line:8px;--gap:14px;--frame:8px;--block:44px}
  body{font-size:16px}
  html{scroll-padding-top:52px}
  header.top{height:96px;top:-55px}
  .nav{top:62px;gap:16px}
  .nav a{font-size:11px;letter-spacing:.12em}
  .nav .wide{display:none}
  .window{padding:14px 16px 0}
  .leafline{left:8px;right:8px}
  .below{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:10px;padding-bottom:10px}
  .line{font-size:18px;margin-top:12px}
  .tag{font-size:21px}
  .demo{margin-top:40px;padding:10px 16px 10px 10px}
  .demo b{font-size:20px}
  .demo .play{width:38px;height:38px}
  .prints{min-height:250px}
  .p1{width:54%;top:8px}.p2{width:48%;left:51%;top:64px}.p3{display:none}
  .glass-note{justify-content:flex-start}
  .glass-note span{text-align:left}
  .board::before{inset:6px;border-width:2px}
  .framed{outline-width:3px}
  .point,.wall-point{font-size:18px}
  .sec-h{font-size:28px}
  .disc{width:32px;height:32px;font-size:13px}
  .fact b{width:96px;font-size:32px}
  .hb{grid-template-columns:100px minmax(0,1fr) 44px;gap:10px}
  .two,.week-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .tents{grid-template-columns:minmax(0,1fr);gap:22px}
  .chan{grid-template-columns:minmax(0,1fr);row-gap:0}
  .hub,.arrows,.spokes,.door{grid-column:1;grid-row:auto}
  .arrows{grid-template-rows:none;grid-template-columns:1fr 1fr;height:44px;padding:0;column-gap:14px}
  .arrows i{justify-self:center;width:4px;height:26px}
  .arrows i::after{right:auto;left:-7px;top:auto;bottom:-12px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:14px solid var(--color-accent);border-bottom:0}
  .spokes{grid-template-rows:none;grid-template-columns:1fr 1fr;column-gap:14px;margin-bottom:14px}
  .spoke{padding:12px 14px}
  .chan .cn{font-size:21px}
  .hub,.door{padding:16px 18px}
  .struck s{font-size:18px}
  .u svg{height:40px}
  .story{padding:18px 16px}
  .frames{gap:26px}
  .frame + .frame::before{left:-21px;top:62px;font-size:20px}
  .frame .scr{width:100%;max-width:84px;border-width:3px;border-radius:9px}
  .frame .scr span{font-size:9.5px;left:3px;right:3px;padding:2px 3px}
  .frame p{font-size:14px}
  .frame b{font-size:17px}
  .dish{grid-template-columns:56px minmax(0,1fr);column-gap:14px}
  .ci{width:54px}
  .price{font-size:11px;padding:1px 4px}
  .dish h3{font-size:24px}
  .mug{font-size:7.4px}
  .steps li{grid-template-columns:minmax(0,1fr) 108px;gap:10px}
  .steps b{font-size:21px}
  .steps span{font-size:13px}
  .count{font-size:13px}
  .step-detail > p{font-size:16px}
  .dial{grid-template-columns:minmax(0,1fr) 104px;gap:2px 12px}
  .dial label{grid-column:1/-1}
  .result{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px}
  #be-guests{width:150px}
  .calc .print{width:112px;right:-4px;top:-30px}
  .calc .chalk-h{padding-right:0;max-width:64%;font-size:24px}
  .gantt{grid-template-columns:104px repeat(6,minmax(0,1fr));--cg:3px;row-gap:8px}
  .gl{font-size:13px}
  .gantt > i{height:14px}
  .months h3{font-size:22px}
  .months p{font-size:16px}
  .hours span{font-size:12px;padding-left:5px}
  .when button{font-size:18px;padding:6px 14px}
  .score thead{display:none}
  .score tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:10px 0;border-top:2px solid rgba(236,231,218,.3)}
  .score th,.score td{border:0;padding:2px 0;width:auto}
  .score tbody th{grid-column:1;font-size:20px}
  .score td:not(.v){grid-column:1;font-size:14px}
  .score td.v{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:22px;max-width:150px;white-space:normal}
  .clips{grid-template-columns:minmax(0,1fr);gap:24px}
  .ifs > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .ifs dt{font-size:20px}
  .srcs{columns:1;padding-left:22px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}