/* Sammy Showtime. The whole page is a walk down one building: the header is its roof edge, every section is a
   floor, the windows hold the reels, and at the bottom the camera looks down at the pavement.
   Real materials only: Envato photos (the terracotta house, a Vatican cornice, pavement), torn paper and chalk. */

/* Graphicook Studio chalk fonts: Chalkboy for the logo, Chalkive for headings.
   Newsreader for reading, Special Elite only for small typed labels. All self-hosted (no Google Fonts: GDPR for EU festivals). */
@font-face{font-family:"Chalkboy";src:url("../fonts/chalkboy.woff2?v=2") format("woff2");font-display:swap}
@font-face{font-family:"Chalkive";src:url("../fonts/chalkive.woff2?v=2") format("woff2");font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-024F}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Special Elite";src:url("../fonts/special-elite-latin-400-normal.woff2") format("woff2");font-display:swap}

:root{
  --night:#1d1712; --paper:#efece6; --ink:#2a2420; --charcoal:#2b2724;
  --rust:#9a4a22; --rust-dk:#6d3216; --tobacco:#6b4423; --cream:#f6efe0; --chalk:#f7f2e6; --lime:#a6d64a;
  --serif:"Newsreader",Georgia,"Times New Roman",serif; --typed:"Special Elite","Courier New",monospace; --hand:"Chalkive",cursive;
  --wrap:1180px; --gut:clamp(16px,4vw,40px);
  --hw:min(100vw,calc(100svh / .8993)); --fh:calc(var(--hw) * .8993); --gh:calc(var(--hw) * .6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
main{overflow-x:clip}   /* things start off-screen before they animate in; never let them widen the page on phones */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--serif);font-size:clamp(18px,1.25vw,20px);line-height:1.55;color:var(--ink);
  background:#e8dfcc url("../img/tex-linen.webp") 0 0/340px 340px repeat;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}

.script{font-family:var(--hand);font-weight:400;line-height:1;letter-spacing:.01em}
h2.script{font-size:clamp(50px,7vw,100px);margin-bottom:.35em}

.btn{display:inline-block;font-family:var(--typed);font-size:16px;text-decoration:none;cursor:pointer;border:0;
  background:var(--rust);color:var(--cream);padding:13px 22px 12px;border-radius:3px;
  box-shadow:0 3px 0 var(--rust-dk),0 6px 12px rgba(40,20,5,.25);transition:translate .15s,box-shadow .15s}
.btn:hover{translate:0 -2px;box-shadow:0 5px 0 var(--rust-dk),0 10px 16px rgba(40,20,5,.25)}
.btn:active{translate:0 2px;box-shadow:0 1px 0 var(--rust-dk)}
.btn-ghost{background:transparent;color:var(--rust);box-shadow:inset 0 0 0 2px var(--rust)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--rust),0 6px 12px rgba(40,20,5,.12)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* ---------- grounds (all real photo textures) ---------- */
.ground-cobbles{background:#4f4a43 url("../img/tex-cobbles.webp") center/cover no-repeat;color:var(--cream);position:relative}
.ground-cobbles::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,16,12,.5),rgba(20,16,12,.8));pointer-events:none}
.ground-cobbles > *{position:relative}
.ground-tweed{background:#4a3a2c url("../img/tex-tweed.webp") 0 0/600px 300px repeat;color:var(--cream);position:relative}
.ground-tweed::before{content:"";position:absolute;inset:0;background:rgba(30,20,12,.5);pointer-events:none}
.ground-tweed > *{position:relative}

/* torn paper edges (Envato: 22 Torn Edge Paper Backgrounds) */
.paper{background:#eee;position:relative;filter:sepia(.16) saturate(.9)}
.paper-torn-top::before,.paper-torn-bottom::after{content:"";position:absolute;left:0;right:0;height:clamp(36px,7vw,90px);pointer-events:none;
  background-repeat:no-repeat;background-size:max(100%,1100px) 100%}
.paper-torn-top::before{bottom:100%;background-image:url("../img/torn-top.webp");background-position:right bottom}
.paper-torn-bottom::after{top:100%;background-image:url("../img/torn-header.webp");background-position:left top}

/* ---------- the roof edge: the top of the building, clear blue sky above it ---------- */
.roof{--sky:clamp(72px,7.4vw,112px);--cornice:clamp(50px,4.6vw,76px);position:relative;z-index:5;height:calc(var(--sky) + var(--cornice));
  background:url("../img/building/roof.webp") 0 100%/auto var(--cornice) repeat-x,#86b2dc url("../img/building/sky-blue.webp?v=1") 50% 100%/cover no-repeat;
  box-shadow:0 14px 18px -6px rgba(40,15,8,.55)}
/* clouds cross the sky right to left, slowly and smoothly (only the pigeons are stop motion), and pass behind the roof */
.clouds{position:absolute;left:0;right:0;top:0;height:var(--sky);overflow:hidden;pointer-events:none}
.cloud{position:absolute;left:0;max-width:none;height:auto;will-change:transform;animation:drift var(--t) linear var(--wait) infinite}
.c1{width:clamp(170px,19vw,320px);top:-14%;--t:150s;--wait:-40s}
.c2{width:clamp(130px,14vw,240px);top:16%;--t:190s;--wait:-125s}
.c3{width:clamp(190px,22vw,360px);top:34%;opacity:.92;--t:240s;--wait:-20s}
.c4{width:clamp(110px,12vw,200px);top:2%;--t:125s;--wait:-95s}
.c5{width:clamp(140px,15vw,250px);top:40%;opacity:.85;--t:215s;--wait:-170s}
@keyframes drift{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.cloud{animation:none}.c1{left:8%}.c2{left:36%}.c3{left:58%}.c4{left:80%}.c5{left:20%}}

/* ---------- the menu: pigeons on the roof edge, a cardboard sign round each neck ----------
   Each .pigeon is a zero-size point at its feet; js/pigeons.js draws the bird from sprite sheets and hangs the sign
   from the purple patch at the bottom of its neck. Without JS the signs just hang in a row along the cornice. */
.perch{position:absolute;inset:0;pointer-events:none}
.pigeon{position:absolute;top:calc(var(--sky) + var(--cornice) * .06);width:0;height:0;text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent}
.pigeon .bird,.pigeon .sign{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer}
.bird{background-repeat:no-repeat}
.sign{display:flex;flex-direction:column;align-items:center;transform-origin:0 0}
.sign .string{display:block;width:26px;height:16px;overflow:visible;fill:none;stroke:#3b2a1d;stroke-width:1.3;stroke-linecap:round}
.tag{display:block;width:max-content;max-width:86px;padding:4px 8px 3px;border-radius:2px;text-align:center;
  background:#b98c5a url("../img/pigeons/cardboard.webp") center/220px;color:#2a1a0f;font-family:var(--hand);font-size:16px;line-height:.95;
  box-shadow:0 2px 3px rgba(40,20,10,.45),inset 0 0 0 1px rgba(60,35,15,.25)}
.pigeon:focus-visible{outline:none}
html:not(.js) .perch{display:flex;justify-content:flex-end;gap:10px;padding:calc(var(--sky) + 8px) var(--gut) 0}
html:not(.js) .pigeon{position:static;width:auto;height:auto}
html:not(.js) .sign{position:static}
/* phones: all six, closer together, so the signs are smaller */
@media (max-width:899px){.tag{max-width:58px;padding:3px 5px 2px;font-size:12px}.sign .string{width:20px;height:12px}}
/* while the pigeons are on the roof they are the menu, so the burger waits until they've flown */
html.has-pigeons.on-roof .burger{opacity:0;visibility:hidden;translate:0 -14px;transition:translate .3s,opacity .3s,visibility 0s .3s}

/* ---------- the building: three houses wide (the middle one, its mirror either side), floors repeating down ---------- */
.building{position:relative;background-color:#a77567;
  background-image:url("../img/building/floor-m.webp?v=2"),url("../img/building/floor.webp?v=2"),url("../img/building/floor-m.webp?v=2");
  background-size:var(--hw) var(--fh);background-repeat:repeat-y;
  background-position:calc(50% - var(--hw)) 0,50% 0,calc(50% + var(--hw)) 0}
.floor{position:relative}
/* content sits on the wall either side of the window column, never over it */
.floor-grid{display:grid;align-items:start;padding:clamp(60px,9svh,110px) 0;
  grid-template-columns:calc(50% - var(--hw) * .176 - 1.5vw) calc(var(--hw) * .39 + 3vw) minmax(0,1fr)}   /* the window plus its moulding */
.wall-l{grid-column:1;padding-left:var(--gut);min-width:0}
.wall-r{grid-column:3;padding-right:var(--gut);min-width:0}
@media (max-width:899px){
  .floor-grid{grid-template-columns:1fr;padding:clamp(40px,6svh,70px) var(--gut);gap:40px}
  .wall-l,.wall-r{grid-column:1;padding:0}
}
.wall-chalk,.floor h2.script{font-family:var(--hand);color:#fbf7ee;line-height:1.05;text-shadow:0 2px 4px rgba(60,20,12,.7),0 0 20px rgba(60,20,12,.35)}

/* ---------- the menu: a burger of three real chalk strokes on a slate ---------- */
.burger{position:fixed;top:16px;right:18px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border:0;
  padding:12px 12px 7px;border-radius:12px;color:var(--chalk);-webkit-tap-highlight-color:transparent;
  background:#26201b url("../img/tex-cobbles.webp") center/220px;box-shadow:inset 0 0 0 100vmax rgba(20,15,10,.55),0 6px 14px rgba(0,0,0,.35);transition:translate .3s,opacity .3s,visibility 0s}
.burger:hover{translate:0 -2px}
.burger:focus-visible{outline:2px solid rgba(248,243,232,.85);outline-offset:4px}
.bars{position:relative;display:block;width:38px;height:26px}
.bar{position:absolute;left:0;width:100%;height:8px;background:var(--chalk);
  -webkit-mask:url("../img/chalk-2.webp") 0 0/100% 100%;mask:url("../img/chalk-2.webp") 0 0/100% 100%;
  transition:transform .45s cubic-bezier(.5,0,.2,1.3),top .35s ease,clip-path .3s ease}
.bar:nth-child(1){top:0;transform:rotate(-2deg)}
.bar:nth-child(2){top:9px;transform:rotate(1.5deg) scaleX(.86);transform-origin:left;clip-path:inset(0 0 0 0)}
.bar:nth-child(3){top:18px;transform:rotate(-1deg) scaleX(.95);transform-origin:left}
.burger-label{font-family:var(--typed);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
/* open: the outer strokes cross into an X, the middle one gets rubbed out */
.menu-open .bar:nth-child(1){top:9px;transform:rotate(40deg)}
.menu-open .bar:nth-child(3){top:9px;transform:rotate(-38deg) scaleX(1);transform-origin:center}
.menu-open .bar:nth-child(2){clip-path:inset(0 100% 0 0)}
@media (max-width:600px){.burger{top:10px;right:10px;padding:10px 10px 6px}.bars{width:32px;height:23px}.bar{height:7px}.bar:nth-child(2){top:8px}.bar:nth-child(3){top:16px}.menu-open .bar:nth-child(1),.menu-open .bar:nth-child(3){top:8px}}

#menu{position:fixed;inset:0;z-index:58;visibility:hidden;color:var(--chalk);overflow-y:auto;
  background:var(--night) url("../img/tex-cobbles.webp") center/cover;clip-path:circle(0 at calc(100% - 50px) 46px)}
#menu::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(20,15,10,.55),rgba(20,15,10,.88));pointer-events:none}
.menu-open #menu{visibility:visible;clip-path:circle(150% at calc(100% - 50px) 46px)}
.menu-inner{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:90px var(--gut) 40px;max-width:var(--wrap);margin:0 auto}
.menu-title{font-family:var(--typed);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#f0e2c4;margin-bottom:14px}
#menu ol{list-style:none;counter-reset:s}
#menu li{counter-increment:s;line-height:1}
#menu ol a{display:inline-flex;align-items:baseline;gap:18px;padding:.12em 0;text-decoration:none;font-family:var(--hand);font-size:clamp(38px,min(7vw,8.4svh),86px);text-shadow:0 2px 8px rgba(0,0,0,.5)}
#menu ol a::before{content:counter(s,decimal-leading-zero);font-family:var(--typed);font-size:15px;color:var(--lime);translate:0 -.9em}
#menu ol a span{position:relative}
#menu ol a span::after{content:"";position:absolute;left:-4px;right:-6px;bottom:.02em;height:.16em;background:var(--lime);
  -webkit-mask:url("../img/chalk-2.webp") 0 0/100% 100%;mask:url("../img/chalk-2.webp") 0 0/100% 100%;clip-path:inset(0 100% 0 0);transition:clip-path .35s ease}
#menu ol a:hover span::after,#menu ol a:focus-visible span::after{clip-path:inset(0 0 0 0)}
#menu a:focus-visible{outline:none}
.menu-foot{margin-top:34px;font-family:var(--typed);font-size:15px;color:#e9dcc4;overflow-wrap:anywhere}
.menu-foot a{color:var(--lime)}
html.menu-locked{overflow:hidden}
/* the circle opens from the button; each line is chalked on after it, one after another */
#menu{transition:clip-path .6s cubic-bezier(.7,0,.25,1),visibility 0s linear .6s}
.menu-open #menu{transition:clip-path .8s cubic-bezier(.55,0,.2,1),visibility 0s}
#menu li a,.menu-title,.menu-foot{clip-path:inset(-20% 100% -20% -5%);transition:clip-path .2s ease}
.menu-open #menu li a,.menu-open .menu-title,.menu-open .menu-foot{clip-path:inset(-20% -5% -20% -5%);transition:clip-path .5s ease calc(.3s + var(--i,0) * .07s)}
#menu li:nth-child(2) a{--i:1}#menu li:nth-child(3) a{--i:2}#menu li:nth-child(4) a{--i:3}#menu li:nth-child(5) a{--i:4}#menu li:nth-child(6) a{--i:5}.menu-foot{--i:7}
@media (prefers-reduced-motion:reduce){#menu,.menu-open #menu,#menu li a,.menu-title,.menu-foot,.bar{transition:none !important}}

/* ============ 1. opening: a chalk circle on the cobbles, the crowd inside it ============
   The circle is an ellipse clip on a full-bleed video. JS only turns two dials:
   --k opens the circle on load (0 to 1), --g grows it past the edges of the screen on scroll (0 to 1).
   The clip and the chalk ring both read the same numbers, so they always move as one. */
.opening{--cx:50vw;--cy:28svh;--ry:21svh;--rx:calc(var(--ry) * 1.42);--k:1;--g:0;
  --rxe:calc(var(--rx) * var(--k) + var(--g) * 70vw);--rye:calc(var(--ry) * var(--k) + var(--g) * 75svh);
  --cxe:calc(var(--cx) + var(--g) * (50vw - var(--cx)));
  position:relative;height:100svh;min-height:620px;overflow:hidden;color:var(--cream);
  background:#8a5a50 url("../img/building/wall.webp") center/cover no-repeat}
/* evening on the wall, so cream writing and white chalk read */
.opening::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(45,20,15,.35),rgba(35,15,10,.72));pointer-events:none;opacity:var(--dusk,1)}
/* the building the crowd zooms out into: the same floors as the page, lined up with where they'll be when the pin lets go */
.tower{position:absolute;inset:0;opacity:0;transform-origin:var(--wox,50%) var(--woy,50%);will-change:transform;
  background-image:url("../img/building/floor-m.webp?v=2"),url("../img/building/floor.webp?v=2"),url("../img/building/floor-m.webp?v=2");
  background-size:var(--hw) var(--fh);background-repeat:repeat-y;
  background-position:calc(50% - var(--hw)) var(--tower-y,0),50% var(--tower-y,0),calc(50% + var(--hw)) var(--tower-y,0)}
.hero-win{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.hero-win .leaves,.hero-win .iron{position:absolute;inset:0;width:100%;height:100%}
.crowd{position:absolute;inset:0;clip-path:ellipse(var(--rxe) var(--rye) at var(--cxe) var(--cy))}
/* the video fills the circle's own outline (kept on screen), so the action sits in the middle of the circle,
   and it grows with the circle until it is the whole screen */
.crowd-video{position:absolute;object-fit:cover;max-width:none;
  left:max(0px,calc(var(--cxe) - var(--rxe) * 1.05));top:max(0px,calc(var(--cy) - var(--rye) * 1.05));
  width:calc(min(100vw,calc(var(--cxe) + var(--rxe) * 1.05)) - max(0px,calc(var(--cxe) - var(--rxe) * 1.05)));
  height:calc(min(100svh,calc(var(--cy) + var(--rye) * 1.05)) - max(0px,calc(var(--cy) - var(--rye) * 1.05)))}
.ring{position:absolute;pointer-events:none;overflow:visible;
  left:calc(var(--cxe) - var(--rxe) * 1.03);top:calc(var(--cy) - var(--rye) * 1.07);width:calc(var(--rxe) * 2.06);height:calc(var(--rye) * 2.14)}
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(0deg,rgba(18,13,9,.94) 0%,rgba(18,13,9,.7) 28%,rgba(18,13,9,0) 52%)}
/* a title card: the circle centre stage, the words set underneath it */
.opening-copy{position:absolute;left:0;right:0;margin:0 auto;width:min(900px,calc(100% - 2 * var(--gut)));text-align:center;
  top:calc(var(--cy) + var(--ry) + clamp(12px,2.4svh,28px))}
.kicker{font-family:var(--typed);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#f0e2c4;margin-bottom:10px}
.opening h1{font-size:clamp(40px,min(4.4vw,7svh),84px);color:#fbf6ea;margin-bottom:.22em;text-shadow:0 3px 14px rgba(0,0,0,.55)}
.lede{max-width:58ch;margin:0 auto 22px;color:#f6efe0;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.opening .btn-ghost{color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream)}
.beat{position:absolute;font-family:var(--hand);color:var(--chalk);line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none}
.beat-2{font-size:clamp(40px,4.6vw,76px);right:calc(var(--gut) + 60px);top:clamp(70px,13svh,130px);transform:rotate(-4deg);opacity:0}
.place{position:absolute;right:var(--gut);bottom:28px;font-family:var(--typed);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#f0e2c4;opacity:.85}
.loop-toggle{position:absolute;left:var(--gut);bottom:14px;font-family:var(--typed);font-size:12px;letter-spacing:.06em;color:#e9dcc4;background:none;border:0;cursor:pointer;
  opacity:.65;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.loop-toggle:hover{opacity:1}
@media (max-width:899px){
  .opening{--cx:50vw;--cy:31svh;--rx:46vw;--ry:25svh;height:auto;min-height:0;padding:calc(56svh + 40px) var(--gut) 64px}
  .crowd{bottom:auto;height:calc(var(--cy) + var(--ry) + 12px)}   /* the video only needs to fill the circle, not the whole tall section */
  .opening-copy{position:relative;top:auto;width:auto;text-align:left}
  .lede{margin-left:0}
  .actions{justify-content:flex-start}
  .opening h1{font-size:clamp(44px,12vw,72px)}
  .beat-2,.place{display:none}
}

/* ============ 2. the windows that open: the reels behind the shutters ============
   .win sits exactly over a window in the building photo (JS sets its top); its parts fill it. */
.win{position:absolute;z-index:3;left:calc(50% - var(--hw) * .096);width:calc(var(--hw) * .22989);height:calc(var(--fh) * .50935);perspective:1400px}
.win .room,.win .leaves,.win .knock,.win .iron{position:absolute;inset:0;width:100%;height:100%}
.room{z-index:1;background:#120d0a;overflow:hidden}
.room img{width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.leaves{z-index:3;pointer-events:none;transform-style:preserve-3d;--mid:49.92%}
.leaf{position:absolute;top:0;height:100%;max-width:none;backface-visibility:visible;will-change:transform;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.leaf.l{left:0;width:var(--mid);transform-origin:0 50%}
.leaf.r{right:0;width:calc(100% - var(--mid));transform-origin:100% 50%}
.iron{z-index:4;pointer-events:none;max-width:none}   /* the railing stays in front of the shutters */
.knock{z-index:5;border:0;background:none;cursor:pointer;padding:0}
.knock:focus-visible{outline:3px solid rgba(248,243,232,.85);outline-offset:4px}
.win-chalk{position:absolute;bottom:calc(100% + var(--fh) * .19);left:-30%;right:-30%;text-align:center;font-family:var(--hand);
  font-size:clamp(22px,2.2vw,32px);color:#fbf7ee;transform:rotate(-3deg);text-shadow:0 2px 4px rgba(60,20,12,.7);pointer-events:none}
.trailers .wall-l{padding-top:calc(var(--fh) * .12)}
.trailers .wall-chalk{font-size:clamp(34px,3.4vw,56px);text-align:right;transform:rotate(-4deg)}
.cue-tap{font-family:var(--hand);font-size:22px;color:#fbf7ee;text-align:right;opacity:.85;margin-top:6px;text-shadow:0 2px 4px rgba(60,20,12,.7)}
.notice{max-width:30ch;padding:18px 22px;color:var(--ink);font-size:17px;transform:rotate(1.4deg);box-shadow:0 10px 18px rgba(30,10,5,.35);margin-top:calc(var(--fh) * .2)}
.notice a{color:var(--rust)}
@media (max-width:899px){.trailers .wall-chalk span{display:inline-block;rotate:-90deg}.trailers .wall-l{padding-top:0}.trailers .wall-chalk,.cue-tap{text-align:left}.notice{margin-top:0}}

/* hover a window: a real playing card is flicked at it (flat spin, sticks, tumbles down) */
.flick-layer{position:fixed;inset:0;z-index:50;pointer-events:none;perspective:900px;overflow:hidden}
.flick{position:absolute;left:0;top:0;pointer-events:none;transform-style:preserve-3d;will-change:transform}
/* a thrown card: the outer box carries it, .spin turns it flat in its own plane; real deck faces from Envato (Sensvector) */
.flick .spin,.card3d .spin{position:relative;width:100%;aspect-ratio:240/392;transform-style:preserve-3d}
.flick img,.card3d img{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;max-width:none}
.flick .back,.card3d .back{transform:rotateY(180deg)}

/* the theatre: the reel at full screen once it has come out of the window */
.theatre{position:fixed;inset:0;z-index:70}
.theatre[hidden]{display:none}
.theatre-dark{position:absolute;inset:0;background:#000;opacity:0}
.theatre video{position:fixed;object-fit:cover;background:#000;z-index:1}
.theatre.is-full video{object-fit:contain}
.theatre-close{position:fixed;top:16px;left:16px;z-index:2;font-family:var(--typed);font-size:14px;letter-spacing:.06em;color:var(--cream);
  background:rgba(20,15,10,.7);border:1px solid rgba(246,239,224,.5);border-radius:4px;padding:9px 14px;cursor:pointer;opacity:0}
.theatre.is-full .theatre-close{opacity:1;transition:opacity .3s}

/* ============ 3. bio: the flyer on the wall left of the window, the photo right of it ============ */
.flight{position:relative}
.act .floor-grid{align-items:center}
.sheet{max-width:640px;transform:rotate(-1deg);filter:sepia(.16) saturate(.9) drop-shadow(0 18px 22px rgba(30,10,5,.45))}
.sheet-inner{padding:clamp(28px,4vw,48px) clamp(24px,4vw,52px)}
.sheet h2{color:var(--rust)}
.deadpan{list-style:none}
.deadpan li{font-size:clamp(17px,1.4vw,20px);padding:7px 0 8px;border-bottom:1px dashed rgba(60,45,30,.18)}
.beat-line{position:relative;display:inline-block;white-space:nowrap}
.beat-line::after{content:"";position:absolute;left:-4px;right:-6px;bottom:-3px;height:9px;background:var(--lime);opacity:.9;
  -webkit-mask:url("../img/chalk-2.webp") 0 0/100% 100%;mask:url("../img/chalk-2.webp") 0 0/100% 100%;clip-path:inset(0 var(--u,0%) 0 0)}
@media (max-width:520px){.beat-line{white-space:normal;display:inline}.beat-line::after{display:none}}
.thrower{position:relative;justify-self:start;transform:rotate(2deg);box-shadow:0 18px 34px rgba(30,10,5,.45);border:10px solid var(--paper);border-bottom-width:44px;max-width:420px;background:var(--paper)}
.thrower img{aspect-ratio:4/5;object-fit:cover;object-position:46% 40%}
.thrower figcaption{position:absolute;left:0;right:0;bottom:-38px;text-align:center;font-family:var(--hand);font-size:26px;color:var(--ink)}
@media (max-width:899px){.floor{padding-top:var(--promo-room,0)}.thrower{justify-self:center;max-width:360px}}

/* the thrown card */
.card3d{position:absolute;left:0;top:0;width:66px;z-index:20;pointer-events:none;transform-style:preserve-3d;will-change:transform;opacity:0}

/* ============ 4. accolades: chalked on the wall left of the window, reviews wheat-pasted right of it ============ */
.accolades{color:var(--cream)}
/* chalk boards hung on the wall (the awards, the booking note), so the writing reads wherever a floor's stone ledge falls */
.awards{list-style:none;margin-top:18px;padding:8px 26px 10px}
.awards,.slate{border-radius:6px;transform:rotate(-.8deg);
  background:#26201b url("../img/tex-cobbles.webp") center/260px;box-shadow:inset 0 0 0 100vmax rgba(20,15,10,.62),inset 0 0 0 7px #5b3a26,0 14px 24px rgba(30,10,5,.45)}
.awards li{padding:14px 0 16px;border-bottom:1px dashed rgba(246,239,224,.3)}
.awards li:last-child{border-bottom:0}
.awards b{display:block;font-family:var(--hand);font-weight:400;font-size:clamp(26px,2.4vw,38px);line-height:1.1;color:#fbf3e2;text-shadow:0 2px 4px rgba(60,20,12,.7)}
.awards em{display:block;font-family:var(--typed);font-style:normal;font-size:14px;letter-spacing:.04em;color:#fbeedd;margin-top:6px;text-shadow:0 1px 3px rgba(60,20,12,.8)}
.posters{display:grid;gap:30px;perspective:900px}
.poster{position:relative;background:var(--paper);color:var(--ink);padding:26px 28px 22px;box-shadow:0 10px 20px rgba(30,10,5,.4);filter:sepia(.22);overflow:hidden;transform-origin:50% 0}
.poster:nth-child(1){rotate:-1deg}.poster:nth-child(2){rotate:.8deg;margin-left:clamp(0px,3vw,40px)}.poster:nth-child(3){rotate:-.4deg}
.poster p{font-size:clamp(20px,1.8vw,26px);font-style:italic;line-height:1.3;margin-bottom:12px}
.poster cite{font-family:var(--typed);font-style:normal;font-size:13px;letter-spacing:.04em;color:var(--tobacco)}
/* the wet paste: a sheen the brush leaves behind, swept down once when the poster goes up */
.poster::after{content:"";position:absolute;inset:-40% 0;pointer-events:none;opacity:0;
  background:linear-gradient(172deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.55) 48%,rgba(255,250,235,.25) 54%,rgba(255,255,255,0) 66%)}
.poster.pasted::after{animation:paste 1.2s cubic-bezier(.3,.1,.3,1) .2s}
@keyframes paste{0%{opacity:1;transform:translateY(-55%)}75%{opacity:.85}100%{opacity:0;transform:translateY(55%)}}

/* ============ 5. where he's played: a fan of photo cards on the card table ============ */
.played{color:var(--cream);position:relative;padding-bottom:clamp(80px,9vw,120px)}
.played-stage{position:relative;padding-top:clamp(80px,9vw,120px)}
.played-head{text-align:center}
.played h2{color:#fbf7ee;margin-bottom:.15em;text-shadow:0 2px 4px rgba(60,20,12,.7)}
.played-sub{font-family:var(--typed);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#fbeedd;text-shadow:0 1px 3px rgba(60,20,12,.8)}
/* without JS (or with reduced motion) the fan is a plain sideways row */
.fan{list-style:none;display:flex;gap:24px;overflow-x:auto;padding:40px var(--gut) 40px;scroll-snap-type:x mandatory}
.fcard{flex:0 0 auto;width:clamp(240px,30vw,400px);scroll-snap-align:center;background:var(--paper);padding:9px 9px 40px;border-radius:12px;box-shadow:0 14px 28px rgba(0,0,0,.5);position:relative}
.fcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px}
.fcard::before,.fcard::after{content:"\2660";position:absolute;font-size:20px;line-height:1;color:var(--rust)}
.fcard::before{left:12px;bottom:10px}.fcard::after{right:12px;bottom:10px}
.fcard:nth-child(even)::before,.fcard:nth-child(even)::after{content:"\2665"}
.fcap{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--hand);font-size:clamp(20px,1.8vw,26px);color:var(--ink)}
.fan-now{display:none}
/* the live fan: every card pivots on a point far below the stage, like a hand of cards */
.fan-live .played-stage{height:100svh;min-height:600px;padding-top:clamp(70px,9svh,110px);overflow:hidden}
.fan-live .fan{display:block;overflow:visible;padding:0;position:absolute;left:50%;top:calc(clamp(70px,9svh,110px) + clamp(160px,26svh,250px));width:0;height:0}
.fan-live .fcard{position:absolute;left:0;top:0;width:var(--fw);margin-left:calc(var(--fw) / -2);transform-origin:50% calc(100% + var(--fr));will-change:transform}
.fan-live .fcap{opacity:0}
.fan-live .fan-now{display:block;position:absolute;left:0;right:0;bottom:clamp(30px,6svh,70px);text-align:center;font-family:var(--hand);font-size:clamp(34px,4vw,58px);color:var(--chalk);text-shadow:0 2px 6px rgba(40,15,8,.85),0 0 22px rgba(40,15,8,.7)}
.fan-live{--fw:clamp(240px,min(28vw,48svh),420px);--fr:clamp(700px,80vw,1300px)}
@media (max-width:700px){.fan-live{--fw:68vw;--fr:130vw}.fan-live .fan-now{bottom:auto;top:calc(clamp(70px,9svh,110px) + clamp(160px,26svh,250px) + 68vw * .75 + 80px)}}

.bill{max-width:760px;margin:clamp(30px,5vw,60px) auto 0;background:var(--paper);color:var(--ink);padding:30px clamp(20px,4vw,48px) 26px;box-shadow:0 14px 26px rgba(0,0,0,.45);transform:rotate(-.8deg);filter:sepia(.2);text-align:center}
.bill-head{font-family:var(--hand);font-size:clamp(36px,3.6vw,50px);color:var(--rust);margin-bottom:10px}
.bill ul{list-style:none}
.bill li{padding:9px 0;border-top:1px solid rgba(60,45,30,.25)}
.bill li b{display:block;font-weight:600;font-size:clamp(17px,1.7vw,22px);letter-spacing:.09em;text-transform:uppercase;line-height:1.2}
.bill li:nth-child(odd) b{font-size:clamp(20px,2.1vw,28px)}
.bill li span{display:block;font-family:var(--typed);font-size:13px;color:var(--tobacco);margin-top:2px}

/* ============ 6. photos and bios: photos left of the window, bios right ============ */
.kit .floor-grid{padding-top:clamp(40px,6svh,80px)}
.kit-lede{max-width:44ch;margin-bottom:28px;color:#fbf3e2;text-shadow:0 1px 3px rgba(60,20,12,.85)}
.deal{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,24px);margin-bottom:30px;max-width:520px}
.deal li{background:#fbf8f2;padding:8px;border-radius:10px;box-shadow:0 10px 20px rgba(30,10,5,.35)}
.deal li:nth-child(1){rotate:-2deg}.deal li:nth-child(2){rotate:1.5deg}.deal li:nth-child(3){rotate:-1deg}.deal li:nth-child(4){rotate:2deg}
.deal img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:5px}
.grab{display:flex;flex-wrap:wrap;gap:12px}
.kit .btn-ghost{background:rgba(246,239,224,.92)}
.bios{display:grid;gap:26px}
.bio{background:var(--paper);padding:24px 24px 18px;box-shadow:0 10px 22px rgba(30,10,5,.3);filter:sepia(.12)}
.bio h3{font-family:var(--hand);font-weight:400;font-size:36px;color:var(--rust);margin-bottom:8px}
.bio h3 span{font-family:var(--typed);font-size:13px;color:var(--tobacco);margin-left:8px}
.bio p{margin-bottom:14px;font-size:17px}
.copy{font-family:var(--typed);font-size:14px;background:none;border:2px solid var(--rust);color:var(--rust);padding:7px 18px;cursor:pointer;border-radius:3px}
.copy.done{background:var(--rust);color:var(--cream)}

/* ============ 2. the street ============
   The Edinburgh floor is the bottom of the building. The camera (.st-cam) is sticky: first .world tilts about the
   camera's own position, which is the same as looking down; then (js/street.js) the camera travels across the
   cobbles over .journey, a flat plane of stops, turning as it goes. JS pads .lead-in so this starts where a floor ends. */
/* between the opening's window and the street door the floors have no windows: nothing there opens (Sam) */
.lead-in{background-color:#a77567;
  background-image:url("../img/building/floor-plain-m.webp?v=1"),url("../img/building/floor-plain.webp?v=1"),url("../img/building/floor-plain-m.webp?v=1");
  background-size:var(--hw) var(--fh);background-repeat:repeat-y;
  background-position:calc(50% - var(--hw)) var(--lead-y,0),50% var(--lead-y,0),calc(50% + var(--hw)) var(--lead-y,0)}
.street{position:relative}
.st-track{position:relative;height:200svh}
.st-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
/* the camera is the full screen with the phone's address bar tucked away, so no gap opens under it when the bar goes */
.st-cam{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;perspective:100svh;perspective-origin:50% 50%}
.world{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50% 100svh;will-change:transform}
.gf-facade{position:absolute;inset:0;background-color:#a77567;
  background-image:url("../img/building/ground-m.webp?v=3"),url("../img/building/ground.webp?v=3"),url("../img/building/ground-m.webp?v=3"),
                   url("../img/building/floor-plain-m.webp?v=1"),url("../img/building/floor-plain.webp?v=1"),url("../img/building/floor-plain-m.webp?v=1");
  background-size:var(--hw) var(--gh),var(--hw) var(--gh),var(--hw) var(--gh),var(--hw) var(--fh),var(--hw) var(--fh),var(--hw) var(--fh);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat-y,repeat-y,repeat-y;
  background-position:calc(50% - var(--hw)) 100%,50% 100%,calc(50% + var(--hw)) 100%,
                      calc(50% - var(--hw)) calc(100% - var(--gh)),50% calc(100% - var(--gh)),calc(50% + var(--hw)) calc(100% - var(--gh))}
/* the street door: a ground-floor opening, from the bottom 40% of the house photo */
.win.door{top:auto;bottom:calc(var(--gh) * .0575);left:calc(50% - var(--hw) * .114);width:calc(var(--hw) * .26015);height:calc(var(--gh) * .7776)}
.win.door .leaves{--mid:49.93%}
/* what's behind the door only shows through the door's own arched shape, not the square corners above it */
.win.door .room{-webkit-mask:url("../img/facade/door-l.webp?v=5") left top/49.93% 100% no-repeat,url("../img/facade/door-r.webp?v=5") right top/50.07% 100% no-repeat;
  mask:url("../img/facade/door-l.webp?v=5") left top/49.93% 100% no-repeat,url("../img/facade/door-r.webp?v=5") right top/50.07% 100% no-repeat}
/* the houses either side are the same house mirrored: their doors are shut too (the photo has them open, which at the
   edge of the screen read as a broken, slanted frame) */
.door-side{position:absolute;z-index:3;bottom:calc(var(--gh) * .0575);width:calc(var(--hw) * .26015);height:calc(var(--gh) * .7776);
  transform:scaleX(-1);pointer-events:none}
.door-side .leaves{position:absolute;inset:0;--mid:49.93%}
.door-side.l{left:calc(50% - var(--hw) * 1.146)}
.door-side.r{left:calc(50% + var(--hw) * .854)}
.gf-chalk{position:absolute;right:calc(50% + var(--hw) * .17);top:calc(100% - var(--gh) * .62);width:min(40vw,520px);text-align:right}
.gf-chalk .wall-chalk{font-size:clamp(34px,3.4vw,56px);transform:rotate(-4deg)}
/* looking straight down, the camera is half a screen above the ground and the perspective is a full screen, so the
   ground shows at 2x: half-size stones here match the full-size stones of the cobbles the camera then travels over */
.ground{position:absolute;left:-150vw;width:400vw;top:100%;height:300svh;transform-origin:50% 0;transform:rotateX(90deg);
  background:#55504a url("../img/ground-cobbles.webp?v=3") 50% 0/75svh auto repeat}
.ground::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,15,10,.7) 0,rgba(20,15,10,.45) 6%,rgba(20,15,10,.45) 100%)}   /* the wall's shadow at its foot */
.street-light{position:absolute;inset:0;z-index:6;pointer-events:none;transform:translateZ(0);
  background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(30,15,10,0) 55%,rgba(30,15,10,.38) 100%)}

/* ---------- down on the ground: The Daily Pitch ----------
   A newspaper lying on the cobbles. Four sheets, each with a page on both faces; js/street.js turns them about the
   fold as you scroll. Real crumpled paper (Envato, Maliflower73) runs over every page as a crease layer, so the folds
   cross the print and the photos the way they would on a real sheet. Type is sized in cqw (the page's width), so a
   page holds the same words on any screen. */
.litter{width:52px;max-width:none;box-shadow:0 4px 6px rgba(0,0,0,.45);border-radius:3px;pointer-events:none}
.litter-tilt{position:absolute;width:3.2svh}   /* on the tilted ground, which shows at about twice size */
.np-paper{--ink-np:#1c1916;--paper-np:#eeeae0;color:var(--ink-np);text-shadow:none}
.np-face{position:relative;background:var(--paper-np);container-type:inline-size;overflow:hidden}
/* a paper in good condition (Sam): flat, no creases, just the fine grain of real paper (a flat patch of an Envato
   paper photo, torn-edge pack, as see-through light and shade: blend modes don't work on pages turning in 3D) */
.np-face::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:url("../img/newsprint-grain.webp?v=1") var(--cx,50%) var(--cy,50%)/700px auto repeat}

/* with the camera: one paper in the middle of the screen, its sheets turning about the fold */
.street.cam .np-paper{position:absolute;left:50%;top:50%;z-index:4;width:calc(var(--pw) * 2);height:var(--ph);visibility:hidden;will-change:transform}
.street.cam .np-book{position:absolute;inset:0}
.street.cam .np-sheet{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.street.cam .np-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.street.cam .np-face.back{transform:rotateY(180deg)}
/* the fold, shadowed on each page beside it; and a page going over darkens as it lifts off the light */
.street.cam .np-face::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(45,32,20,.3),rgba(45,32,20,.08) 3%,rgba(45,32,20,0) 9%),rgba(30,20,10,calc(var(--lift,0) * .28))}
.street.cam .np-face.back::before{background:linear-gradient(270deg,rgba(45,32,20,.3),rgba(45,32,20,.08) 3%,rgba(45,32,20,0) 9%),rgba(30,20,10,calc(var(--lift,0) * .28))}
.street.cam .np-page{height:100%;font-size:2.3cqw}
/* the rest of the paper under the open pages: the edges of a thick pile of sheets, a few of them askew */
.np-under{position:absolute;top:0;width:50%;height:100%;z-index:0;pointer-events:none}
.np-under.l{left:0;opacity:0}
.np-under.r{left:50%}
.np-under::before,.np-under i{content:"";position:absolute;inset:0;background:#e3dccb}
.np-under.r::before{box-shadow:1px 1px 0 #cfc6b3,2px 2px 0 #e4ddcb,3px 3px 0 #c8bfab,4px 4px 0 #e0d9c7,5px 5px 0 #c2b9a4,6px 6px 0 #ddd5c2,7px 7px 0 #bdb39e,8px 8px 0 #d9d1be,9px 9px 0 #b8ae98,10px 10px 0 #d5ccb8,11px 11px 0 #b2a891,12px 12px 0 #d0c7b2,13px 13px 0 #ada28b,14px 14px 0 #cac0aa,0 26px 40px rgba(0,0,0,.62),0 6px 10px rgba(0,0,0,.45)}
.np-under.l::before{box-shadow:-1px 1px 0 #cfc6b3,-2px 2px 0 #e4ddcb,-3px 3px 0 #c8bfab,-4px 4px 0 #e0d9c7,-5px 5px 0 #c2b9a4,-6px 6px 0 #ddd5c2,-7px 7px 0 #bdb39e,-8px 8px 0 #d9d1be,-9px 9px 0 #b8ae98,-10px 10px 0 #d5ccb8,-11px 11px 0 #b2a891,-12px 12px 0 #d0c7b2,-13px 13px 0 #ada28b,-14px 14px 0 #cac0aa,0 26px 40px rgba(0,0,0,.62),0 6px 10px rgba(0,0,0,.45)}
.np-under i{box-shadow:0 0 0 1px rgba(120,105,85,.16),0 1px 2px rgba(0,0,0,.18)}
/* the sheets underneath sit almost square: a neat paper, only a hair out of line */
.np-under.r i:nth-child(1){transform:translate(.35%,.45%)}
.np-under.r i:nth-child(2){transform:translate(.15%,.75%) rotate(-.12deg)}
.np-under.r i:nth-child(3){transform:translate(.6%,.2%) rotate(.08deg)}
.np-under.l i:nth-child(1){transform:translate(-.35%,.45%)}
.np-under.l i:nth-child(2){transform:translate(-.15%,.75%) rotate(.12deg)}
.np-under.l i:nth-child(3){transform:translate(-.6%,.2%) rotate(-.08deg)}







/* without the camera: the pages one after another down the page, on the cobbles the tilt left you looking at */
.street.flat .np-paper{position:relative;padding:40px var(--gut) 70px;
  background:#55504a url("../img/ground-cobbles.webp?v=3") 50% -25svh/150svh auto repeat}
.street.flat .np-paper::before{content:"";position:absolute;inset:0;background:rgba(20,15,10,.45);pointer-events:none}
.street.flat .np-book{position:relative;display:grid;gap:48px;justify-items:center}
.street.flat .np-sheet{display:contents}
.street.flat .np-under{display:none}
.street.flat .np-face{width:min(100%,680px);transform:rotate(-1deg);
  box-shadow:2px 2px 0 #cbc3b0,4px 4px 0 #e0d9c7,6px 6px 0 #c4bba7,0 18px 28px rgba(0,0,0,.55)}
.street.flat .np-face.back{transform:rotate(1.1deg)}
.street.flat .np-page{font-size:clamp(14px,2.4cqw,16px)}

/* ---------- the print ---------- */
.np-page{position:relative;display:flex;flex-direction:column;padding:1.5em 1.7em 1.4em;font-family:var(--serif);line-height:1.34;color:var(--ink-np)}
.np-page p{margin:0}
.np-page a{color:inherit;text-decoration-thickness:1px;text-underline-offset:2px}
.np-folio{display:flex;justify-content:space-between;gap:1em;font-size:.68em;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--ink-np);padding-bottom:.4em;margin-bottom:1.1em !important}
.np-kicker{align-self:flex-start;font-size:.72em;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink-np);margin-bottom:.45em !important}
.np-head{font-family:var(--serif);font-weight:600;font-size:2.55em;line-height:1.02;letter-spacing:-.015em;margin:0 0 .5em;color:#17130f}
.np-photo{margin:0;position:relative}
.np-photo img{display:block;width:100%;max-width:none;object-fit:cover;filter:saturate(.72) sepia(.08) contrast(1.04)}
.np-photo figcaption{font-size:.74em;font-style:italic;line-height:1.25;margin-top:.35em}
.np-lede{font-size:1.08em;line-height:1.3;margin-bottom:.7em !important}

/* page 1: the front */
.np-mast{text-align:center;border-bottom:3px double var(--ink-np);padding-bottom:.55em;margin-bottom:.9em}
.np-ears,.np-line{display:flex;justify-content:space-between;gap:1em;font-size:.68em;letter-spacing:.1em;text-transform:uppercase}
.np-name{font-weight:600;font-size:4.5em;line-height:1;letter-spacing:-.02em;margin:.06em 0 .12em !important}
.np-line{border-top:1px solid var(--ink-np);padding-top:.4em}
.np-front .np-head{font-size:2.75em}
.np-lead{display:grid;grid-template-columns:1fr 1fr;gap:0 1.3em}
.np-lead .np-photo img{aspect-ratio:4/5;object-position:46% 40%}
.np-body{list-style:none;margin:0;padding:0 0 0 1.3em;border-left:1px solid rgba(30,26,23,.45);text-align:justify;hyphens:auto}
.np-body li{text-indent:1.1em;padding:0}
.np-body li:first-child{text-indent:0}
.np-body li:first-child::first-letter{float:left;font-size:3.3em;line-height:.82;font-weight:600;margin:.06em .1em 0 0}
.np-ads{display:grid;grid-template-columns:1fr 1fr .78fr;gap:1em;margin-top:auto;border-top:2px solid var(--ink-np);padding-top:.9em}
.np-ad{display:flex;flex-direction:column;justify-content:center;gap:.2em;text-decoration:none;color:inherit;border:2px solid var(--ink-np);padding:.65em .7em;text-align:center}
a.np-ad:hover{background:rgba(30,26,23,.07)}
.np-ad-name{font-weight:600;font-size:1.15em;line-height:1.05;text-transform:uppercase;letter-spacing:.04em}
.np-ad-name small{display:block;font-size:.62em;letter-spacing:.26em;margin-top:.15em}
.np-ad-text{font-size:.8em;line-height:1.25}
.np-ad-when{font-style:italic;font-size:.86em;border-top:1px solid var(--ink-np);border-bottom:1px solid var(--ink-np);padding:.15em 0;margin:.15em 0}
.np-ad-url{font-size:.72em;letter-spacing:.05em;text-decoration:underline;text-underline-offset:2px}
.np-ad-skm{border-style:double;border-width:4px}
.np-classified{border:0;border-left:1px solid var(--ink-np);text-align:left;justify-content:flex-start;font-size:.86em;line-height:1.3;padding:0 0 0 .9em}

/* page 2: reviews */
.np-quote{margin:0 0 1.1em;padding:0 0 1.1em;border-bottom:1px solid rgba(30,26,23,.4)}
.np-quote p{font-size:2.2em;line-height:1.12;font-style:italic;margin-bottom:.3em !important}
.np-quote cite{font-style:normal;font-size:.74em;letter-spacing:.12em;text-transform:uppercase}
.np-box{border:2px solid var(--ink-np);padding:.75em 1em .6em;margin-top:auto}
.np-box h3{font-family:var(--serif);font-size:.74em;letter-spacing:.2em;text-transform:uppercase;text-align:center;border-bottom:1px solid var(--ink-np);padding-bottom:.4em;margin:0 0 .3em}
.np-honours{list-style:none;margin:0;padding:0}
.np-honours li{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.4em 0;border-bottom:1px dotted rgba(30,26,23,.6)}
.np-honours li:last-child{border-bottom:0}
.np-honours b{font-weight:600}
.np-honours span{font-style:italic;text-align:right;flex:0 0 auto;max-width:45%}

/* page 3: the reel */
.np-page .reel-photo .room{position:relative;overflow:hidden}
.np-page .reel-photo .room img{aspect-ratio:4/3}
.np-page .reel-photo .knock{position:absolute;left:0;top:0;width:100%;aspect-ratio:4/3;height:auto;border:0;background:none;cursor:pointer}
.np-page .reel-photo .knock::after{content:"";position:absolute;left:50%;top:50%;width:5em;height:5em;margin:-2.5em 0 0 -2.5em;border-radius:50%;
  background:rgba(20,15,10,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f8f3e8' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 54% 50%/2.6em no-repeat}
.np-page .reel-photo .knock:hover::after{background-color:rgba(20,15,10,.8)}
.np-also{display:grid;grid-template-columns:1fr 1fr;gap:1.3em;align-items:start;margin-top:auto}
.np-also .np-kicker{display:inline-block}
.np-notice{border:2px solid var(--ink-np);padding:.8em 1em;font-size:1.1em;line-height:1.3}

/* page 4: photos from around the world */
.np-world{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:11.7em;gap:1em}
.np-world .np-photo{display:flex;flex-direction:column;min-height:0}
.np-world .np-photo img{flex:1 1 0;min-height:0;height:100%}
.np-world .big{grid-column:span 2;grid-row:span 2}
.np-world .tall{grid-row:span 2}
.np-world-note{align-self:center;font-style:italic;font-size:1.05em;line-height:1.3;border-top:2px solid var(--ink-np);border-bottom:2px solid var(--ink-np);padding:.6em 0}

/* page 5: listings */
.np-wide img{aspect-ratio:16/9}
.np-listings{list-style:none;margin:1em 0 0;padding:0}
.np-listings li{display:flex;align-items:baseline;gap:.5em;padding:.85em 0;border-bottom:1px solid rgba(30,26,23,.35)}
.np-listings b{font-weight:600;font-size:1.3em}
.np-listings i{flex:1;min-width:1em;border-bottom:1.5px dotted rgba(30,26,23,.7)}
.np-listings span{font-style:italic;text-align:right;font-size:1.05em}

/* page 6: press */
.np-coupons{display:flex;flex-wrap:wrap;gap:.6em;margin-bottom:1em !important}
.np-btn{display:inline-block;border:2px solid var(--ink-np);padding:.4em .8em;font-size:.8em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.np-btn:hover{background:var(--ink-np);color:var(--paper-np)}
.np-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;margin-bottom:1em}
.np-strip img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.72) sepia(.08) contrast(1.04)}
.np-bios{display:grid;grid-template-columns:1fr 1.55fr;gap:1.3em}
.np-bio + .np-bio{border-left:1px solid rgba(30,26,23,.45);padding-left:1.3em}
.np-bio h3{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);font-size:.74em;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--ink-np);padding-bottom:.3em;margin:0 0 .5em}
.np-bio h3 span{letter-spacing:.04em;text-transform:none;font-style:italic}
.np-bio p{text-align:justify;hyphens:auto;margin-bottom:.6em}
.np-page .copy{font-family:var(--serif);font-size:.74em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-np);background:none;
  border:1.5px solid var(--ink-np);padding:.3em 1em;text-shadow:none;cursor:pointer;border-radius:0}
.np-page .copy.done,.np-page .copy:hover{background:var(--ink-np);color:var(--paper-np)}

/* page 7: classifieds, with a coupon to fill in */
.np-book-top{display:grid;grid-template-columns:1fr 9.5em;gap:1.3em;align-items:start}
.np-book-top p{margin-bottom:.5em !important}
.np-hat img{aspect-ratio:4/5;object-position:50% 20%;background:#a49784}
.np-socials{list-style:none;display:flex;flex-wrap:wrap;gap:.2em 1.1em;margin:0;padding:0;font-size:.92em}
.np-form{position:relative;border:2px dashed var(--ink-np);padding:1.3em 1.5em 1.2em;margin-top:1.4em;flex:1 0 auto;display:flex;flex-direction:column}
.np-form-head{font-weight:600;font-size:2em;line-height:1;text-align:center;margin-bottom:.5em !important}
.np-fields{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto) 1fr;gap:1.3em 1.4em;flex:1 0 auto}
.np-fields label{display:block;font-size:.7em;letter-spacing:.12em;text-transform:uppercase}
.np-fields .wide{grid-column:1/-1;display:flex;flex-direction:column}
.np-fields .wide textarea{flex:1;min-height:3.2em;line-height:1.6em;border-bottom:0;
  background:repeating-linear-gradient(180deg,transparent 0 calc(1.6em - 1px),rgba(30,26,23,.55) calc(1.6em - 1px) 1.6em)}
.np-fields input:not([type=checkbox]),.np-fields select,.np-fields textarea{display:block;width:100%;font-family:var(--serif);font-size:1.45em;letter-spacing:0;
  text-transform:none;color:var(--ink-np);background:transparent;border:0;border-bottom:1px solid var(--ink-np);border-radius:0;padding:.1em .1em;outline:none;resize:none}
.np-fields select{color-scheme:light}
.np-fields input:focus,.np-fields select:focus,.np-fields textarea:focus{background:rgba(30,26,23,.06);border-bottom-width:2px}
.np-fields ::placeholder{color:rgba(30,26,23,.42)}
.np-fields .check{display:flex;align-items:center;gap:.6em;align-self:end;padding-bottom:.3em}
.np-fields .check input{width:1.3em;height:1.3em;accent-color:var(--ink-np)}
.np-form .bad{border-bottom-color:#a3271a !important;background:rgba(163,39,26,.08)}
.np-submit{display:block;margin:1.1em auto 0;font-size:1.1em !important;font-family:var(--serif);font-size:1em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-np);background:var(--ink-np);border:0;padding:.6em 1.6em;cursor:pointer}
.np-submit:hover{background:#3a332d}
.np-form .form-msg{font-family:var(--serif);font-size:.86em;font-style:italic;color:var(--ink-np);min-height:1.2em;margin-top:.5em;text-align:center}
.np-form .copy-note{display:block;margin:.4em auto 0}
.np-form .copy-note[hidden]{display:none}

/* page 8: the back page */
.np-back .np-photo img{aspect-ratio:1;object-position:50% 25%}
.np-back-name{font-family:"Chalkboy",sans-serif;font-size:3.4em;line-height:1;text-align:center;margin:.5em 0 .25em !important}
.np-back-line{text-align:center;font-size:1.1em;line-height:1.35;max-width:30em;align-self:center}
.np-small{margin-top:auto !important;font-size:.72em;line-height:1.35;text-align:center;border-top:1px solid var(--ink-np);padding-top:.7em}

/* narrow pages (phones): one column */
@container (max-width:520px){
  .np-lead,.np-bios,.np-book-top,.np-fields{grid-template-columns:1fr}
  .np-body{border-left:0;padding:.8em 0 0}
  .np-bio + .np-bio{border-left:0;padding-left:0}
  .np-ads{grid-template-columns:1fr}
  .np-classified{border-left:0;border-top:1px solid var(--ink-np);padding:.6em 0 0}
  .np-line span:nth-child(3){display:none}
  .np-name{font-size:3.2em}
  .np-world{grid-template-columns:1fr 1fr;grid-auto-rows:9em}
  .np-world .tall{grid-row:span 2}
  .np-strip{grid-template-columns:1fr 1fr}
  .np-hat{max-width:12em}
}
@media (max-width:899px){
  .gf-chalk{right:auto;left:var(--gut);top:calc(100% - var(--gh) - var(--fh) * .3);width:auto;text-align:left}
}
@media (prefers-reduced-motion:reduce){.st-track{height:100svh}}

/* ---------- things JS animates in start hidden only when JS is running ---------- */
.js .opening h1{clip-path:inset(-15% 100% -15% -5%)}
@media (prefers-reduced-motion:reduce){.js .opening h1{clip-path:none}}

/* ============ chalk and photos: everything written on the building is chalk, straight on the wall ============
   (Sam, 2026-11-06: "chalk art or photos on a street"). Pictures stay as photo prints. These override the paper,
   slate and poster styles above. The dark halo keeps chalk readable where it crosses a pale stone ledge. */
:root{--chalk-ink:#f8f3e8;--chalk-dim:#fbe7c8;--halo:0 1px 2px rgba(45,14,6,.9),0 0 10px rgba(45,14,6,.6),0 0 24px rgba(45,14,6,.32)}
.notice,.sheet,.awards,.posters,.bill,.bios,.slate,.note-form,.kit-lede,.book-copy p,.played-sub{color:var(--chalk-ink);text-shadow:var(--halo)}
.notice{max-width:26ch;padding:0;box-shadow:none;font-family:var(--hand);font-size:clamp(22px,1.9vw,28px);line-height:1.15;transform:rotate(-2deg)}
.notice a,.bios a,.book-copy .direct a{color:var(--lime)}
.sheet{max-width:560px;filter:none;transform:rotate(-1.2deg)}
.sheet-inner{padding:0}
.sheet h2,.bill-head,.bio h3,.note-head{color:#fbf7ee;text-shadow:var(--halo)}
.deadpan li{font-family:var(--hand);font-size:clamp(21px,1.75vw,26px);line-height:1.12;padding:6px 0;border-bottom:0}
.awards,.slate{background:none;box-shadow:none;border-radius:0;padding:0}
.awards{transform:rotate(-1deg)}
.awards li{border-bottom:0;padding:10px 0}
.awards em{font-family:var(--hand);font-size:20px;letter-spacing:0;color:var(--chalk-dim)}
.poster{background:none;box-shadow:none;filter:none;padding:0;overflow:visible;color:var(--chalk-ink)}
.poster::after{display:none}
.poster p{font-family:var(--hand);font-style:normal;font-size:clamp(24px,2.1vw,32px);line-height:1.1;margin-bottom:6px}
.poster cite{font-family:var(--hand);font-size:19px;color:var(--chalk-dim)}
.bill{background:none;box-shadow:none;filter:none;transform:rotate(-1deg)}
.bill li{border-top:0;padding:6px 0}
.bill li b,.bill li:nth-child(odd) b{font-family:var(--hand);font-weight:400;letter-spacing:.01em;text-transform:none;font-size:clamp(24px,2.2vw,32px)}
.bill li span{font-family:var(--hand);font-size:18px;color:var(--chalk-dim)}
.bio{background:none;box-shadow:none;filter:none;padding:0}
.bio h3 span{font-family:var(--hand);font-size:17px;color:var(--chalk-dim)}
.bio p{font-family:var(--hand);font-size:clamp(19px,1.5vw,22px);line-height:1.22}
.copy{font-family:var(--hand);font-size:19px;color:var(--chalk-ink);border:2px dashed var(--chalk-ink);text-shadow:var(--halo)}
.copy.done{background:var(--chalk-ink);color:var(--ink);text-shadow:none}
.note-form{background:none;box-shadow:none;transform:rotate(-.6deg)}
.note-form::before{display:none}
.note-form label,.note-form .check{font-family:var(--hand);font-size:19px;color:var(--chalk-dim)}
.note-form input:not([type=checkbox]),.note-form select,.note-form textarea{font-family:var(--hand);font-size:21px;color:#fffaf0;
  text-shadow:var(--halo);border-bottom:2px dashed rgba(248,243,232,.75)}
.note-form input:focus,.note-form select:focus,.note-form textarea:focus{border-bottom:2px solid #fffaf0}
.note-form ::placeholder{color:rgba(248,243,232,.55)}
.note-form select option{color:var(--ink);text-shadow:none}
.form-msg{color:var(--chalk-dim)}
/* on wide screens the houses either side show; keep the writing off their windows */
@media (min-width:900px){
  .wall-l{padding-left:max(var(--gut),calc(50vw - var(--hw) * .84))}
  .wall-r{padding-right:max(var(--gut),calc(50vw - var(--hw) * .8))}
}
/* the ground floor: the chalked note sits on the wall above the railings, the door's chalk below the ledge */
@media (min-width:900px) and (min-height:621px){
  .book-wrap{padding-bottom:calc(var(--gh) * .3)}
  .note-form label{margin-top:5px}
  .win.door .win-chalk{bottom:calc(100% + var(--gh) * .035)}
}