/* Layout: one physical desk you can play with, then a cut-out headline, then a pinned scroll that peels three paper layers, then the motion spec. */
:root{
  color-scheme: light;
  --desk:#E6DECB;          /* the table: warm paper-grey */
  --desk-deep:#D8CEB6;
  --news:#EEE9DD;          /* newsprint */
  --news-ink:#2A2723;
  --photo:#F6F2E8;         /* instant-print white */
  --ink:#1C1B19;
  --muted:#6B6458;
  --tape:rgba(231,219,176,.78);
  --shadow:40,30,20;
  --b1:#67243D;--b2:#6E2780;--b3:#B9416F;--b4:#C5334A;--b5:#CC3D2A;--b6:#CF6A2A;--b7:#E0A13A;
  --b8:#EEC341;--b9:#94A13A;--b10:#457733;--b11:#887E2D;--b12:#3E8BA6;--b13:#285E7C;
  --f-hand:"Permanent Marker","Caveat",cursive;
  --f-note:"Caveat","Permanent Marker",cursive;
  --f-cut:"Anton","Arial Narrow",Impact,sans-serif;
  --f-news:"Old Standard TT","Noto Serif SC",Georgia,serif;
  --f-zh:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --f-zh-serif:"Noto Serif SC","Songti SC",serif;
}
html{scroll-behavior:auto}
body{
  background:var(--desk);color:var(--ink);font-family:var(--f-zh);font-size:15px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--desk)}
.paper-noise{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .18  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.wrap{max-width:1180px;margin:0 auto}
:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;background:var(--desk)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:auto;transition:transform .35s cubic-bezier(.3,1.6,.5,1);transform:rotate(-6deg)}
.brand:hover svg,.brand:focus-visible svg{transform:rotate(0deg)}
.brand b{font-family:var(--f-hand);font-weight:400;font-size:22px;letter-spacing:.01em}
.clock{font-family:var(--f-note);font-size:20px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.clock span{color:var(--ink)}

/* ---------- intro ---------- */
.intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;padding-block:20px 18px}
.intro h1{margin:0;font-family:var(--f-cut);font-weight:400;font-size:clamp(34px,6vw,64px);line-height:.95;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.intro h1 em{font-style:normal;font-family:var(--f-hand);text-transform:none;font-size:.8em;color:var(--b5)}
.intro p{margin:0;max-width:34em;color:var(--muted);font-size:14px}

/* ---------- the desk ---------- */
.desk{position:relative;height:clamp(640px,66vw,760px);border-radius:3px;overflow:hidden;
  background-color:var(--desk-deep);
  box-shadow:inset 0 0 0 1px rgba(var(--shadow),.08), inset 0 30px 60px -40px rgba(var(--shadow),.35);
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g fill='none' stroke='%231C1B19' stroke-width='2'><path d='M3 10V3h7M22 3h7v7M29 22v7h-7M10 29H3v-7'/></g><circle cx='16' cy='16' r='1.6' fill='%23C5334A'/></svg>") 16 16, crosshair;
  touch-action:pan-y;
}
.desk .layer{position:absolute;will-change:transform}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:40}
.shot-label{position:absolute;pointer-events:none;font-family:var(--f-hand);font-size:22px;color:var(--ink);opacity:0;z-index:41}

/* newspaper sheet */
.news{left:3%;top:6%;width:min(560px,52%);padding:18px 20px 22px;background:var(--news);color:var(--news-ink);
  transform:rotate(-3deg);box-shadow:0 2px 3px rgba(var(--shadow),.18),0 18px 30px -18px rgba(var(--shadow),.45);
  clip-path:polygon(0 1%,4% 0,9% 1.2%,15% .2%,22% 1%,30% 0,38% .8%,47% .1%,55% 1%,63% 0,71% .9%,80% .2%,88% 1%,95% 0,100% .8%,100% 100%,0 100%)}
.news .mast{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px double var(--news-ink);padding-bottom:4px;margin-bottom:8px}
.news .mast b{font-family:var(--f-cut);font-weight:400;font-size:30px;letter-spacing:.04em}
.news .mast small{font-family:var(--f-news);font-style:italic;font-size:12px}
.news h3{margin:0 0 8px;font-family:var(--f-zh-serif);font-weight:700;font-size:20px;line-height:1.25;text-wrap:balance}
.news .cols{columns:2;column-gap:18px;column-rule:1px solid rgba(42,39,35,.25);font-family:var(--f-zh-serif);font-size:12.5px;line-height:1.7;text-align:justify}
.news .cols p{margin:0 0 6px}
.news .cols p:first-child::first-letter{font-family:var(--f-cut);font-size:2.6em;float:left;line-height:.9;margin:2px 6px 0 0}

/* notebook note */
.note{right:4%;top:5%;width:min(250px,30%);padding:14px 16px 16px 30px;background:
  linear-gradient(90deg,transparent 22px,rgba(197,51,74,.45) 22px,rgba(197,51,74,.45) 23px,transparent 23px),
  repeating-linear-gradient(180deg,#FBF8EF 0 25px,rgba(62,139,166,.32) 25px 26px);
  transform:rotate(4deg);box-shadow:0 10px 18px -10px rgba(var(--shadow),.5);font-family:var(--f-note);font-size:20px;line-height:26px;color:#2B3A55}
.note h4{margin:0;font-family:var(--f-hand);font-weight:400;font-size:19px;color:var(--ink)}
.note ul{list-style:none;margin:0;padding:0}
.note li::before{content:"□ "}
.note li.done{text-decoration:line-through;text-decoration-color:var(--b4)}
.note li.done::before{content:"☑ "}

/* ticket stub */
.ticket{left:44%;bottom:6%;width:150px;padding:10px 12px;background:var(--b7);color:var(--ink);transform:rotate(-8deg);
  font-family:var(--f-cut);letter-spacing:.06em;font-size:15px;line-height:1.1;box-shadow:0 8px 14px -8px rgba(var(--shadow),.5);
  -webkit-mask:radial-gradient(circle 6px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 6px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.ticket small{display:block;font-family:var(--f-news);font-style:italic;letter-spacing:0;font-size:11px;margin-top:4px}

/* hand annotations */
.ann{position:absolute;font-family:var(--f-note);font-weight:700;font-size:21px;line-height:1.05;color:var(--b5);pointer-events:none;z-index:30;white-space:nowrap}
.ann svg{display:block;overflow:visible}

/* polaroids */
.item{position:absolute;width:var(--w,180px);z-index:10;touch-action:none}
.photo{all:unset;box-sizing:border-box;display:block;width:100%;cursor:grab;background:var(--photo);padding:7% 7% 24%;
  box-shadow:0 1px 2px rgba(var(--shadow),.28),0 10px 18px -8px rgba(var(--shadow),.42);position:relative}
.photo:active{cursor:grabbing}
.photo:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
.photo .img{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:#7E8770}
.photo canvas{display:block;width:100%;height:100%}
.photo .dev{position:absolute;inset:0;background:radial-gradient(120% 90% at 40% 35%,#9AA08A,#727A66)}
.photo .cap{position:absolute;left:8%;right:8%;bottom:5%;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-note);font-weight:700;font-size:clamp(14px,1.6vw,19px);color:var(--ink)}
.photo .cap i{font-style:normal;font-family:var(--f-hand);font-weight:400;font-size:.8em;color:var(--muted)}
.tape{all:unset;position:absolute;top:-12px;left:50%;width:46%;height:26px;margin-left:-23%;background:var(--tape);cursor:pointer;z-index:2;
  clip-path:polygon(3% 0,97% 4%,100% 30%,96% 55%,100% 80%,97% 100%,2% 96%,0 70%,4% 45%,0 18%);
  box-shadow:inset 0 0 0 40px rgba(255,255,255,.12)}
.tape:focus-visible{outline:2px dashed var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%) rotate(-2deg);z-index:70;
  background:var(--tape);padding:10px 22px;font-family:var(--f-hand);font-size:22px;color:var(--ink);box-shadow:0 10px 20px -10px rgba(var(--shadow),.5);pointer-events:none;white-space:nowrap;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.toast.on{transform:translate(-50%,0) rotate(-2deg)}

/* legend chips under the desk */
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding-block:14px 8px;font-size:13px;color:var(--muted)}
.legend b{font-family:var(--f-note);font-size:18px;color:var(--ink);font-weight:700;margin-right:4px}

/* ---------- cut-out headline ---------- */
.cut{padding-block:96px 72px;text-align:center}
.cut .eyebrow{font-family:var(--f-note);font-size:22px;color:var(--muted);margin:0 0 18px}
.ransom{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;margin:0 auto;max-width:980px}
.word{display:inline-flex;gap:3px;white-space:nowrap}
.ch{display:inline-block;padding:2px 6px 0;line-height:1;font-size:clamp(34px,6.4vw,74px);box-shadow:0 4px 8px -4px rgba(var(--shadow),.45)}
.cut p.sub{margin:28px auto 0;max-width:30em;color:var(--muted)}

/* ---------- pinned reveal ---------- */
.reveal{padding-block:40px}
.reveal-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;margin-bottom:14px}
.reveal-head h2{margin:0;font-family:var(--f-cut);font-weight:400;font-size:clamp(26px,4vw,40px);text-transform:uppercase;letter-spacing:.02em}
.reveal-head .step{font-family:var(--f-note);font-size:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.stage{position:relative;height:min(76vh,640px);min-height:480px;overflow:hidden;background:var(--desk-deep);border-radius:3px}
.sheet{position:absolute;inset:6% 8%;}
/* layer 3: final frame */
.final{display:flex;align-items:center;justify-content:center}
.final .photo{width:min(300px,62vw);cursor:default}
.final .stamp{position:absolute;right:6%;bottom:8%;font-family:var(--f-hand);font-size:clamp(18px,2.4vw,26px);transform:rotate(-4deg)}
/* layer 2: route cards */
.routes{display:flex;align-items:center;justify-content:center}
.rcard{position:absolute;width:min(170px,30vw);aspect-ratio:88/107;padding:10px 12px;color:#fff;box-shadow:0 12px 20px -10px rgba(var(--shadow),.55);display:flex;flex-direction:column;justify-content:space-between}
.rcard b{font-family:var(--f-cut);font-weight:400;font-size:clamp(22px,3vw,34px);line-height:1}
.rcard small{font-family:var(--f-note);font-size:clamp(15px,1.8vw,19px);line-height:1.15}
.rcard .no{font-family:var(--f-news);font-style:italic;font-size:12px;opacity:.9}
/* layer 1: newspaper */
.paper1{background:var(--news);color:var(--news-ink);padding:clamp(16px,3vw,32px);box-shadow:0 20px 40px -20px rgba(var(--shadow),.6);display:flex;flex-direction:column;gap:12px}
.paper1 .mast{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px double var(--news-ink);padding-bottom:6px}
.paper1 .mast b{font-family:var(--f-cut);font-weight:400;font-size:clamp(28px,5vw,52px);letter-spacing:.04em}
.paper1 .mast small{font-family:var(--f-news);font-style:italic}
.paper1 h3{margin:0;font-family:var(--f-zh-serif);font-size:clamp(22px,3.4vw,38px);line-height:1.2;text-wrap:balance}
.paper1 .cols{columns:3 200px;column-gap:24px;column-rule:1px solid rgba(42,39,35,.25);font-family:var(--f-zh-serif);font-size:13.5px;line-height:1.75;text-align:justify}
.paper1 .cols p{margin:0 0 8px}
.paper1 .hint{margin-top:auto;font-family:var(--f-note);font-size:20px;color:var(--b5)}

/* ---------- spec table ---------- */
.spec{padding-block:72px 40px}
.spec h2{margin:0 0 6px;font-family:var(--f-cut);font-weight:400;font-size:clamp(26px,4vw,40px);text-transform:uppercase;letter-spacing:.02em}
.spec .lede{margin:0 0 20px;color:var(--muted);max-width:44em}
.tbl{overflow-x:auto;background:var(--news);box-shadow:0 14px 26px -18px rgba(var(--shadow),.5)}
table{border-collapse:collapse;width:100%;min-width:860px;font-size:13.5px}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid rgba(42,39,35,.18)}
th{font-family:var(--f-news);font-style:italic;font-weight:400;color:var(--muted);font-size:13px;background:rgba(42,39,35,.04)}
td:first-child{font-family:var(--f-note);font-size:19px;font-weight:700;white-space:nowrap}
td code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:rgba(42,39,35,.07);padding:1px 4px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-block:28px 40px;color:var(--muted);font-size:13px}
.foot b{font-family:var(--f-hand);font-weight:400;color:var(--ink);font-size:18px}

/* viewer */
.viewer{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.viewer.on{display:flex}
.viewer .dim{position:absolute;inset:0;background:rgba(28,27,25,.72)}
.viewer .ctrl{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:10px;z-index:3}
.btn{all:unset;cursor:pointer;background:var(--photo);color:var(--ink);font-family:var(--f-hand);font-size:17px;padding:9px 16px;box-shadow:0 6px 12px -6px rgba(0,0,0,.6);min-height:24px}
.btn:focus-visible{outline:2px dashed #fff;outline-offset:3px}
.vcard{position:absolute;z-index:2;perspective:1400px}
.vcard .inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.vcard .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--photo);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.vcard .front{padding:7% 7% 24%}
.vcard .front canvas{width:100%;aspect-ratio:1/1;display:block}
.vcard .front .cap{position:absolute;left:8%;right:8%;bottom:6%;display:flex;justify-content:space-between;font-family:var(--f-note);font-weight:700;font-size:clamp(18px,3.4vw,28px)}
.vcard .back{transform:rotateY(180deg);padding:9% 9% 8%;display:flex;flex-direction:column;gap:8px;
  background:repeating-linear-gradient(180deg,var(--photo) 0 31px,rgba(62,139,166,.22) 31px 32px)}
.vcard .back h4{margin:0;font-family:var(--f-hand);font-weight:400;font-size:clamp(22px,4vw,32px)}
.vcard .back dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-family:var(--f-note);font-size:clamp(17px,2.8vw,22px);line-height:1.35;color:#2B3A55}
.vcard .back dt{color:var(--muted)}
.vcard .back dd{margin:0;min-width:0}
.vcard .back .ex{margin-top:auto;font-size:12px;color:var(--muted);font-family:var(--f-zh)}

@media (max-width:720px){
  .desk{height:1020px}
  .news{width:88%;left:4%;top:2.5%}
  .note{width:62%;right:4%;top:auto;bottom:3%}
  .ticket{left:6%;bottom:4%}
  .news .cols{columns:1}
}
@media (prefers-reduced-motion:reduce){
  .brand svg{transition:none}
}