@font-face{font-family:'InterVar';src:url('/assets/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* W7-7c (ORDER W7 §8.29 (b), §8.31 (b)): the typewriter face for every English title and subheading.
   "American Typewriter" where the device has it (iPhone, iPad, Mac: no download); else Cutive (SIL OFL,
   /fonts/Cutive-OFL.txt), one Latin WOFF2, self-hosted. Its size-adjust and metric overrides are measured
   against American Typewriter at the headings' weight (640) so the two break lines alike; the Courier New
   face below stands in while Cutive arrives, tuned to the same width, so the swap moves nothing. Android
   has no Courier New but ships Droid Sans Mono, whose advance is Courier New's (0.6 em; every glyph of a
   monospace is one width), so the same face, tuned the same way, takes it (W9.0 (c), §8.34 (c)(1)). A device
   with no monospace at all gets the site's own Inter tuned to Cutive's width (104.3 %: within 0.13 % over the
   site's headings, the same height) — close, not exact, since Inter is proportional. CJK is not
   in either face's range: Chinese falls through to the system's face. Never a third-party font request. */
@font-face{font-family:'Yapify Typewriter';src:url('/fonts/cutive-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;size-adjust:87.9%;ascent-override:108.1%;descent-override:31.9%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Yapify Typewriter Fallback';src:local('Courier New'),local('CourierNewPSMT'),local('Droid Sans Mono'),local('DroidSansMono');font-weight:400;font-style:normal;size-adjust:90.6%;ascent-override:104.9%;descent-override:30.9%;line-gap-override:0%}@font-face{font-family:'Yapify Typewriter Sans Fallback';src:url('/assets/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;size-adjust:104.3%;ascent-override:91.1%;descent-override:26.9%;line-gap-override:0%}
/* ==========================================================
   YAPIFY — one language, two themes, follows the system
   ========================================================== */
:root{
  --red:#E62E30; --orange:#F69220; --green:#138017;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:140ms; --t:220ms; --t-slow:420ms;
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:24px;
  --max:1200px; --gut:clamp(20px,5vw,64px);
  --font:"InterVar",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:"American Typewriter","Yapify Typewriter","Yapify Typewriter Fallback","Yapify Typewriter Sans Fallback",var(--font);
}
html[data-theme="light"]{
  --bg:#FCFAF6; --bg-2:#F5EFE6; --surface:rgba(255,255,255,.74); --surface-2:#fff;
  --line:rgba(32,24,16,.11); --line-strong:rgba(32,24,16,.22);
  --ink:#17130F; --ink-2:rgba(23,19,15,.68); --ink-3:rgba(23,19,15,.46);
  --accent:#D9271F; --accent-ink:#fff; --accent-fill:#D9271F;
  --glass:rgba(255,255,255,.70); --glass-hi:rgba(255,255,255,.95);
  --shadow:0 22px 58px -30px rgba(70,46,22,.40);
  --bubble:rgba(255,255,255,.56); --bubble-rim:rgba(255,255,255,.85); --bubble-edge:rgba(255,255,255,.5); --bubble-sheen:rgba(255,255,255,.62);
  --doing-veil:linear-gradient(180deg,rgba(252,250,246,.94) 0%,rgba(252,250,246,.78) 26%,rgba(252,250,246,.62) 100%);
  --gallery:#F1EBE2; --gallery-ink:#221C15; --gallery-ink-2:rgba(34,28,21,.70); --gallery-line:rgba(34,28,21,.16); --gallery-veil:radial-gradient(92% 70% at 50% 46%,rgba(245,241,234,.64),rgba(245,241,234,.50) 46%,rgba(245,241,234,.18) 100%);
  --tint:1;
}
html[data-theme="dark"]{
  --bg:#08080A; --bg-2:#111114; --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.115); --line-strong:rgba(255,255,255,.22);
  --ink:#F6F3EF; --ink-2:rgba(246,243,239,.68); --ink-3:rgba(246,243,239,.44);
  --accent:#FF4B44; --accent-ink:#fff; --accent-fill:#D9271F;
  --glass:rgba(26,26,31,.80); --glass-hi:rgba(255,255,255,.16);
  --shadow:0 24px 70px -28px rgba(0,0,0,.9);
  --bubble:rgba(44,44,52,.58); --bubble-rim:rgba(255,255,255,.30); --bubble-edge:rgba(255,255,255,.16); --bubble-sheen:rgba(255,255,255,.20);
  --doing-veil:linear-gradient(180deg,rgba(9,9,11,.93) 0%,rgba(9,9,11,.80) 26%,rgba(9,9,11,.66) 100%);
  --gallery:#141317; --gallery-ink:#F2EEE8; --gallery-ink-2:rgba(242,238,232,.68); --gallery-line:rgba(242,238,232,.16); --gallery-veil:radial-gradient(92% 70% at 50% 46%,rgba(13,12,15,.68),rgba(13,12,15,.58) 46%,rgba(13,12,15,.24) 100%);
  --tint:.94;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.62;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--t-slow) var(--ease),color var(--t-slow) var(--ease);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
/* `--ink-2`, not `--ink-3`. Measured on the built page (D2, 06-contrast.txt):
   --ink-3 at 11.5px/660 is 3.06:1 in light and 4.02:1 in dark, and an 11.5px
   label is nowhere near WCAG's large-text exemption, so 4.5:1 is the bar and
   the site was failing 1.4.3 on every page that carries an eyebrow. --ink-2
   measures 6.28:1 and 8.42:1. Same repair B2a made to `.factLabel`, same
   token, same numbers — this is the site-wide instance of it. */
.eyebrow{font-size:11.5px;font-weight:660;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:9px;margin:0 0 18px}
.eyebrow::before{content:"";width:17px;height:16px;background:url('/assets/tomato-tiny.png') center/contain no-repeat;flex:none;margin-top:-2px}
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.035em;line-height:1.06}
/* The one rule (§8.31 (b)): titles and subheadings, never body, buttons, labels, chips or eyebrows. */
h1,h2,h3,.subhead{font-family:var(--font-head);letter-spacing:-.015em}
h2{font-size:clamp(30px,4.3vw,54px);line-height:1.08}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.028em;line-height:1.2}
h4{font-size:17px;letter-spacing:-.02em;line-height:1.3}
p{margin:0 0 1em}
.lead{font-size:clamp(16.5px,1.55vw,19.5px);line-height:1.6;color:var(--ink-2);max-width:60ch}
.muted{color:var(--ink-2)}
.sec{padding:clamp(56px,7vw,96px) 0;position:relative}
br.d{display:inline}
@media(max-width:1000px){br.d{display:none}}


/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;transition:top var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease)}
.nav.stuck{background:var(--glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom-color:var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;padding:4px;margin:-4px;border-radius:12px}
.brand img.mark{width:34px;flex:none}
.brand img.word{height:19px;width:auto}
.brand .word-light{display:none}
html[data-theme="light"] .brand .word-dark{display:none}
html[data-theme="light"] .brand .word-light{display:block}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-links > a,.menu-trigger{position:relative;font-size:14.5px;font-weight:520;color:var(--ink-2);padding:8px 14px;border-radius:100px;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav-links > a:hover,.menu-trigger:hover{color:var(--ink);background:var(--surface)}
.nav-links > a.active{color:var(--ink)}
.nav-links > a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1.5px;background:var(--accent);border-radius:2px}
.nav-tools{display:flex;align-items:center;gap:10px}
.nav:not(.stuck) .nav-links > a,.nav:not(.stuck) .menu-trigger{color:rgba(255,255,255,.80)}
.nav:not(.stuck) .nav-links > a:hover,.nav:not(.stuck) .menu-trigger:hover,.nav:not(.stuck) .menu.open .menu-trigger{color:#fff;background:rgba(255,255,255,.15)}
.nav:not(.stuck) .nav-links > a.active{color:#fff}
html[data-theme="light"] .nav:not(.stuck) .brand .word-dark{display:block}
html[data-theme="light"] .nav:not(.stuck) .brand .word-light{display:none}


/* ==========================================================
   APPLE-STYLE GLASS BUBBLE — thin blur, bright rim, specular sheen
   ========================================================== */
.bubble{
  position:relative;background:var(--bubble);border:0;border-radius:var(--r-xl);
  backdrop-filter:blur(13px) saturate(215%) brightness(1.06);
  -webkit-backdrop-filter:blur(13px) saturate(215%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 var(--bubble-rim),
    inset 0 0 0 1px var(--bubble-edge),
    inset 0 -14px 26px -22px rgba(0,0,0,.4),
    0 20px 44px -18px rgba(0,0,0,.32),
    0 2px 6px rgba(0,0,0,.08);
}
.bubble::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(130% 66% at 10% -12%, var(--bubble-sheen), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 30%);
}
.bubble > *{position:relative;z-index:1}

/* ---------- contact menu ---------- */
.menu{position:relative}
.menu-trigger{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:520;padding:8px 14px;border-radius:100px;color:var(--ink-2)}
.menu-trigger svg{width:11px;height:11px;transition:transform var(--t) var(--ease);opacity:.7}
.menu.open .menu-trigger svg{transform:rotate(180deg)}
.menu-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:262px;padding:8px;z-index:60;border-radius:20px;
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transform-origin:top right;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.menu.open .menu-panel{opacity:1;transform:none;pointer-events:auto}
.menu.open::after{content:"";position:absolute;top:100%;right:0;width:262px;height:12px}
.mi{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;color:var(--ink);transition:background var(--t-fast) var(--ease)}
.mi:hover{background:rgba(255,255,255,.35)}
html[data-theme="dark"] .mi:hover{background:rgba(255,255,255,.10)}
.mi .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--accent);flex:none}
.mi .ic svg{width:14px;height:14px}
.mi small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mi b{font-size:14.5px;font-weight:550;letter-spacing:-.01em}
.menu-more{all:unset;cursor:pointer;display:block;margin:6px 4px 2px;padding:9px 12px;border-radius:13px;text-align:center;font-size:13px;font-weight:580;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);transition:background var(--t-fast) var(--ease)}
.menu-more:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;z-index:130;background:rgba(10,8,6,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
/* the basket and the nav sheet hang off the nav, so their scrim sits under it:
   the page dims, and the button that opened the sheet still closes it. */
.scrim.below-nav{z-index:99}
.pop{position:fixed;z-index:131;left:50%;top:50%;width:min(560px,calc(100vw - 32px));max-height:88svh;overflow:auto;
  transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;padding:clamp(24px,3.2vw,36px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.pop.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.pop h3{margin-bottom:8px;font-size:clamp(23px,2.8vw,30px)}
.pop-close{all:unset;cursor:pointer;position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:100px;display:grid;place-items:center;color:var(--ink-2);z-index:3;
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--bubble-edge);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
html[data-theme="dark"] .pop-close{background:rgba(255,255,255,.12)}
.pop-close:hover{background:rgba(255,255,255,.8);color:var(--ink)}
html[data-theme="dark"] .pop-close:hover{background:rgba(255,255,255,.22);color:#fff}
.pop-close svg{width:14px;height:14px}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.row{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 14px 13px;border-radius:16px;min-width:0;background:rgba(255,255,255,.34);box-shadow:inset 0 0 0 1px var(--bubble-edge);transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
html[data-theme="dark"] .row{background:rgba(255,255,255,.06)}
.row > span:not(.ic2):not(.copied){min-width:0;max-width:100%}
a.row:hover{background:rgba(255,255,255,.6);transform:translateY(-2px)}
html[data-theme="dark"] a.row:hover{background:rgba(255,255,255,.11)}
.row .ic2{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--accent);flex:none}
.row .ic2 svg{width:15px;height:15px}
.row small{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
.row b{font-size:14.5px;font-weight:560;letter-spacing:-.012em;display:block;overflow-wrap:anywhere}

/* ---------- event popover ---------- */
.evpop{position:fixed;z-index:131;left:50%;top:50%;width:min(940px,calc(100vw - 32px));max-height:86svh;
  display:grid;grid-template-columns:40% 1fr;overflow:hidden;
  transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.evpop.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.evpop-media{display:flex;align-items:center;justify-content:center;padding:26px;background:rgba(0,0,0,.05);min-height:0}
html[data-theme="dark"] .evpop-media{background:rgba(255,255,255,.04)}
.evpop-media img{flex:0 1 auto;min-height:0;max-height:100%;max-width:100%;width:auto;height:auto;border-radius:8px;box-shadow:0 16px 38px -16px rgba(0,0,0,.45)}
.evpop-media .bigico{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)}
.evpop-media .bigico svg{width:44px;height:44px}
.evpop-body{padding:clamp(24px,2.6vw,34px);overflow:auto;max-height:86svh;display:flex;flex-direction:column}
.evpop-body h3{margin:6px 0 8px;font-size:clamp(22px,2.5vw,29px)}
.evpop-body .when{font-size:12px;font-weight:660;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.evpop-body .where{font-size:13.5px;color:var(--ink-3);display:flex;align-items:flex-start;gap:7px;margin-bottom:14px}
.evpop-body .where svg{width:14px;height:14px;flex:none;margin-top:3px}
.evpop-body p{font-size:15.3px;color:var(--ink-2);line-height:1.62}
.evpop-foot{margin-top:auto;padding-top:18px}
/* ---------- forms (interest + enquiry share one recipe) ---------- */
.iform{display:none;margin-top:14px;gap:10px;flex-direction:column}
.iform.on{display:flex}
#enq .iform{margin-top:22px}
.iform input,.iform textarea{width:100%;padding:11px 13px;border-radius:12px;font:inherit;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.55);border:0;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
html[data-theme="dark"] .iform input,html[data-theme="dark"] .iform textarea{background:rgba(255,255,255,.07)}
.iform input:focus,.iform textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px color-mix(in srgb,var(--ink) 8%,transparent);background:rgba(255,255,255,.85)}
html[data-theme="dark"] .iform input:focus,html[data-theme="dark"] .iform textarea:focus{background:rgba(255,255,255,.1)}
.iform input[aria-invalid="true"],.iform textarea[aria-invalid="true"],.iform input[aria-invalid="true"]:focus,.iform textarea[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.iform textarea{resize:vertical;min-height:72px}
.iform .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.iform .hint{font-size:12.5px;color:var(--ink-3);margin:0}
.fl{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.fl span i{font-style:normal;font-weight:500;color:var(--ink-3)}
.fl span{padding-left:2px}
.fl .ferr{font-size:13px;font-weight:600;letter-spacing:0;line-height:1.45;color:var(--accent)}
.fl .ferr[hidden]{display:none}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
.form-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.form-note{font-size:12.5px;color:var(--ink-3)}
.form-msg{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:0;display:none}
.form-msg.on{display:block}
.form-msg.err{color:var(--accent)}
.form-msg a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.btn[disabled]{opacity:.62;cursor:progress;transform:none!important;box-shadow:none!important}
.btn .spin{width:14px;height:14px;border-radius:100px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite;display:none}
.btn.busy .spin{display:inline-block}.btn.busy svg{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.form-done{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.form-done[hidden]{display:none}
.done-ic{width:44px;height:44px;border-radius:100px;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);margin-bottom:6px;animation:pop-in .5s var(--ease)}
.done-ic svg{width:20px;height:20px}
@keyframes pop-in{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.form-done h4{font-size:19px;letter-spacing:-.025em}
.form-done p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
.form-done .done-ref{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}
.form-done .btn{margin-top:10px}
.pop-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}

/* copy-to-clipboard rows (WeChat / Rednote) */
.row.copy,.mi.copy{appearance:none;-webkit-appearance:none;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;position:relative}
.row.copy:hover{background:rgba(255,255,255,.6);transform:translateY(-2px)}
html[data-theme="dark"] .row.copy:hover{background:rgba(255,255,255,.10)}
.copied{position:absolute;right:14px;top:14px;font-size:11.5px;font-weight:620;letter-spacing:.06em;text-transform:uppercase;color:var(--green);opacity:0;transform:translateX(4px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);white-space:nowrap}
.copied.on{opacity:1;transform:none}
.row.copy::after,.mi.copy::after{content:"copy";position:absolute;right:14px;top:16px;font-size:10.5px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity var(--t-fast) var(--ease)}
.mi.copy::after{right:12px;top:50%;transform:translateY(-50%)}
.row.copy:hover::after,.mi.copy:hover::after{opacity:1}
.row.copy.done::after,.mi.copy.done::after{opacity:0}
@media(max-width:820px){
  .evpop{grid-template-columns:1fr;max-height:88svh;overflow:auto}
  .evpop-media{height:210px;padding:16px}
  .evpop-body{overflow:visible;max-height:none}
  .iform .two{grid-template-columns:1fr}
  .iform .two.compact{grid-template-columns:1fr 1fr}
  .row.copy::after,.mi.copy::after{opacity:1}
}
@media(hover:none){
  a.row:hover,.row.copy:hover,.mi:hover{background:transparent;transform:none}
  .evcard:hover,.card:hover{transform:none;border-color:var(--line)}
  .evcard:hover .ev-media img,.ph:hover img,.prod:hover img{transform:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:100px;font-size:15px;font-weight:580;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn svg{width:15px;height:15px;transition:transform var(--t) var(--ease)}
.btn:hover{transform:translateY(-2px)} .btn:hover svg{transform:translateX(3px)} .btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:var(--accent-fill);color:var(--accent-ink);box-shadow:0 10px 28px -12px color-mix(in srgb,var(--accent-fill) 70%,transparent)}
.btn-primary:hover{box-shadow:0 18px 40px -14px color-mix(in srgb,var(--accent-fill) 80%,transparent)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn-sm{padding:9px 17px;font-size:14px}

/* The light passing over a red pill. One pass on hover or keyboard focus, never
   a loop: nothing on this site moves while somebody is reading it. `z-index:-1`
   inside the button's own stacking context puts the highlight above the fill and
   under the label, so the words never dim. */
.btn-primary,.sec-link{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.sec-link::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.40) 50%,transparent 68%);
  transform:translateX(-130%)}
.btn-primary:hover::after,.btn-primary:focus-visible::after,
.sec-link:hover::after,.sec-link:focus-visible::after{animation:btn-sweep 620ms var(--ease)}
@keyframes btn-sweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){
  .btn-primary:hover::after,.btn-primary:focus-visible::after,
  .sec-link:hover::after,.sec-link:focus-visible::after{animation:none}
}
.nav .btn-sm{background:var(--accent-fill);color:#fff}

/* ---------- card shell ---------- */
.card{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
html[data-theme="dark"] .card{background:rgba(255,255,255,.042)}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(46px,7vw,88px);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block;filter:saturate(var(--tint)) contrast(1.04);transform:scale(1.06);animation:drift 26s var(--ease) forwards}
@keyframes drift{to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,4,.60) 0%,rgba(6,5,4,.18) 30%,rgba(6,5,4,.60) 82%,rgba(6,5,4,.86) 100%)}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(96deg,rgba(4,4,6,.84) 0%,rgba(4,4,6,.62) 30%,rgba(4,4,6,.20) 58%,rgba(4,4,6,0) 82%)}
.hero-in{position:relative;width:100%}
.hero h1{font-size:clamp(40px,6.2vw,78px);letter-spacing:-.045em;max-width:24ch;color:#FFFDFB;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero h1 .h1-soft{display:block;font-size:.45em;font-weight:500;letter-spacing:-.022em;line-height:1.2;color:rgba(255,253,251,.86);margin-bottom:.34em}
.hero .eyebrow{color:rgba(255,253,251,.72)}
.warmline{display:block;color:#FFD9A8}
.values-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:26px}
.values-line span{font-size:clamp(15px,1.5vw,19px);font-weight:520;letter-spacing:.02em;color:#FFFDFB;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.values-line i{width:5px;height:5px;border-radius:100px;background:var(--red);display:block;flex:none;box-shadow:0 0 0 4px rgba(230,46,48,.22)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.22)}
.hero-cap{position:absolute;right:var(--gut);bottom:14px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,253,251,.62);text-shadow:0 1px 12px rgba(0,0,0,.8);display:flex;align-items:center;gap:8px}
.hero-cap::before{content:"";width:14px;height:13px;background:url('/assets/tomato-tiny.png') center/contain no-repeat;opacity:.9}
@media(max-width:820px){.hero-cap{display:none}}
/* W9.0. A story page's band in the home hero: title, one line, one button. Words only. */
.hero-story{margin-top:30px;max-width:620px;padding:16px 18px 16px 20px;border-radius:var(--r-lg);background:rgba(10,8,7,.46);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#FFFDFB}
.hero-story-title{margin:0;font-size:17px;font-weight:640;letter-spacing:-.02em}
.hero-story-title span{font-weight:500;color:rgba(255,253,251,.78);margin-left:4px}
.hero-story-line{margin:4px 0 12px;font-size:15px;line-height:1.5;color:rgba(255,253,251,.86)}
.hero-story-days{display:block;font-weight:600;color:#FFD9A8}
.hero .hero-story-btn{padding:9px 16px;font-size:14px}
@media(max-width:700px){.hero-story{margin-top:22px;padding:14px 14px 14px 16px}.hero-story-title{font-size:16px}.hero-story-line{font-size:14px}}
@media(max-width:700px){
  .hero-bg img{object-position:50% 60%}
  .hero{padding-bottom:40px}
  .hero h1{font-size:38px;max-width:none}
  .hero h1 .h1-soft{font-size:19px;margin-bottom:10px;max-width:26ch}
  .values-line{gap:8px 11px;margin-top:18px}
  .values-line span{font-size:13.5px;letter-spacing:.01em}
  .values-line i{width:4px;height:4px;box-shadow:0 0 0 3px rgba(230,46,48,.22)}
  .hero-cta{margin-top:24px;gap:10px}
  .hero .btn{padding:11px 19px;font-size:14px}
}

/* ---------- about ---------- */
.about-top{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,4vw,64px);align-items:center}
#about .lead{font-size:clamp(16px,1.5vw,18.5px)}
@media(min-width:1000px){.about-top{grid-template-columns:1.24fr 1fr}}
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:start}
.ph{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--bg-2)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease);filter:saturate(var(--tint))}
.ph:hover img{transform:scale(1.04)}
.about-photos .ph:first-child{margin-top:44px;aspect-ratio:3/4.1}
.about-photos .ph:last-child{aspect-ratio:3/3.5}
@media(max-width:900px){.about-top{grid-template-columns:1fr}.about-photos{order:-1}.about-photos .ph:first-child{margin-top:0;aspect-ratio:3/4}.about-photos .ph:last-child{aspect-ratio:3/4}}
.yap-row{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,3vw,44px);margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--line)}
.yap-block h3{font-size:clamp(19px,2vw,23px);margin-bottom:12px}
.yap-block p{font-size:15.3px;line-height:1.66;color:var(--ink-2);margin:0 0 .9em}
.yap-block p:last-child{margin-bottom:0}
.yap-block em{font-style:normal;color:var(--accent);font-weight:600}
@media(max-width:860px){.yap-row{grid-template-columns:1fr;gap:26px}}
.beliefs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(34px,4vw,54px)}
.belief{padding:26px 24px 28px}
.belief .n{font-size:11px;font-weight:680;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin-bottom:13px;display:block}
.belief p{font-size:15px;color:var(--ink-2);margin:9px 0 0;line-height:1.58}
@media(max-width:900px) and (min-width:701px){.beliefs{grid-template-columns:1fr}}
@media(max-width:700px){
  .beliefs{grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
  .belief{padding:14px 34px 15px 15px;min-height:96px;cursor:pointer}
  .belief .n{font-size:9.5px;letter-spacing:.11em;margin-bottom:6px;line-height:1.35}
  .belief h3{font-size:15px;line-height:1.22;letter-spacing:-.018em}
  .belief p{display:none}
  .belief:nth-child(odd):last-child{grid-column:1/-1}
  .belief:active{transform:scale(.985)}
}
.aoc{margin-top:18px;font-size:12.4px;line-height:1.65;color:var(--ink-3);max-width:96ch}

/* ---------- icon tiles (what we do) ---------- */
.doing{position:relative;isolation:isolate;border-block:1px solid var(--line);overflow:hidden}
.doing-bg{position:absolute;inset:0;z-index:-2}
.doing-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.doing-bg::after{content:"";position:absolute;inset:0;background:var(--doing-veil)}
.head-2{max-width:74ch}
.head-2 .sub{font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;color:var(--ink-2);margin:14px 0 0;max-width:62ch}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.tile{padding:20px 20px 22px}
.tile .kicker{font-size:10.5px;font-weight:660;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px}
.tile h4{font-size:16px}
.tile p{font-size:14px;color:var(--ink-2);margin:7px 0 0;line-height:1.52}
.doing .tile{background:var(--bubble);border:0;backdrop-filter:blur(13px) saturate(200%) brightness(1.04);-webkit-backdrop-filter:blur(13px) saturate(200%) brightness(1.04);
  box-shadow:inset 0 1px 0 var(--bubble-rim),inset 0 0 0 1px var(--bubble-edge),0 16px 38px -18px rgba(0,0,0,.35)}
.doing .tile .kicker{color:var(--accent)}
.tile-more{display:none}
@media(max-width:980px){.tiles{grid-template-columns:1fr 1fr}}
/* phone: two compact tappable tiles per row, full text in a popover */
@media(max-width:700px){
  .tiles{grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
  .tile{padding:14px 34px 15px 15px;cursor:pointer;min-height:96px;display:flex;flex-direction:column;justify-content:flex-start}
  .tile p{display:none}
  .tile .kicker{font-size:9.5px;letter-spacing:.11em;margin-bottom:6px;line-height:1.35}
  .tile h4{font-size:15px;line-height:1.22;letter-spacing:-.018em}
  .tile-more{display:grid;place-items:center;position:absolute;right:9px;bottom:9px;width:24px;height:24px;border-radius:100px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--accent)}
  .tile-more svg{width:11px;height:11px}
  .tile:active{transform:scale(.985)}
}
.svcpop{width:min(480px,calc(100vw - 32px))}
.svcpop h3{font-size:clamp(22px,2.6vw,27px)}

/* ---------- what's on: card grid ---------- */
.ev-home{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;align-items:stretch}
@media(max-width:899px){.ev-home{grid-template-columns:repeat(2,1fr)}}
.sec-more{margin:26px 0 0}
/* coming up: announced events, as rows of words. No card, because a card
   promises a page behind it and these have none yet (W7-7) */
.coming-up{margin-top:34px}
.coming-up h3{font-size:clamp(17px,1.8vw,20px);letter-spacing:-.02em}
.coming-up-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.coming-up-list li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.7fr);gap:4px 24px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.coming-up-title{font-size:16px;font-weight:620;letter-spacing:-.01em;color:var(--ink)}
.coming-up-when{font-size:11.5px;font-weight:660;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.coming-up-line{font-size:14.8px;line-height:1.5;color:var(--ink-2)}
.coming-up--small{margin-top:26px}
.coming-up--small .coming-up-list li{grid-template-columns:minmax(0,1fr) auto;padding:11px 0}
.coming-up--small .coming-up-title{font-size:15px}
.coming-up--small .coming-up-when{text-align:right}
@media(max-width:700px){
  .coming-up{margin-top:24px}
  .coming-up-list li{grid-template-columns:minmax(0,1fr);padding:12px 0}
  .coming-up--small{margin-top:18px}
  .coming-up--small .coming-up-list li{grid-template-columns:minmax(0,1fr)}
  .coming-up--small .coming-up-when{text-align:left}
}
.evcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;width:100%;text-align:left;color:inherit;
  position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
html[data-theme="dark"] .evcard{background:rgba(255,255,255,.042)}
.evcard:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.evcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ev-media{position:relative;background:var(--bg-2);flex:none;overflow:hidden}
.ev-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow) var(--ease)}
.evcard:hover .ev-media img{transform:scale(1.045)}
.ev-txt{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;min-width:0}
.when{font-size:11.5px;font-weight:660;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:9px;display:block}
.ev-txt h3{margin-bottom:8px}
.where{font-size:13.2px;color:var(--ink-3);display:flex;align-items:flex-start;gap:7px;margin-bottom:13px}
.where svg{width:14px;height:14px;flex:none;margin-top:3px}
.ev-txt p{font-size:14.8px;color:var(--ink-2);line-height:1.56;margin:0}
.ev-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;flex-wrap:wrap}
.tag{font-size:12.2px;font-weight:540;padding:5px 11px;border-radius:100px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.more{margin-left:auto;font-size:13px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.more svg{width:12px;height:12px;transition:transform var(--t) var(--ease)}
.evcard:hover .more svg{transform:translateX(3px)}
.ev-more{display:none}
/* phone: a 2-column grid of compact cards — cover, date, title, "Details";
   everything else lives in the popover */
@media(max-width:700px){
  .ev-home{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
  #whats-on .head-2{margin-bottom:16px}
  .evcard{flex-direction:column;min-height:0;border-radius:18px}
  .evcard .ev-media{width:100%;height:auto;aspect-ratio:4/5}
  .ev-media img{object-position:var(--pos,50% 18%)}
  .ev-txt{padding:11px 12px 12px}
  .when{font-size:9.8px;letter-spacing:.1em;margin-bottom:5px;line-height:1.35}
  .ev-txt h3{font-size:14.5px;line-height:1.22;letter-spacing:-.02em;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .where{font-size:11.5px;margin-bottom:0;gap:5px}
  .where svg{width:12px;height:12px;margin-top:2px}
  .where > span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .ev-txt p{display:none}
  .ev-foot{padding-top:9px;gap:6px}
  .tag{display:none}
  .more{margin-left:0;font-size:12px}
  /* an odd last card spans both columns rather than leaving a hole (poster left, text right) */
  .ev-home .evcard:nth-child(odd):last-child{grid-column:1/-1;flex-direction:row;align-items:stretch}
  .ev-home .evcard:nth-child(odd):last-child .ev-media{width:38%;aspect-ratio:auto;align-self:stretch}
  .ev-home .evcard:nth-child(odd):last-child .ev-media img{object-position:50% 50%}
  .ev-home .evcard:nth-child(odd):last-child .ev-txt{padding:14px}
  .ev-home .evcard:nth-child(odd):last-child h3{font-size:16px}
  .ev-home .evcard:nth-child(odd):last-child .ev-txt p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12.8px;line-height:1.45;margin-top:4px}
}

/* ---------- events page: one small-card grid (4 / 3 / 2 a row) ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1199px){.ev-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:899px){.ev-grid{grid-template-columns:repeat(2,1fr)}}
.evcard.grid{flex-direction:column;min-height:0}
.evcard.grid .ev-media{width:100%;aspect-ratio:4/3;align-self:auto}
.evcard.grid .ev-media img{object-position:var(--pos,50% 0)}
.evcard.grid .ev-txt{padding:14px 16px 16px}
.evcard.grid .when{font-size:10.8px;letter-spacing:.11em;margin-bottom:6px}
.evcard.grid h3{font-size:16.5px;line-height:1.22;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ink-3 sits at 3.1:1 on the card; the venue line is required copy here, so it takes ink-2 */
.evcard.grid .where{font-size:12.4px;margin-bottom:8px;color:var(--ink-2)}
.evcard.grid .where > span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.evcard.grid .ev-txt p{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.evcard.grid .ev-foot{padding-top:12px;gap:6px}
.evcard.grid .tag{display:inline-block;font-size:11.4px;padding:4px 9px}
.evcard.grid .more{margin-left:auto;font-size:12.4px}
@media(max-width:700px){
  .ev-grid{gap:16px}
  .evcard.grid .ev-txt{padding:11px 12px 13px}
  .evcard.grid h3{font-size:14.5px}
  .evcard.grid .where{font-size:11.5px;margin-bottom:6px}
  .evcard.grid .ev-txt p{display:none}
  .evcard.grid .tag{font-size:10.6px;padding:3px 8px}
  .evcard.grid .more{font-size:11.6px}
}

/* ---------- products ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.prod img{width:100%;aspect-ratio:5/3;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.prod:hover img{transform:scale(1.05)}
.prod figcaption{padding:15px 19px 18px;font-size:13.8px;color:var(--ink-2)}
@media(max-width:820px) and (min-width:701px){.prod-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .prod-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
  .prod{border-radius:18px}
  .prod img{aspect-ratio:1/1}
  .prod figcaption{padding:10px 12px 12px;font-size:12.5px;line-height:1.4}
  .prod:nth-child(odd):last-child{grid-column:1/-1}
  .prod:nth-child(odd):last-child img{aspect-ratio:5/3}
}

/* ---------- pottery boy gallery ---------- */
.gallery{position:relative;isolation:isolate;background:var(--gallery);color:var(--gallery-ink);padding:clamp(66px,8vw,110px) 0;border-block:1px solid var(--gallery-line);overflow:hidden}
.gallery-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.gallery-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.06);filter:contrast(1.08) saturate(1.08)}
.gallery-bg::after{content:"";position:absolute;inset:0;background:var(--gallery-veil)}
.g-intro{position:relative}
.g-face{border-radius:4px;overflow:hidden;width:clamp(150px,17vw,210px);flex:none;box-shadow:0 18px 44px -22px rgba(0,0,0,.5)}
.g-face img{width:100%;display:block}
.g-who{display:flex;gap:clamp(18px,2.4vw,30px);align-items:flex-start}
.gallery .label{font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gallery-ink-2);margin:0 0 22px;text-align:center}
.gallery h2{font-size:clamp(28px,3.9vw,46px);font-weight:400;letter-spacing:-.02em;text-align:center;max-width:22ch;margin:0 auto}
.g-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,54px);align-items:center;max-width:1000px;margin:clamp(34px,4vw,54px) auto 0}
.g-photo{border-radius:4px;overflow:hidden;background:rgba(0,0,0,.05)}
.g-photo img{width:100%;transition:transform 900ms var(--ease)}
.g-photo:hover img{transform:scale(1.02)}
.g-intro p{font-size:15px;line-height:1.68;color:var(--gallery-ink);opacity:.9;margin:0 0 .85em}
.g-intro p:last-child{margin-bottom:0}
.g-intro .who{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gallery-ink-2);margin-bottom:14px;display:block}
@media(max-width:860px){.g-intro{grid-template-columns:1fr}}
@media(max-width:520px){.g-who{flex-direction:column}.g-face{width:150px}}
.g-works{max-width:1000px;margin:clamp(40px,4.6vw,64px) auto 0}
.g-works .cap{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gallery-ink-2);margin:0 0 18px}
.g-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.g-work figure{margin:0;border-radius:3px;overflow:hidden;background:rgba(0,0,0,.04)}
.g-work img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 800ms var(--ease)}
.g-work:hover img{transform:scale(1.03)}
.g-work figcaption{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gallery-ink-2)}
@media(max-width:700px){.g-row{grid-template-columns:1fr 1fr;gap:10px}.g-work:nth-child(odd):last-child{grid-column:1/-1}.g-work:nth-child(odd):last-child img{aspect-ratio:16/10}}
.g-ours{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3.4vw,50px);align-items:center;max-width:1000px;margin:clamp(44px,5vw,70px) auto 0;
  padding-top:clamp(32px,3.6vw,46px);border-top:1px solid var(--gallery-line)}
.g-ours .shot{width:clamp(220px,26vw,320px);border-radius:3px;overflow:hidden;background:rgba(0,0,0,.04)}
.g-ours h3{font-size:clamp(20px,2.3vw,26px);font-weight:400;letter-spacing:-.015em;margin-bottom:12px}
.g-ours p{font-size:15px;line-height:1.7;color:var(--gallery-ink);opacity:.88;margin:0 0 .85em}
.g-ours .note{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gallery-ink-2);margin:0}
@media(max-width:760px){.g-ours{grid-template-columns:1fr}.g-ours .shot{width:100%;max-width:340px}}

/* ---------- footer ---------- */
footer{padding:48px 0 36px;border-top:1px solid var(--line);background:var(--bg)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-size:14px;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.foot-links a:hover{color:var(--accent)}
.foot-contact{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:var(--ink-2)}
.foot-contact a:hover{color:var(--accent)}
.legal{margin-top:20px;font-size:12.6px;color:var(--ink-3);line-height:1.8}
.legal b{color:var(--ink-2);font-weight:560}
.legal-row{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-top:8px}

/* ---------- sign-in entry (nav, right of the Contact menu) ---------- */
/* An icon, not another word: the row already carries six labels and a seventh
   would push the brand mark off a 900px screen. The person mark is the account
   affordance every site uses; the tomato is already spoken for by the floating
   home link, so reusing it here would have meant two tomatoes meaning two
   different things on the same page. */
.nav-links > a.nav-signin{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;margin-left:8px;border-radius:100px;border:1px solid var(--line-strong);color:var(--ink-2);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.nav-links > a.nav-signin svg{width:17px;height:17px;display:block}
.nav-links > a.nav-signin:hover{color:var(--ink);background:var(--surface);border-color:var(--ink-3)}
.nav-links > a.nav-signin:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Over the home hero, where the nav is transparent and the photo is dark. */
.nav:not(.stuck) .nav-links > a.nav-signin{color:rgba(255,255,255,.84);border-color:rgba(255,255,255,.30);background:transparent}
.nav:not(.stuck) .nav-links > a.nav-signin:hover{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.52)}
/* The label. The site had no tooltip, so this is one built from the same glass
   tokens as the contact bubble, at a size that suits five words. `title` is on
   the anchor as well, for the pointer that never hovers long enough and for
   anything that reads the DOM rather than the paint. */
.nav-signin-tip{position:absolute;top:calc(100% + 10px);right:0;z-index:1;white-space:nowrap;
  padding:6px 11px;border-radius:11px;font-size:12.5px;font-weight:560;letter-spacing:-.005em;color:var(--ink);
  background:var(--bubble);backdrop-filter:blur(13px) saturate(215%) brightness(1.06);-webkit-backdrop-filter:blur(13px) saturate(215%) brightness(1.06);
  box-shadow:inset 0 0 0 1px var(--bubble-edge),0 12px 26px -14px rgba(0,0,0,.42);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.nav-links > a.nav-signin:hover .nav-signin-tip,
.nav-links > a.nav-signin:focus-visible .nav-signin-tip{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.nav-signin-tip{transition:none;transform:none}}
/* Below 820px the nav links collapse into the burger sheet, and the sign-in
   entry goes with them — the sheet carries it as a text row. This needs its own
   rule because `.nav-links > a.nav-signin` outranks the blanket
   `.nav-links > a{display:none}` further down. */
@media(max-width:820px){.nav-links > a.nav-signin{display:none}}

/* ---------- burger + mobile sheet ---------- */
.burger{all:unset;cursor:pointer;display:none;width:38px;height:38px;border-radius:100px;color:var(--ink-2);border:1px solid var(--line);text-align:center}
.burger svg{width:18px;height:18px;vertical-align:middle}
.burger:hover{background:var(--surface);color:var(--ink)}
.nav:not(.stuck) .burger{color:rgba(255,255,255,.84);border-color:rgba(255,255,255,.30)}
@media(max-width:820px){.burger{display:inline-block}}
.sheet{position:fixed;z-index:131;top:66px;left:12px;right:12px;padding:46px 10px 10px;border-radius:22px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
body.has-ribbon .sheet{top:100px}
.sheet.on{opacity:1;transform:none;pointer-events:auto}
.sheet a,.sheet button{all:unset;cursor:pointer;font-size:16.5px;font-weight:560;color:var(--ink);padding:13px 16px;border-radius:14px}
.sheet a:hover,.sheet button:hover{background:rgba(255,255,255,.4)}
html[data-theme="dark"] .sheet a:hover,html[data-theme="dark"] .sheet button:hover{background:rgba(255,255,255,.10)}
/* The same entry as the nav icon, spelled out. It sits under a hairline because
   it is an account action, not another part of the site to browse. */
.sheet .sheet-signin{margin-top:8px;padding-top:16px;border-top:1px solid var(--line);border-radius:0;color:var(--accent);font-weight:620}
.sheet .sheet-signin:hover{border-radius:0 0 14px 14px}

/* ---------- reveal ---------- */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}html.js .rv{opacity:1;transform:none}
}
@media(max-width:820px){
  .nav-links > a{display:none} .menu{display:none}
  .nav-in{gap:12px} body{font-size:16px}
}
@media(max-width:400px){.nav .btn-sm{font-size:13px;padding:8px 13px}}

/* ---------- legal pages ---------- */
.doc{max-width:78ch;margin:0 auto;padding:clamp(110px,13vh,150px) var(--gut) clamp(70px,9vw,110px)}
.doc h1{font-size:clamp(30px,4.2vw,46px);margin-bottom:10px}
.doc .updated{font-size:12px;font-weight:640;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:34px}
.doc h2{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.026em;margin:38px 0 12px}
.doc p,.doc li{font-size:16px;line-height:1.68;color:var(--ink-2)}
.doc ul{padding-left:20px;margin:0 0 1em}
.doc li{margin-bottom:.45em}
.doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{text-decoration-thickness:2px}
.doc .box{margin:30px 0;padding:20px 22px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.doc .box p{margin:0;font-size:15px}
.doc .back{display:inline-flex;align-items:center;gap:8px;margin-top:44px;font-size:14.5px;font-weight:580;color:var(--accent)}
.doc .back svg{width:14px;height:14px;transition:transform var(--t) var(--ease)}
.doc .back:hover svg{transform:translateX(-3px)}

/* app-style icons: the SVG square IS the icon — the container draws nothing */
.ic.brand,.ic2.brand{background:none!important;box-shadow:none!important;border-radius:0;overflow:visible;display:grid;place-items:center}
.ic.brand svg{width:32px;height:32px;display:block}
.ic2.brand svg{width:36px;height:36px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.16))}
html[data-theme="dark"] .ic2.brand svg{filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}

/* ---------- photo popover ---------- */
.imgpop{width:min(860px,calc(100vw - 32px));padding:14px 14px 12px}
.imgpop figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.imgpop img{max-width:100%;max-height:min(74svh,760px);width:auto;height:auto;border-radius:14px;box-shadow:0 18px 44px -20px rgba(0,0,0,.5)}
.imgpop figcaption{font-size:13px;color:var(--ink-2);text-align:center;padding:0 8px 4px;line-height:1.5}
.imgpop .pop-close{top:22px;right:22px}
/* a picture that waits: no src until it is about to be seen, when site.js
   gives it one. Without scripting its <noscript> twin is shown instead (W7-7) */
img[data-src]{opacity:0}
html:not(.js) img[data-src]{display:none}
[data-img]{cursor:zoom-in}
[data-img]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- basket button ---------- */
.basket-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--ink);transition:background var(--t-fast) var(--ease);position:relative}
.basket-btn:hover{background:rgba(0,0,0,.06)}
html[data-theme="dark"] .basket-btn:hover{background:rgba(255,255,255,.08)}
.basket-btn svg{width:22px;height:22px}
.basket-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;line-height:16px;border-radius:8px;text-align:center;pointer-events:none}

/* ---------- basket bubble overlay ---------- */
.basket-bubble{position:fixed;inset:auto 16px 80px auto;width:min(420px,calc(100vw - 32px));max-height:min(80svh,640px);display:flex;flex-direction:column;z-index:220;border-radius:var(--r-xl);background:var(--bubble);backdrop-filter:blur(13px) saturate(215%) brightness(1.06);-webkit-backdrop-filter:blur(13px) saturate(215%) brightness(1.06);border:1.5px solid var(--bubble-rim);box-shadow:var(--shadow);transform:translateY(12px) scale(.97);opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.basket-bubble.is-open{opacity:1;transform:none;pointer-events:auto}
.basket-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.basket-head h4{margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em}
.basket-body{flex:1;overflow-y:auto;padding:16px 20px;min-height:60px}
.basket-empty{text-align:center;padding:24px 0}
.basket-empty p{margin:0 0 12px;color:var(--ink-2)}
.basket-empty a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.basket-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.basket-line{display:grid;grid-template-columns:56px 1fr auto auto;align-items:center;gap:12px}
.basket-line-img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex-shrink:0}
.basket-line-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.basket-line-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.basket-line-price{font-size:12.5px;color:var(--ink-2)}
.basket-line-qty{display:flex;align-items:center;gap:6px}
.qty-btn{background:none;border:1.5px solid var(--line-strong);border-radius:6px;width:26px;height:26px;display:grid;place-items:center;font-size:16px;line-height:1;cursor:pointer;color:var(--ink);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.qty-btn:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}
.qty-val{font-size:14px;font-weight:600;min-width:20px;text-align:center}
.basket-line-remove{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;color:var(--ink-3);display:grid;place-items:center;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.basket-line-remove svg{width:16px;height:16px}
.basket-line-remove:hover{color:var(--accent);background:rgba(217,39,31,.08)}
.basket-foot{padding:14px 20px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}

/* ---------- basket: delivery choice ---------- */
.basket-delivery{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.basket-delivery legend{padding:0;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.basket-delivery-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:10px;padding:9px 11px;border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.basket-delivery-opt[hidden]{display:none}
.basket-delivery-opt:hover{border-color:var(--line-strong);background:var(--surface)}
.basket-delivery-opt:has(input:checked){border-color:var(--accent);background:rgba(217,39,31,.05)}
.basket-delivery-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.basket-delivery-opt input{accent-color:var(--accent);margin:2px 0 0;width:15px;height:15px;flex-shrink:0}
.bd-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-text b{font-size:13.5px;font-weight:600;line-height:1.3}
.bd-text small{font-size:12px;color:var(--ink-2);line-height:1.4}
.bd-amount{font-size:13.5px;font-weight:600;white-space:nowrap}

/* ---------- basket: totals ---------- */
.basket-totals{display:flex;flex-direction:column;gap:5px;padding-top:11px;border-top:1px solid var(--line)}
.basket-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2)}
.basket-row[hidden]{display:none}
.basket-row-total{font-size:16px;font-weight:700;color:var(--ink);padding-top:5px}
.basket-gst{margin:2px 0 0;font-size:11.5px;color:var(--ink-3)}
.basket-minimum{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.basket-minimum[hidden]{display:none}
.basket-error{margin:0;padding:9px 11px;border-radius:var(--r-sm);background:rgba(217,39,31,.08);border:1.5px solid rgba(217,39,31,.28);font-size:12.5px;line-height:1.45;color:var(--ink)}
.basket-error[hidden]{display:none}
.basket-error a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.basket-actions{display:flex;flex-direction:column;gap:8px}
.basket-actions .btn[hidden]{display:none}
.basket-actions .btn:disabled{opacity:.5;cursor:not-allowed}
.basket-shop-closed{font-size:13px;color:var(--ink-2);text-align:center}
.basket-shop-closed a{color:var(--accent);font-weight:600}
.basket-close{width:28px;height:28px}
/* .sheet a,.sheet button uses all:unset, so the sheet's close button restates its own look */
.sheet .sheet-close{position:absolute;top:8px;right:8px;width:34px;height:34px;padding:0;flex:none;
  border-radius:100px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);z-index:3;
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--bubble-edge);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
html[data-theme="dark"] .sheet .sheet-close{background:rgba(255,255,255,.12)}
.sheet .sheet-close:hover{background:rgba(255,255,255,.8);color:var(--ink)}
html[data-theme="dark"] .sheet .sheet-close:hover{background:rgba(255,255,255,.22);color:#fff}
.sheet .sheet-close svg{width:14px;height:14px}

/* ---------- phones: pop-ups sized to the hand, with a real close button ---------- */
@media(max-width:700px){
  .pop{width:min(92vw,560px);max-height:68svh}
  .evpop{width:92vw;max-height:68svh;overflow:auto}
  .basket-bubble{inset:auto 4vw 72px 4vw;width:92vw;max-height:68svh}
  .sheet{left:4vw;right:4vw;max-height:68svh;overflow:auto}
  .pop-close,.basket-close,.sheet .sheet-close{width:44px;height:44px}
  .pop-close svg,.basket-close svg,.sheet .sheet-close svg{width:17px;height:17px}
  .pop-close{top:10px;right:10px}
  .imgpop .pop-close{top:10px;right:10px}
  .imgpop img{max-height:44svh}
  .evpop .pop-close{top:10px;right:10px}
}
@media(hover:none){
  .basket-delivery-opt:hover{border-color:var(--line);background:transparent}
  .basket-delivery-opt:has(input:checked):hover{border-color:var(--accent);background:rgba(217,39,31,.05)}
}

/* ========== EVENTS / SHOP PAGE TEMPLATES ========== */

/* ---------- page hero ---------- */
/* --nav-h is the fixed nav's own height; the clamp below is the clear space under it. */
:root{--nav-h:68px}
.page-hero{position:relative;isolation:isolate;padding:calc(var(--nav-h) + clamp(36px,5vh,56px)) var(--gut) clamp(20px,3vw,32px);text-align:center}
.page-hero > .wrap{position:relative;z-index:1}

/* the four-corner tomato entrance — the member pages' gesture, clipped to the hero */
/* The layer starts BELOW the fixed nav, not at the top of the hero: the nav is
   painted above everything on the page, so a tomato peeking in at the very top
   corner is a tomato nobody sees. Clipped to the band between the nav and the
   first row of cards, all four arrive where they can be read. */
.hero-corners{position:absolute;inset:var(--nav-h) 0 0 0;z-index:0;overflow:hidden;pointer-events:none}
.hero-corner{position:absolute;width:104px;height:104px;
  background:url('/assets/tomato-badge.png') center/contain no-repeat;
  --corner-opacity:.85;opacity:var(--corner-opacity);
  animation:corner-in 240ms cubic-bezier(.22,.61,.36,1) both}
.hero-corner[data-corner="tl"]{top:-30px;left:-30px;--corner-from:translate(-18px,-18px) rotate(-12deg);animation-delay:0ms}
.hero-corner[data-corner="tr"]{top:-30px;right:-30px;--corner-from:translate(18px,-18px) rotate(12deg);animation-delay:60ms}
.hero-corner[data-corner="bl"]{bottom:-30px;left:-30px;--corner-from:translate(-18px,18px) rotate(12deg);animation-delay:120ms}
.hero-corner[data-corner="br"]{bottom:-30px;right:-30px;--corner-from:translate(18px,18px) rotate(-12deg);animation-delay:180ms}
@keyframes corner-in{from{opacity:0;transform:var(--corner-from)}to{opacity:var(--corner-opacity);transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero-corner{animation:none;opacity:var(--corner-opacity);transform:none}
}
/* Phone: two corners, not four — the same pair the member pages keep, for the
   same reasons (the top-right is where the eye starts, the bottom-left is where
   the floating home link parks). */
@media(max-width:560px){
  .hero-corner{width:66px;height:66px;--corner-opacity:.6}
  .hero-corner[data-corner="tl"]{top:-18px;left:-18px}
  .hero-corner[data-corner="br"]{bottom:-18px;right:-18px}
  .hero-corner[data-corner="tr"],.hero-corner[data-corner="bl"]{display:none}
}
.page-hero .eyebrow{margin-bottom:10px;justify-content:center}
.page-hero h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;margin:0}
.page-hero .lead{font-size:clamp(16px,1.8vw,18.5px);color:var(--ink-2);max-width:68ch;margin:12px auto 0}
/* the grid starts right under the hero: no second stack of section padding */
.page-hero + .sec{padding-top:24px}
/* the first grid sits straight under the hero — no second helping of top space */
.page-hero + .sec .prod-grid-new{margin-top:0}
.sec-head-sm{margin-bottom:16px}
.sec-head-sm h2{font-size:clamp(21px,2.5vw,31px);line-height:1.15;letter-spacing:-.03em}

/* badge + title row; the badge's box is reserved before it animates, so nothing shifts */
.hero-title{display:flex;align-items:center;justify-content:center;gap:16px;min-height:72px}
.hero-badge{width:72px;height:72px;flex:none;object-fit:contain;display:block;
  animation:badge-pop 260ms cubic-bezier(.22,.61,.36,1) both}
.page-hero .eyebrow,.page-hero h1,.page-hero .lead{animation:hero-rise 200ms var(--ease) both}
@keyframes badge-pop{
  0%{opacity:0;transform:scale(.6) rotate(-6deg)}
  70%{opacity:1;transform:scale(1.04) rotate(-1deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero-badge,.page-hero .eyebrow,.page-hero h1,.page-hero .lead{animation:none!important;opacity:1;transform:none}
}
.page-hero--events{background:linear-gradient(160deg,rgba(230,46,48,.08) 0%,rgba(230,46,48,.03) 50%,transparent 100%)}
.page-hero--shop{background:linear-gradient(160deg,rgba(230,46,48,.06) 0%,rgba(230,46,48,.02) 50%,transparent 100%)}

/* ---------- floating "Back to home" tomato (every page except the home page) ---------- */
.home-dock{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:120;width:74px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;
  padding:9px 5px 8px;border-radius:20px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(170%);-webkit-backdrop-filter:blur(12px) saturate(170%);
  box-shadow:var(--shadow);transition:opacity var(--t) var(--ease)}
.home-dock img{width:48px;height:48px;object-fit:contain;display:block}
.home-dock span{font-size:12px;font-weight:600;line-height:1.2;text-align:center;color:var(--ink-2)}
.home-dock .home-dock-short{display:none}
.home-dock:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:16px}
@keyframes dock-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}66%{transform:rotate(5deg)}}
@media(hover:hover) and (pointer:fine){.home-dock:hover img{animation:dock-wiggle 420ms var(--ease)}}
@media(prefers-reduced-motion:reduce){.home-dock:hover img{animation:none}}
/* out of the way whenever a sheet or the basket owns the screen */
body.basket-open .home-dock,body.sheet-open .home-dock{opacity:0;pointer-events:none}
@media(max-width:700px){
  .home-dock{left:12px;top:auto;bottom:14px;transform:none;width:62px;gap:4px;padding:7px 4px 6px;border-radius:17px}
  .home-dock img{width:40px;height:40px}
  .home-dock span{font-size:11px}
  .home-dock .home-dock-full{display:none}
  .home-dock .home-dock-short{display:block}
}
.sec-badge{width:28px;height:28px;object-fit:contain;flex:none;display:block}

/* ---------- section buttons: quiet until touched ---------- */
/*
 * "Browse the shop" and "All events" used to be outlined pills sitting under
 * their section, competing with the cards above them for the same attention.
 * At rest they are now just a tomato and a small label — no border, no fill,
 * the tomato sitting straight. Touch one and it becomes what it always was: a
 * red pill with a white label at the site's normal button size, the tomato
 * tilted the way the brand draws it everywhere else, and one pass of the same
 * light the primary "See what's on" button carries.
 *
 * The box does not jump. `min-height` is fixed at 44px — the phone hit target —
 * and the label's growth is a transition on font-size, so the pill widens over
 * 220ms instead of snapping. Under `prefers-reduced-motion` there is no
 * movement at all: the pill, the colour and the size still change, because they
 * are what says "this is a link", but the tomato does not turn and the light
 * does not travel.
 */
.sec-link{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink);
  min-height:44px;padding:8px 16px;font-size:13px;font-weight:620;gap:10px;
  transition:font-size var(--t) var(--ease),padding var(--t) var(--ease),color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.sec-link .sec-badge{width:26px;height:26px;transform:rotate(0deg);transition:transform var(--t) var(--ease)}
.sec-link:hover,.sec-link:focus-visible{background:var(--accent-fill);color:#fff;font-size:15px;padding:11px 22px;
  box-shadow:0 12px 30px -14px color-mix(in srgb,var(--accent-fill) 80%,transparent)}
.sec-link:hover .sec-badge,.sec-link:focus-visible .sec-badge{transform:rotate(-8deg) scale(1.05)}
@media(prefers-reduced-motion:reduce){
  .sec-link{transition:none}
  .sec-link .sec-badge{transition:none}
  .sec-link:hover .sec-badge,.sec-link:focus-visible .sec-badge{transform:none}
}

/*
 * On a laptop the button belongs on the title's line, right of it, so the
 * section reads as one header rather than a heading at the top and an orphan
 * pill at the bottom. The section's own `.wrap` becomes the two-column grid
 * that makes that possible; the cards below span it. A phone keeps the stack —
 * a 390px row has no room for a heading and a button side by side.
 */
@media(min-width:701px){
  #whats-on .wrap,#products .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px}
  #whats-on .head-2,#products .head-2{grid-column:1;grid-row:1}
  #whats-on .sec-more,#products .sec-more{grid-column:2;grid-row:1;align-self:center;justify-self:end;margin:0}
  #whats-on .ev-home,#products .prod-grid{grid-column:1/-1;grid-row:2}
}

/* ---------- back link ---------- */
.back-link{display:inline-flex;align-items:center;gap:7px;margin-bottom:26px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.back-link:hover{text-decoration:underline;text-underline-offset:3px}
.back-link svg{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.back-link:hover svg{transform:translateX(-3px)}

/* ---------- past events strip ---------- */
.past-ev-strip{background:var(--bg-2);border-top:1px solid var(--line)}
.past-ev-strip .wrap>.eyebrow{margin-bottom:20px}
.past-ev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:20px}
.past-ev-card{display:grid;grid-template-columns:80px 1fr;gap:0;text-decoration:none;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.past-ev-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.past-ev-img{width:80px;height:80px;object-fit:cover;display:block}
.past-ev-txt{padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.past-ev-txt .eyebrow{margin-bottom:0;font-size:10px}
.past-ev-txt h3{font-size:15px;font-weight:700;margin:0;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.past-ev-txt .when{font-size:13px;color:var(--ink-2)}

/* ---------- event detail ---------- */
.ev-detail-wrap{padding:clamp(100px,12vh,132px) 0 clamp(56px,8vw,96px)}
.ev-detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:20px}
.ev-detail-poster{border-radius:var(--r-xl);overflow:hidden}
.ev-detail-poster img{width:100%;height:auto;display:block}
.ev-detail-cover{border-radius:var(--r-xl);overflow:hidden}
.ev-detail-cover img{width:100%;max-height:480px;object-fit:cover;display:block}
.ev-detail-body{display:flex;flex-direction:column;gap:20px}
.ev-detail-body h1{font-size:clamp(26px,3vw,34px);letter-spacing:-.035em;margin:0;line-height:1.1}
.ev-detail-when{font-size:15.5px;font-weight:600;color:var(--ink);margin:0;display:flex;flex-wrap:wrap;gap:0 6px}
.ev-detail-when .when{color:var(--ink)}
.ev-detail-where{font-size:15px;color:var(--ink-2);margin:0}
.ev-detail-price{margin:0}
.ev-detail-price .tag{display:inline-block;background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:5px 14px;font-size:14.5px;font-weight:700}
.ev-detail-text{display:flex;flex-direction:column;gap:12px}
.ev-detail-text p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
/* Tickets and Share sit on one line, and wrap rather than squeeze on a phone.
   The note below them takes the full width whichever of the two it follows. */
.ev-detail-cta{margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cta-note{font-size:13.5px;color:var(--ink-2);margin:10px 0 0;line-height:1.55;flex:1 0 100%}
.map-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;font-weight:600}
.map-link svg{width:16px;height:16px;flex-shrink:0}
.map-link:hover span{text-decoration:underline;text-underline-offset:2px}
.where-plain{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.where-plain svg{width:16px;height:16px;flex-shrink:0;color:var(--ink-3)}
.small-print{font-size:13px;color:var(--ink-3);line-height:1.6;margin:0}
.partner-line{font-size:14px;color:var(--ink-2);font-style:italic;margin:0}

/* event gallery */
.ev-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.ev-gallery-item{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.ev-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 320ms var(--ease)}

@media(max-width:820px){
  .ev-detail-layout{grid-template-columns:1fr}
  .ev-detail-cover img{max-height:300px}
}
@media(max-width:700px){
  .ev-gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ev-gallery-item{border-radius:14px}
}

/* ---------- shop product grid ---------- */
.prod-grid-new{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.prod-card{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.prod-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.prod-card-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-2)}
.prod-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms var(--ease)}
.prod-card:hover .prod-card-img img{transform:scale(1.04)}
.prod-card-txt{padding:18px 18px 20px;display:flex;flex-direction:column;gap:5px}
.prod-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.prod-card-txt h3{font-size:16px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--ink)}
.prod-price{font-size:14.5px;font-weight:700;color:var(--ink);margin:0}
.prod-member-price{font-size:12.5px;color:var(--ink-2);margin:0}
/* The card is a link, so the card's member line is plain text and only the
   product page carries the anchor — an anchor inside an anchor is invalid
   HTML and unreachable by keyboard. Enforced in the generator, not here. */
.prod-member-price a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prod-sold-out{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:100px}
.shop-closed-banner{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 20px;margin-bottom:24px}
.shop-closed-banner p{margin:0;font-size:14.5px;color:var(--ink-2)}

@media(max-width:1199px){.prod-grid-new{grid-template-columns:repeat(3,1fr)}}
@media(max-width:899px){.prod-grid-new{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .prod-grid-new{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
  .prod-card{border-radius:18px}
  .prod-card-txt{padding:12px 12px 14px;gap:4px}
  .prod-kicker{font-size:9.8px;letter-spacing:.09em}
  .prod-card-txt h3{font-size:14px;line-height:1.25}
  .prod-price{font-size:13.5px}
  .prod-member-price{font-size:12px}
  .prod-card:nth-child(odd):last-child{grid-column:1/-1;flex-direction:row}
  .prod-card:nth-child(odd):last-child .prod-card-img{width:44%;flex:none;aspect-ratio:1}
  .shop-closed-banner{padding:12px 14px}
}

/* ---------- product detail ---------- */
.prod-detail-wrap{padding:clamp(100px,12vh,132px) 0 clamp(56px,8vw,96px)}
.prod-detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start;margin-top:20px}
.prod-detail-images{display:flex;flex-direction:column;gap:12px}
.prod-detail-img{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1}
.prod-detail-img img{width:100%;height:100%;object-fit:cover;display:block}
.prod-detail-body{display:flex;flex-direction:column;gap:20px}
.prod-detail-body h1{font-size:clamp(24px,3.2vw,36px);letter-spacing:-.035em;margin:0}
.prod-detail-price{font-size:clamp(22px,2.8vw,28px);font-weight:800;letter-spacing:-.035em;margin:0;color:var(--ink)}
.prod-gst{font-size:15px;font-weight:500;color:var(--ink-2)}
.prod-detail-cta{margin:4px 0}
.prod-detail-text{display:flex;flex-direction:column;gap:12px}
.prod-detail-text p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.prod-delivery{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.prod-delivery-title{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0}
.prod-delivery-opt{display:flex;flex-direction:column;gap:3px}
.prod-delivery-label{font-size:14.5px;font-weight:700;color:var(--ink)}
.prod-delivery-note{font-size:13px;color:var(--ink-2)}
.prod-maker{font-size:13px;color:var(--ink-3);font-style:italic;margin:0}

@media(max-width:820px){
  .prod-detail-layout{grid-template-columns:1fr}
}

/* ── Notices strip and deals (W2 CP2) ────────────────────────────────────────
   Both are generated between markers in home.html from notices.json and
   coupons.json, and both are absent from the page when their file is empty —
   there is no empty shelf and no "nothing right now" line to maintain.

   Nothing here invents a colour, a radius, a shadow or an easing. Every value
   is a token the rest of the site already uses, so a change to the palette
   moves these with it and the two new blocks cannot drift into a second design
   language. */

/* No negative margin. The first version pulled the strip up over the hero to
   tuck it under the image, and on a real build the hero's dark band cut the top
   off the first card's title and collided with the hero caption. The strip sits
   below the hero, in its own air, like every other band on this page. */
.notices{padding:clamp(28px,4vw,44px) 0 clamp(4px,1vw,12px)}
.notices .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* The card is the same object as .card, written out rather than reused because
   .card carries overflow:hidden and a media slot this has no use for. */
.notice{display:block;padding:16px 18px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);color:inherit;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
/* Only the linked ones lift. A card that moves under the cursor and then does
   nothing when clicked is a promise the page does not keep. */
a.notice:hover{transform:translateY(-2px);border-color:var(--line-strong)}
a.notice:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.notice-title{margin:0 0 4px;font-size:15px;font-weight:620;letter-spacing:-.01em}
.notice-line{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.notice-zh{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.notice-zh b{font-weight:620;color:var(--ink)}

.deal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;align-items:stretch}

/* A column with the description allowed to grow, so the code and the dates sit
   on the same line across all three cards however long the words above them
   are. Without this the rows stagger — which is exactly the "adding or cutting
   a card gets messy" problem the fixed preset exists to prevent, and it showed
   up the moment three real-length descriptions were put side by side. */
.deal{display:flex;flex-direction:column;padding:20px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.deal-scope{margin:0 0 6px;font-size:11.5px;font-weight:660;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.deal-what{margin:0 0 14px;font-size:16px;line-height:1.45;font-weight:560;flex:1}

/* Selectable, monospaced, and deliberately NOT a button. In v1 nothing here
   creates a Stripe promotion code, so a control that looked like it would apply
   the discount would be lying about what pressing it does. */
.deal-code{margin:0 0 10px}
.deal-code code{display:inline-block;padding:7px 13px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px dashed var(--line-strong);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;
  font-weight:600;letter-spacing:.06em;color:var(--ink);user-select:all}
.deal-when{margin:0;font-size:13px;color:var(--ink-3)}

@media(max-width:820px){
  .notices .wrap{grid-template-columns:1fr}
  .deal-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .notices{padding-top:clamp(22px,5vw,32px)}
}

/* ── the share control (W4) ───────────────────────────────────────────────
   A sheet from the bottom of a phone, a popover under the button on a desktop.
   Its markup is built by /assets/share.js on the first press, so nothing here
   applies to a page nobody shares. The React twin (components/share-sheet.tsx)
   renders the same class names, so this file dresses both.
   The picture's box holds its shape before the picture arrives — an
   aspect-ratio, not a height — so the sheet does not grow under a thumb that is
   already reaching for a button. */
.shr{position:fixed;inset:0;z-index:140}
.shr[hidden]{display:none}
.shr-scrim{position:absolute;inset:0;background:rgba(10,8,6,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--t) var(--ease)}
.shr.on .shr-scrim{opacity:1}
.shr-panel{position:fixed;left:0;right:0;bottom:0;max-height:88svh;overflow:auto;z-index:1;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;
  background:var(--bg);box-shadow:0 -20px 60px -22px rgba(0,0,0,.45),inset 0 0 0 1px var(--line);
  transform:translateY(100%);transition:transform var(--t) var(--ease)}
.shr.on .shr-panel{transform:none}
.shr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.shr-title{margin:0;font-size:16.5px;font-weight:620;line-height:1.34;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shr-x{all:unset;cursor:pointer;flex:none;width:32px;height:32px;border-radius:100px;display:grid;place-items:center;
  font-size:21px;line-height:1;color:var(--ink-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.shr-x:hover{background:var(--surface-2);color:var(--ink)}
.shr-fig{margin:14px 0 0;border-radius:16px;overflow:hidden;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);
  aspect-ratio:1200/630}
.shr-fig img{display:block;width:100%;height:100%;object-fit:cover}
.shr-panel[data-nofig] .shr-fig{display:none}
.shr-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.shr-act{all:unset;cursor:pointer;text-align:center;padding:12px 10px;border-radius:14px;font-size:14.5px;font-weight:560;
  color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.shr-act:hover{background:var(--surface-2);transform:translateY(-1px)}
.shr-act[hidden]{display:none}
.shr-act[disabled]{opacity:.55;cursor:default;transform:none}
.shr-act[data-act="native"]{grid-column:1/-1;background:var(--accent-fill);color:var(--accent-ink);box-shadow:none}
/* The status line keeps its height whether it is speaking or not. */
.shr-msg{margin:12px 0 0;min-height:1.35em;font-size:13px;line-height:1.35;color:var(--ink-2)}
.shr-msg[data-bad="1"]{color:var(--red)}
/* Inside WeChat the picture IS the action: nothing there can copy or download,
   only press-and-hold, so the instruction is promoted and the card is shown
   whole rather than cropped to a link's shape. */
.shr-panel[data-wechat="1"] .shr-fig{aspect-ratio:auto}
.shr-panel[data-wechat="1"] .shr-fig img{height:auto;object-fit:contain}
.shr-panel[data-wechat="1"] .shr-msg{font-size:14.5px;font-weight:560;color:var(--ink);text-align:center}
@media(min-width:641px){
  /* Popover. */
  /* `top` or `bottom` and `left` come from share.js, which measures the button;
     these turn off the sheet's full-width anchoring so they can win. */
  .shr-panel{right:auto;bottom:auto;width:368px;max-height:calc(100svh - 24px);border-radius:22px;padding:18px;
    box-shadow:0 26px 70px -26px rgba(0,0,0,.5),inset 0 0 0 1px var(--line);
    transform:translateY(-8px) scale(.98);opacity:0;
    transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
  .shr.on .shr-panel{transform:none;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .shr-scrim,.shr-panel{transition:none}
}

/* The Share button under a page's lede — "browse this with me" rather than a
   single event. Centred, because the hero it sits in is. */
.hero-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
/* The quiet third option beside Get tickets and Share — a link, not a button,
   because it is the answer to "not today" rather than a decision of its own. */
.cta-aside{flex:1 0 100%;font-size:14px;font-weight:560;color:var(--accent);text-decoration:none}
.cta-aside:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- be an influencer for one day (W7 CP3.1) ---------- */
/* Three cards, not four. `.ev-grid` is a four-across grid and the three
   purposes are three, so a fourth empty column would leave one of them looking
   like the odd one out. Everything else on these pages reuses the event card
   and the event detail layout unchanged. */
.ifad-why{grid-template-columns:repeat(3,1fr)}
@media(max-width:899px){.ifad-why{grid-template-columns:1fr}}
.ifad-why .card{padding:22px 24px}
.ifad-why h3{margin-bottom:8px}
.ifad-why p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}
/* The Chinese line under an English title. Same size, quieter colour: it is the
   same sentence, not a footnote to it. */
.ifad-zh{margin:-4px 0 14px;color:var(--ink-2);font-size:clamp(16px,1.5vw,18px)}
.ifad-list{margin:0 0 1.2em;padding-left:1.2em;color:var(--ink-2);line-height:1.65}
.ifad-list li{margin-bottom:4px}
/* A day that has gone: struck through and still there, the same rule the
   influencer area follows. A list that silently gets shorter is a list nobody
   can trust. */
.ifad-gone{text-decoration:line-through;opacity:.72}

/* ==========================================================
   W7-7c — the events and shop band, Share, the album, Our journey
   ORDER W7 §8.29 (d)(4)–(7)
   ========================================================== */
/* The band, about half its old height: the eyebrow and one title block, nothing under them. */
.page-hero--thin{padding:calc(var(--nav-h) + clamp(18px,2.6vh,28px)) var(--gut) clamp(14px,2vw,22px)}
.page-hero--thin .eyebrow{margin-bottom:6px}
.page-hero--thin .hero-title{min-height:56px;gap:12px}
.page-hero--thin .hero-badge{width:56px;height:56px}
/* Share, at the band's top right: frosted glass, the 36 px button, the icon and the word. */
.btn.btn-glass{height:36px;min-height:36px;padding:0 14px;font-size:14px;gap:7px;color:var(--ink);
  background:var(--glass);border:1px solid var(--line-strong);box-shadow:0 8px 22px -14px rgba(70,46,22,.45);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%)}
.btn.btn-glass:hover{background:var(--glass-hi)}
/* Clear of the top-right corner tomato (74 px of it shows), at any gutter. */
.hero-share{position:absolute;z-index:2;top:calc(var(--nav-h) + 12px);right:max(var(--gut),92px)}
@media(max-width:560px){.hero-share{top:calc(var(--nav-h) + 10px);right:12px;padding:0 11px}}

/* The album: the big picture, its two halves to press, the thumbnails under it. */
.imgpop .album{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.album-stage{position:relative;display:flex;justify-content:center;max-width:100%}
.imgpop .album-stage img{transition:opacity 100ms linear}
.imgpop .album-stage img.fading{opacity:0}
.album-half{position:absolute;top:0;bottom:0;width:50%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.album-prev{left:0;cursor:w-resize}
.album-next{right:0;cursor:e-resize}
.album-half:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:14px}
.imgpop.album-one .album-half{display:none}
.album-thumbs{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.album-thumbs[hidden]{display:none}
.album-thumb{flex:none;width:56px;height:40px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--bg-2);cursor:pointer;opacity:.62;transition:opacity 150ms var(--ease),border-color 150ms var(--ease)}
.album-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;box-shadow:none;max-height:none}
.album-thumb:hover{opacity:.9}
.album-thumb.on{opacity:1;border-color:var(--accent)}
@media(max-width:560px){.album-thumb{width:46px;height:34px}}
@media(prefers-reduced-motion:reduce){.imgpop .album-stage img{transition:none}}

/* Our journey: the café, fixed while the section moves over it — a fixed layer clipped to the
   section (never background-attachment), the 32 px placeholder first, under a veil measured
   against the photograph's own darkest and brightest pixels: 78 % passes every word at 4.5 : 1
   in both themes, the section's red a shade deeper (or lighter, in the dark) to match. */
.journey{position:relative;isolation:isolate}
.journey-bg{position:absolute;inset:0;z-index:-1;clip-path:inset(0);pointer-events:none}
.journey-bg-fix{position:fixed;inset:0;background:#6b5546 url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAVACADASIAAhEBAxEB/8QAGgAAAgIDAAAAAAAAAAAAAAAAAAQDBQECBv/EACcQAAICAQMCBQUAAAAAAAAAAAECAxEABBIhBSITMVFhoRQjMlJx/8QAGAEAAgMAAAAAAAAAAAAAAAAAAgMAAQT/xAAaEQADAQEBAQAAAAAAAAAAAAAAARECAyIx/9oADAMBAAIRAxEAPwBbQFAx+0xJKfkLI/b5rOjUo8lqSwIxTTzwxqW3EFTVAAkn+YnpZTDqJJHmLIXNKCCefWsXqKGjKtHJSUmcbvPy5qqN18ZrLI7aaVGPayNfvYOZkBfURK6swJDKUPIJ9cVR4hJrI1QqbYndZ5rmrykqyacRSLvlmkVmBsFuR71llFpkXqxQklPDbtuhYqjhhg5Sge2yELN9WhXUOFZqqycl6r1JunTRxiGOU7T3NwfPDDD5Py2L6fT/2Q==") center/cover no-repeat}
.journey-bg-fix img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.journey-bg-fix::after{content:"";position:absolute;inset:0;background:var(--journey-veil)}
html[data-theme="light"]{--journey-veil:rgba(252,250,246,.78);--journey-red:#9B1610}
html[data-theme="dark"]{--journey-veil:rgba(9,9,11,.78);--journey-red:#FF9691}
.journey .yap-block em,.journey .belief .n{color:var(--journey-red)}