/* ============================================================
   MOLAVE ART STUDIO — "The Grain of Molave"
   A print-shop / woodblock aesthetic. Ink on paper.
   Two-plate screenprint: vermilion + forest, misregistered → aligned.
   Fonts: Fraunces (the ink) · Space Mono (the machine)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* --- the press: paper + inks --- */
  --paper:      #E8E2D4;   /* unbleached oatmeal ground */
  --paper-2:    #DCD4C2;   /* deeper panel */
  --paper-3:    #F1ECDF;   /* lifted / card */
  --ink:        #201A13;   /* walnut near-black — text */
  --ink-70:     rgba(32,26,19,.70);
  --ink-45:     rgba(32,26,19,.45);
  --ink-20:     rgba(32,26,19,.20);
  --ink-12:     rgba(32,26,19,.12);
  --molave:     #6B3E20;   /* molave hardwood brown */
  --vermilion:  #5F70B8;   /* molave-flower periwinkle — the studio accent */
  --vermilion-d:#3E4C86;   /* pressed */
  --forest:     #33422E;   /* plate B */
  --paper-rgb:  232,226,212;
  --ink-rgb:    32,26,19;

  --pad:  clamp(22px, 12px + 2.2vw, 44px);
  --wrap: clamp(26px, 14px + 4vw, 104px);
  --frame: clamp(10px, 1.2vw, 22px);   /* blueprint outer-frame inset */
  --maxw: 1500px;

  --serif: "Fraunces", Georgia, serif;
  --mono:  "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-o: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* overflow-x:clip is respected by iOS Safari (hidden is silently ignored on html/body) */
html { -webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; scroll-behavior:smooth; }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  min-height:100%;
  font-family:var(--mono);
  font-weight:400;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  /* the paper: layered fibre + fleck, generated in CSS so it ships with zero assets */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(92,67,39,.05) 0, transparent 45%),
    radial-gradient(circle at 82% 12%, rgba(51,66,46,.045) 0, transparent 40%),
    radial-gradient(circle at 66% 88%, rgba(95,112,184,.04) 0, transparent 42%);
  background-attachment:fixed;
}

/* fibre texture layer — a fixed, tiled feTurbulence paper, painted once */
.paper-grain {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.55; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.13  0 0 0 0 0.1 0 0 0 0 0.075  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
}

a { color:inherit; text-decoration:none; }
ul, li { list-style:none; }
img, video { max-width:100%; height:auto; display:block; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--vermilion); color:var(--paper-3); }

/* keep content above paper + grain layers */
.stage { position:relative; z-index:2; }

/* ScrollSmoother wrapper — z-index:2 so the fixed overlays layer around it:
   paper-grain (z1) behind, grid-frame (z38) / film grain (z60) / chat / modal above */
#smooth-wrapper { position:relative; z-index:2; }
#smooth-content { will-change:transform; }

/* ============================================================
   BLUEPRINT GRID FRAME (netcraft-style ruled overlay, on paper)
   A fixed drafting sheet: outer inset frame + column rules +
   registration crosshairs at the corners. Thin, engineered, subtle.
   ============================================================ */
:root { --rule: rgba(32,26,19,.30); --rule-soft: rgba(32,26,19,.16); }
.grid-frame { position:fixed; inset:0; z-index:38; pointer-events:none; }
.grid-frame__box { position:absolute; inset:var(--frame); border:1px solid var(--rule);
  clip-path:inset(0 100% 0 0); }
.grid-frame__cols { position:absolute; inset:var(--frame);
  background-image:repeating-linear-gradient(to right,
    var(--rule-soft) 0, var(--rule-soft) 1px, transparent 1px, transparent 25%);
  clip-path:inset(0 0 100% 0); }
.grid-frame__x { position:absolute; width:18px; height:18px; color:var(--ink); opacity:0; }
.grid-frame__x svg { width:100%; height:100%; }
.grid-frame__x--tl { top:calc(var(--frame) - 9px); left:calc(var(--frame) - 9px); }
.grid-frame__x--tr { top:calc(var(--frame) - 9px); right:calc(var(--frame) - 9px); }
.grid-frame__x--bl { bottom:calc(var(--frame) - 9px); left:calc(var(--frame) - 9px); }
.grid-frame__x--br { bottom:calc(var(--frame) - 9px); right:calc(var(--frame) - 9px); }
/* the drafting frame assembles on load: box draws left→right, columns wipe down, marks pop */
.grid-frame.in .grid-frame__box { clip-path:inset(0 0 0 0); transition:clip-path 1.1s cubic-bezier(.22,1,.36,1); }
.grid-frame.in .grid-frame__cols { clip-path:inset(0 0 0 0); transition:clip-path 1.4s cubic-bezier(.22,1,.36,1) .35s; }
.grid-frame.in .grid-frame__x { opacity:.85; transition:opacity .5s ease; }
.grid-frame.in .grid-frame__x--tl { transition-delay:.9s; }
.grid-frame.in .grid-frame__x--tr { transition-delay:1.05s; }
.grid-frame.in .grid-frame__x--bl { transition-delay:1.2s; }
.grid-frame.in .grid-frame__x--br { transition-delay:1.35s; }
@media (prefers-reduced-motion: reduce){
  .grid-frame__box, .grid-frame__cols { clip-path:none; }
  .grid-frame__x { opacity:.85; }
}
@media (max-width:760px){
  .grid-frame__cols { background-image:repeating-linear-gradient(to right,
    var(--rule-soft) 0, var(--rule-soft) 1px, transparent 1px, transparent 50%); }
}

/* LIVE status strip — constant tick (netcraft's always-on module) */
.hero__live { position:absolute; top:clamp(74px,10vh,110px); left:var(--wrap); right:var(--wrap); z-index:5;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-70);
  padding-bottom:12px; border-bottom:1px solid var(--rule-soft); }
.live__dot { width:7px; height:7px; border-radius:50%; background:var(--vermilion); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.3; transform:scale(.7);} }
.live__on { color:var(--vermilion); }
.live__sep { opacity:.4; }
.live__time { margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.16em; }
@media (max-width:680px){ .hero__live{ font-size:.55rem; gap:9px; } .live__time{ margin-left:0; } }
@media (prefers-reduced-motion: reduce){ .live__dot{ animation:none; } }

/* reverse-direction marquee */
.ticker--rev .ticker__track { animation-direction:reverse; animation-duration:44s; }

/* plates get their transform from JS scroll-registration (no CSS animation,
   which would override the inline transform and break the effect) */
.plate { will-change:transform; }

/* numbered vertical mono gutter label per section (injected by JS) */
.sec-tag { position:absolute; top:clamp(30px,7vh,84px); right:calc(var(--frame) + 7px);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-45); z-index:3; display:flex; align-items:center; gap:10px;
  pointer-events:none; will-change:transform; }
.sec-tag b { color:var(--vermilion); font-weight:400; }
@media (max-width:760px){ .sec-tag { right:calc(var(--frame) + 3px); font-size:.55rem; } }

/* ---------- type ---------- */
.serif { font-family:var(--serif); }
.mono  { font-family:var(--mono); }
.label {
  font-family:var(--mono); font-size:.66rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-70);
}
.idx { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--vermilion); }

.display {
  font-family:var(--serif);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.015em;
  font-optical-sizing:auto;
}
h1,h2,h3 { font-weight:400; }

.rule { height:1px; background:var(--ink-20); width:100%; }
.rule--ink { background:var(--ink); height:1.5px; }

/* ============================================================
   PRELOADER — the wordmark inks in bottom-up as it loads, then the
   whole ink sheet is pulled up to reveal the site.
   ============================================================ */
.loader { position:fixed; inset:0; z-index:9500; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; will-change:transform;
  transition:transform .95s cubic-bezier(.76,0,.24,1); }
.loader.done { transform:translateY(-100%); pointer-events:none; }
.loader__inner { width:min(820px,88vw); padding:0 var(--wrap); }
.loader__eyebrow { font-family:var(--mono); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(232,226,212,.5); margin-bottom:clamp(14px,2vw,22px); }
.loader__word { position:relative; display:block; width:min(560px,82vw); aspect-ratio:623 / 176; }
/* the real logo, hand-printed — displacement filter roughens the edges like a pull */
.lw { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; filter:url(#press); }
/* the periwinkle plate — sits misregistered behind, JS slides it into register */
.lw--plate { opacity:.9; will-change:transform; }
/* the paper ink layer prints in bottom-up (JS drives the clip) */
.lw--ink { clip-path:inset(100% 0 0 0); }
.loader__meta { display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-top:clamp(22px,3vw,36px); font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; }
.loader__sub { color:rgba(232,226,212,.55); }
.loader__pct { color:var(--paper); font-variant-numeric:tabular-nums; letter-spacing:.14em; }
.loader__rule { display:block; margin-top:12px; height:1.5px; width:100%; background:rgba(232,226,212,.16); position:relative; overflow:hidden; }
.loader__rule i { position:absolute; inset:0 100% 0 0; background:var(--vermilion); }
@media (prefers-reduced-motion: reduce){ .loader.done{ transform:translateY(-100%); transition:none; } .lw--ink{ clip-path:inset(0 0 0 0); } }

/* ============================================================
   FILM GRAIN (animated canvas, painted by JS)
   ============================================================ */
#grain { position:fixed; inset:0; pointer-events:none; z-index:60; mix-blend-mode:multiply; opacity:.5; }

/* custom cursor removed — native pointer stays (matches netcraft, avoids the
   crosshair-balloon flash before CSS pins its size) */

/* ============================================================
   MARQUEE TICKER — inked strip
   ============================================================ */
.ticker { display:flex; overflow:hidden; background:var(--ink); color:var(--paper);
  padding:11px 0; white-space:nowrap; border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); }
.ticker__track { display:flex; flex-shrink:0; gap:34px; padding-left:34px; animation:marquee 38s linear infinite; }
.ticker__track span { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:34px; }
.ticker__track span::after { content:"✦"; color:var(--vermilion); }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* ============================================================
   HEADER
   ============================================================ */
.header { position:absolute; top:0; left:0; width:100%; z-index:400;
  padding:clamp(18px,14px+1vw,30px) var(--pad) 0;
  display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:12px; }
.brand__mark { height:clamp(38px,4vw,52px); width:auto; }
/* real logo — transparent brown wordmark */
.brand__logo { height:clamp(26px,3vw,36px); width:auto; }
.nav { display:none; gap:6px; align-items:center; }
@media (min-width:960px){ .nav{ display:flex; } }
/* every nav item is the same pill box (transparent border) so heights align;
   hover fills a solid background so the label reads over the video */
.nav a { display:inline-flex; align-items:center; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); line-height:1;
  padding:8px 14px; border:1.5px solid transparent; border-radius:0;
  transition:background .25s ease, color .25s ease, border-color .25s ease; }
.nav a .idx { font-size:.6rem; margin-right:6px; opacity:.7; }
.nav a:hover { background:var(--ink); color:var(--paper); }
.nav a:hover .idx { opacity:.85; }
.nav__cta { border-color:var(--ink); margin-left:8px; }
.nav__cta:hover { background:var(--ink); color:var(--paper); }

/* floating Reserve CTA — full pill on desktop, small ticket icon on mobile.
   Sits above the chat launcher, bottom-right. */
.reserve-fab { position:fixed; right:clamp(14px,2vw,32px); bottom:calc(clamp(16px,2.2vw,30px) + 82px);
  z-index:390; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:1.5px solid var(--ink); border-radius:0;
  padding:14px 20px; box-shadow:4px 4px 0 var(--vermilion);
  transition:transform .15s ease, box-shadow .15s ease, opacity .3s ease; }
.reserve-fab__label { display:inline-flex; align-items:center; gap:9px; }
.reserve-fab__label .arw { font-size:.9rem; line-height:1; transition:transform .3s var(--ease); }
.reserve-fab__icon { display:none; width:26px; height:26px; }
.reserve-fab:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--vermilion); }
.reserve-fab:hover .arw { transform:translateX(3px); }
.reserve-fab:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--vermilion); }
/* when the chat panel is open, fold the reserve away so they don't stack */
body:has(.chat[data-open="true"]) .reserve-fab { opacity:0; pointer-events:none; transform:translateY(8px); }
/* mobile: shrink to a small square icon so it doesn't take space */
@media (max-width:680px){
  .reserve-fab { padding:0; width:52px; height:52px; justify-content:center;
    bottom:calc(16px + 74px + env(safe-area-inset-bottom, 0px)); right:12px; }
  .reserve-fab__label { display:none; }
  .reserve-fab__icon { display:grid; place-items:center; }
}

.menu-btn { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  background:transparent; border:none; color:var(--ink); z-index:5500; position:relative; }
@media (min-width:960px){ .menu-btn{ display:none; } }
@media (max-width:959px){
  .nav { display:flex; position:fixed; inset:0; background:var(--paper); flex-direction:column;
    justify-content:center; gap:26px; padding:0 var(--pad); z-index:5000;
    transform:translateY(-101%); transition:transform .6s var(--ease-o); }
  body.menu-open .nav { transform:none; }
  .nav a { font-family:var(--serif); font-size:2.2rem; letter-spacing:-.01em; text-transform:none; }
  .nav a .idx { font-size:.9rem; vertical-align:super; }
  .nav__cta { align-self:flex-start; font-family:var(--mono) !important; font-size:.8rem !important; }
  body.menu-open { overflow:hidden; }
}

/* ============================================================
   HERO — big carved wordmark + video behind torn-paper mask
   ============================================================ */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--wrap) clamp(30px,5vw,64px); overflow:hidden; }
.hero__video-wrap { position:absolute; top:0; right:0; width:min(46%,640px); height:100%;
  overflow:hidden; z-index:1; -webkit-mask-image:var(--torn); mask-image:var(--torn);
  -webkit-mask-size:cover; mask-size:cover; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.hero__video-wrap::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--paper-rgb),.06), rgba(var(--paper-rgb),.20));
  mix-blend-mode:hard-light; }
.hero__video, .hero__video img, .hero__video video { width:100%; height:100%; object-fit:cover;
  filter:contrast(1.03) saturate(1.04); }
@media (max-width:768px){ .hero__video-wrap{ width:100%; opacity:.28; } }

.hero__top { position:absolute; top:clamp(90px,13vh,150px); left:var(--wrap); z-index:3; max-width:340px; }
.hero__eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.hero__eyebrow::before { content:""; width:34px; height:1.5px; background:var(--vermilion); }
.hero__lede { font-family:var(--serif); font-size:clamp(1.05rem,1rem+.6vw,1.4rem); line-height:1.34;
  font-style:italic; color:var(--ink); font-weight:300; }

.hero__mark { position:relative; z-index:3; margin-bottom:clamp(18px,3vw,34px); }
.hero__mark svg { width:min(100%,980px); height:auto; display:block; }
/* the real logo, hand-printed — displacement filter roughens the edges like a pull */
.hero__logo { width:clamp(240px,40vw,520px); height:auto; display:block; filter:url(#carve); will-change:transform; }
.hero__foot { position:relative; z-index:3; display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-end; gap:20px; border-top:1.5px solid var(--ink); padding-top:16px; }
.hero__foot p { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-70); max-width:44ch; line-height:1.6; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { position:relative; padding:clamp(64px,9vw,150px) var(--wrap); }
.section__head { display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,5vw,58px); }
.section__head .idx { font-size:.72rem; border:1px solid var(--rule); padding:4px 9px; line-height:1; letter-spacing:.05em; }
.section__kicker { font-family:var(--mono); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-70); }
.section__line { flex:1; height:1px; background:var(--ink-20); align-self:center; }

/* reveal — fade + rise (GSAP drives the tween; CSS only holds the initial hidden
   state to avoid a flash, and .in is the no-GSAP fallback) */
.reveal { opacity:0; transform:translateY(22px); }
.reveal.in { opacity:1; transform:none; }
/* reveal — clip wipe (netcraft: content assembles into its cell, bottom-up) */
.reveal-clip { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.22,1,.36,1); }
.reveal-clip.in { clip-path:inset(0 0 0 0); }
/* WIPE: the observed box stays intact (opacity/transform reset) so the observer
   fires; the clip-wipe runs on the inner content only (clipping the observed box
   to zero collapses its intersection rect and the reveal never triggers). */
.wipe.reveal { opacity:1; transform:none; }
.wipe .work__art { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.22,1,.36,1); }
.wipe.in .work__art { clip-path:inset(0 0 0 0); }
.process__media.wipe > div, .process__media.wipe > svg, .process__media.wipe > img, .process__media.wipe > video {
  clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.22,1,.36,1); }
.process__media.wipe.in > div, .process__media.wipe.in > svg, .process__media.wipe.in > img, .process__media.wipe.in > video {
  clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){ .wipe .work__art, .process__media.wipe > * { clip-path:none !important; } }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .reveal-clip{ clip-path:none; transition:none; }
}

/* full-width horizontal grid rule per section — meets the vertical column lines
   to form the cell grid; draws itself in on enter */
.section::before { content:""; position:absolute; top:0; left:var(--frame); right:var(--frame);
  height:1px; background:var(--rule); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.section.in-rule::before { transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){ .section.in-rule::before, .section::before { transform:scaleX(1); transition:none; } }

/* ============================================================
   MANIFESTO — word-by-word ink reveal (the press pulls each word)
   ============================================================ */
/* studio: text left (reads better), molave tree right */
.manifesto { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:center; max-width:none; text-align:left; }
.manifesto__text { max-width:24ch; }
.manifesto__big { font-family:var(--serif); font-weight:300; font-size:clamp(2rem,1.1rem+4vw,4.2rem);
  line-height:1.12; letter-spacing:-.02em; }
/* default: a word waiting to be inked — faint but present */
.manifesto__big .w { display:inline-block; position:relative; color:transparent;
  -webkit-text-stroke:.6px var(--ink-45); text-stroke:.6px var(--ink-45); opacity:.5;
  transition:opacity .6s ease, color .6s ease, -webkit-text-stroke-color .6s ease; }
/* inked: the press pulls it — full ink */
.manifesto__big .w.lit { color:var(--ink); -webkit-text-stroke-color:transparent; opacity:1; }
.manifesto__big .w.ink.lit { color:var(--vermilion); font-style:italic; }
.manifesto__foot { max-width:44ch; margin:clamp(26px,3vw,40px) 0 0; text-align:left;
  font-family:var(--mono); font-size:.8rem; line-height:1.85; color:var(--ink-70); letter-spacing:.02em; }
/* the molave tree */
.manifesto__tree { position:relative; width:100%; aspect-ratio:5/6; }
.manifesto__tree svg { width:100%; height:100%; display:block; }
.manifesto__tree .mv-canopy { transform-box:fill-box; transform-origin:center bottom; }
.manifesto__tree .mv-leaf { transform-box:fill-box; transform-origin:center; }
@media (max-width:860px){
  .manifesto { grid-template-columns:1fr; gap:8px; }
  .manifesto__text { max-width:34ch; }
  .manifesto__tree { max-width:300px; margin:6px auto 0; aspect-ratio:1/1; order:-1; }
}

/* ============================================================
   PLATES — screenprint registration on scroll
   two ink plates drift apart, snap into register as you scroll
   ============================================================ */
.plates { position:relative; display:grid; place-items:center; min-height:60vh; padding:clamp(40px,6vw,90px) 0; }
.plate { position:absolute; width:min(62vw,520px); max-width:88%; }
.plate svg { width:100%; height:auto; display:block; }
.plate--a { color:var(--vermilion); mix-blend-mode:multiply; }
.plate--b { color:var(--forest); mix-blend-mode:multiply; }
.plate--c { color:var(--ink); }
.plates__caption { position:relative; z-index:4; margin-top:auto; text-align:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-70); }
.reg-mark { position:absolute; width:24px; height:24px; opacity:.55; color:var(--ink-45); }
.reg-mark svg { width:100%; height:100%; }

/* ============================================================
   WORKS — halftone gallery, resolves on hover
   ============================================================ */
.works__grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,26px); }
.work { position:relative; overflow:hidden; background:var(--paper-2);
  border:1.5px solid var(--ink); }
.work--tall { grid-column:span 4; aspect-ratio:3/4; }
.work--wide { grid-column:span 8; aspect-ratio:16/10; }
.work--sq   { grid-column:span 6; aspect-ratio:1/1; }
.work--sq3  { grid-column:span 4; aspect-ratio:4/5; }
.work--band { grid-column:span 12; aspect-ratio:16/9; }
@media (max-width:768px){
  .work--tall,.work--wide,.work--sq,.work--sq3,.work--band{ grid-column:span 12; }
  .work--wide{ aspect-ratio:16/11; }
}
.work__art { position:absolute; inset:0; }
.work__art svg, .work__art img { width:100%; height:100%; object-fit:cover; }
/* halftone screen sits over the art; hover lifts it */
.work__art::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(var(--ink-rgb),.85) 30%, transparent 33%);
  background-size:5px 5px; mix-blend-mode:multiply; opacity:.6; transition:opacity .6s var(--ease), background-size .6s var(--ease); }
.work:hover .work__art::after { opacity:0; background-size:2px 2px; }
.work:hover .work__art { transform:scale(1.03); transition:transform 1.2s var(--ease); }
.work__meta { position:absolute; left:0; bottom:0; z-index:3; width:100%; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
  background:linear-gradient(0deg, rgba(var(--ink-rgb),.72), transparent); color:var(--paper);
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s var(--ease); }
.work:hover .work__meta { opacity:1; transform:none; }
.work__title { font-family:var(--serif); font-size:1.15rem; line-height:1.05; }
.work__tag { font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
.work__num { position:absolute; top:12px; left:14px; z-index:3; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.1em; color:var(--paper); mix-blend-mode:difference; }

/* ---- TEACHER ---- */
.teacher { display:grid; grid-template-columns:5fr 7fr; gap:clamp(22px,4vw,56px); align-items:center; }
.teacher__media { position:relative; aspect-ratio:4/5; border:1.5px solid var(--ink); background:var(--paper-2);
  color:var(--ink); overflow:hidden; }
.teacher__media svg, .teacher__media img { width:100%; height:100%; object-fit:cover; }
.teacher__role { font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--vermilion); margin:0 0 14px; }
.teacher__name { font-family:var(--serif); font-weight:500; line-height:.98; letter-spacing:-.01em;
  font-size:clamp(2.1rem,5vw,3.4rem); margin:0 0 16px; }
.teacher__bio { font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.6;
  max-width:46ch; margin:0 0 22px; }
.teacher__facts { list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink); }
.teacher__facts li { display:grid; grid-template-columns:5.5rem 1fr; gap:14px; padding:10px 0;
  border-bottom:1px solid rgba(var(--ink-rgb),.22); align-items:baseline; }
.teacher__facts span { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.7; padding-top:2px; }
.teacher__facts b { font-family:var(--serif); font-weight:500; font-size:1.02rem; line-height:1.3; }
@media (max-width:768px){
  .teacher { grid-template-columns:1fr; gap:26px; }
  .teacher__media { aspect-ratio:1/1; max-width:340px; }
  .teacher__facts li { grid-template-columns:4.6rem 1fr; gap:10px; }
}

/* ============================================================
   PROCESS — numbered index with a video panel
   ============================================================ */
/* process = a bordered two-cell grid (steps | media) */
.process { display:grid; grid-template-columns:1fr; gap:0; align-items:stretch; border:1px solid var(--ink); }
@media (min-width:900px){ .process{ grid-template-columns:1.1fr .9fr; } }
.steps { padding:0 clamp(18px,2.6vw,34px); border-bottom:1px solid var(--ink); }
@media (min-width:900px){ .steps{ border-bottom:none; border-right:1px solid var(--ink); } }
.step { display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,40px); align-items:baseline;
  padding:clamp(20px,3vw,34px) 0; border-bottom:1px solid var(--ink-20); transition:padding-left .4s var(--ease); }
.step:hover { padding-left:14px; }
.step__n { font-family:var(--mono); font-size:.72rem; color:var(--vermilion); letter-spacing:.06em; padding-top:.4em; }
.step__t { font-family:var(--serif); font-size:clamp(1.5rem,1.1rem+1.6vw,2.4rem); line-height:1; }
.step__d { grid-column:2; font-family:var(--mono); font-size:.78rem; line-height:1.75; color:var(--ink-70); margin-top:12px; max-width:44ch; }
.process__media { position:relative; min-height:clamp(320px,42vw,560px); overflow:hidden; background:var(--paper-2); }
.process__media video, .process__media img, .process__media svg { width:100%; height:100%; object-fit:cover;
  filter:contrast(1.03) saturate(1.02); }
/* the printing video is the always-playing base; studio stills fade in over it */
.process__media .pmedia { position:absolute; inset:0; z-index:0; }
.process__media .pslide { position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 1.4s var(--ease); }
.process__media .pslide.on { opacity:1; }
@media (prefers-reduced-motion: reduce){ .process__media .pslide { transition:none; opacity:0; } }
.process__media .plate-cap { position:absolute; bottom:0; left:0; padding:12px 16px; z-index:2;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
  background:linear-gradient(0deg, rgba(var(--ink-rgb),.66), transparent); width:100%; }

/* ============================================================
   WORKSHOPS — paged carousel, the "accept money" path
   ============================================================ */
.shop__rail { display:flex; gap:clamp(16px,2vw,26px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; margin-right:calc(-1 * var(--wrap)); padding-right:var(--wrap);
  scrollbar-width:none; scroll-padding-left:2px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.shop__rail::-webkit-scrollbar { display:none; }
.card { scroll-snap-align:start; flex:0 0 clamp(280px,80vw,380px); background:var(--paper-3);
  border:1.5px solid var(--ink); display:flex; flex-direction:column; position:relative;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover { transform:translateY(-6px); box-shadow:10px 12px 0 var(--ink); }
.card__top { padding:18px 20px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1.5px solid var(--ink); }
.card__kind { font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--vermilion); }
.card__seat { font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--ink-70); }
.card__body { padding:22px 20px; flex:1; }
.card__name { font-family:var(--serif); font-size:clamp(1.5rem,1.2rem+1vw,2rem); line-height:1.02; margin-bottom:10px; }
.card__desc { font-family:var(--mono); font-size:.74rem; line-height:1.7; color:var(--ink-70); }
.card__facts { margin-top:18px; display:flex; flex-direction:column; gap:7px; }
.card__fact { display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:.68rem; letter-spacing:.02em; padding-bottom:7px; border-bottom:1px dotted var(--ink-20); }
.card__fact b { font-weight:700; }
.card__foot { padding:16px 20px; display:flex; justify-content:space-between; align-items:center; border-top:1.5px solid var(--ink); }
.card__price { font-family:var(--serif); font-size:1.5rem; }
.card__price small { font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-70); display:block; }
/* square, 3D press-block buttons — hard offset shadow (a misregistered plate) */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:1.5px solid var(--ink); border-radius:0;
  padding:14px 24px; box-shadow:4px 4px 0 var(--vermilion);
  transition:transform .15s ease, box-shadow .15s ease, background .3s ease, color .3s ease; }
.btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--vermilion); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--vermilion); }
.btn--ghost { background:transparent; color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.btn--ghost:hover { background:var(--ink); color:var(--paper); box-shadow:6px 6px 0 var(--vermilion); }
.btn--block { width:100%; }
.btn--lg { padding:16px 30px; font-size:.74rem; }

.shop__controls { display:flex; align-items:center; gap:14px; margin-top:26px; }
.rail-btn { width:48px; height:48px; border:1.5px solid var(--ink); border-radius:0; background:var(--paper-3);
  display:grid; place-items:center; color:var(--ink); box-shadow:3px 3px 0 var(--vermilion);
  transition:transform .15s ease, box-shadow .15s ease, background .3s ease, color .3s ease; }
.rail-btn:hover { background:var(--ink); color:var(--paper); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--vermilion); }
.rail-btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--vermilion); }
.rail-btn svg { width:18px; height:18px; }
.shop__count { font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--ink-70); margin-left:auto; }

/* ============================================================
   VISIT / CTA band
   ============================================================ */
.band { background:var(--ink); color:var(--paper); margin:0 calc(-1*var(--wrap)); padding:clamp(56px,8vw,110px) var(--wrap); }
.band ::selection { background:var(--vermilion); color:var(--paper); }
.band__grid { display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:820px){ .band__grid{ grid-template-columns:1.3fr .7fr; align-items:end; } }
.band__big { font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,1.4rem+3.6vw,4.4rem); line-height:1.02; letter-spacing:-.02em; }
.band__big em { color:var(--vermilion); font-style:italic; }
.band__side { font-family:var(--mono); font-size:.76rem; line-height:1.9; letter-spacing:.02em; color:rgba(232,226,212,.72); }
.band__side a { color:var(--paper); border-bottom:1px solid rgba(232,226,212,.4); }
.band__side a:hover { color:var(--vermilion); border-color:var(--vermilion); }
.band .btn { background:var(--paper); color:var(--ink); border-color:var(--paper); margin-top:22px; }
.band .btn:hover { background:var(--vermilion); color:var(--paper); border-color:var(--vermilion); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding:clamp(56px,7vw,96px) var(--wrap) 0; }
/* inverted ink field — the netcraft color-flip close */
.footer--ink { background:var(--ink); color:var(--paper); position:relative; z-index:2; }
.footer--ink .footer__lede { color:var(--paper); }
.footer--ink .foot-col__label { color:rgba(232,226,212,.5); }
.footer--ink .foot-col a, .footer--ink .foot-col p { color:rgba(232,226,212,.82); }
.footer--ink .foot-col a:hover { color:var(--vermilion); }
.footer--ink .footer__mark { border-top-color:rgba(232,226,212,.28); }
.footer--ink .footer__credit { color:rgba(232,226,212,.5); }
.footer--ink ::selection { background:var(--vermilion); color:var(--paper); }
.footer__grid { display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:60px; }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer__lede { font-family:var(--serif); font-size:clamp(1.4rem,1.1rem+1.4vw,2rem); line-height:1.16; font-weight:300; max-width:22ch; }
.foot-col__label { font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); margin-bottom:14px; }
.foot-col a, .foot-col p { font-family:var(--mono); font-size:.78rem; line-height:1.9; display:block; width:fit-content; max-width:100%; overflow-wrap:anywhere; }
.foot-col a { position:relative; }
.foot-col a:hover { color:var(--vermilion); }
.footer__mark { text-align:center; padding:clamp(30px,5vw,60px) 0 26px; border-top:1.5px solid var(--ink); }
.footer__mark svg, .footer__mark img { width:min(66%,440px); height:auto; opacity:.92; margin:0 auto; display:block; filter:url(#press); }
/* left-aligned so nothing sits under the fixed chat launcher (lower-right stays clear) */
.footer__credit { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:clamp(16px,3vw,44px);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45);
  padding:0 clamp(90px,12vw,150px) 34px 0; }
.footer__credit a { transition:color .3s ease; }
.footer__credit a:hover { color:var(--vermilion); }
.footer--ink .footer__credit a:hover { color:var(--vermilion); }
/* crisp pixel-art POST205 mark */
.credit-205 { display:inline-flex; align-items:center; gap:8px; }
.p205 { display:inline-flex; }
.p205 svg { height:13px; width:auto; display:block; }
.credit-205:hover .p205 { color:var(--vermilion); }

/* ============================================================
   ASK-THE-STUDIO — floating concierge
   ============================================================ */
.chat { position:fixed; right:clamp(14px,2vw,32px); bottom:clamp(16px,2.2vw,30px); z-index:400;
  width:340px; max-width:calc(100vw - 28px); color:var(--ink); }
.chat__launch { display:flex; align-items:center; gap:13px; margin-left:auto; background:transparent; border:none; color:var(--ink); }
.chat__launch-label { font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-align:right; line-height:1.3; }
.chat__launch-mark { width:56px; height:56px; border:1.5px solid var(--ink); border-radius:0; display:grid; place-items:center; flex-shrink:0;
  background:var(--paper-3); color:var(--ink); box-shadow:3px 3px 0 var(--vermilion);
  transition:transform .15s ease, box-shadow .15s ease, background .3s ease, color .3s ease; }
.chat__launch-mark svg { width:27px; height:27px; }
.chat__launch:hover .chat__launch-mark { background:var(--ink); color:var(--paper); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--vermilion); }
.chat[data-open="true"] .chat__launch { display:none; }
.chat__panel { display:none; background:var(--paper-3); border:1.5px solid var(--ink); box-shadow:10px 12px 0 rgba(var(--ink-rgb),.9); padding:18px 18px 15px; }
.chat[data-open="true"] .chat__panel { display:block; animation:chatIn .5s var(--ease); }
@keyframes chatIn { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.chat__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:12px; border-bottom:1.5px solid var(--ink); }
.chat__eyebrow { font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-70); }
.chat__close { background:transparent; border:none; color:var(--ink); font-size:1.1rem; line-height:1; opacity:.6; }
.chat__close:hover { opacity:1; }
.chat__log { display:flex; flex-direction:column; gap:12px; max-height:46vh; overflow-y:auto; margin-bottom:13px; padding-right:4px; }
.chat__log::-webkit-scrollbar { width:3px; }
.chat__log::-webkit-scrollbar-thumb { background:var(--ink-20); }
.chat__msg { font-family:var(--mono); font-size:.8rem; line-height:1.6; max-width:94%; }
.chat__msg--bot { color:var(--ink); }
.chat__msg--user { color:var(--vermilion); align-self:flex-end; text-align:right; }
.chat__msg--typing { opacity:.5; }
.chat__form { display:flex; align-items:center; gap:10px; border-top:1.5px solid var(--ink); padding-top:12px; }
.chat__input { flex:1; background:transparent; border:none; outline:none; font-family:var(--mono); font-size:16px; color:var(--ink); }
.chat__input::placeholder { color:var(--ink-45); }
.chat__send { background:transparent; border:none; color:var(--vermilion); font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.chat__send:hover { color:var(--ink); }
@media (max-width:640px){
  .chat { left:12px; right:12px; width:auto; }
  .chat__input { font-size:16px; }
  .chat__log { max-height:40vh; }
}

/* ============================================================
   BOOKING MODAL — reserve a seat + GCash deposit
   ============================================================ */
.modal { position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s .4s; }
.modal.open { opacity:1; visibility:visible; transition:opacity .4s ease; }
.modal__backdrop { position:absolute; inset:0; background:rgba(var(--ink-rgb),.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.modal__card { position:relative; z-index:1; background:var(--paper); border:1.5px solid var(--ink);
  box-shadow:14px 16px 0 rgba(var(--ink-rgb),.9); max-width:460px; width:100%; max-height:90svh; overflow-y:auto;
  transform:translateY(18px); opacity:0; transition:transform .5s var(--ease), opacity .4s ease; }
.modal.open .modal__card { transform:none; opacity:1; }
.modal__head { padding:20px 24px; border-bottom:1.5px solid var(--ink); display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.modal__eyebrow { font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vermilion); margin-bottom:6px; }
.modal__title { font-family:var(--serif); font-size:1.5rem; line-height:1.04; }
.modal__x { background:transparent; border:none; color:var(--ink); font-size:1.3rem; line-height:1; opacity:.6; }
.modal__x:hover { opacity:1; }
.modal__body { padding:22px 24px; }
.field { margin-bottom:16px; }
.field label { display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-70); margin-bottom:7px; }
/* font-size:16px everywhere prevents iOS Safari's focus auto-zoom (and the stuck zoom after) */
.field input, .field select, .field textarea { width:100%; background:var(--paper-3); border:1.5px solid var(--ink);
  padding:13px 13px; font-family:var(--mono); font-size:16px; color:var(--ink); outline:none; border-radius:0;
  -webkit-appearance:none; appearance:none; }
.field select { padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23201A13' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--vermilion); }
.field textarea { resize:vertical; min-height:64px; }
.field--row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* two-step booking so each step fits without scrolling */
.modal__headr { display:flex; align-items:center; gap:14px; }
.bk-progress { display:inline-flex; gap:5px; }
.bk-progress i { width:16px; height:4px; background:var(--ink-20); display:block; transition:background .3s ease; }
.bk-progress i.on { background:var(--vermilion); }
.bk-actions { display:flex; gap:12px; align-items:stretch; margin-top:2px; }
.bk-actions .btn--ghost { flex:0 0 auto; box-shadow:3px 3px 0 var(--ink); }
.bk-actions .btn--block { flex:1; width:auto; }
.pay { background:var(--paper-2); border:1.5px solid var(--ink); padding:16px; margin:6px 0 16px; }
.pay__row { display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:.76rem; padding:5px 0; }
.pay__row b { font-weight:700; }
.pay__gcash { display:flex; align-items:center; gap:14px; margin-top:12px; padding-top:12px; border-top:1px dotted var(--ink-20); }
.pay__qr { width:112px; height:112px; border:1.5px solid var(--ink); flex-shrink:0; background:#fff; display:grid; place-items:center; padding:5px; }
.pay__qr svg, .pay__qr img { width:100%; height:100%; object-fit:contain; display:block; }
.pay__gcash p { font-family:var(--mono); font-size:.68rem; line-height:1.6; color:var(--ink-70); }
.pay__gcash b { color:var(--ink); font-weight:700; }
/* reference-or-screenshot divider */
.pay__or { display:flex; align-items:center; gap:10px; margin:14px 0 10px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); }
.pay__or::before, .pay__or::after { content:""; flex:1; height:1px; background:var(--ink-20); }
/* proof uploader */
.proof__drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; padding:16px; cursor:pointer; background:var(--paper);
  border:1.5px dashed var(--ink); transition:background .2s var(--ease); }
.proof__drop:hover { background:#fff; }
.proof__cta { font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--ink); }
.proof__hint { font-family:var(--mono); font-size:.6rem; color:var(--ink-45); }
.proof__preview { position:relative; border:1.5px solid var(--ink); background:#fff; }
.proof__preview img { display:block; width:100%; max-height:220px; object-fit:contain; }
.proof__clear { position:absolute; top:8px; right:8px; border:1.5px solid var(--ink); background:var(--paper);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; cursor:pointer; }
.proof__clear:active { transform:translate(1px,1px); }
.modal__note { font-family:var(--mono); font-size:.64rem; line-height:1.7; color:var(--ink-45); margin-top:14px; }
.modal__ok { text-align:center; padding:12px 0; }
.modal__ok svg { width:56px; height:56px; margin:0 auto 16px; color:var(--vermilion); }
.modal__ok h3 { font-family:var(--serif); font-size:1.6rem; margin-bottom:10px; }
.modal__ok p { font-family:var(--mono); font-size:.78rem; line-height:1.75; color:var(--ink-70); max-width:32ch; margin:0 auto; }

/* honeypot */
.hp { position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }

/* ============================================================
   SIDE SOCIAL (vertical)
   ============================================================ */
.side-social { position:fixed; left:clamp(6px,1vw,16px); top:50%; transform:translateY(-50%); z-index:120;
  display:flex; flex-direction:column; gap:20px; align-items:center; }
.side-social::before { content:""; width:1px; height:40px; background:var(--ink-20); }
.side-social a { writing-mode:vertical-rl; font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-70); }
.side-social a:hover { color:var(--vermilion); }
@media (max-width:1023px){ .side-social{ display:none; } }

/* ============================================================
   MOBILE / iOS HARDENING
   (learnings from 01bigfight: 16px inputs, dvh, safe-area, touch)
   ============================================================ */

/* Touch devices have no hover: the halftone must resolve and the print
   titles must show without a pointer. Reveal them by default on touch. */
@media (hover:none), (pointer:coarse) {
  .work__meta { opacity:1; transform:none; }
  .work__art::after { opacity:.42; background-size:4px 4px; }  /* lighter screen so prints read */
  .card:hover, .work:hover .work__art { transform:none; }     /* no sticky hover-stuck states */
  .btn:active { background:var(--vermilion); border-color:var(--vermilion); }
  .card:active { transform:translateY(-3px); }
}

/* Bigger tap targets (min 44px) for the small controls */
.chat__close, .modal__x { min-width:44px; min-height:44px; display:inline-grid; place-items:center;
  margin:-10px -10px -10px 0; }
.chat__send { min-height:44px; padding:0 6px; }
.menu-btn { min-height:44px; padding:6px 4px; }
@media (max-width:959px){ .nav a { padding:8px 0; } }

/* Safe-area insets on the fixed pieces (Face ID iPhones) */
@media (max-width:640px){
  .chat { bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .side-social { display:none; }
}

/* ---- mobile hero + chat + menu breathing room ---- */
@media (max-width:680px){
  /* live strip: one clean line — drop coordinates + place so it can't wrap into the lede */
  .hero__live { top:clamp(58px,8vh,82px); gap:8px; }
  .hero__live .live__geo, .hero__live .live__place, .hero__live .live__sep { display:none; }
  /* room for the wordmark + foot above the floating chat mark */
  .hero { padding-bottom:96px; }
  /* chat: mark only — dropping the label stops it colliding with the foot text */
  .chat__launch-label { display:none; }
  .chat__launch-mark { width:52px; height:52px; }
  /* never let the chat sit on top of the open menu */
  body.menu-open .chat { display:none; }
}

/* menu: centre the reserve CTA as a real square button, not orphaned text */
@media (max-width:959px){
  .nav__cta { align-self:center; border:1.5px solid var(--ink); padding:12px 22px !important;
    box-shadow:4px 4px 0 var(--vermilion); margin-top:10px; }
}

/* Booking modal: on a phone, dodge the software keyboard.
   Top-align the card and let it flow, size to dvh, pad for the home bar. */
@media (max-width:640px){
  .modal { place-items:start center; padding:0; }
  .modal__card { max-width:100%; max-height:100dvh; height:auto; min-height:100dvh;
    box-shadow:none; border-left:none; border-right:none; border-top:none; }
  .modal__body { padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); }
  .modal__head { position:sticky; top:0; background:var(--paper); z-index:2; }
  .field--row { grid-template-columns:1fr 1fr; }
}

/* Very small phones: stack the two-up field rows */
@media (max-width:380px){
  .field--row { grid-template-columns:1fr; }
}

/* utility */
.center { text-align:center; }
.mt-l { margin-top:clamp(30px,5vw,54px); }
.spin { animation:spin 1s linear infinite; }
@keyframes spin { to{ transform:rotate(360deg); } }