/* Amuse, revision 15: "A little something for the table". The page is a tasting menu laid on a forest tablecloth. */
@font-face{font-family:Bricolage;src:url('assets/fonts/bricolage-800.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:DM;src:url('assets/fonts/dm-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url('assets/fonts/dm-sans-600.ttf') format('truetype');font-weight:600;font-display:swap}

:root{
  /* brand */
  --forest:#183d32; --forest-2:#1f4a3d; --forest-deep:#112e25; --forest-night:#0c231c;
  --paper:#f8f3e7; --paper-2:#efe6d0; --paper-3:#e4d8bb;
  --tomato:#bb2d1c; --tomato-deep:#7f1f14; --butter:#efca68; --butter-deep:#c99c35; --navy:#263e66;
  --muted:#56665c; --line:rgb(24 61 50 / .16); --cream-soft:rgb(248 243 231 / .8);
  /* margin tiers: nav and footer widest, hero next, body narrowest */
  --edge:clamp(12px,1.6vw,28px);
  --tier-nav:min(1720px,100% - 2 * var(--edge));
  --tier-hero:min(1480px,100% - 2 * clamp(20px,5.9vw,120px));
  --tier-body:min(1200px,100% - 2 * clamp(20px,6.4vw,128px));
  --section-y:clamp(88px,10vw,168px);
  /* elevation, lit from above, tinted toward the forest */
  --shadow-1:0 1px 2px rgb(8 28 21 / .12),0 1px 1px rgb(8 28 21 / .08);
  --shadow-2:0 2px 4px rgb(8 28 21 / .10),0 10px 22px rgb(8 28 21 / .14);
  --shadow-3:0 6px 12px rgb(8 28 21 / .12),0 34px 70px -18px rgb(8 28 21 / .5);
  /* motion tokens */
  --dur-1:120ms; --dur-2:680ms; --dur-3:950ms; --stagger:90ms;
  --ease-out:cubic-bezier(.22,.61,.21,1);
  --ease-swift:cubic-bezier(.55,0,.1,1);
  --spring:linear(0, .06 3%, .24 7%, .55 13%, .86 20%, 1.03 27%, 1.08 32%, 1.07 38%, 1.02 47%, .99 57%, 1 72%, 1);
  font-family:DM,Arial,sans-serif;color:var(--forest);background:var(--forest);font-synthesis:none;
  scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
body{margin:0;font-size:17px;line-height:1.55;background:var(--paper)}
button,input,select{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,dl,dd,figure{margin:0}
h1,h2,h3{font-family:Bricolage,Arial,sans-serif;font-weight:800;letter-spacing:-.045em;line-height:.96;text-wrap:balance}
h2{font-size:clamp(46px,5.6vw,96px)}
h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.035em;line-height:1.05}
p{text-wrap:pretty}
[hidden]{display:none!important}
::selection{background:var(--tomato);color:var(--paper)}
html{scrollbar-color:var(--forest-2) var(--paper)}
:focus-visible{outline:3px solid var(--tomato);outline-offset:4px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:var(--tier-body);margin-inline:auto}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;line-height:1.4}
.skip-link{position:fixed;left:12px;top:-100px;z-index:100;padding:14px 18px;background:var(--paper);color:var(--forest);border-radius:10px}
.skip-link:focus{top:12px}

/* ── Buttons: they press in ─────────────────────────────────────────────── */
.button{--btn:var(--tomato);--btn-ink:var(--paper);--btn-edge:var(--tomato-deep);
  display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:56px;padding:0 26px 0 28px;
  border:0;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-weight:600;font-size:16px;line-height:1;
  box-shadow:0 4px 0 var(--btn-edge),0 12px 26px -10px rgb(8 28 21 / .45);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.button span{font-size:20px}
.button:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--btn-edge),0 8px 18px -10px rgb(8 28 21 / .45)}
.button:active{transform:translateY(4px);box-shadow:0 0 0 var(--btn-edge),0 3px 8px -4px rgb(8 28 21 / .4);transition-duration:70ms}
.button:focus-visible{outline:3px solid var(--butter);outline-offset:4px;border-radius:999px}
.button-small{min-height:50px;font-size:15px;padding:0 22px 0 24px}
.button-forest{--btn:var(--forest);--btn-edge:var(--forest-night)}
.text-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;padding:14px 2px;
  background:linear-gradient(currentColor 0 0) no-repeat 0 calc(100% - 10px) / 100% 1.5px;transition:background-size .3s var(--ease-swift)}
.text-link:hover{background-size:0 1.5px;background-position:100% calc(100% - 10px)}
.text-link span{transition:translate var(--dur-1) var(--ease-out)}
.text-link:hover span{translate:4px 0}
.text-link:active span{translate:7px 0}

/* ── Nav: clear over the linen, a paper bar over the page ──────────────── */
.nav{position:fixed;inset:10px 0 auto;z-index:30;pointer-events:none}
.nav-inner{pointer-events:auto;width:var(--tier-nav);margin-inline:auto;display:flex;align-items:center;gap:28px;
  padding:10px 10px 10px 22px;border-radius:999px;color:var(--forest);
  background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgb(24 61 50 / .06),0 14px 34px -14px rgb(8 28 21 / .35);
  transition:background-color .45s var(--ease-swift),box-shadow .45s var(--ease-swift),color .45s var(--ease-swift),padding .45s var(--ease-swift)}
.nav.is-over-hero .nav-inner{background:transparent;box-shadow:none;color:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;padding-block:14px}
.wordmark{display:grid;padding:6px 0}
.wordmark img{grid-area:1/1;width:118px;height:auto;transition:opacity .35s var(--ease-out)}
.mark-cream{opacity:0}
.nav.is-over-hero .mark-cream{opacity:1}
.nav.is-over-hero .mark-ink{opacity:0}
.nav-links{display:flex;gap:6px;margin-left:auto;font-size:15px;font-weight:600}
.nav-links a{padding:12px 14px;border-radius:999px;transition:background-color var(--dur-1) var(--ease-out)}
.nav-links a:hover{background:rgb(24 61 50 / .08)}
.nav.is-over-hero .nav-links a:hover{background:rgb(248 243 231 / .12)}
.nav-cta{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 20px;border-radius:999px;background:var(--tomato);color:var(--paper);
  font-size:15px;font-weight:600;box-shadow:0 3px 0 var(--tomato-deep);transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.nav-cta:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--tomato-deep)}
.nav-cta:active{transform:translateY(3px);box-shadow:0 0 0 var(--tomato-deep);transition-duration:70ms}

/* ── Hero: the amuse-bouche ─────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;container-type:inline-size;min-height:max(100svh,640px);display:grid;grid-template-rows:1fr auto;
  background:radial-gradient(55% 60% at 70% 50%,#18311f,transparent 75%),#122719;color:var(--paper);overflow:hidden;
  /* The line and the whole spoon group share the width and never meet. The headline takes 7.8em; the photo is sized
     from what is left, so the group ends where the nav's action ends and keeps a clear gap even at the far end of its drift. */
  --hf:clamp(54px,5vw,96px);
  --hm:max((100cqw - 1480px) / 2,clamp(20px,5.9vw,120px));
  --hr:calc(var(--edge) + 10px);
  --hgap:clamp(56px,5vw,104px);
  --pw:min(1560px,(100cqw - var(--hm) - var(--hr) - 7.8 * var(--hf) - var(--hgap)) / .635)}
/* Spoons span 37.5–98.3% of the still's width and 28–76% of its height; .635 leaves room for the drift. */
.hero-photo{position:absolute;z-index:-2;top:50%;right:calc(var(--hr) - .017 * var(--pw));width:var(--pw);aspect-ratio:3/2;translate:0 -52%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 98.4%,transparent),linear-gradient(transparent,#000 22%,#000 80%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 98.4%,transparent),linear-gradient(transparent,#000 22%,#000 80%,transparent);mask-composite:intersect}
.hero-photo img{width:100%;height:100%;object-fit:cover;transform-origin:88% 52%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgb(12 35 28 / .55) 0%,rgb(12 35 28 / 0) 18%)}
.hero-inner{width:var(--tier-hero);margin-inline:auto;align-self:center;padding:132px 0 56px}
.hero-eyebrow{color:var(--butter)}
.hero h1{margin-top:26px;font-size:var(--hf);line-height:.88;letter-spacing:-.052em}
.hero h1 .line{display:block;overflow:hidden;padding-block:.06em .08em;margin-block:-.06em -.08em}
.hero h1 .line-in{display:block}
.hero-lede{margin-top:30px;max-width:min(27em,7.8 * var(--hf));font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--cream-soft);text-wrap:balance}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 30px;margin-top:38px}
.text-link-light{color:var(--paper)}
.hero-foot{width:var(--tier-hero);margin-inline:auto;display:flex;align-items:end;justify-content:space-between;gap:40px;padding:0 0 30px;font-size:13px;color:rgb(248 243 231 / .74)}
.hero-credit{max-width:44ch;line-height:1.5}
.hero-credit span{color:var(--butter);font-weight:600;letter-spacing:.04em}
.hero-next{flex:none;display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--paper);padding:12px 0}
.hero-next span{display:inline-block;transition:translate var(--dur-1) var(--ease-out)}
.hero-next:hover span{translate:0 4px}

/* ── Tonight's menu: a paper card on the tablecloth, and one serving plate ─ */
.menu{position:relative;padding-block:var(--section-y);color:var(--paper);
  background:radial-gradient(70% 55% at 78% 18%,rgb(46 96 79 / .5),transparent 70%),radial-gradient(60% 50% at 12% 88%,rgb(8 28 21 / .6),transparent 70%),var(--forest)}
.menu-layout{width:var(--tier-body);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,29vw,420px);gap:clamp(40px,6vw,104px);align-items:start}
.menu-card{--pad:clamp(22px,4.4vw,72px);position:relative;background:var(--paper);color:var(--forest);border-radius:6px;padding:clamp(48px,5.4vw,84px) var(--pad) clamp(40px,4.4vw,64px);box-shadow:var(--shadow-3)}
.menu-card::before{content:"";position:absolute;inset:12px;border:1px solid var(--line);border-radius:3px;pointer-events:none}
.menu-head{text-align:center;display:grid;justify-items:center;gap:18px}
.menu-head .eyebrow{color:var(--tomato)}
.menu-head h2{font-size:clamp(52px,6.2vw,104px)}
.menu-head p:last-child{max-width:34em;color:var(--muted);text-wrap:balance}
.courses{list-style:none;margin:clamp(40px,4.4vw,64px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.course{position:relative}
.course-link{position:relative;display:grid;grid-template-columns:clamp(46px,4.4vw,70px) minmax(0,1fr);column-gap:clamp(12px,1.6vw,22px);
  padding:clamp(22px,2.2vw,30px) clamp(10px,1.2vw,18px);border-top:1px solid var(--line);border-radius:4px;
  transition:background-color .25s var(--ease-out)}
.course-link::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--tomato);scale:1 0;transition:scale .35s var(--ease-swift)}
.course.is-serving .course-link::before{scale:1 1}
.course-link:hover{background:var(--paper-2)}
.course-link:active{background:var(--paper-3)}
.course-link:focus-visible{outline-offset:-3px}
.course-link{--title:clamp(28px,2.5vw,40px)}
.course-no{font-family:Bricolage,Arial,sans-serif;font-weight:800;color:var(--tomato);font-size:clamp(17px,1.4vw,21px);line-height:calc(var(--title) * 1.02);letter-spacing:.02em;transition:translate .3s var(--ease-out)}
.course-link:hover .course-no{translate:4px 0}
.course-body{display:grid;gap:8px;min-width:0}
.course-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.course-title{font-family:Bricolage,Arial,sans-serif;font-weight:800;font-size:var(--title);letter-spacing:-.04em;line-height:1.02}
.leader{flex:1 1 24px;min-width:24px;height:2px;align-self:end;margin-bottom:.55em;background:radial-gradient(circle,rgb(24 61 50 / .5) 1px,transparent 1.5px) 0 50% / 8px 2px repeat-x;transform-origin:0 50%}
.course-serves{flex:none;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.course-dish{font-size:clamp(17px,1.3vw,19px);line-height:1.45}
.course-how{font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch}
.course-how b{font-weight:600;color:var(--forest)}
.course-cta{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;font-weight:600;color:var(--tomato);
  background:linear-gradient(currentColor 0 0) no-repeat 0 100% / 0 1.5px;padding-bottom:2px;transition:background-size .3s var(--ease-swift)}
.course-link:hover .course-cta,.course-link:focus-visible .course-cta{background-size:100% 1.5px}
.plates{display:none}
.menu-foot{margin-top:28px;text-align:center;font-size:14px;color:var(--muted);text-wrap:balance}
.menu-foot span{display:inline-block}

.plate{position:sticky;top:104px;display:grid;justify-items:center;gap:18px;text-align:center;padding-top:clamp(12px,3vw,40px)}
.plate-stage{position:relative;width:100%;aspect-ratio:1/1.12;display:grid;place-items:center}
.plate-disc{position:absolute;left:3%;right:3%;top:10%;aspect-ratio:1;border-radius:50%}
.plate-disc,.plated-disc{background:radial-gradient(circle at 50% 38%,#265a4a 0%,#173f33 48%,#0e2a21 100%);
  box-shadow:inset 0 0 0 clamp(8px,.8vw,12px) var(--butter),inset 0 0 0 clamp(11px,1vw,15px) var(--butter-deep),inset 0 18px 40px rgb(0 0 0 / .35),0 30px 60px -22px rgb(0 0 0 / .7)}
.plate-screen{position:relative;width:54%;aspect-ratio:780/1400;display:grid;rotate:-4deg}
.plate-screen img{grid-area:1/1;width:100%;height:100%;object-fit:cover;border-radius:clamp(16px,1.6vw,24px);
  box-shadow:0 0 0 1px rgb(0 0 0 / .25),0 3px 6px rgb(0 0 0 / .25),0 34px 60px -14px rgb(0 0 0 / .6)}
.plate-screen img.is-leaving{z-index:1}
.plate-label{display:grid;gap:6px}
.plate-label span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--butter)}
.plate-label strong{font-family:Bricolage,Arial,sans-serif;font-size:clamp(26px,2.2vw,34px);letter-spacing:-.04em;line-height:1}
.plate-label b{color:var(--butter);margin-right:.25em}
.plate-note{font-size:12px;color:rgb(248 243 231 / .62)}
/* Service: the plate works through the courses by itself. The ring is the course clock; one press holds or resumes it. */
.plate-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px}
.service-toggle{--ink:var(--paper);--rim:rgb(248 243 231 / .26);--run:var(--butter);--track:rgb(248 243 231 / .2);
  display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px 0 8px;border:1.5px solid var(--rim);border-radius:999px;background:none;color:var(--ink);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),translate var(--dur-1) var(--ease-out)}
.service-toggle:hover{border-color:color-mix(in srgb,var(--ink) 60%,transparent)}
.service-toggle:active{translate:0 1px;transition-duration:70ms}
.service-toggle:focus-visible{outline-color:var(--run);outline-offset:3px;border-radius:999px}
.service-clock{position:relative;display:grid;place-items:center;width:24px;height:24px}
.service-clock svg{position:absolute;inset:0;rotate:-90deg;fill:none;stroke-width:2}
.clock-track{stroke:var(--track)}
.clock-run{stroke:var(--run);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.service-clock i{width:7px;height:8px;border-inline:2.4px solid currentColor}
.service-toggle.is-paused .service-clock i{width:0;height:0;margin-left:2px;border:0;border-left:7px solid currentColor;border-block:4.5px solid transparent}
.plates-foot{display:none}

/* ── How it's served ─────────────────────────────────────────────────────── */
.service{padding-top:var(--section-y);background:var(--paper);overflow:hidden}
.service > .wrap,.pass figcaption.wrap{width:var(--tier-hero)}
.service .eyebrow{color:var(--tomato)}
.service-words{margin-top:22px;font-size:clamp(58px,8.2vw,140px);line-height:.88;letter-spacing:-.055em;display:flex;flex-wrap:wrap;gap:0 .32em}
.service-words span{display:inline-block}
.service-words span:last-child{color:var(--tomato)}
.service-steps{list-style:none;padding:0;margin:clamp(34px,4vw,56px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);border-top:1.5px solid var(--forest)}
.service-steps li{display:grid;gap:10px;padding-top:20px}
.service-steps span{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--tomato)}
.service-steps p{font-size:clamp(17px,1.35vw,20px);line-height:1.45;max-width:30ch}
.pass{margin-top:clamp(64px,8vw,128px)}
.pass-frame{height:clamp(380px,56vw,860px);overflow:hidden;background:var(--forest)}
.pass-frame picture{display:block;height:100%}
.pass-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pass figcaption{padding:22px 0 clamp(64px,7vw,104px);font-size:15px;color:var(--muted);max-width:none}
.pass figcaption strong{color:var(--forest);font-weight:600;margin-right:.3em}

/* ── House style: two editions, each in its own colours ─────────────────── */
.house{padding-block:var(--section-y);background:radial-gradient(60% 50% at 50% 0%,rgb(46 96 79 / .45),transparent 70%),var(--forest-deep);color:var(--paper)}
.house-head{display:grid;justify-items:center;text-align:center;gap:18px}
.house-head .eyebrow{color:var(--butter)}
.house-head p:last-child{max-width:36em;color:var(--cream-soft);text-wrap:balance}
.editions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,32px);margin-top:clamp(44px,5vw,72px)}
/* Each card is a compact presentation: the brand stack centred beside the whole working screen, which rises from the card's lower edge.
   The screen sets the card's height, so there is no empty band; --crop trims only the capture's own footer line. */
.edition{--r:22px;--crop:1336;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-3)}
.edition-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:clamp(28px,3vw,44px) clamp(26px,2.8vw,40px)}
.edition-logo{height:68px;width:auto;margin-bottom:10px}
.edition-kind{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.edition h3{font-size:clamp(28px,2.6vw,40px)}
.edition-copy p:not(.edition-kind){font-size:16px;line-height:1.5;max-width:26ch}
.venue-play{--btn-edge:rgb(0 0 0 / .45);display:inline-flex;align-items:center;gap:14px;min-height:50px;margin-top:10px;padding:0 20px;border-radius:calc(var(--r) - 8px);font-size:15px;font-weight:600;
  box-shadow:0 3px 0 var(--btn-edge);transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.venue-play:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--btn-edge)}
.venue-play:active{transform:translateY(3px);box-shadow:0 0 0 var(--btn-edge);transition-duration:70ms}
.edition-art{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-top:clamp(28px,2.6vw,40px)}
.edition-screen{width:88%;max-width:250px;border-radius:20px 20px 0 0;box-shadow:0 -1px 0 rgb(255 255 255 / .08),0 20px 50px rgb(0 0 0 / .4);aspect-ratio:780/var(--crop);object-fit:cover;object-position:top}
.edition-bos{background:radial-gradient(80% 60% at 80% 100%,#3b3222,transparent 70%),#1c1b19;color:#f4ecdc}
.edition-bos .edition-kind{color:#e4b54c}
.edition-bos .venue-play{background:#e4b54c;color:#1c1b19;--btn-edge:#8f6b1f}
.edition-piece{position:absolute;width:48%;max-width:150px;left:-16%;bottom:18%;rotate:-14deg;filter:drop-shadow(0 18px 22px rgb(0 0 0 / .55))}
.edition-forno{--crop:1288;background:radial-gradient(80% 60% at 80% 100%,#f1d9cf,transparent 70%),#f7f0e4;color:#1f1b19}
.edition-forno .edition-logo{height:46px;margin-block:11px 21px}
.edition-forno .edition-kind{color:#b3261e}
.edition-forno .venue-play{background:#b3261e;color:#fff8ee;--btn-edge:#6d140f}
.concept-note{margin-top:26px;text-align:center;font-size:14px;color:rgb(248 243 231 / .7)}

/* ── The pilot: tickets on the rail ─────────────────────────────────────── */
.pilot{padding-block:var(--section-y);background:var(--butter);color:var(--forest)}
.pilot-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end;gap:18px clamp(30px,5vw,80px)}
.pilot-head .eyebrow{grid-column:1/-1;color:var(--tomato-deep)}
.pilot-head h2{font-size:clamp(52px,7vw,124px)}
.pilot-head p:last-child{font-size:clamp(18px,1.5vw,22px);line-height:1.45;max-width:24em;padding-bottom:.4em}
.tickets{position:relative;list-style:none;padding:34px 0 0;margin:clamp(48px,5vw,80px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.tickets::before{content:"";position:absolute;left:-2%;right:-2%;top:0;height:10px;border-radius:10px;background:var(--forest);box-shadow:0 3px 0 rgb(12 35 28 / .25)}
.ticket{position:relative;display:grid;align-content:start;gap:14px;padding:30px clamp(22px,2.2vw,32px) 44px;background:#fffbf1;
  box-shadow:0 18px 30px -18px rgb(80 55 5 / .5);transform-origin:50% 0;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%}
.ticket:nth-child(1){rotate:-1.2deg}
.ticket:nth-child(2){rotate:.8deg;margin-top:8px}
.ticket:nth-child(3){rotate:-.5deg;margin-top:2px}
.ticket::before{content:"";position:absolute;top:-6px;left:50%;width:34px;height:14px;translate:-50% 0;border-radius:3px;background:var(--forest-2)}
.ticket-no{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tomato);padding-bottom:14px;border-bottom:1.5px dashed rgb(24 61 50 / .3)}
.ticket h3{font-size:clamp(26px,2.3vw,34px)}
.ticket p{font-size:16px;line-height:1.55}
.pilot-terms{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:clamp(44px,5vw,72px);padding-top:28px;border-top:1.5px solid rgb(24 61 50 / .35)}
.pilot-terms p{max-width:64ch;font-size:15px;line-height:1.6}
.pilot-terms .button{flex:none}

/* ── Good questions: all answers visible ────────────────────────────────── */
.questions{padding-block:var(--section-y);background:var(--paper)}
.questions .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(36px,6vw,110px);align-items:start}
.questions-head{display:grid;gap:18px;container-type:inline-size}
.questions-head h2{font-size:min(clamp(46px,5.6vw,96px),20cqi)}
.questions-head .eyebrow{color:var(--tomato)}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.4vw,52px) clamp(28px,3.4vw,56px)}
.answers div{padding-top:22px;border-top:1.5px solid var(--forest)}
.answers dt{font-family:Bricolage,Arial,sans-serif;font-weight:800;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.035em;line-height:1.08}
.answers dd{margin-top:12px;font-size:16px;line-height:1.6;color:#2f463d}

/* ── Finale: put your name on the table ─────────────────────────────────── */
.finale{padding-block:var(--section-y);background:radial-gradient(55% 60% at 85% 40%,rgb(177 104 40 / .22),transparent 70%),var(--forest);color:var(--paper)}
.finale-grid{width:var(--tier-hero);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,104px);align-items:center}
.finale-copy{display:grid;gap:20px;align-content:start}
.finale-copy .eyebrow{color:var(--butter)}
.finale h2{font-size:clamp(50px,5.6vw,96px)}
.finale-lede{max-width:30em;color:var(--cream-soft);font-size:18px}
.order{display:grid;gap:8px;margin-top:10px;max-width:520px}
.order label,.order legend{font-size:14px;font-weight:600;color:var(--paper)}
.order label span{font-weight:400;color:rgb(248 243 231 / .65)}
.order > label:not(:first-child){margin-top:10px}
.order input:not([type=radio]),.order select{width:100%;min-height:54px;padding:0 18px;border:1.5px solid transparent;border-radius:14px;background:var(--paper);color:var(--forest);
  box-shadow:inset 0 2px 3px rgb(8 28 21 / .14);transition:border-color var(--dur-1) var(--ease-out)}
.order select{appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%23183d32' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center}
.order input::placeholder{color:#7d8a81}
/* "Which game?": the field reads like the chosen course, and opens a small printed menu of all eight. */
.picker{position:relative}
.picker-box{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 18px;border:1.5px solid transparent;border-radius:14px;background:var(--paper);color:var(--forest);
  box-shadow:inset 0 2px 3px rgb(8 28 21 / .14);cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color var(--dur-1) var(--ease-out)}
.picker-box:hover{border-color:rgb(239 202 104 / .6)}
.picker-box:focus-visible{outline:3px solid var(--butter);outline-offset:2px;border-color:transparent;border-radius:14px}
.picker-value{flex:1;min-width:0;display:flex;align-items:baseline;gap:.6em;white-space:nowrap;overflow:hidden}
.picker-value .pick-name{overflow:hidden;text-overflow:ellipsis;font-family:Bricolage,Arial,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.035em}
.picker-value.is-open-ended .pick-name{font-family:DM,Arial,sans-serif;font-weight:400;font-size:17px;letter-spacing:0}
.pick-no{font-family:Bricolage,Arial,sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;color:var(--tomato)}
.picker-chevron{flex:none;width:14px;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%23183d32' stroke-width='2'/%3E%3C/svg%3E") no-repeat;transition:rotate .2s var(--ease-out)}
.picker-box[aria-expanded=true] .picker-chevron{rotate:180deg}
.picker-list{container-type:inline-size;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;margin:0;padding:8px;list-style:none;overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);color:var(--forest);border-radius:14px;box-shadow:0 0 0 1px rgb(24 61 50 / .1),var(--shadow-3);transform-origin:50% 0;scrollbar-width:thin}
.picker-list[data-side=above]{top:auto;bottom:calc(100% + 8px);transform-origin:50% 100%}
.pick{position:relative;display:grid;grid-template-columns:30px auto minmax(12px,1fr) auto 16px;align-items:baseline;column-gap:10px;padding:10px 10px 10px 14px;border-radius:9px;cursor:pointer}
.pick .pick-name{font-family:Bricolage,Arial,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.035em;line-height:1.1}
.pick-leader{align-self:end;margin-bottom:.45em;border-bottom:1.5px dotted rgb(24 61 50 / .32)}
.pick-serves{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pick-help{grid-template-columns:minmax(0,1fr) auto 16px;margin-bottom:6px}
.pick-help::after{content:"";position:absolute;left:14px;right:10px;bottom:-4px;border-bottom:1px solid var(--line)}
.pick-help .pick-name{font-family:DM,Arial,sans-serif;font-weight:600;font-size:16px;letter-spacing:0}
.pick-help .pick-serves{letter-spacing:0;text-transform:none;font-size:13px;font-weight:400}
.pick.is-active{background:var(--paper-2)}
.pick[aria-selected=true]::before{content:"";position:absolute;left:3px;top:11px;bottom:11px;width:3px;border-radius:3px;background:var(--tomato)}
.pick[aria-selected=true] .pick-mark::after{content:"✓";font-weight:600;color:var(--tomato)}
@container (max-width:400px){
  .pick{grid-template-columns:30px minmax(0,1fr) 16px;row-gap:3px}
  .pick .pick-leader{display:none}
  .pick .pick-serves{grid-area:2/2}
  .pick .pick-mark{grid-area:1/3}
  .pick-help{grid-template-columns:minmax(0,1fr) 16px}
  .pick-help .pick-serves{grid-area:2/1}
  .pick-help .pick-mark{grid-area:1/2}
}
.order input:hover,.order select:hover{border-color:rgb(239 202 104 / .6)}
.order input:focus-visible,.order select:focus-visible{outline:3px solid var(--butter);outline-offset:2px;border-color:transparent;border-radius:14px}
.inks{border:0;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.inks legend{padding:0;margin-bottom:8px;width:100%}
.inks label{position:relative;margin:0}
.inks input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.inks span{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 12px;border-radius:999px;border:1.5px solid rgb(248 243 231 / .28);font-size:15px;font-weight:600;color:var(--paper);
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.inks label:hover span{border-color:rgb(248 243 231 / .6)}
.inks input:checked + span{background:var(--paper);color:var(--forest);border-color:var(--paper)}
.inks input:focus-visible + span{outline:3px solid var(--butter);outline-offset:3px}
.swatch{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px rgb(248 243 231 / .8)}
.swatch-forest{background:var(--forest)} .swatch-tomato{background:var(--tomato)} .swatch-navy{background:var(--navy)}
.order .button{justify-self:start;margin-top:22px}
.order-status{min-height:1.5em;font-size:14px;color:var(--butter)}
.finale-direct{font-size:14px;color:rgb(248 243 231 / .7);max-width:40em}
.finale-direct a{color:var(--paper);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.house-card{--ink:var(--forest);--cl:31.26%;--ct:16.3%;--cw:37.08%;--ch:52.28%;display:grid;gap:14px}
.house-card[data-ink=tomato]{--ink:var(--tomato)}
.house-card[data-ink=navy]{--ink:var(--navy)}
.card-photo{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1;background:#2a2119;box-shadow:var(--shadow-3)}
.card-canvas{position:absolute;inset:0}
.card-photo img{width:100%;height:100%;object-fit:cover}
.card-print{position:absolute;left:var(--cl);top:var(--ct);width:var(--cw);height:var(--ch);container-type:inline-size;
  color:var(--ink);mix-blend-mode:multiply;transition:color .5s var(--ease-out)}
.print-sheet{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:8cqi 7cqi 7cqi}
.print-over{font-size:4.6cqi;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;max-width:80%}
.print-name{margin-top:auto;font-family:Bricolage,Arial,sans-serif;font-weight:800;letter-spacing:-.045em;line-height:.95;font-size:17cqi;max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.print-name[data-size=m]{font-size:13.5cqi}
.print-name[data-size=s]{font-size:10.5cqi}
.print-name[data-size=xs]{font-size:8.4cqi}
.print-name .w{display:inline-block;white-space:nowrap}
.print-name i{font-style:normal;display:inline-block}
.print-rule{width:26%;height:.9cqi;min-height:1px;margin:6cqi 0 4.5cqi;background:currentColor}
.print-tonight{font-size:4.2cqi;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.print-game{margin-top:1.4cqi;font-family:Bricolage,Arial,sans-serif;font-weight:800;font-size:8.4cqi;letter-spacing:-.03em;line-height:1}
.print-qr{margin-top:auto;display:grid;place-items:center;width:23cqi;aspect-ratio:1;border:.8cqi dashed currentColor;border-radius:2cqi;font-size:4.2cqi;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;opacity:.85}
.print-foot{margin-top:5cqi;font-size:4cqi;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.house-card figcaption{font-size:13px;color:rgb(248 243 231 / .66)}

/* ── Footer finale ──────────────────────────────────────────────────────── */
.footer{background:var(--forest-night);color:var(--paper);overflow:hidden}
.footer-inner{width:var(--tier-nav);margin-inline:auto;padding:clamp(72px,8vw,120px) 0 24px}
.footer-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.8fr);gap:40px clamp(28px,4vw,72px);align-items:start}
.footer-thanks{font-family:Bricolage,Arial,sans-serif;font-weight:800;font-size:clamp(40px,4vw,64px);letter-spacing:-.045em;line-height:.95;color:var(--butter)}
.footer-col{display:grid;gap:4px;align-content:start;font-size:15px}
.footer-col b{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgb(248 243 231 / .55);margin-bottom:10px}
.footer-col a{justify-self:start;padding:7px 0;background:linear-gradient(var(--butter) 0 0) no-repeat 0 calc(100% - 4px) / 0 1.5px;transition:background-size .3s var(--ease-swift),color var(--dur-1) var(--ease-out)}
.footer-col a:hover{background-size:100% 1.5px;color:var(--butter)}
.footer-games{grid-template-columns:repeat(2,max-content);column-gap:clamp(20px,2.4vw,40px)}
.footer-games b{grid-column:1/-1}
.footer-mark{display:block;margin-top:clamp(56px,7vw,110px)}
.footer-wordmark{width:100%;height:auto;display:block;overflow:visible}
.footer-wordmark .glyph-dot{fill:var(--tomato)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:28px;padding-top:20px;border-top:1px solid rgb(248 243 231 / .14);font-size:13px;color:rgb(248 243 231 / .6)}

/* ── The player ──────────────────────────────────────────────────────────── */
#player{padding:0;border:0;background:#112d25;color:var(--paper);border-radius:18px;width:min(420px,calc(100vw - 32px));max-width:none;height:min(808px,calc(100dvh - 44px));max-height:none;overflow:hidden;box-shadow:0 25px 100px #0007}
#player[open]{display:flex;flex-direction:column}
#player::backdrop{background:#0c231ce8;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
html:has(#player[open]){overflow:hidden}
.player-stage{position:relative;flex:1;min-height:0;background:var(--scene,#183d32)}
#frame-wrap{height:100%;width:100%}
#frame-wrap iframe{height:100%;width:100%;border:0;display:block;opacity:0;transition:opacity .15s}
#frame-wrap iframe.ready{opacity:1}
.player-footer{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 13px;border-top:1px solid #fff2;background:#112d25}
.player-footer button{border:0;background:none;color:var(--paper);padding:12px 0;font-size:13px;min-height:44px}
.player-footer button:last-child{color:var(--butter)}
#player-position{font-size:11px;color:#aec0b5}
#player-loading,#player-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px;text-align:center;font-size:16px}
#player-loading{pointer-events:none}
#player-error a{font-size:14px;text-decoration:underline}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width:1600px){
  .hero-inner{padding-top:150px}
}
@media (max-width:1180px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editions{grid-template-columns:minmax(0,1fr);max-width:880px;margin-inline:auto}
  .edition{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
}
@media (max-width:1023px){
  /* Below the width where line and spoons can sit side by side, the copy comes first and the crop zooms onto the spoons. */
  .hero{min-height:0;display:flex;flex-direction:column;background:var(--forest-deep)}
  .hero::before{display:none}
  .hero-photo{order:2;position:relative;top:auto;right:auto;translate:none;z-index:auto;-webkit-mask-image:none;mask-image:none;aspect-ratio:5/3;margin:28px auto 0;width:var(--tier-hero);border-radius:14px;overflow:hidden}
  .hero-photo img{position:absolute;width:152%;max-width:none;height:auto;left:-52%;top:-38%}
  .hero-inner{padding:124px 0 0}
  .hero-lede{max-width:27em}
  .hero h1{margin-top:18px;font-size:clamp(44px,12.6vw,74px);line-height:.92}
  .hero-foot{order:3;display:block;padding:16px 0 30px}
  .hero-next{display:none}
  .menu-layout{grid-template-columns:minmax(0,1fr);max-width:820px}
  .plate{display:none}
  /* Phones and tablets: the courses are plated side by side. Swipe to look, tap to play; the menu under them is the whole list at a glance. */
  .plates{--w:min(74vw,320px);position:relative;z-index:1;display:flex;gap:14px;list-style:none;margin:30px calc(-1 * var(--pad)) 0;padding:8px calc(50% + var(--pad) - var(--w) / 2) 12px;
    background:var(--paper);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .plates::-webkit-scrollbar{display:none}
  .plated{flex:none;width:var(--w);scroll-snap-align:center;scroll-snap-stop:always}
  .plated-link{display:grid;justify-items:center;align-content:start;gap:6px;height:100%;padding-bottom:4px;text-align:center;border-radius:16px}
  .plated-link:focus-visible{outline-offset:-3px}
  .plated-stage{position:relative;width:100%;aspect-ratio:1/1.32;display:grid;place-items:center;margin-bottom:8px}
  .plated-disc{position:absolute;left:0;right:0;top:50%;translate:0 -50%;aspect-ratio:1;border-radius:50%}
  .plated-screen{position:relative;width:70%;aspect-ratio:780/1400;object-fit:cover;border-radius:clamp(14px,4vw,20px);rotate:-3deg;
    box-shadow:0 0 0 1px rgb(0 0 0 / .25),0 3px 6px rgb(0 0 0 / .25),0 26px 44px -14px rgb(0 0 0 / .6)}
  .plated-name{font-family:Bricolage,Arial,sans-serif;font-weight:800;font-size:clamp(25px,6.8vw,30px);letter-spacing:-.04em;line-height:1}
  .plated-no{color:var(--tomato);font-size:.6em;letter-spacing:.02em;vertical-align:.32em;margin-right:.15em}
  .plated-serves{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tomato)}
  .plated-dish{max-width:25ch;font-size:15px;line-height:1.45;text-wrap:balance}
  .plated-play{display:inline-flex;align-items:center;gap:12px;min-height:46px;margin-top:auto;padding:0 22px;border-radius:999px;background:var(--tomato);color:var(--paper);font-size:15px;font-weight:600;
    box-shadow:0 3px 0 var(--tomato-deep);transition:translate var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
  .plated-play span{font-size:18px}
  .plated-link:hover .plated-play{translate:0 1px;box-shadow:0 2px 0 var(--tomato-deep)}
  .plated-link:active .plated-play{translate:0 3px;box-shadow:0 0 0 var(--tomato-deep);transition-duration:70ms}
  .plates-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin-top:4px}
  .plates-foot .service-toggle{--ink:var(--forest);--rim:rgb(24 61 50 / .22);--run:var(--tomato);--track:rgb(24 61 50 / .14);min-height:44px}
  .plates-note{text-align:center;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  /* The full menu: one compact line per course, each a direct play link. */
  .courses{margin-top:26px}
  .course-link{grid-template-columns:34px minmax(0,1fr);align-items:center;padding:13px 62px 13px 10px}
  .course-link::before{top:12px;bottom:12px}
  .course-no{font-size:15px;line-height:1}
  .course-body{gap:0}
  .course-line{display:grid;gap:4px}
  .course-title{font-size:clamp(21px,5.6vw,26px)}
  .course-serves{font-size:10.5px;color:var(--tomato)}
  .leader,.course-dish,.course-how{display:none}
  .course-cta{position:absolute;right:10px;top:50%;translate:0 -50%;width:42px;height:42px;margin:0;padding:0;justify-content:center;border-radius:50%;border:1.5px solid rgb(187 45 28 / .35);background:none;font-size:0;
    transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
  .course-cta span[aria-hidden]{font-size:17px}
  .course-link:hover .course-cta,.course-link:active .course-cta{background:var(--tomato);color:var(--paper)}
  .menu-foot{margin-top:22px}
  .menu-foot span{display:block}
  .editions{grid-template-columns:minmax(0,1fr)}
  .questions .wrap{grid-template-columns:minmax(0,1fr)}
  /* One column: the card comes straight after the invitation, so the name, ink and game you choose print where you can see them. */
  .finale-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .finale-copy{display:contents}
  /* Short enough that the card, the name, the ink and the game fit on one phone screen together. */
  .house-card{order:1;width:min(100%,560px,42svh * 66 / 64);justify-self:center;margin-block:6px 4px}
  .order,.finale-direct{order:2}
  /* Crop in on the card face (17–83% across, 8–72% down); the print keeps its measured coordinates inside the canvas. */
  .card-photo{aspect-ratio:66/64}
  .card-canvas{inset:0 auto auto -25.76%;width:151.5%;aspect-ratio:1;margin-top:-12.12%}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .pilot-head{grid-template-columns:minmax(0,1fr)}
  .tickets{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:28px}
  .tickets::before{left:0;right:0}
  .ticket:nth-child(n){margin-top:0}
  .pilot-terms{flex-direction:column;align-items:flex-start}
  .service-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .service-steps li{grid-template-columns:44px minmax(0,1fr);padding:16px 0;border-bottom:1px solid var(--line)}
  .answers{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{inset:8px 0 auto}
  .nav-inner{padding:8px 8px 8px 16px;gap:12px}
  .nav.is-over-hero .nav-inner{padding-block:8px}
  .wordmark img{width:100px}
  .nav-cta{min-height:42px;padding:0 16px;font-size:14px}
  .hero-inner{padding:98px 0 0}
  .hero-lede{margin-top:18px;font-size:17px}
  .hero-actions{margin-top:24px;gap:6px 22px}
  .menu{padding-block:56px 72px}
  .menu-layout{width:calc(100% - 20px)}
  .menu-card{--pad:18px;padding:44px var(--pad) 30px}
  .menu-card::before{inset:8px}
  .menu-head{gap:14px}
  .menu-head h2{font-size:clamp(46px,13vw,68px)}
  .menu-head p:last-child{font-size:16px}
  .service-words{font-size:clamp(52px,15vw,80px);display:grid;gap:0}
  .pass-frame{height:auto;aspect-ratio:4/5}
  .pass figcaption{font-size:14px}
  /* Phones: the logo takes the corner opposite the edition line, the copy stays short, and the whole screen rises beneath it. */
  .edition{grid-template-columns:minmax(0,1fr)}
  .edition-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:24px 22px 22px}
  .edition-copy > *{grid-column:1/-1}
  .edition-logo{grid-area:1/2;height:52px;margin:0}
  .edition-forno .edition-logo{height:32px;margin:0}
  .edition-kind{grid-area:1/1;font-size:11px;line-height:1.5}
  .edition h3{margin-top:4px}
  .venue-play{justify-self:start;margin-top:6px}
  .edition-art{padding-top:4px}
  .edition-screen{width:54%;border-radius:18px 18px 0 0}
  .edition-piece{width:31%;left:3%;bottom:30%}
  .pilot-head h2{font-size:clamp(50px,13.4vw,76px)}
  .finale h2{font-size:clamp(44px,12.4vw,68px)}
  .order .button{justify-self:stretch}
  .inks span{gap:8px;padding:0 14px 0 10px}
  .footer-top{grid-template-columns:minmax(0,1fr);gap:36px}
  .footer-bottom{flex-direction:column}
  #player{width:100%;height:100dvh;margin:0;border-radius:0}
  .player-footer{padding-bottom:env(safe-area-inset-bottom);height:calc(44px + env(safe-area-inset-bottom))}
  .player-footer button{font-size:12px}
}
@media (max-width:400px){
  /* The nav's "Make one yours" sits just above, so the narrowest phones keep one action and the whole spoon photo in the first view. */
  .hero-actions .text-link{display:none}
}
@media (max-width:380px){
  .hero h1{font-size:44px}
}