@font-face{ font-family:Display; font-weight:400; src:url(/dossier/assets/instrumentserif-v1.woff2) format("woff2"); font-display:swap }
@font-face{ font-family:Body; font-weight:100 900; src:url(/dossier/assets/inter-var-v1.woff2) format("woff2-variations"); font-display:swap }
:root{ --cream:#F7F6E3; --ink:#130A24; --soft:rgba(19,10,36,.64); --hair:rgba(19,10,36,.16); --amber:#E8A84C; --amber-soft:#F2C98A;
       --amethyst:#A98FE0; --brand-dark:#20103A; --paper:#FDFCF4; --sans:Body,system-ui,sans-serif; --gutter:clamp(20px,5vw,72px) }
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:Body,system-ui,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased }
h1,h2,h3{ font-family:Display,Georgia,serif; font-weight:400; margin:0; line-height:1.02; letter-spacing:-.01em; text-wrap:balance }
p{ margin:0 }
img{ display:block; max-width:100% }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }

/* the bar: lockup left, the doors right, always there, never loud */
.bar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:18px;
      padding:16px var(--gutter); background:rgba(247,246,227,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--hair) }
.bar .lockup{ height:22px; width:auto; display:block }
.label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); font-weight:500 }

.bar nav{ display:flex; gap:24px; flex-wrap:wrap; justify-content:flex-end }
/* A finger is about 9mm wide. Nav and footer links rendered 17 to 25px tall, so every one of
   them was a miss waiting to happen on a phone; the swept pages reported ten per page. Grow the
   TARGET on touch devices without moving the type: negative margin keeps the visual rhythm. */
@media (pointer: coarse) {
  /* 13px, not 11: at 11 the footer links measured 39px, one short of the 40px floor, which is
     the kind of nearly that is worth nothing. The lockup is a link too and was 25px. */
  .bar nav a, .foot-grid a, .go, .qt .acts a{ padding-block:13px; margin-block:-13px }
  .bar > a{ padding-block:10px; margin-block:-10px; display:inline-block }
  .bar nav{ gap:20px }
}
.bar a{ text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:2px }
.bar a:hover, .bar a[aria-current]{ color:var(--ink); border-color:var(--ink) }
.go{ display:inline-block; margin-top:28px; text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:3px }
.go:hover{ border-color:var(--ink) }

/* the cover */
.hero{ position:relative; height:min(100svh,1100px); overflow:hidden; background:#1b1220 }
.hero.short{ height:min(72svh,760px) }
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40% }
.hero.cover img{ object-position:50% 40% }
@media (min-aspect-ratio: 1/1){ .hero.cover img{ object-position:50% 62% } }
.hero .herofilm{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease; z-index:0 }
.hero .herofilm.on{ opacity:1 }
.hero .scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(12,8,20,.82), rgba(12,8,20,.3) 45%, rgba(12,8,20,0)) }
.hero .text{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(28px,6vh,72px); color:var(--cream) }
.hero h1{ font-size:clamp(44px,8vw,112px); max-width:12ch }
.hero .text .label{ color:rgba(247,246,227,.78); margin-top:22px }
.hero .text .line{ color:rgba(247,246,227,.82); margin-top:16px; max-width:52ch }

/* sections: a number, a heading, air */
section{ padding:clamp(56px,9vw,128px) var(--gutter); border-top:1px solid var(--hair) }
.num{ font-family:Display,Georgia,serif; color:var(--amber); font-size:15px; letter-spacing:.06em; display:block; margin-bottom:18px }
.h2{ font-size:clamp(34px,4.6vw,64px); max-width:16ch }
.line{ color:var(--soft); margin-top:14px; max-width:52ch }
.statement h2{ font-size:clamp(38px,6vw,84px); max-width:15ch }
.statement .row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); margin-top:clamp(40px,6vw,80px); align-items:end }
.statement p{ max-width:52ch; font-size:18px }
.plate figure{ margin:clamp(28px,4vw,48px) 0 0 }
.plate img{ width:100%; height:auto }
.plate .side{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,5vw,64px); align-items:end }
.prose{ max-width:60ch; font-size:18px; margin-top:clamp(24px,4vw,40px) }
.prose p + p{ margin-top:18px }

/* lists that carry a price or a fact */
.formats{ list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:0; max-width:56ch }
.formats li{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:14px 0; border-top:1px solid var(--hair); align-items:baseline }
.formats li:last-child{ border-bottom:1px solid var(--hair) }
.formats b{ font-family:Display,Georgia,serif; font-weight:400; font-size:24px; display:block }
.formats small{ color:var(--soft); font-size:14px; display:block; margin-top:2px }
.formats span{ font-family:Display,Georgia,serif; font-size:22px; white-space:nowrap; text-align:right }
.formats span em{ display:block; font-family:var(--sans); font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-top:3px }

/* tiles: plates at a fixed box, one line beneath, video on hover */
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); margin-top:clamp(32px,5vw,64px) }
.tiles.three{ grid-template-columns:repeat(3,1fr) }
.tiles.four{ grid-template-columns:repeat(4,1fr) }
.tile{ display:block; text-decoration:none }
.tile .frame{ position:relative; overflow:hidden; background:#1b1220; aspect-ratio:3/2 }
.tiles.four .frame, .tiles.three .frame{ aspect-ratio:4/5 }
.tile img, .tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.tile video{ opacity:0; transition:opacity .5s ease }
.tile:hover video, .tile:focus-visible video{ opacity:1 }
.tile h3{ font-size:clamp(24px,2.4vw,32px); margin-top:18px }
.tile p{ color:var(--soft); margin-top:6px; font-size:15px; max-width:40ch }

/* a run of photographs at natural aspect, the way the stills sites do it */
.run{ display:flex; gap:clamp(12px,2vw,28px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; margin-top:clamp(32px,5vw,56px); scrollbar-width:none }
.run::-webkit-scrollbar{ display:none }
.run figure{ flex:0 0 auto; height:clamp(260px,42vw,560px); scroll-snap-align:start; margin:0; position:relative; background:#1b1220 }
.run img, .run video{ height:100%; width:auto; display:block }
.run video{ position:absolute; inset:0; height:100%; width:100%; object-fit:cover; opacity:0; transition:opacity .5s ease }
.run figure:hover video{ opacity:1 }
.run figcaption{ font-size:13px; color:var(--soft); margin-top:10px }

.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); margin-top:clamp(32px,5vw,64px) }
.two h3{ font-size:clamp(28px,3vw,40px); margin-bottom:18px }
.two ul{ list-style:none; margin:0; padding:0 }
.two li{ padding:12px 0; border-top:1px solid var(--hair) }

.phases{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:clamp(32px,5vw,64px) }
.dot{ width:12px; height:12px; border-radius:50%; background:var(--amber); margin-bottom:14px }
.phases h3{ font-size:26px; margin-bottom:8px }
.phases p{ font-size:15px; color:var(--soft) }
.numbers{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 24px; margin-top:clamp(40px,6vw,80px); padding-top:clamp(32px,5vw,56px); border-top:1px solid var(--hair) }
.numbers b{ font-family:Display,Georgia,serif; font-weight:400; font-size:clamp(44px,6vw,80px); line-height:1; display:block }
.numbers span{ color:var(--soft); font-size:15px; display:block; max-width:24ch; margin-top:6px }
.start{ margin-top:clamp(40px,6vw,72px); max-width:60ch }
.start p{ font-family:Display,Georgia,serif; font-size:clamp(24px,2.6vw,34px); line-height:1.25; margin-top:12px }

.ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,48px); margin-top:clamp(32px,5vw,64px) }
.ways h3{ font-size:28px; margin:14px 0 10px }
.ways p{ color:var(--soft) }
.wall{ display:flex; flex-wrap:wrap; align-items:center; gap:28px 44px; margin-top:28px }
.wall img{ height:26px; width:auto }
.wall img.panel{ height:34px; width:34px; object-fit:contain }
.house{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); margin-top:clamp(32px,5vw,56px) }
.house img{ height:22px; width:auto; opacity:.86; filter:brightness(0) }
.house p{ color:var(--soft); font-size:15px; margin-top:14px; max-width:30ch }
.named{ color:var(--soft); font-size:14px; margin-top:22px; max-width:70ch }
.contact{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(24px,5vw,64px); margin-top:clamp(48px,7vw,96px); padding-top:clamp(32px,5vw,56px); border-top:1px solid var(--hair) }
.contact h3{ font-size:26px; margin-bottom:8px }
.contact a{ text-decoration:none }

/* facts and questions */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(32px,5vw,56px) }
.facts b{ font-family:Display,Georgia,serif; font-weight:400; font-size:clamp(34px,4vw,56px); line-height:1; display:block }
.facts span{ color:var(--soft); font-size:15px; display:block; margin-top:8px; max-width:22ch }
.faq{ margin-top:clamp(28px,4vw,48px); max-width:70ch }
.faq details{ border-top:1px solid var(--hair); padding:16px 0 }
.faq details:last-child{ border-bottom:1px solid var(--hair) }
.faq summary{ font-family:Display,Georgia,serif; font-size:24px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--amber); font-size:26px; line-height:1 }
.faq details[open] summary::after{ content:"\2013" }
.faq p{ color:var(--soft); margin-top:10px; max-width:58ch }

/* the walkthrough */
/* Full width, always. It was a 16:9 box capped at 760px tall, and a capped aspect-ratio box
   shrinks its WIDTH to keep its shape: on a 2000px screen the walkthrough sat at two thirds of
   the page with dead cream beside it. Height is set instead, and the width is the column's. */
.tour{ position:relative; margin-top:clamp(28px,4vw,48px); width:100%; height:clamp(380px,52vw,86svh); background:#1b1220; border:1px solid var(--hair); overflow:hidden }
.tour .pano{ position:absolute; inset:0 }
.tour .pano iframe{ width:100%; height:100%; border:0; display:block }
/* The viewer opens on the daylight capture, which reads as a listing. It waits behind the
   night render of the very sweep it opens on, and only draws the capture once asked. */
.tour .tourposter{ position:absolute; inset:0; z-index:3; border:0; padding:0; margin:0; background:#1b1220; cursor:pointer; display:block; width:100%; height:100% }
.tour .tourposter img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.6s ease }
.tour .tourposter:hover img{ transform:scale(1.03) }
.tour .tourposter .label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--cream); border:1px solid rgba(247,246,227,.7); padding:14px 22px; background:rgba(12,8,20,.35); backdrop-filter:blur(6px) }
.tour.on .tourposter{ opacity:0; pointer-events:none; transition:opacity .9s ease }
.tour:not(.on) .hud{ display:none }
.tour .pnlm-container{ background:#1b1220 } .tour .pnlm-load-box, .tour .pnlm-about-msg, .tour .pnlm-panorama-info{ display:none !important }
.tour .hud{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding:22px 22px 18px; pointer-events:none; background:linear-gradient(to top, rgba(12,8,20,.62), rgba(12,8,20,0)) }
.tour .where{ color:var(--cream); font-family:Display,Georgia,serif; font-size:clamp(22px,2.4vw,34px); line-height:1 }
.tour .where small{ display:block; font-family:Body,system-ui,sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,246,227,.72); margin-top:8px }
.tour .map{ pointer-events:auto; width:clamp(120px,15vw,200px); height:auto; display:block; overflow:visible }
.tour .map circle{ fill:rgba(247,246,227,.5); stroke:rgba(19,10,36,.5); stroke-width:1; cursor:pointer; transition:fill .25s, r .25s }
.tour .map circle:hover, .tour .map circle:focus-visible{ fill:var(--cream); outline:none }
.tour .map circle.on{ fill:var(--amber); r:8 }
html.motion .tour .pnlm-container, html.motion .tour .map circle{ cursor:none }
@media (max-width:820px){ .tour{ aspect-ratio:4/5 } .tour .hud{ flex-direction:column; align-items:flex-start } }

/* the 3D room */
.viewer{ position:relative; margin-top:clamp(28px,4vw,48px); aspect-ratio:16/10; max-height:720px; background:#1b1220; overflow:hidden; border:1px solid var(--hair) }
.viewer canvas{ display:block; width:100%; height:100% }
.viewer .boot{ position:absolute; inset:0; display:grid; place-items:center; color:var(--cream); text-align:center; padding:24px; background:radial-gradient(60% 60% at 50% 60%, #2E1A52, #1b1220 80%) }
.viewer .boot button{ font:inherit; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); background:transparent; border:1px solid rgba(247,246,227,.4); padding:12px 18px; cursor:pointer; margin-top:16px }
.viewer .boot button:hover{ border-color:var(--cream) }
.viewer .boot p{ color:rgba(247,246,227,.78); max-width:36ch; font-size:15px }
.viewer .status{ position:absolute; left:16px; bottom:12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,246,227,.7) }

/* ---------- the film cover: the airtree dossier's scroll-scrubbed opening, carried over ---------- */
.film{ height:320vh; position:relative; background:#20103A }
.film .pin{ position:sticky; top:0; height:100vh; overflow:hidden; background:#20103A }
.film video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.film .scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(19,10,36,.62) 0%,rgba(19,10,36,.18) 30%,rgba(19,10,36,0) 55%,rgba(19,10,36,.38) 100%) }
.film-ui{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:9vh; pointer-events:none; opacity:0; text-align:center }
.film.static .film-ui, .film.static .film-ui .cu{ opacity:1 !important; transform:none !important }
@media (prefers-reduced-motion:reduce){ .film-ui, .film-ui .cu{ opacity:1 !important; transform:none !important } }
.film-ui canvas{ display:block; filter:drop-shadow(0 2px 18px rgba(19,10,36,.55)); animation:markbreath 7s ease-in-out infinite }
@keyframes markbreath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.018)} }
.film-ui .cu{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease }
.film-ui .cu-1{ opacity:var(--c1,0); transform:translateY(calc(16px - 16px * var(--c1,0))) }
.film-ui .cu-2{ opacity:var(--c2,0); transform:translateY(calc(16px - 16px * var(--c2,0))) }
.film-ui .cu-3{ opacity:var(--c3,0); transform:translateY(calc(16px - 16px * var(--c3,0))) }
.film-ui h1{ color:var(--cream); font-size:clamp(44px,7.5vw,128px); line-height:.96; letter-spacing:-.02em; margin:clamp(18px,3vh,36px) 0 0; max-width:12ch }
.film-ui .where{ margin-top:clamp(14px,2vh,24px); color:rgba(247,246,227,.75); letter-spacing:.3em; font-family:'UnboundedW',var(--sans); font-weight:200; font-size:clamp(.55rem,1.3vw,.72rem); text-transform:uppercase; text-indent:.3em }
.film .cue{ position:absolute; bottom:4vh; left:50%; transform:translateX(-50%); color:var(--cream); font-family:'UnboundedW',var(--sans); font-weight:200; font-size:.6rem; letter-spacing:.4em; text-indent:.4em; opacity:.8; transition:opacity .4s; animation:cuebob 1.6s steps(4) infinite alternate }
@keyframes cuebob{ from{ transform:translate(-50%,0) } to{ transform:translate(-50%,6px) } }
@media (max-width:720px){ .film{ height:100vh } .film video{ display:none } .film .pin{ background:#20103A url('/airtree/assets/cover-end.jpg') center/cover no-repeat } .film .cue{ display:none } }
.film.static{ height:100vh } .film.static video{ display:none } .film.static .pin{ background:#20103A url('/airtree/assets/cover-end.jpg') center/cover no-repeat } .film.static .cue{ display:none }

/* ---------- night case studies: the stills grammar. Natural aspect, rows that share a height, credits, next ---------- */
.cs-head{ padding:clamp(56px,9vw,130px) var(--gutter) clamp(28px,4vw,56px) }
.cs-head h1{ font-size:clamp(48px,8vw,140px); line-height:.96; letter-spacing:-.02em; max-width:none }
.cs-head h1 em{ font-style:italic; color:var(--soft) }
.cs-credits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px 32px; margin-top:clamp(28px,4vw,48px); max-width:1100px }
.cs-credits b{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); font-weight:500; margin-bottom:6px }
.cs-credits span{ font-size:15px }
.cs-gallery{ padding:0 var(--gutter) clamp(40px,6vw,80px); display:grid; gap:clamp(12px,2vw,28px) }
/* The architectural spread. A row of one runs full bleed; a row of two or three sits inside
   the page and flexes by each frame's own aspect, so mixed shapes land on a single height
   instead of stair-stepping. Captions sit under the frame, not over it, because a photograph
   of a room should not have type burned into it. */
.cs-part{ padding:clamp(48px,7vw,104px) 0 0 }
.cs-part > .num, .cs-part > .h2, .cs-part > .line{ margin-left:var(--gutter); margin-right:var(--gutter) }
.cs-part > .line{ max-width:52ch; margin-bottom:clamp(20px,3vw,34px) }
.cs-bleed{ margin-top:clamp(20px,3vw,36px) }
.cs-bleed figure{ margin:0; position:relative; background:#1b1220 }
.cs-bleed img, .cs-bleed video{ width:100%; height:auto; max-height:88svh; object-fit:cover; display:block }
.cs-row{ display:flex; gap:clamp(10px,1.4vw,20px); align-items:flex-start;
  margin:clamp(20px,3vw,36px) var(--gutter) 0 }
.cs-row figure{ margin:0; flex:var(--ar,1.5) 1 0; min-width:0; background:#1b1220 }
.cs-row img, .cs-row video{ width:100%; height:auto; display:block }
.cs-bleed figcaption, .cs-row figcaption{ position:static; color:var(--soft); background:none;
  font:600 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; padding:10px 0 0 }
.cs-bleed figcaption{ margin:0 var(--gutter) }
@media (max-width:820px){ .cs-row{ flex-direction:column } .cs-row figure{ flex:none; width:100% } }
.cs-night{ padding:clamp(40px,6vw,80px) var(--gutter) 0 }
.cs-night .cs-row{ margin-top:clamp(20px,3vw,34px) }
.cs-night .cs-row figure{ flex:1 1 0; min-height:clamp(320px,52vh,640px) }
@media (max-width:820px){ .cs-night .cs-row figure{ min-height:clamp(260px,44vh,420px) } }
.cs-row{ display:flex; gap:clamp(12px,2vw,28px); align-items:stretch }
.cs-row figure{ margin:0; min-width:0; position:relative; background:#1b1220 }
.cs-row img, .cs-row video{ width:100%; height:100%; object-fit:cover; display:block }
.cs-row figcaption{ position:absolute; left:14px; bottom:12px; color:rgba(247,246,227,.85); font-size:10px; letter-spacing:.16em; text-transform:uppercase }
.cs-note{ padding:clamp(24px,4vw,56px) var(--gutter); max-width:62ch; font-size:18px; color:var(--soft) }
.cs-next{ padding:clamp(40px,6vw,80px) var(--gutter) clamp(64px,9vw,140px); border-top:1px solid var(--hair); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:end }
.cs-next h2{ font-size:clamp(34px,4.6vw,72px) }
.cs-next .tile .frame{ aspect-ratio:3/2 }
@media (max-width:820px){ .cs-row{ flex-direction:column } .cs-next{ grid-template-columns:1fr } }

/* ---------- motion: masks for the line reveals, the cursor, the bar that hides ---------- */
.ln-mask{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em }
.ln-mask .ln{ display:block; will-change:transform }
.bar{ transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.bar.bar-hide{ transform:translateY(-100%) }
.cursor{ position:fixed; left:0; top:0; z-index:99; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--amber); mix-blend-mode:difference; opacity:0; transition:width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1), opacity .3s, background .3s; display:grid; place-items:center }
.cursor.on{ opacity:1 }
.cursor.big{ width:84px; height:84px; margin:-42px 0 0 -42px; background:var(--cream); mix-blend-mode:difference }
.cursor span{ font-family:Body,system-ui,sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); opacity:0; transition:opacity .25s }
.cursor.big span{ opacity:1 }
html.motion a, html.motion button, html.motion .tile, html.motion .viewer{ cursor:none }
@media (pointer:coarse){ .cursor{ display:none } html.motion a, html.motion button{ cursor:auto } }

/* ---------- the scroller: a sticky stage; the track slides sideways as the page scrolls through the section ---------- */
.hscroll{ position:relative; padding:0; border-top:0 }
.hscroll .stick{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center }
.hscroll .track{ display:flex; gap:clamp(12px,2vw,28px); align-items:stretch; height:min(72vh,820px); padding:0 var(--gutter); width:max-content; will-change:transform }
.hscroll .track figure{ margin:0; position:relative; background:#1b1220; height:100%; flex:0 0 auto; aspect-ratio:3/2 }
.hscroll .track img, .hscroll .track video{ height:100%; width:100%; object-fit:cover; display:block }
.hscroll .track figcaption{ position:absolute; left:14px; bottom:12px; color:rgba(247,246,227,.85); font-size:10px; letter-spacing:.16em; text-transform:uppercase }
.hscroll .track .end{ display:flex; align-items:flex-end; padding:0 clamp(24px,6vw,120px) 24px 24px; min-width:30vw }
.hscroll .track .end h2{ font-size:clamp(34px,4.6vw,72px); max-width:10ch }
.hscroll .stick > .label{ position:absolute; left:var(--gutter); top:18px; z-index:2 }
@media (max-width:820px){
  .hscroll .stick{ position:static; height:auto; display:block }
  .hscroll .track{ flex-direction:column; height:auto; width:auto; padding:0 var(--gutter); transform:none !important }
  .hscroll .track figure{ height:auto; aspect-ratio:auto } .hscroll .track img, .hscroll .track video{ width:100%; height:auto }
  .hscroll .track .end{ min-width:0; padding:24px 0 }
}

/* ---------- the film cover: the airtree dossier's scroll-scrubbed opening, carried over ---------- */
.film{ height:320vh; position:relative; background:#20103A }
.film .pin{ position:sticky; top:0; height:100vh; overflow:hidden; background:#20103A }
.film video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.film .scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(19,10,36,.62) 0%,rgba(19,10,36,.18) 30%,rgba(19,10,36,0) 55%,rgba(19,10,36,.38) 100%) }
.film-ui{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:9vh; pointer-events:none; opacity:0; text-align:center }
.film.static .film-ui, .film.static .film-ui .cu{ opacity:1 !important; transform:none !important }
@media (prefers-reduced-motion:reduce){ .film-ui, .film-ui .cu{ opacity:1 !important; transform:none !important } }
.film-ui canvas{ display:block; filter:drop-shadow(0 2px 18px rgba(19,10,36,.55)); animation:markbreath 7s ease-in-out infinite }
@keyframes markbreath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.018)} }
.film-ui .cu{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease }
.film-ui .cu-1{ opacity:var(--c1,0); transform:translateY(calc(16px - 16px * var(--c1,0))) }
.film-ui .cu-2{ opacity:var(--c2,0); transform:translateY(calc(16px - 16px * var(--c2,0))) }
.film-ui .cu-3{ opacity:var(--c3,0); transform:translateY(calc(16px - 16px * var(--c3,0))) }
.film-ui h1{ color:var(--cream); font-size:clamp(44px,7.5vw,128px); line-height:.96; letter-spacing:-.02em; margin:clamp(18px,3vh,36px) 0 0; max-width:12ch }
.film-ui .where{ margin-top:clamp(14px,2vh,24px); color:rgba(247,246,227,.75); letter-spacing:.3em; font-family:'UnboundedW',var(--sans); font-weight:200; font-size:clamp(.55rem,1.3vw,.72rem); text-transform:uppercase; text-indent:.3em }
.film .cue{ position:absolute; bottom:4vh; left:50%; transform:translateX(-50%); color:var(--cream); font-family:'UnboundedW',var(--sans); font-weight:200; font-size:.6rem; letter-spacing:.4em; text-indent:.4em; opacity:.8; transition:opacity .4s; animation:cuebob 1.6s steps(4) infinite alternate }
@keyframes cuebob{ from{ transform:translate(-50%,0) } to{ transform:translate(-50%,6px) } }
@media (max-width:720px){ .film{ height:100vh } .film video{ display:none } .film .pin{ background:#20103A url('/airtree/assets/cover-end.jpg') center/cover no-repeat } .film .cue{ display:none } }
.film.static{ height:100vh } .film.static video{ display:none } .film.static .pin{ background:#20103A url('/airtree/assets/cover-end.jpg') center/cover no-repeat } .film.static .cue{ display:none }

/* ---------- night case studies: the stills grammar. Natural aspect, rows that share a height, credits, next ---------- */
.cs-head{ padding:clamp(56px,9vw,130px) var(--gutter) clamp(28px,4vw,56px) }
.cs-head h1{ font-size:clamp(48px,8vw,140px); line-height:.96; letter-spacing:-.02em; max-width:none }
.cs-head h1 em{ font-style:italic; color:var(--soft) }
.cs-credits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px 32px; margin-top:clamp(28px,4vw,48px); max-width:1100px }
.cs-credits b{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); font-weight:500; margin-bottom:6px }
.cs-credits span{ font-size:15px }
.cs-gallery{ padding:0 var(--gutter) clamp(40px,6vw,80px); display:grid; gap:clamp(12px,2vw,28px) }
.cs-row{ display:flex; gap:clamp(12px,2vw,28px); align-items:stretch }
.cs-row figure{ margin:0; min-width:0; position:relative; background:#1b1220 }
.cs-row img, .cs-row video{ width:100%; height:100%; object-fit:cover; display:block }
.cs-row figcaption{ position:absolute; left:14px; bottom:12px; color:rgba(247,246,227,.85); font-size:10px; letter-spacing:.16em; text-transform:uppercase }
.cs-note{ padding:clamp(24px,4vw,56px) var(--gutter); max-width:62ch; font-size:18px; color:var(--soft) }
.cs-next{ padding:clamp(40px,6vw,80px) var(--gutter) clamp(64px,9vw,140px); border-top:1px solid var(--hair); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:end }
.cs-next h2{ font-size:clamp(34px,4.6vw,72px) }
.cs-next .tile .frame{ aspect-ratio:3/2 }
@media (max-width:820px){ .cs-row{ flex-direction:column } .cs-next{ grid-template-columns:1fr } }

/* ---------- motion: masks for the line reveals, the cursor, the bar that hides ---------- */
.ln-mask{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em }
.ln-mask .ln{ display:block; will-change:transform }
.bar{ transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.bar.bar-hide{ transform:translateY(-100%) }
.cursor{ position:fixed; left:0; top:0; z-index:99; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--amber); mix-blend-mode:difference; opacity:0; transition:width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1), opacity .3s, background .3s; display:grid; place-items:center }
.cursor.on{ opacity:1 }
.cursor.big{ width:84px; height:84px; margin:-42px 0 0 -42px; background:var(--cream); mix-blend-mode:difference }
.cursor span{ font-family:Body,system-ui,sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); opacity:0; transition:opacity .25s }
.cursor.big span{ opacity:1 }
html.motion a, html.motion button, html.motion .tile, html.motion .viewer{ cursor:none }
@media (pointer:coarse){ .cursor{ display:none } html.motion a, html.motion button{ cursor:auto } }

/* ---------- sample menus ---------- */
.menus3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); margin-top:clamp(32px,5vw,56px) }
.menus3 h3{ font-size:clamp(28px,3vw,40px) }
.menus3 .when{ display:block; margin-top:8px; margin-bottom:18px }
.menus3 ul{ list-style:none; margin:0; padding:0 }
.menus3 li{ padding:11px 0; border-top:1px solid var(--hair); font-size:16px }
.menus3 li:last-child{ border-bottom:1px solid var(--hair) }
.menus3 li small{ display:block; color:var(--soft); font-size:13.5px; margin-top:2px }
.menus3 .drinks{ margin-top:22px; color:var(--soft); font-size:14px; max-width:36ch }
/* Four menus in a hard three-column grid strand the fourth alone against two empty
   columns. Four reads as a square, so a group of exactly four lays out 2x2. */
.menus3.menus-2up{ grid-template-columns:repeat(2,1fr) }
/* the event types: a list, not twelve cards, because they all lead to the same six formats */
/* The photographs of the room in use: one row, one height, each at its own shape. */
.asitis{ display:flex; gap:clamp(8px,1vw,16px); margin-top:clamp(18px,2.4vw,30px) }
.asitis figure{ margin:0; flex:var(--a) 1 0; min-width:0 }
.asitis img{ display:block; width:100%; aspect-ratio:var(--a); object-fit:cover; border-radius:4px; background:#EDEADB }
.asitis figcaption{ padding-top:10px; font-size:13px; line-height:1.4; color:var(--soft) }
@media (max-width:820px){ .asitis{ display:grid; grid-template-columns:1fr 1fr } .asitis img{ aspect-ratio:4/5 } }
/* a headline for readers that do not see the drawn lockup */
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
/* "Live now": only ever visible while the kitchen is streaming to a visitor in Australia. */
.live{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(20px,3vw,48px); align-items:center;
  margin-top:clamp(28px,4vw,52px); padding:clamp(18px,2.2vw,32px); background:#20103A; color:#F4F1EA; border-radius:6px }
.live[hidden]{ display:none }
.live-pill{ display:inline-flex; align-items:center; gap:9px; font:600 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#F2C98A }
.live-pill i{ width:9px; height:9px; border-radius:50%; background:#E0463C; box-shadow:0 0 0 0 rgba(224,70,60,.6); animation:livepulse 1.8s ease-out infinite }
@keyframes livepulse{ to{ box-shadow:0 0 0 12px rgba(224,70,60,0) } }
.live h3{ margin:14px 0 8px; font:400 clamp(30px,3vw,48px)/1.02 Display,Georgia,serif }
.live p{ margin:0; color:#C9BEDF; font-size:16px; line-height:1.5; max-width:34ch }
.live-frame{ position:relative; aspect-ratio:16/9; background:#130A24 url('/assets/kit/kitchen-1000-v1.jpg') center/cover; border-radius:4px; overflow:hidden }
.live-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.live-play{ position:absolute; inset:0; width:100%; border:0; cursor:pointer; background:rgba(19,10,36,.45); color:#F4F1EA; display:grid; place-items:center; font:inherit }
.live-play span{ border:1px solid rgba(244,241,234,.8); padding:16px 26px; border-radius:999px; font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; background:rgba(19,10,36,.5) }
.live-play:hover span{ background:#E8A84C; border-color:#E8A84C; color:#2A1A00 }
@media (max-width:820px){ .live{ grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce){ .live-pill i{ animation:none } }
/* The four machines: two by two, each plate in a 3:2 box with its own focal point, never a strip. */
.kitwall{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,2.8vw,44px) clamp(16px,2vw,34px); margin-top:clamp(30px,4.4vw,60px) }
.kitwall figure{ margin:0 }
.kitwall img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; object-position:var(--pos,50% 50%); background:#EDEADB; border-radius:4px }
.kitwall figcaption{ padding-top:16px; max-width:52ch }
.kitwall figcaption b{ display:block; font:400 clamp(26px,2.3vw,38px)/1.05 Display,Georgia,serif }
.kitwall figcaption span{ display:block; color:var(--soft); font-size:16px; line-height:1.5; margin-top:8px }
.kitwall-more{ margin:clamp(26px,3.4vw,48px) 0 0 }
@media (max-width:820px){ .kitwall{ grid-template-columns:1fr } .kitwall img{ aspect-ratio:4/3 } }
/* The standing ask. Pronounced, but it leaves before the footer does its own asking. */
.bookbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--ink); color:var(--cream);
  box-shadow:0 -1px 0 rgba(247,246,227,.14), 0 -14px 34px rgba(12,8,20,.22) }
.bb-in{ max-width:1400px; margin:0 auto; padding:13px var(--gutter); display:flex; gap:18px;
  align-items:center; justify-content:space-between; flex-wrap:wrap }
.bb-txt b{ display:block; font:400 19px/1.15 Display,Georgia,serif }
.bb-txt small{ display:block; color:rgba(247,246,227,.68); font-size:13px; margin-top:2px }
.bb-acts{ display:flex; gap:12px; align-items:center }
.bb-go{ background:var(--amber); color:#2A1A00; text-decoration:none; font:600 11px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; padding:14px 22px; border-radius:2px; white-space:nowrap }
.bb-go:hover{ filter:brightness(1.08) }
.bb-tel{ color:var(--cream); text-decoration:none; font:600 11px/1 var(--sans); letter-spacing:.12em;
  padding:14px 6px; white-space:nowrap; border-bottom:1px solid rgba(247,246,227,.4) }
@media (max-width:640px){ .bb-txt small{ display:none } .bb-in{ padding:10px var(--gutter) } .bb-txt b{ font-size:17px } }
@media print{ .bookbar{ display:none } }
.says{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(24px,4vw,56px); margin-top:clamp(26px,4vw,44px) }
.says figure{ margin:0; border-top:1px solid var(--hair); padding-top:20px }
.says blockquote{ margin:0; font:400 clamp(19px,2vw,25px)/1.35 Display,Georgia,serif; text-wrap:balance }
.says figcaption{ margin-top:14px; font-size:14px; color:var(--soft) }
.says figcaption b{ display:block; color:var(--ink); font-weight:600 }
.occ{ list-style:none; margin:clamp(24px,3vw,38px) 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:0 clamp(28px,4vw,64px) }
.occ li{ padding:14px 0; border-top:1px solid var(--hair) }
.occ b{ display:block; font-weight:600; font-size:16px }
.occ span{ display:block; color:var(--soft); font-size:14.5px; line-height:1.5; margin-top:3px }
@media (max-width:820px){ .menus3, .menus3.menus-2up{ grid-template-columns:1fr } }

/* ---------- the poster, alive: the home page opening ---------- */
.poster{ position:relative; height:calc(100svh - 96px); min-height:520px; overflow:hidden; background:#20103A;
  --wake:1; --px:0; --py:0; --p:0 }   /* the stage's inputs, see POSTER_JS. Lit by default: with scripts blocked the room is simply awake */
.poster .plates, .poster .plate{ position:absolute; inset:0 }
.poster .plate{ opacity:0; transition:opacity 1.8s ease }
.poster .plate.on{ opacity:1 }
/* Jesse, 18 Sep: "still a weird scrolling animation ... really shitty header". Two causes, both
   gone. The picture slid and shrank inside its frame as the page scrolled; now scroll only dims
   it. And a 16:9 two-shot was cover-cropped into whatever shape the window was, which in a wide
   short window left a rhino's torso and a robot with no feet; now the header is the locked
   poster plate, a small subject centred in a big room, which no crop can cut, and its film is
   that same plate moving. The header ends at the fold under the strap and the nav, so the line
   at its foot is in the first view.
   The plate is drawn a little large and anchored on him, so the pointer can shift it for depth
   without ever showing an edge. */
.poster .plate img, .poster .plate video{ width:100%; height:100%; object-fit:cover; object-position:50% 66%;
  display:block; transform-origin:50% 66%;
  transform:scale(1.035) translate(calc(var(--px) * -.55%), calc(var(--py) * -.4%));
  filter:brightness(calc((.34 + .66 * var(--wake)) * (1 - .45 * var(--p)))) saturate(calc(.7 + .3 * var(--wake))) }
.poster .plate video{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease }
.poster .plate video.playing{ opacity:1 }
/* Rendered plates are too clean next to the photographs (Jesse, 14 Sep: "a little fake"). A fine
   grain over anything marked .render brings them down to the same surface as the photos. */
.render{ position:relative }
.render::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
@keyframes push{ from{ transform:scale(1) } to{ transform:scale(1.07) } }
.poster .grade{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(32,16,58,.88) 0%, rgba(32,16,58,.42) 22%, rgba(32,16,58,0) 46%, rgba(32,16,58,0) 72%, rgba(32,16,58,.55) 100%),
    radial-gradient(120% 80% at 50% 55%, rgba(32,16,58,0) 55%, rgba(32,16,58,.55) 100%) }
.poster .dust{ position:absolute; inset:-2%; width:104%; height:104%; pointer-events:none; mix-blend-mode:screen;
  opacity:calc(var(--wake) * (1 - var(--p))); transform:translate(calc(var(--px) * -1.3%), calc(var(--py) * -.9%)) }
/* the window's light coming up as the room wakes: a bloom where the tall window is, screened on */
.poster .bloom{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:calc(.55 * var(--wake) * (1 - var(--p)));
  background:radial-gradient(38% 60% at 50% 34%, rgba(255,236,200,.34), rgba(255,236,200,0) 70%),
    radial-gradient(26% 22% at 50% 70%, rgba(255,226,180,.22), rgba(255,226,180,0) 70%);
  transform:translate(calc(var(--px) * -.9%), calc(var(--py) * -.6%)) }
.poster .sky{ position:absolute; left:0; right:0; top:clamp(56px,10vh,124px); display:flex; justify-content:center; pointer-events:none;
  opacity:calc(var(--wake) * var(--wake)); transform:translate(calc(var(--px) * .35%), calc((1 - var(--wake)) * 14px + var(--py) * .25%)) }
.poster .mark{ filter:drop-shadow(0 3px 22px rgba(19,10,36,.7)); animation:markbreath 7s ease-in-out infinite }
.poster .cap{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(40px,7vh,84px); margin:0; text-align:center; color:rgba(247,246,227,.92); font-family:'UnboundedW',var(--sans); font-weight:200; font-size:clamp(.62rem,1.15vw,.82rem); letter-spacing:.36em; text-indent:.36em; text-transform:uppercase; transition:opacity .8s }
.poster .cue{ position:absolute; right:var(--gutter); bottom:clamp(16px,3vh,28px); color:rgba(247,246,227,.6); font-family:'UnboundedW',var(--sans); font-weight:200; font-size:.55rem; letter-spacing:.4em; text-indent:.4em; text-transform:uppercase; animation:cuebob 1.6s steps(4) infinite alternate }
@media (prefers-reduced-motion:reduce){ .poster{ --wake:1 } .poster .plate img, .poster .mark, .poster .cue{ animation:none } .poster .dust{ display:none } }
@media (max-width:720px){ .poster .plate img{ object-position:50% 55% } .poster .sky{ top:clamp(56px,9vh,100px) } }

/* ---------- editorial: the home page grammar ---------- */
.ed-cover{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:#1b1220 }
.ed-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40% }
@media (min-aspect-ratio: 1/1){ .ed-cover img{ object-position:50% 62% } }
.ed-cover .veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(12,8,20,.55), rgba(12,8,20,0) 45%), linear-gradient(to bottom, rgba(12,8,20,.35), rgba(12,8,20,0) 30%) }
.ed-cover .l1, .ed-cover .l2{ position:absolute; color:var(--cream); font-family:Display,Georgia,serif; font-weight:400; line-height:.92; letter-spacing:-.02em; font-size:clamp(56px,11vw,190px); margin:0 }
.ed-cover .l1{ left:var(--gutter); top:clamp(72px,12vh,140px) }
.ed-cover .l2{ right:var(--gutter); bottom:clamp(72px,12vh,140px); text-align:right }
.ed-cover .meta{ position:absolute; left:var(--gutter); bottom:clamp(28px,4vh,44px); color:rgba(247,246,227,.8) }
/* Section padding is capped by the window's HEIGHT as well as its width. Scaled by width alone,
   two neighbours put 520px of nothing between them at 2000 wide, which on a wide, short window
   (Jesse's is about 2000 by 700) is most of a screen with nothing on it. */
.ed-line{ padding:clamp(72px,min(16vw,18svh),220px) var(--gutter) }
/* Display type in a phone-width column is where a big clamp floor turns a sentence into a
   column of single words, which is what Jesse photographed. balance made it worse: it equalises
   line lengths, and with short words that means more, shorter lines. The floor is set from the
   longest word these headings actually contain, and balance is left to the wider screens where
   there is room for it to help. */
.ed-line h2{ font-size:clamp(26px,9.2vw,132px); line-height:1.02; letter-spacing:-.02em; max-width:none;
  overflow-wrap:break-word }
@media (min-width:900px){ .ed-line h2, .ed-close h2, .ed-split h2{ text-wrap:balance } }
.ed-line h2 em{ font-style:italic; color:var(--soft) }
.ed-line .after{ margin-top:clamp(28px,4vw,56px); display:flex; gap:clamp(24px,6vw,96px); flex-wrap:wrap; align-items:baseline }
.ed-line .after p{ max-width:34ch; color:var(--soft); font-size:17px }
.ed-bleed{ position:relative; background:#1b1220 }
.ed-bleed img{ width:100%; height:auto; display:block }
.ed-bleed.tall img{ height:min(92svh,1100px); object-fit:cover }
.ed-bleed .cap{ position:absolute; left:var(--gutter); bottom:22px; color:rgba(247,246,227,.85); font-size:11px; letter-spacing:.18em; text-transform:uppercase ; text-shadow:0 1px 2px rgba(12,8,20,.55), 0 0 14px rgba(12,8,20,.35) }
.ed-bleed .cap.right{ left:auto; right:var(--gutter); text-align:right }
.ed-split{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(24px,6vw,110px); padding:clamp(64px,min(12vw,14svh),170px) var(--gutter); align-items:center }
.ed-split.flip{ grid-template-columns:7fr 5fr }
.ed-split .small{ max-width:520px }
.ed-split h2{ font-size:clamp(30px,7.4vw,96px); line-height:1; letter-spacing:-.02em }
.ed-split .k{ margin-top:clamp(20px,3vw,40px); color:var(--soft); max-width:36ch; font-size:17px }
.ed-run{ padding:clamp(48px,7vw,110px) 0 clamp(48px,7vw,110px) var(--gutter) }
.ed-run .run{ margin-top:0 }
.ed-run .run figure{ height:clamp(320px,56vh,720px) }
.ed-run .label{ display:block; margin-bottom:22px }
.ed-nights{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(24px,5vw,80px); padding:0 var(--gutter) clamp(80px,12vw,190px); align-items:start }
.ed-nights .tile:last-child{ margin-top:clamp(80px,14vw,220px) }
.ed-nights .tile .frame{ aspect-ratio:4/3 }
.ed-numbers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); padding:clamp(64px,min(12vw,14svh),170px) var(--gutter); border-top:1px solid var(--hair) }
.ed-numbers b{ font-family:Display,Georgia,serif; font-weight:400; font-size:clamp(96px,16vw,280px); line-height:.85; display:block; letter-spacing:-.03em }
.ed-numbers span{ display:block; color:var(--soft); font-size:15px; margin-top:18px; max-width:22ch }
.ed-close{ padding:clamp(72px,min(16vw,18svh),220px) var(--gutter); text-align:center }
.ed-close h2{ font-size:clamp(30px,10vw,150px); line-height:.95; letter-spacing:-.02em; max-width:none }
.ed-close .go{ margin-top:clamp(28px,4vw,48px) }
@media (max-width:820px){
  .ed-cover .l1, .ed-cover .l2{ font-size:clamp(48px,15vw,90px) }
  .ed-split, .ed-split.flip, .ed-nights{ grid-template-columns:1fr }
  .ed-nights .tile:last-child{ margin-top:0 }
  .ed-numbers{ grid-template-columns:1fr }
}

@media (max-width:820px){
  .statement .row, .plate .side, .two, .tiles, .tiles.three, .house{ grid-template-columns:1fr }
  .tiles.four, .contact, .facts{ grid-template-columns:1fr 1fr }
  .phases{ grid-template-columns:1fr 1fr }
  .numbers{ grid-template-columns:1fr 1fr }
  .ways{ grid-template-columns:1fr }
  .hero{ height:min(88svh,900px) }
  .bar nav{ gap:14px }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .tile video, .run video{ display:none } }

/* ---- Book a night: the pill in the bar, and the night it drops down ------------------------
   Jesse, 16 Sep: "a booking app we can drop from anywhere, with a drop-down arrow in the menu,
   the book CTA in its own colour, like a menu where we use nice images to make selections."
   The pill is a real link to /book/, so without script it still books. With script, it and
   every "Build your night" on the page open the drop instead of leaving the page. */
.bar a.book-pill{ display:inline-flex; align-items:center; gap:9px; background:var(--amber); color:#2A1A00;
  border:0; border-radius:999px; padding:10px 16px 10px 18px; margin-block:-8px;
  font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 1px 0 rgba(19,10,36,.08), 0 6px 18px rgba(232,168,76,.28); transition:filter .2s, box-shadow .2s }
.bar a.book-pill:hover{ filter:brightness(1.05); color:#2A1A00; box-shadow:0 1px 0 rgba(19,10,36,.1), 0 8px 24px rgba(232,168,76,.4) }
.book-pill .caret{ width:10px; height:6px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.book-pill[aria-expanded="true"] .caret{ transform:rotate(180deg) }
@media (max-width:560px){
  .bar{ gap:10px }
  .bar nav{ flex-wrap:nowrap; gap:14px; align-items:center }
  .bar nav a.label{ letter-spacing:.08em; white-space:nowrap }
  .book-pill .long{ display:none }
  .bar a.book-pill{ padding:10px 12px 10px 14px }
}
/* The lockup never gives. When Facilities joined the nav (18 Sep) the labels needed 338px of a
   390px phone, and the only thing in the bar allowed to shrink was the mark: it was crushed to
   2px wide, and at 360 the Book pill ran off the edge. So the mark is fixed, and the labels
   leave in the order a booker needs them least. Measured, not guessed: all five fit down to
   561. Below that Menus goes (the drop's fourth step is the menus) and What's on goes (both
   are in the footer); the room, the facilities and the ask stay. Under 375 the facilities
   leave, under 341 the room, and the ask is always there. Checked at 561, 560, 481, 430,
   390, 375, 360 and 320: nothing clips, nothing overflows. */
.bar > a{ flex:none }
/* Pricing joined the nav on 23 Sep and six labels wrapped to two lines under about 820. Menus
   and What's on leave first, from 820 down: both are in the footer, and Pricing is the one a
   visitor on a small screen is looking for. Measured at 900, 820, 819, 700, 600, 561, 390. */
@media (max-width:820px){ .bar nav a.label[href="/menus/"], .bar nav a.label[href="/whats-on/"]{ display:none } }
@media (max-width:480px){ .bar .lockup{ height:18px } .bar nav{ gap:12px } }
@media (max-width:374px){ .bar nav a.label[href="/facilities/"]{ display:none } }
@media (max-width:340px){ .bar nav a.label[href="/hire/"]{ display:none } }

/* The season's strap (Jesse, 18 Sep: Christmas becomes "a strap across the top nav"). It is
   seasonal, so it sits above the nav rather than in it: the nav stays five, and the strap
   comes down by itself. It is in the flow and scrolls away; the bar under it stays sticky,
   so once someone is reading it costs no height. Night purple with the amber accent, the
   footer's world, not a sale banner. One short line on a phone. */
.strap{ position:relative; display:flex; justify-content:center; align-items:center; background:#20103A; color:#F4F1EA;
  font:500 12px/1.3 var(--sans); letter-spacing:.06em; padding:0 44px }
.strap a{ display:block; padding:11px 8px; color:inherit; text-decoration:none; text-align:center }
.strap a b{ font-weight:600 } .strap a b.sm{ display:none } .strap a span{ color:#C9BEDF }
.strap a em{ font-style:normal; color:#E8A84C; border-bottom:1px solid rgba(232,168,76,.5); padding-bottom:1px; margin-left:.6em; white-space:nowrap }
.strap a:hover em{ border-color:#E8A84C }
.strap a:focus-visible, .strap button:focus-visible{ outline:2px solid #E8A84C; outline-offset:-3px }
.strap button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; background:none;
  color:#C9BEDF; font:400 20px/1 var(--sans); cursor:pointer; border-radius:50% }
.strap button:hover{ color:#F4F1EA }
@media (max-width:640px){ .strap{ font-size:11.5px; padding:0 40px 0 12px; justify-content:flex-start } .strap a span, .strap a b.lg{ display:none }
  .strap a b.sm{ display:inline } .strap a{ text-align:left; white-space:nowrap } }
@media print{ .strap{ display:none !important } }

/* The booking sheet, drawn after the Wonder Robotics quote sheet (Jesse, 17 Sep: "visually pretty
   much identical"), in this site's type and colours. It drops from the top edge to a hand's width
   short of the bottom, so the dimmed page underneath says it is a layer. The questions scroll; the
   tray on the right does not, so the total is always in view. On a phone the tray is a bar along
   the bottom with the faces of what you picked. */
.qs{ position:fixed; inset:0; z-index:60; visibility:hidden; transition:visibility 0s linear .56s; --r:14px; --rb:10px; --m:clamp(18px,3vw,48px) }
.qs.on{ visibility:visible; transition:none }
.qs-scrim{ position:absolute; inset:0; background:rgba(12,8,20,.55); opacity:0; transition:opacity .45s ease }
.qs.on .qs-scrim{ opacity:1 }
.qs-sheet{ position:absolute; left:0; right:0; top:0; height:calc(100dvh - clamp(28px,5vh,56px)); background:var(--cream);
  border-radius:0 0 22px 22px; box-shadow:0 40px 90px -40px rgba(12,8,20,.8); display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(-104%); transition:transform .56s cubic-bezier(.16,.84,.24,1) }
.qs.on .qs-sheet{ transform:none }
html.qs-lock, html.qs-lock body{ overflow:hidden }
.qs-top{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px 32px; padding:clamp(16px,2vw,28px) var(--m) 0; border-bottom:1px solid var(--hair) }
.qs-say h2{ margin:8px 0 clamp(12px,1.4vw,18px); font:400 clamp(28px,2.8vw,44px)/1 Display,Georgia,serif; letter-spacing:-.01em }
.qs-close{ align-self:start; width:44px; height:44px; border-radius:50%; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer;
  font:300 26px/1 var(--sans); display:grid; place-items:center; transition:background .15s, color .15s }
.qs-close span{ display:block; transform:rotate(45deg) }
.qs-close:hover{ background:var(--ink); color:var(--cream) }
.qs-body{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,26vw,400px) }
.qs-pick{ position:relative; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--m) clamp(28px,3vw,44px) }
.qs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:#2A1A00; background:var(--amber); border:1.5px solid var(--amber); border-radius:999px; padding:15px 24px; cursor:pointer; transition:filter .15s, background .15s }
.qs-btn:hover{ filter:brightness(1.05) }
.qs-btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink) }
.qs-btn.ghost:hover{ background:var(--ink); color:var(--cream); filter:none }
.qs-btn[disabled], .qs-btn[aria-disabled="true"]{ opacity:.35; cursor:not-allowed; pointer-events:none }

/* the tray */
.qs-tray{ border-left:1px solid var(--hair); background:var(--paper); display:flex; flex-direction:column; min-height:0; padding:clamp(16px,1.8vw,26px) }
.qs-peek{ display:none }
.qs-lines{ list-style:none; margin:12px 0 0; padding:0; overflow-y:auto; flex:1; min-height:0 }
.qs-lines li{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--hair); animation:qsIn .4s cubic-bezier(.16,.84,.24,1) both }
@keyframes qsIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.qs-lines li .t{ width:52px; height:52px; border-radius:8px; overflow:hidden; background:var(--hair) }
.qs-lines li .t img{ width:100%; height:100%; object-fit:cover }
.qs-lines li b{ display:block; font-weight:500; font-size:14px; line-height:1.25 }
.qs-lines li small{ display:block; font-size:12px; color:var(--soft); margin-top:2px; line-height:1.3 }
.qs-lines li .v{ font-size:14px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap }
.qs-lines li .v.ask{ color:var(--soft) }
.qs-lines li.empty{ display:block; border:1px dashed var(--hair); border-radius:var(--r); padding:22px 16px; text-align:center; color:var(--soft); font-size:14px; line-height:1.5; animation:none }
.qs-sum{ padding-top:14px }
.qs-num{ font:400 clamp(40px,3.4vw,58px)/1 Display,Georgia,serif; font-variant-numeric:tabular-nums }
.qs-sum .label{ display:block; margin-top:8px }
.qs-fine{ margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--soft) }
.qs-go{ display:grid; gap:8px; margin-top:14px }

/* the questions */
.wz{ padding:clamp(22px,2.6vw,40px) 0 clamp(28px,3vw,48px) }
.wz-prog{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(16px,2vw,26px) }
.wz-prog .label{ white-space:nowrap }
.wz-bar{ flex:1; height:2px; background:var(--hair); position:relative; overflow:hidden; border-radius:2px }
.wz-bar i{ position:absolute; left:0; top:0; bottom:0; background:var(--ink); transition:width .4s cubic-bezier(.16,.84,.24,1) }
.wz-q{ margin:0; font:400 clamp(38px,4.4vw,72px)/.98 Display,Georgia,serif; letter-spacing:-.015em; max-width:20ch }
.wz-q:focus{ outline:none }
.wz-hint{ margin:12px 0 0; font-size:16px; color:var(--soft); max-width:60ch }
.wz-sub{ margin:clamp(20px,2.4vw,30px) 0 0 }
.wz-opts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:clamp(18px,2.2vw,30px) }
.wz-opts:has(.pic){ grid-template-columns:repeat(min(var(--n,3),var(--max,3)),minmax(0,1fr)); gap:clamp(10px,1.2vw,18px) }
.wz-opts.wide .wz-opt.pic .ph{ aspect-ratio:16/10 }
.wz-when{ display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:clamp(20px,3vw,48px); align-items:start }
.wz-time{ margin:clamp(18px,2.2vw,30px) 0 0; border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--paper) }
.wz-time img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover }
.wz-time figcaption{ display:grid; gap:4px; padding:14px 16px 16px }
.wz-time b{ font:400 clamp(22px,1.9vw,30px)/1.05 Display,Georgia,serif } .wz-time small{ font-size:14px; color:var(--soft) }
@media (max-width:900px){ .wz-when{ grid-template-columns:1fr; gap:0 } }
.wz-opt{ position:relative; font:inherit; text-align:left; cursor:pointer; color:var(--ink); background:var(--paper); border:1px solid var(--hair); border-radius:var(--r);
  padding:18px 52px 18px 18px; display:grid; gap:6px; transition:border-color .15s, box-shadow .15s }
.wz-opt:hover:not([disabled]){ border-color:var(--ink) }
.wz-opt-t{ display:grid; gap:4px }
.wz-opt b{ font:400 clamp(22px,1.9vw,30px)/1.05 Display,Georgia,serif }
.wz-opt small{ font-size:14px; line-height:1.4; color:var(--soft) }
.wz-opt .mk{ position:absolute; right:16px; top:18px; width:24px; height:24px; border-radius:50%; border:1px solid var(--ink) }
.wz-opt[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink) }
.wz-opt[aria-pressed="true"] .mk{ background:var(--amber); border-color:var(--amber) }
.wz-opt[aria-pressed="true"] .mk::after{ content:"\2713"; color:#2A1A00; font-size:13px; display:grid; place-items:center; height:100% }
.wz-opt[disabled]{ opacity:.45; cursor:not-allowed }
.wz-opt.pic{ padding:0; overflow:hidden; display:flex; flex-direction:column }
.wz-opt.pic .ph{ display:block; aspect-ratio:4/3; background:#EDEADB; overflow:hidden }
.wz-opt.pic .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,.84,.24,1) }
.wz-opt.pic:hover .ph img, .wz-opt.pic[aria-pressed="true"] .ph img{ transform:scale(1.03) }
.wz-opt.pic .wz-opt-t{ display:grid; gap:4px; padding:14px 56px 16px 16px }
.wz-opt.pic .mk{ top:auto; bottom:16px }
.wz-foot{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin-top:clamp(20px,2.4vw,32px) }
.wz-back, .wz-browse{ font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; background:none; border:0; padding:8px 0; color:var(--soft); cursor:pointer;
  text-decoration:underline; text-underline-offset:5px }
.wz-back:hover, .wz-browse:hover{ color:var(--ink) }
.wz-date{ display:block; margin-top:clamp(18px,2.2vw,30px) }
.wz-date .label{ display:block; margin-bottom:8px }
.wz-date input{ font:400 28px/1 Display,Georgia,serif; color:var(--ink); background:var(--paper); border:1px solid var(--hair); border-radius:var(--rb); padding:12px 16px; min-width:280px }
.wz-date input:focus{ outline:none; border-color:var(--ink) }
.wz-date small{ display:block; margin-top:8px; color:var(--soft); font-size:14px }

/* the night we would put on */
.wz-result .wz-q{ margin-top:10px }
.wz-recs{ display:grid; gap:12px; margin-top:clamp(18px,2vw,28px) }
.wz-rec{ display:grid; grid-template-columns:clamp(120px,13vw,190px) minmax(0,1fr) auto; gap:clamp(14px,1.6vw,24px); align-items:start; padding:14px;
  border:2px solid var(--ink); border-radius:var(--r); background:var(--paper) }
.wz-rec .t{ aspect-ratio:4/3; border-radius:9px; overflow:hidden; background:var(--hair) }
.wz-rec .t img{ width:100%; height:100%; object-fit:cover }
.wz-rec .label{ display:block; line-height:1.4 }
.wz-rec h4{ margin:6px 0 0; font:400 clamp(24px,2.2vw,34px)/1 Display,Georgia,serif }
.wz-rec p{ margin:8px 0 0; font-size:15px; line-height:1.45; color:var(--soft); max-width:52ch }
.wz-rec .r{ display:grid; justify-items:end; gap:8px }
.wz-rec .p{ font:400 26px/1 Display,Georgia,serif; font-variant-numeric:tabular-nums }
.wz-step{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--hair); border-radius:999px; padding:3px }
.wz-step button{ width:34px; height:34px; border-radius:50%; border:0; background:transparent; font:300 20px/1 var(--sans); color:var(--ink); cursor:pointer }
.wz-step button:hover:not([disabled]){ background:var(--ink); color:var(--cream) }
.wz-step button[disabled]{ opacity:.3; cursor:not-allowed }
.wz-step output{ min-width:2.4ch; text-align:center; font-size:16px; font-variant-numeric:tabular-nums }
.wz-unit{ font-size:12px; color:var(--soft) }
.wz-swap{ display:block; margin-top:10px; font-size:13.5px; color:var(--soft); line-height:1.6 }
.wz-swap button{ font:inherit; background:none; border:0; padding:0; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer }
.wz-swap button:hover{ color:#8A5A12 }
.wz-note{ margin:14px 0 0; font-size:14.5px; color:var(--soft); line-height:1.5 }
.wz-note.warn{ color:#8A5A12 }
.wz-note:empty{ display:none }
.wz-group{ margin-top:clamp(22px,2.6vw,36px) }
.wz-group > .label{ display:block; padding-bottom:10px; margin-bottom:12px; border-bottom:2px solid var(--ink); color:var(--ink) }
.wz-dishes{ margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--soft) }
.wz-inline{ font:inherit; font-size:13px; color:var(--ink); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer }
.wz-menu{ list-style:none; margin:clamp(18px,2.2vw,30px) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0 clamp(16px,2vw,32px) }
.wz-menu li{ border-top:1px solid var(--hair) } .wz-menu li:last-child{ border-bottom:1px solid var(--hair) }
.wz-menu label{ display:flex; gap:14px; align-items:center; padding:13px 0; cursor:pointer; font:400 18px/1.25 Display,Georgia,serif }
.wz-menu input{ width:20px; height:20px; accent-color:var(--amber); flex:none }
.wz-menunote{ display:block; margin-top:clamp(18px,2.2vw,28px); max-width:60ch } .wz-menunote .label{ display:block; margin-bottom:8px }
.wz-menunote textarea{ width:100%; font:400 16px/1.5 var(--sans); color:var(--ink); background:var(--paper); border:1px solid var(--hair); border-radius:var(--rb); padding:12px 14px; resize:vertical }
.wz-menunote textarea:focus{ outline:none; border-color:var(--ink) }
.wz-offers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px }
.wz-offer{ position:relative; font:inherit; text-align:left; cursor:pointer; color:var(--ink); background:var(--paper); border:1px solid var(--hair); border-radius:var(--rb);
  padding:10px 44px 10px 10px; display:grid; grid-template-columns:84px minmax(0,1fr); grid-template-rows:auto auto; column-gap:14px; align-items:start; transition:border-color .15s, box-shadow .15s }
.wz-offer:hover:not([disabled]){ border-color:var(--ink) }
.wz-offer .t{ grid-row:1 / 3; width:84px; height:84px; border-radius:8px; overflow:hidden; background:var(--hair) }
.wz-offer .t img{ width:100%; height:100%; object-fit:cover }
.wz-offer b{ display:block; font-weight:500; font-size:15.5px; line-height:1.2 }
.wz-offer small{ display:block; margin-top:4px; font-size:13px; line-height:1.4; color:var(--soft) }
.wz-offer .p{ grid-column:2; margin-top:6px; font-size:13.5px; font-variant-numeric:tabular-nums }
.wz-offer .tick{ position:absolute; right:10px; top:10px; width:24px; height:24px; border-radius:50%; border:1px solid var(--ink); display:grid; place-items:center; font-size:14px; line-height:1 }
.wz-offer .tick::before{ content:"+" }
.wz-offer[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.wz-offer[aria-pressed="true"] .tick{ background:var(--amber); border-color:var(--amber); color:#2A1A00 }
.wz-offer[aria-pressed="true"] .tick::before{ content:"\2713" }
.wz-offer[disabled]{ cursor:default }
.wz-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin-top:clamp(18px,2.2vw,30px); max-width:760px }
.wz-field .label{ display:block; margin-bottom:8px }
.wz-field input, .wz-field select{ width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--hair); border-radius:var(--rb); padding:13px 14px }
.wz-field input:focus, .wz-field select:focus{ outline:none; border-color:var(--ink) }
.qs .wz-opt:focus-visible, .qs .wz-offer:focus-visible, .qs .qs-btn:focus-visible, .qs .wz-back:focus-visible, .qs .wz-browse:focus-visible, .qs .wz-swap button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

@media (max-width:1100px){ .wz-opts:has(.pic){ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:860px){
  .qs-sheet{ height:100dvh; border-radius:0 }
  .qs-body{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto }
  .qs-tray{ border-left:0; border-top:1px solid var(--hair); padding:10px var(--m) 12px; max-height:72dvh; box-shadow:0 -18px 40px -30px rgba(12,8,20,.6) }
  .qs-tray-h, .qs-fine{ display:none }
  .qs-peek{ display:flex; align-items:center; gap:10px; width:100%; font:inherit; background:none; border:0; padding:0 0 8px; cursor:pointer; color:var(--ink); text-align:left }
  .qs-thumbs{ display:flex }
  .qs-thumbs img{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--paper); margin-left:-8px; background:var(--hair) }
  .qs-thumbs img:first-child{ margin-left:0 }
  .qs-peek-t{ font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--soft) }
  .qs-lines{ display:none; margin-top:0 }
  .qs-tray.open .qs-lines{ display:block }
  .qs-sum{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:4px }
  .qs-num{ font-size:34px }
  .qs-sum .label{ margin-top:0; text-align:right }
  .qs-go{ grid-template-columns:1fr 1fr; margin-top:10px }
  .qs-go #qs-call{ display:none }
  .qs-btn{ padding:14px 10px; letter-spacing:.08em }
  .wz-rec{ grid-template-columns:96px minmax(0,1fr) }
  .wz-rec .r{ grid-column:1 / -1; grid-auto-flow:column; justify-content:space-between; align-items:center; justify-items:start }
  .wz-fields{ grid-template-columns:1fr }
  .wz-date input{ min-width:0; width:100% }
}
@media (max-width:560px){
  .wz-opts:has(.pic){ grid-template-columns:1fr 1fr; gap:8px }
  .wz-opt.pic .wz-opt-t{ padding:10px 36px 12px 12px } .wz-opt.pic .wz-opt-t small{ display:none } .wz-opt.pic .mk{ right:10px; bottom:12px; width:20px; height:20px }
  .wz-offers{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){ .qs, .qs-scrim, .qs-sheet{ transition:none } .qs-lines li{ animation:none } }
@media print{ .qs, .book-pill .caret{ display:none } }

/* SMALL-SCREEN TYPE FLOOR, and it must be last: these selectors tie on specificity with the
   rules above, so an earlier copy loses on order, which is exactly what happened the first
   time. The register is the tracking, not the size; 10px reads on a desk and not on a phone. */
@media (max-width: 820px) {
  .label, .mcard .bot, .mcard .by, .ed-bleed .cap, .cs-row figcaption,
  .hscroll .track figcaption, .qt .meta b, .poster .cap, .fh-tag,
  .tour .where small, .foot-line{ font-size:11.5px }
}