/* DOJO Nanyang Kopi House: "Modern Traditional"
   Palette from DOJO_Colour_Palette.pdf (+ two derived darks). Type from the brand: Nimbus Roman (TeX Gyre Termes)
   for signboard capitals, Archivo for reading. Emphasis is colour, never italics. */

@font-face { font-family: Termes; src: url(/assets/fonts/termes-bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Termes; src: url(/assets/fonts/termes-regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Archivo; src: url(/assets/fonts/archivo.woff2) format('woff2'); font-weight: 400 700; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: 'DOJO CJK'; src: url(/assets/fonts/cjk.woff2) format('woff2'); font-weight: 400 900; font-display: swap; unicode-range: U+3000-9FFF, U+FF00-FFEF; }

:root {
  /* The six DOJO brand colours, and nothing else. Shades are these colours made see-through. */
  --maroon: #630f12;      /* main colour */
  --brown: #724a2a;       /* brown */
  --light-brown: #c39c61; /* light brown */
  --green: #2b5632;       /* DOJO green */
  --cream: #f5e8d6;       /* background */
  --cornsilk: #fff2df;    /* cornsilk */

  --f-display: Termes, 'Times New Roman', 'DOJO CJK', serif;
  --f-body: Archivo, 'Segoe UI', system-ui, sans-serif;
  --f-cjk: 'DOJO CJK', 'Noto Serif SC', 'Songti SC', serif;

  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1600px;
  /* left/right edge of every full-bleed section: the gutter on small screens, a centred --max column on wide ones */
  --px: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  --head-h: 76px;
  --ease: cubic-bezier(.22, .8, .2, 1);

  --pat-petal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23c39c61' stroke-width='1'%3E%3Ccircle cx='0' cy='22' r='22'/%3E%3Ccircle cx='44' cy='22' r='22'/%3E%3Ccircle cx='22' cy='0' r='22'/%3E%3Ccircle cx='22' cy='44' r='22'/%3E%3C/g%3E%3C/svg%3E");
  --pat-fret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cg fill='none' stroke='%23c39c61' stroke-width='1.2'%3E%3Cpath d='M0 1.5h24M0 14.5h24M0 11h4V5h10v6h-4V8h-2'/%3E%3Cpath d='M14 11h10'/%3E%3C/g%3E%3C/svg%3E");
  --pat-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cg fill='none' stroke='%23c39c61' stroke-width='1'%3E%3Cpath d='M0 40a40 40 0 0 1 80 0M10 40a30 30 0 0 1 60 0M20 40a20 20 0 0 1 40 0M30 40a10 10 0 0 1 20 0'/%3E%3Cpath d='M-40 20a40 40 0 0 1 80 0M-30 20a30 30 0 0 1 60 0M-20 20a20 20 0 0 1 40 0M-10 20a10 10 0 0 1 20 0M40 20a40 40 0 0 1 80 0M50 20a30 30 0 0 1 60 0M60 20a20 20 0 0 1 40 0M70 20a10 10 0 0 1 20 0'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--maroon); }
body { margin: 0; background: var(--cream); color: var(--brown); font: 400 1.0625rem/1.65 var(--f-body); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--light-brown); color: var(--maroon); }
:focus-visible { outline: 2px solid var(--light-brown); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; } /* components set display: grid/flex; hidden must still win */
.sr, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 16px; background: var(--cornsilk); color: var(--maroon); font-weight: 600; }
.cjk { font-family: var(--f-cjk); font-weight: 700; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Type ---------- */
.eyebrow { display: flex; align-items: center; gap: .9em; font: 600 .72rem/1.2 var(--f-body); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--brown); }
/* light brown reads on the main colour (5.1:1); on green and brown, small labels use cornsilk (7.7:1, 7:1) */
.hero .eyebrow, .phero .eyebrow, .tarik .eyebrow, .map-band .eyebrow, .haus .eyebrow, .on-dark .eyebrow, .recordband .eyebrow, .tier--kaki .eyebrow, .foot .eyebrow { color: var(--light-brown); }
.phero--green .eyebrow, .order .eyebrow, .timeline .eyebrow, .tier--gang .eyebrow { color: var(--cornsilk); }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; flex: none; }
.d-xl, .d-l, .d-m { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; line-height: .94; letter-spacing: .005em; color: var(--maroon); }
.d-xl { font-size: clamp(3rem, 8.4vw, 8.6rem); }
.d-l { font-size: clamp(2.5rem, 5.6vw, 5.6rem); }
.d-m { font-size: clamp(1.9rem, 3.2vw, 3.1rem); }
[data-split] .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
[data-split] .ln > span { display: block; }

.link { display: inline-flex; align-items: center; gap: .6em; font: 600 .8rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--maroon); padding: .6em 0; border-bottom: 1px solid currentColor; }
.link svg { width: 18px; transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(5px); }

/* ---------- Buttons (pill, like the DOJO logo) ---------- */
.btn { --b: var(--cream); --t: var(--maroon); --h: var(--light-brown); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .7em; padding: 1.05em 1.7em; border-radius: 999px; border: 1px solid var(--b); background: var(--b); color: var(--t); font: 600 .78rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .45s var(--ease), border-color .45s var(--ease); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--h); border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn:hover { border-color: var(--h); }
.btn svg { width: 18px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--cream { --b: var(--cream); --t: var(--maroon); --h: var(--light-brown); }
.btn--gold { --b: var(--light-brown); --t: var(--maroon); --h: var(--cornsilk); }
.btn--maroon { --b: var(--maroon); --t: var(--cornsilk); --h: var(--brown); }
.btn--line { --b: transparent; --t: var(--cream); --h: var(--cream); border-color: rgba(245, 232, 214, .5); }
.btn--line:hover { color: var(--maroon); }
.btn--sm { padding: .85em 1.3em; font-size: .7rem; }

/* ---------- Lattice frame (Nanyang element kit: double rule + corner knots) ---------- */
.lattice { --frame-c: var(--light-brown); position: relative; padding: 14px; }
.lattice::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--frame-c); pointer-events: none; }
.lattice__rule { position: absolute; inset: 6px; border: 1px solid var(--frame-c); opacity: .55; pointer-events: none; }
.fret { position: absolute; width: 22px; height: 22px; fill: none; stroke: var(--frame-c); stroke-width: 1.3; pointer-events: none; }
.fret path { fill: none; }
.fret--tl { top: -11px; left: -11px; } .fret--tr { top: -11px; right: -11px; } .fret--br { bottom: -11px; right: -11px; } .fret--bl { bottom: -11px; left: -11px; }
.fretbar { height: 16px; background: var(--pat-fret) repeat-x center / 24px 16px; opacity: .85; }

/* ---------- Roller shutter (loader + page transitions) ---------- */
.shutter { display: none; }
html.js .shutter { display: block; position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.shutter__panel { position: absolute; inset: 0; transform: translateY(0); background: repeating-linear-gradient(180deg, rgba(245, 232, 214, 0) 0 19px, rgba(114, 74, 42, .2) 19px 20px, rgba(255, 242, 223, .9) 20px 22px, rgba(245, 232, 214, 0) 22px 24px), var(--cream); box-shadow: 0 30px 60px rgba(99, 15, 18, .45); pointer-events: auto; will-change: transform; }
.shutter__panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(114, 74, 42, .18)); }
.shutter__paint { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: min(78vw, 440px); display: grid; justify-items: center; gap: 22px; }
.shutter__logo { width: 100%; mix-blend-mode: multiply; opacity: .94; }
.shutter__pour { width: 118px; }
.shutter__caption { display: grid; justify-items: center; gap: 6px; font: 600 .68rem/1.2 var(--f-body); font-stretch: 125%; letter-spacing: .26em; text-transform: uppercase; color: var(--brown); }
.shutter__caption .cjk { font-size: 1.05rem; letter-spacing: .5em; margin-right: -.5em; color: var(--maroon); }
.shutter__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: var(--maroon); display: flex; align-items: center; justify-content: space-between; padding: 0 22%; }
.shutter__bar i { width: 46px; height: 12px; border-radius: 6px; background: var(--light-brown); box-shadow: 0 2px 0 rgba(114, 74, 42, .6); }
.shutter__bar b { width: 18px; height: 22px; border-radius: 4px; background: var(--light-brown); box-shadow: 0 2px 0 rgba(114, 74, 42, .6); }
.shutter__pour { visibility: hidden; }
/* Pages after the first in a session: no pour, the shutter just opens */
html.poured .shutter__pour, html.poured .shutter__caption span:last-child { display: none; }
/* If scripts never run, the shutter gets out of the way on its own */
html.js:not(.ready) .shutter__panel { animation: shutter-failsafe .6s 4.5s forwards; }
@keyframes shutter-failsafe { to { transform: translateY(-101%); visibility: hidden; } }
html:not(.motion) .shutter { display: none; }

/* ---------- Signboard header ---------- */
.sign { position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: var(--head-h); display: flex; align-items: center; gap: 28px; padding: 0 var(--px); color: var(--cream); transition: transform .6s var(--ease), background-color .5s, box-shadow .5s; }
.sign::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--pat-fret) repeat-x center / 18px 12px; opacity: 0; transition: opacity .5s; }
.sign.is-solid { background: var(--maroon); box-shadow: 0 10px 30px rgba(99, 15, 18, .25); }
.sign.is-solid::after { opacity: .6; background-color: var(--maroon); }
.sign.is-hidden { transform: translateY(calc(-100% - 10px)); }
.sign__logo img { width: 118px; }
.sign__nav { display: flex; gap: clamp(18px, 2.4vw, 40px); margin-left: auto; font: 600 .74rem/1 var(--f-body); font-stretch: 118%; letter-spacing: .2em; text-transform: uppercase; }
.sign__nav a { position: relative; padding: 10px 0; }
.sign__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--light-brown); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.sign__nav a:hover::after, .sign__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.sign__nav a[aria-current] { color: var(--light-brown); }
.sign__burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid rgba(245, 232, 214, .45); border-radius: 50%; background: none; cursor: pointer; position: relative; }
.sign__burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--cream); transition: transform .5s var(--ease); }
.sign__burger i:first-of-type { top: 19px; } .sign__burger i:last-of-type { top: 26px; }
.sign__burger[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.sign__burger[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
.drawer { position: fixed; z-index: 85; inset: 0; overflow-y: auto; background: var(--maroon); color: var(--cream); display: grid; align-content: center; padding: calc(var(--head-h) + 20px) var(--px) 40px; }
.drawer::before { content: ''; position: absolute; inset: 0; background: var(--pat-waves) 0 0 / 80px 40px; opacity: .08; pointer-events: none; }
.drawer[hidden] { display: none; }
.drawer__nav { display: grid; gap: 4px; }
.drawer__nav a { display: flex; align-items: baseline; gap: 16px; font: 700 clamp(2.6rem, 11vw, 4rem)/1.08 var(--f-display); text-transform: uppercase; padding: 8px 0; border-bottom: 1px solid rgba(195, 156, 97, .25); }
.drawer__nav small { font: 600 .7rem var(--f-body); letter-spacing: .2em; color: var(--light-brown); }
.drawer__nav a[aria-current] { color: var(--light-brown); }
.drawer__foot { margin-top: 32px; font-size: .85rem; color: var(--light-brown); letter-spacing: .06em; }
/* six links + the button need about 1060px; below that the burger menu takes over */
@media (max-width: 1060px) {
  .sign__nav, .sign__cta { display: none; }
  .sign__burger { display: block; }
}
@media (max-width: 900px) {
  :root { --head-h: 66px; }
  .sign__logo img { width: 112px; }
}

/* ---------- Home: hero (brand film loop behind the signboard type) ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-content: center; padding: calc(var(--head-h) + 40px) var(--px) 150px; background: var(--maroon); color: var(--cream); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; z-index: -1; inset: -4% 0 0; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__video { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video.is-playing { opacity: 1; }
/* neutral black scrims only where the words sit, so the film keeps its own colours (client, 28 Oct 2026) */
.hero__veil { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .44) 32%, rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, 0) 72%),
  linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 26%),
  linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 18%); }
.hero__inner { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 72px); align-items: start; }
.hero__couplet { display: grid; gap: .35em; justify-items: center; padding: 22px 0; background: var(--maroon); color: var(--light-brown); font-size: 1.9rem; line-height: 1; border: 1px solid var(--light-brown); outline: 1px solid rgba(195, 156, 97, .45); outline-offset: 4px; box-shadow: 0 20px 40px rgba(99, 15, 18, .25); }
.hero__copy { display: grid; gap: 30px; max-width: 800px; }
.hero__title { font: 700 clamp(3rem, 6.3vw, 7.1rem)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .005em; color: var(--cornsilk); text-shadow: 0 2px 28px rgba(0, 0, 0, .35); }
.hero__title .ln { display: block; overflow: hidden; padding: .04em 0 .08em; margin-bottom: -.08em; }
.hero__title .ln > span { display: block; }
.hero__title .ln--gold { color: var(--light-brown); }
.hero__lede { text-shadow: 0 1px 14px rgba(0, 0, 0, .45); max-width: 36em; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.6; color: rgba(255, 242, 223, .9); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__play { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); align-self: end; justify-self: end; display: flex; align-items: center; gap: 18px; padding: 0; border: 0; background: none; color: var(--cream); text-align: left; cursor: pointer; }
.hero__ring { box-shadow: 0 6px 30px rgba(0, 0, 0, .3); position: relative; flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(195, 156, 97, .8); background: rgba(99, 15, 18, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .45s var(--ease), transform .6s var(--ease); }
.hero__ring::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(195, 156, 97, .35); animation: halo 2.8s var(--ease) infinite; }
@keyframes halo { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.22); opacity: 0; } }
.hero__ring svg { width: 28px; margin-left: 4px; fill: var(--light-brown); transition: fill .45s; }
.hero__play:hover .hero__ring { background: var(--light-brown); transform: scale(1.05); }
.hero__play:hover .hero__ring svg { fill: var(--maroon); }
.hero__playtext b { display: block; font: 700 1.05rem/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--cornsilk); }
.hero__playtext small { display: block; margin-top: 6px; font: 600 .68rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase; color: var(--light-brown); }
.hero__foot { position: absolute; left: var(--px); right: var(--px); bottom: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hero__trio { display: flex; align-items: center; gap: 18px; font: 700 .95rem/1 var(--f-display); letter-spacing: .32em; text-transform: uppercase; color: var(--light-brown); }
.hero__trio i { width: 1px; height: 22px; background: var(--light-brown); opacity: .7; }
.hero__cue { display: flex; align-items: center; gap: 14px; font: 600 .68rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--cream); }
.hero__cue i { position: relative; width: 1px; height: 54px; background: rgba(245, 232, 214, .25); overflow: hidden; }
.hero__cue i::after { content: ''; position: absolute; left: -1px; width: 3px; height: 22px; border-radius: 2px; background: linear-gradient(var(--light-brown), var(--brown)); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { from { transform: translateY(-24px); } to { transform: translateY(56px); } }
@media (max-width: 1100px) { .hero__inner { grid-template-columns: 52px minmax(0, 1fr); row-gap: 40px; } .hero__couplet { font-size: 1.5rem; } .hero__play { grid-column: 2; justify-self: start; } }
@media (max-width: 760px) {
  .hero { align-content: end; padding-top: calc(var(--head-h) + 30px); padding-bottom: 116px; }
  .hero__veil { background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .58) 46%, rgba(0, 0, 0, .12) 72%, rgba(0, 0, 0, 0) 82%), linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 16%); }
  .hero__poster, .hero__video { object-position: 50% 30%; }
  .hero__inner { grid-template-columns: 1fr; row-gap: 28px; }
  .hero__couplet { display: none; }
  .hero__play { grid-column: 1; }
  .hero__ring { width: 64px; height: 64px; }
  .hero__ring svg { width: 22px; }
  .hero__title { font-size: clamp(2.7rem, 12.6vw, 4rem); }
  .hero__copy { gap: 22px; }
  .hero__trio { font-size: .72rem; gap: 10px; letter-spacing: .24em; }
  .hero__cue span { display: none; }
  .hero__eyebrow { font-size: .64rem; letter-spacing: .18em; }
  .hero__eyebrow::before { display: none; }
}
/* Hero intro states (set before the shutter opens) */
html.motion .hero__title .ln > span { transform: translateY(105%); }
html.motion [data-hero-in], html.motion .hero__couplet span, html.motion .hero__foot { opacity: 0; }

/* ---------- The film player ---------- */
.film { width: min(1200px, 92vw); max-width: none; max-height: none; padding: 0; border: 0; overflow: visible; background: var(--maroon); color: var(--cream); box-shadow: 0 40px 120px rgba(99, 15, 18, .6); }
.film::backdrop { background: rgba(99, 15, 18, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--maroon); }
.film__close { position: absolute; right: 0; bottom: calc(100% + 14px); display: flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; color: var(--cream); font: 600 .72rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.film__close i { position: relative; width: 34px; height: 34px; border: 1px solid rgba(245, 232, 214, .5); border-radius: 50%; }
.film__close i::before, .film__close i::after { content: ''; position: absolute; left: 9px; right: 9px; top: 16px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.film__close i::after { transform: rotate(-45deg); }
.film__close:hover i { background: var(--light-brown); border-color: var(--light-brown); color: var(--maroon); }

/* ---------- Home: tarik (scroll-scrubbed film) ---------- */
.tarik { position: relative; background: var(--maroon); color: var(--cream); }
html.motion .tarik { height: 460vh; }
.tarik__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
html.motion .tarik__stage { position: sticky; top: 0; }
.tarik__poster, .tarik__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.motion .tarik__poster { opacity: 0; }
.tarik__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .34) 34%, rgba(0, 0, 0, 0) 58%), linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 38%), linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%); }
.tarik__head { position: absolute; top: calc(var(--head-h) + 4vh); left: var(--px); display: grid; gap: 16px; }
.tarik__title { font: 700 clamp(2rem, 3.6vw, 3.6rem)/.95 var(--f-display); text-transform: uppercase; color: var(--cornsilk); }
.tarik__steps { position: absolute; left: var(--px); bottom: 12vh; width: min(560px, 80vw); height: 46vh; }
.tarik__step { position: absolute; inset: auto 0 0 0; display: grid; gap: 14px; }
.tarik__n { font: 600 .74rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--light-brown); display: flex; align-items: center; gap: 12px; }
.tarik__n span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--light-brown); border-radius: 50%; letter-spacing: 0; }
.tarik__word { text-shadow: 0 2px 28px rgba(0, 0, 0, .35); font: 700 clamp(4rem, 11.5vw, 11rem)/.82 var(--f-display); text-transform: uppercase; color: var(--cornsilk); letter-spacing: -.005em; }
.tarik__text { text-shadow: 0 1px 14px rgba(0, 0, 0, .45); max-width: 30em; font-size: 1.08rem; color: rgba(255, 242, 223, .86); }
.tarik__meter { position: absolute; right: var(--px); top: 50%; transform: translateY(-50%); height: 52vh; width: 1px; background: rgba(245, 232, 214, .2); display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.tarik__fill { position: absolute; top: 0; left: -1px; width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(var(--light-brown), var(--brown)); transform-origin: top; transform: scaleY(0); }
.tarik__meter b { position: relative; padding-right: 16px; font: 600 .66rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 232, 214, .4); white-space: nowrap; transition: color .4s; }
.tarik__meter b::after { content: ''; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--maroon); border: 1px solid rgba(245, 232, 214, .4); transition: background .4s, border-color .4s; }
.tarik__meter b.is-on { color: var(--light-brown); }
.tarik__meter b.is-on::after { background: var(--light-brown); border-color: var(--light-brown); }
.tarik__record { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 0 var(--px); text-align: center; background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .8)); }
.tarik__cups { font: 700 clamp(3.4rem, 11.5vw, 11.5rem)/.86 var(--f-display); color: var(--light-brown); letter-spacing: -.01em; }
.tarik__cupsline { max-width: 34em; font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--cream); }
html.motion .tarik__step, html.motion .tarik__record { opacity: 0; visibility: hidden; }
/* Without motion: a still with the four steps laid out */
html:not(.motion) .tarik__film, html:not(.motion) .tarik__meter { display: none; }
html:not(.motion) .tarik__stage { height: auto; min-height: 0; padding: calc(var(--head-h) + 40px) var(--px) 60px; }
html:not(.motion) .tarik__head, html:not(.motion) .tarik__steps, html:not(.motion) .tarik__step, html:not(.motion) .tarik__record { position: relative; inset: auto; top: auto; left: auto; bottom: auto; height: auto; width: auto; }
html:not(.motion) .tarik__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; margin: 40px 0; }
html:not(.motion) .tarik__word { font-size: clamp(3rem, 6vw, 4.6rem); }
html:not(.motion) .tarik__record { background: none; padding: 40px 0 0; }
@media (max-width: 760px) {
  .tarik__shade { background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 42%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 28%); }
  .tarik__steps { bottom: 9vh; height: auto; }
  .tarik__word { font-size: clamp(3.6rem, 21vw, 6rem); }
  .tarik__text { font-size: 1rem; }
  .tarik__meter { top: auto; bottom: 0; left: var(--px); right: var(--px); transform: none; height: 1px; width: auto; flex-direction: row; display: none; }
}

/* ---------- Home: intro / manifesto ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 7vw, 120px); padding: clamp(90px, 16vh, 180px) var(--px); align-items: center; }
.intro__text { display: grid; gap: 34px; align-content: start; justify-items: start; }
.manifesto { font: 400 clamp(1.7rem, 3vw, 2.9rem)/1.18 var(--f-display); color: var(--maroon); letter-spacing: -.005em; }
.manifesto .w { opacity: .16; }
html:not(.motion) .manifesto .w { opacity: 1; }
.intro__quote { border-left: 2px solid var(--light-brown); padding-left: 22px; display: grid; gap: 10px; max-width: 34em; }
.intro__quote p { font: 700 1.25rem/1.45 var(--f-display); color: var(--maroon); }
.intro__quote footer { font-size: .9rem; color: var(--brown); }
.intro__pics { position: relative; aspect-ratio: 4 / 5; }
.intro__pic { position: absolute; overflow: hidden; box-shadow: 0 30px 60px rgba(99, 15, 18, .18); }
.intro__pic img { width: 100%; height: 100%; object-fit: cover; }
.intro__pic--a { inset: 0 16% 12% 0; }
.intro__pic--b { width: 44%; aspect-ratio: 3 / 4; right: 0; bottom: 0; border: 8px solid var(--cream); }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } .intro__pics { max-width: 520px; width: 100%; } }

/* ---------- Home: signature rail ---------- */
.rail { position: relative; background: var(--cornsilk); }
.rail::before { content: ''; position: absolute; inset: 0; background: var(--pat-petal) 0 0 / 44px 44px; opacity: .07; pointer-events: none; }
.rail__stage { position: relative; overflow: hidden; }
html.motion .rail__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.rail__track { display: flex; align-items: flex-start; gap: clamp(28px, 4vw, 64px); padding: calc(var(--head-h) + 30px) var(--px) 70px; will-change: transform; }
.rail__intro { flex: 0 0 clamp(280px, 28vw, 420px); align-self: center; display: grid; gap: 24px; justify-items: start; }
.rail__intro p:not(.eyebrow) { max-width: 22em; }
/* one 4:5 picture for every dish, sized so picture and caption fit the pinned screen */
.dish { flex: 0 0 auto; width: min(clamp(280px, 28vw, 440px), calc((100svh - var(--head-h) - 270px) * .8)); display: grid; gap: 20px; align-content: start; }
.dish__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cornsilk); }
.dish__inner { width: 100%; height: 100%; }
.dish__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.2s var(--ease); }
html:not(.motion) .dish__img img { transform: none; }
.dish:hover .dish__img img { transform: scale(1.05); }
.dish--cut .dish__img { position: relative; background: var(--maroon); display: grid; place-items: center; }
.dish--cut .dish__img::before { content: ''; position: absolute; inset: 0; background: var(--pat-waves) 0 0 / 90px 45px; opacity: .14; }
.dish--cut .dish__inner { position: relative; display: grid; place-items: center; }
.dish--cut .dish__img img { object-fit: contain; width: 88%; height: 88%; transform: rotate(-6deg) scale(1.02); filter: drop-shadow(0 30px 30px rgba(99, 15, 18, .35)); }
.dish--cut:hover .dish__img img { transform: rotate(-2deg) scale(1.06); }
.dish__cap { display: grid; gap: 8px; }
.dish__code { display: flex; align-items: center; gap: 12px; font: 600 .72rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .2em; color: var(--brown); }
.dish__code b { padding: 5px 9px 4px; border: 1px solid var(--maroon); border-radius: 999px; color: var(--maroon); letter-spacing: .1em; }
.dish__name { font: 700 clamp(1.6rem, 2.3vw, 2.3rem)/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.dish__name a:hover { color: var(--brown); }
.dish__text { max-width: 30em; font-size: .98rem; }
.rail__progress { position: absolute; left: var(--px); right: var(--px); bottom: 34px; height: 1px; background: rgba(114, 74, 42, .2); }
.rail__progress span { position: absolute; inset: 0; background: var(--maroon); transform-origin: left; transform: scaleX(0); }
html:not(.motion) .rail__track, .rail.is-native .rail__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
html:not(.motion) .rail__track > *, .rail.is-native .rail__track > * { scroll-snap-align: start; }
html:not(.motion) .rail__progress, .rail.is-native .rail__progress { display: none; }
.rail.is-native .rail__stage { position: relative; height: auto; display: block; }
@media (max-width: 860px) {
  .rail__track { align-items: start; padding-top: 70px; scroll-padding-left: var(--px); }
  .rail__intro { flex-basis: 62vw; }
  .dish { width: min(78vw, 420px); }
}

/* ---------- Home: order like a regular ---------- */
.order { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'intro out' 'form out' 'words words'; column-gap: clamp(40px, 7vw, 120px); row-gap: 40px; padding: clamp(90px, 15vh, 170px) var(--px); background: var(--green); color: var(--cream); isolation: isolate; }
.order::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pat-petal) 0 0 / 44px 44px; opacity: .06; }
.order .d-l { color: var(--cornsilk); }
.order__intro { grid-area: intro; display: grid; gap: 24px; max-width: 34em; }
.order__form { grid-area: form; display: grid; gap: 22px; }
.order fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.order legend { width: 100%; margin-bottom: 10px; font: 600 .7rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--cornsilk); }
.order label { position: relative; cursor: pointer; }
.order input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.order label span { display: inline-flex; align-items: baseline; gap: .45em; padding: .78em 1.25em; border: 1px solid rgba(245, 232, 214, .35); border-radius: 999px; font-weight: 600; font-size: .95rem; transition: background .35s var(--ease), color .35s, border-color .35s; }
.order label small { font-weight: 400; font-size: .8em; opacity: .75; }
.order label:hover span { border-color: var(--cream); }
.order input:checked + span { background: var(--cream); color: var(--green); border-color: var(--cream); }
.order input:focus-visible + span { outline: 2px solid var(--light-brown); outline-offset: 3px; }
.order input:disabled + span { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.order__out { grid-area: out; align-self: center; display: grid; justify-items: center; text-align: center; gap: 22px; }
.order__frame { width: min(460px, 80vw); padding: 12px; }
.order__photos { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brown); }
.order__photo { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.order__photo.is-on { opacity: 1; transform: none; }
.order__photo img { width: 100%; height: 100%; object-fit: cover; }
.order__say { font: 700 clamp(2.2rem, 4.6vw, 4.2rem)/1 var(--f-display); text-transform: uppercase; color: var(--cornsilk); min-height: 1em; }
.order__say span { display: inline-block; }
.order__means { font-size: 1.05rem; max-width: 26em; }
.order__note { font-size: .88rem; color: var(--cornsilk); max-width: 28em; min-height: 1.4em; }
.order__words { grid-area: words; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(195, 156, 97, .45); }
.order__words li { display: grid; gap: 6px; padding: 26px 24px 0 0; }
.order__words li + li { padding-left: 24px; border-left: 1px solid rgba(195, 156, 97, .25); }
.order__words b { font: 700 1.6rem/1 var(--f-display); text-transform: uppercase; color: var(--cornsilk); }
.order__words span { font-size: .92rem; color: rgba(245, 232, 214, .8); }
@media (max-width: 900px) {
  .order { grid-template-columns: 1fr; grid-template-areas: 'intro' 'out' 'form' 'words'; }
  .order__words { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .order__words li + li { padding-left: 0; border-left: 0; }
}

/* ---------- Home: menu board ---------- */
.board { position: relative; padding: clamp(90px, 15vh, 170px) var(--px); display: grid; gap: 48px; }
.board__head { display: grid; gap: 20px; }
.board__rows { border-top: 1px solid rgba(114, 74, 42, .25); }
.board__row { border-bottom: 1px solid rgba(114, 74, 42, .25); }
.board__row a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 44px; align-items: center; gap: clamp(16px, 3vw, 48px); padding: 22px 0; }
.board__name { font: 700 clamp(1.9rem, 4.6vw, 4.4rem)/1 var(--f-display); text-transform: uppercase; color: var(--maroon); transition: transform .6s var(--ease), color .4s; }
.board__count { font: 600 .74rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }
.board__plates { display: flex; }
.board__plates img { width: clamp(56px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid var(--cream); margin-left: -18px; background: var(--cornsilk); transition: transform .6s var(--ease); }
.board__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--maroon); color: var(--maroon); transition: background .4s, color .4s; }
.board__go svg { width: 18px; }
.board__row a:hover .board__name { transform: translateX(14px); color: var(--brown); }
.board__row a:hover .board__go { background: var(--maroon); color: var(--cream); }
.board__row a:hover .board__plates img:nth-child(1) { transform: translate(-6px, -6px) rotate(-8deg); }
.board__row a:hover .board__plates img:nth-child(2) { transform: translateY(-10px); }
.board__row a:hover .board__plates img:nth-child(3) { transform: translate(6px, -6px) rotate(8deg); }
.board__cta { justify-self: start; }
@media (max-width: 760px) {
  .board__row a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name go' 'count plates'; row-gap: 12px; }
  .board__name { grid-area: name; } .board__go { grid-area: go; } .board__count { grid-area: count; } .board__plates { grid-area: plates; }
  .board__plates img { width: 52px; margin-left: -12px; }
}

/* ---------- Borneo map ---------- */
.map { width: 100%; height: auto; overflow: visible; }
.map__land { fill: var(--brown); stroke: rgba(195, 156, 97, .35); stroke-width: 1; }
.map__state { fill: var(--light-brown); fill-opacity: .22; stroke: var(--light-brown); stroke-width: 1.2; stroke-opacity: .55; }
.map__region { font: 600 15px var(--f-body); font-stretch: 125%; letter-spacing: .35em; fill: rgba(195, 156, 97, .45); }
.map__dot { fill: var(--light-brown); stroke: var(--maroon); stroke-width: 2; }
.map__town--first .map__dot { fill: var(--cornsilk); stroke: var(--light-brown); stroke-width: 3; }
.map__route { fill: none; stroke: var(--light-brown); stroke-width: 1.3; stroke-opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.motion .map__route { stroke-dashoffset: 1; }
.map__ring { fill: none; stroke: var(--light-brown); stroke-width: 1; opacity: .5; transform-box: fill-box; transform-origin: center; animation: ring 2.8s var(--ease) infinite; }
.map__town:nth-child(3n) .map__ring { animation-delay: .9s; } .map__town:nth-child(3n+1) .map__ring { animation-delay: 1.8s; }
@keyframes ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.map__town text { font: 600 19px var(--f-body); fill: var(--cream); paint-order: stroke; stroke: var(--maroon); stroke-width: 4px; }
.map__town tspan { fill: var(--light-brown); }
a.map__town:hover .map__dot, a.map__town:focus-visible .map__dot, .map__town.is-on .map__dot { fill: var(--cornsilk); }

/* Outlets page: the map fills the hero behind the title. The page script fits each view (all, or one state) into
   the space beside the title so no town sits under the text; --u keeps lines at their screen weight and --rs sizes
   the region names. Tapping a town opens its outlets with Google Maps directions. */
.phero.phero--map { min-height: max(680px, 100svh); grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; }
.phero--map .phero__text { position: relative; z-index: 2; pointer-events: none; }
.phero--map .phero__text > * { pointer-events: auto; }
.phero--map .phero__text::before { content: ''; position: absolute; z-index: -1; inset: -70px -90px; background: radial-gradient(closest-side, rgba(99, 15, 18, .9), rgba(99, 15, 18, 0)); }
.omap { position: absolute; z-index: 1; left: 0; right: 0; top: var(--head-h); bottom: 0; }
.map--zoom { --u: 1; --rs: 15px; display: block; width: 100%; height: 100%; overflow: hidden; }
.map--zoom .map__land { stroke-width: calc(1px * var(--u)); }
.map--zoom .map__state { stroke-width: calc(1.2px * var(--u)); transition: fill-opacity .7s var(--ease), stroke-opacity .7s var(--ease); }
.map--zoom .map__route { stroke-width: calc(1.4px * var(--u)); }
.map--zoom .map__region { font-size: var(--rs); transition: opacity .7s var(--ease); }
.map--zoom .map__town, .map--zoom .map__route { transition: opacity .7s var(--ease); }
.map__region--nk { text-anchor: middle; opacity: 0; }
.map--zoom[data-focus="North Kalimantan"] .map__region--nk { opacity: 1; }
.map--zoom:not([data-focus="all"]) .map__state { fill-opacity: .07; stroke-opacity: .2; }
.map--zoom[data-focus="Sabah"] .map__state[data-region="Sabah"], .map--zoom[data-focus="Sarawak"] .map__state[data-region="Sarawak"] { fill-opacity: .4; stroke-opacity: 1; }
.map--zoom[data-focus="Sabah"] [data-state]:not([data-state="Sabah"]),
.map--zoom[data-focus="Sarawak"] [data-state]:not([data-state="Sarawak"]),
.map--zoom[data-focus="North Kalimantan"] [data-state]:not([data-state="North Kalimantan"]),
.map--zoom:not([data-focus="all"]) .map__region[data-region]:not(.map__region--nk) { opacity: .25; }
.map--zoom[data-focus="Sabah"] .map__region[data-region="Sabah"], .map--zoom[data-focus="Sarawak"] .map__region[data-region="Sarawak"] { opacity: 1; fill: var(--light-brown); }
.map--zoom a.map__town { cursor: pointer; }
.map--zoom a.map__town:focus { outline: none; }
.map--zoom a.map__town:focus-visible .map__dot, .map__town.is-picked .map__dot { fill: var(--cornsilk); stroke: var(--light-brown); stroke-width: 3; }

/* the town card: next to the dot on wide screens, a sheet along the bottom of the map on phones */
.omap__pop { position: absolute; z-index: 3; width: min(370px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 20px 20px 16px; background: var(--cornsilk); color: var(--brown); border: 1px solid var(--light-brown); box-shadow: 0 24px 60px rgba(99, 15, 18, .45); animation: pop-in .4s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px); } }
.omap__x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--maroon); font: 400 1.5rem/1 var(--f-body); cursor: pointer; }
.omap__x:hover { background: var(--cream); }
.omap__meta { font: 600 .66rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }
.omap__pop h3 { margin: 8px 0 12px; padding-right: 36px; font: 700 1.6rem/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.omap__pop ul { display: grid; }
.omap__pop li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(114, 74, 42, .18); }
.omap__pop li b { display: block; font-size: .98rem; color: var(--maroon); }
.omap__pop li span { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.35; }
.omap__go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: var(--maroon); color: var(--cornsilk); font: 600 .64rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; transition: background .3s; }
.omap__go:hover { background: var(--brown); }
.omap__go svg { width: 14px; }
.omap__more { display: inline-block; margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font: 600 .68rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); }
@media (max-width: 860px) {
  .phero.phero--map { min-height: 0; grid-template-columns: 1fr; }
  .phero--map .phero__text { order: 1; }
  .phero--map .phero__text::before { display: none; }
  .omap { position: relative; order: 2; top: auto; left: auto; right: auto; bottom: auto; margin: 0 calc(-1 * var(--px)); }
  .map--zoom { height: min(78vw, 480px); }
  .omap__pop { position: relative; left: auto !important; top: auto !important; width: auto; max-height: none; margin: 4px var(--px) 0; }
}

/* ---------- Home: outlets band ---------- */
.map-band { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 90px); align-items: center; padding: clamp(90px, 15vh, 170px) var(--px); background: var(--maroon); color: var(--cream); overflow: hidden; }
.map-band .d-l { color: var(--cornsilk); }
.map-band__text { display: grid; gap: 26px; justify-items: start; }
.map-band__states { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .95rem; }
.map-band__states b { font: 700 1.8rem/1 var(--f-display); color: var(--light-brown); margin-right: 6px; }
@media (max-width: 900px) { .map-band { grid-template-columns: 1fr; } }

/* ---------- Home: membership band ---------- */
.join-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: center; padding: clamp(80px, 13vh, 150px) var(--px); background: var(--cornsilk); color: var(--brown); }
.join-band .eyebrow { color: var(--brown); }
.join-band__text { display: grid; gap: 24px; justify-items: start; max-width: 36em; }
.join-band__tiers { display: grid; gap: 0; border-top: 1px solid rgba(114, 74, 42, .3); }
.join-band__tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(114, 74, 42, .3); }
.join-band__tiers b { font: 700 clamp(2.2rem, 4.4vw, 4rem)/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.join-band__tiers b::before { content: 'DOJO '; font-size: .4em; letter-spacing: .2em; vertical-align: middle; color: var(--brown); }
.join-band__tiers span { font: 600 .74rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }
@media (max-width: 860px) { .join-band { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { background: var(--maroon); color: var(--cream); }
.foot .fretbar { background-color: var(--maroon); height: 18px; }
.foot__inner { padding: clamp(70px, 12vh, 130px) var(--px) 34px; display: grid; gap: clamp(50px, 9vh, 90px); }
.foot__say { font: 700 clamp(2.6rem, 7.4vw, 7.6rem)/.9 var(--f-display); text-transform: uppercase; color: var(--cornsilk); }
.foot__say span { color: var(--light-brown); }
.foot__cols { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1.2fr 1fr; gap: 40px; }
.foot__brand { display: grid; gap: 18px; align-content: start; max-width: 22em; color: rgba(245, 232, 214, .78); font-size: .95rem; }
.foot__emblem { width: 112px; }
.foot__col { display: grid; gap: 12px; align-content: start; justify-items: start; }
.foot__col .eyebrow { margin-bottom: 6px; }
.foot__col a { font-size: .98rem; transition: color .3s; }
.foot__col a:hover { color: var(--light-brown); }
.foot__towns { font-size: .92rem; line-height: 1.9; color: rgba(245, 232, 214, .78); }
.foot__social svg { width: 22px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-top: 24px; border-top: 1px solid rgba(195, 156, 97, .25); font-size: .8rem; color: rgba(245, 232, 214, .6); }
@media (max-width: 900px) { .foot__cols { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* ---------- Inner pages: hero ---------- */
.phero { position: relative; min-height: min(100svh, 1000px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 6vw, 100px); align-items: center; padding: calc(var(--head-h) + clamp(32px, 6vh, 72px)) var(--px) clamp(56px, 9vh, 96px); background: var(--maroon); color: var(--cream); overflow: hidden; isolation: isolate; }
.phero::before { content: ''; position: absolute; z-index: -1; left: -10%; bottom: -30%; width: 60%; height: 90%; background: var(--pat-waves) 0 0 / 120px 60px; opacity: .09; -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.phero .d-xl { color: var(--cornsilk); font-size: clamp(2.8rem, 6.2vw, 6.6rem); }
.phero .d-xl .gold { color: var(--light-brown); }
.phero__text { display: grid; gap: 28px; justify-items: start; }
.phero__lede { max-width: 34em; font-size: clamp(1.02rem, 1.3vw, 1.22rem); color: rgba(255, 242, 223, .86); }
.phero__media { align-self: center; }
.phero__media .ph { position: relative; height: clamp(380px, 66svh, 700px); overflow: hidden; background: var(--maroon); }
.phero__media .ph img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
.phero--green { background: var(--green); }
@media (max-width: 860px) { .phero { min-height: 0; grid-template-columns: 1fr; align-items: start; } .phero__media .ph { height: auto; aspect-ratio: 4 / 3; } }

/* Inner heroes with a photo (lib.mjs heroPhoto): no frame. The photo bleeds off the right edge at full height and
   dissolves into the hero colour: it fades in from the left behind the title, out at the top so the signboard
   stays on the hero colour, and a wash of that colour tints the seam. It settles from a slight zoom on load. */
.phero { --hero-bg: var(--maroon); }
.phero--green { --hero-bg: var(--green); }
.phero__photo { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 62%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 16%, #000 48%), linear-gradient(180deg, transparent 0%, #000 24%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 16%, #000 48%), linear-gradient(180deg, transparent 0%, #000 24%, #000 80%, transparent 100%); mask-composite: intersect; }
.phero__photo img { position: absolute; left: 0; top: 0; width: 100%; height: 110%; object-fit: cover; }
.phero__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-bg) 0%, transparent 55%); opacity: .55; pointer-events: none; }
html.motion .phero__photo img { scale: 1.07; transition: scale 2.6s var(--ease); }
html.motion.ready .phero__photo img { scale: 1; }
.phero--photo .phero__text { position: relative; z-index: 1; }
.phero__cap { position: absolute; z-index: 1; right: var(--px); bottom: clamp(22px, 4vh, 40px); display: flex; align-items: center; gap: 10px; font: 600 .68rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--cornsilk); }
.phero__cap::before { content: ''; width: 28px; height: 1px; background: var(--light-brown); }
/* the feedback picker floats over its photo */
.fb-hero .phero__media { position: relative; z-index: 1; }
@media (max-width: 860px) {
  /* phones: the photo sits at the top under the signboard and fades down into the title */
  .phero__photo { position: relative; z-index: 0; width: auto; height: min(100vw, 540px); margin: calc(-1 * (var(--head-h) + clamp(32px, 6vh, 72px))) calc(-1 * var(--px)) -64px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, #000 40%, #000 64%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, #000 40%, #000 64%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .phero__photo::after { background: linear-gradient(0deg, var(--hero-bg) 0%, transparent 50%); }
  .phero__cap { display: none; }
}

/* ---------- Shared section bits ---------- */
.section { padding: clamp(80px, 14vh, 160px) var(--px); }
.wrap { width: 100%; }
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(36px, 6vh, 64px); max-width: 52em; }
.sec-head p:not(.eyebrow) { max-width: 40em; }
.on-dark { color: var(--cream); }
.on-dark .d-l, .on-dark .d-m, .on-dark .d-xl { color: var(--cornsilk); }

/* ---------- About ---------- */
.story-copy { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 7vw, 120px); align-items: start; }
.story-copy__body { display: grid; gap: 1.2em; font-size: 1.12rem; max-width: 38em; }
.story-copy__body p:first-child::first-letter { float: left; font: 700 4.4em/.8 var(--f-display); color: var(--maroon); margin: .06em .1em 0 0; }
.timeline { position: relative; background: var(--brown); color: var(--cream); padding: clamp(90px, 15vh, 160px) var(--px); overflow: hidden; }
.timeline .d-l { color: var(--cornsilk); }
.timeline__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: 60px; }
.timeline__line { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: rgba(195, 156, 97, .2); }
.timeline__line span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cornsilk), var(--light-brown)); transform-origin: left; transform: scaleX(0); }
html:not(.motion) .timeline__line span { transform: none; }
.timeline__item { position: relative; display: grid; gap: 14px; padding-top: 70px; }
.timeline__item::before { content: ''; position: absolute; top: 27px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--brown); border: 2px solid var(--light-brown); }
.timeline__item .timeline__year { font: 700 clamp(2.6rem, 4.6vw, 4.4rem)/1 var(--f-display); color: var(--light-brown); }
.timeline__item h3 { font: 700 1.25rem/1.2 var(--f-display); text-transform: uppercase; color: var(--cornsilk); letter-spacing: .02em; }
.timeline__item p { font-size: .98rem; color: rgba(245, 232, 214, .82); }
@media (max-width: 860px) { .timeline__list { grid-template-columns: 1fr 1fr; row-gap: 20px; } .timeline__line { display: none; } }
@media (max-width: 520px) { .timeline__list { grid-template-columns: 1fr; } }
.nanyang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 120px); align-items: center; }
.nanyang__big { font: 700 clamp(6rem, 16vw, 15rem)/.9 var(--f-cjk); color: var(--maroon); letter-spacing: .04em; }
.nanyang__body { display: grid; gap: 1.1em; font-size: 1.08rem; max-width: 36em; }
.nanyang__body strong, .nanyang__body em { color: var(--maroon); font-style: normal; font-weight: 600; }
@media (max-width: 860px) { .story-copy, .nanyang { grid-template-columns: 1fr; } .nanyang__big { font-size: clamp(5rem, 30vw, 8rem); } }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.gallery figure { position: relative; overflow: hidden; background: var(--cornsilk); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; background: rgba(99, 15, 18, .72); color: var(--cream); font: 600 .66rem/1.2 var(--f-body); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; }
.g-a { grid-column: span 7; aspect-ratio: 16 / 11; } .g-b { grid-column: span 5; aspect-ratio: 4 / 5; } .g-c { grid-column: span 4; aspect-ratio: 4 / 5; } .g-d { grid-column: span 4; aspect-ratio: 4 / 5; } .g-e { grid-column: span 4; aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .g-a, .g-b, .g-c, .g-d, .g-e { grid-column: span 12; aspect-ratio: 4 / 3; } }
.people { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(20px, 3vw, 40px); }
.people figure { overflow: hidden; }
.people img { width: 100%; height: 100%; object-fit: cover; }
.people__stack { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (max-width: 760px) { .people { grid-template-columns: 1fr; } }
/* Our Story: the record, full width and dark so the gold seal glows. Maroon falls away to near-black at the edges,
   as on the record card at the end of the Tarik film; the seal is sized from the band itself. */
.recordband { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: min(92svh, 920px); padding: clamp(80px, 12vh, 150px) var(--px); background: var(--maroon); color: var(--cream); }
.recordband::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 62% 78% at 30% 50%, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .5) 62%, rgba(0, 0, 0, .78) 100%); }
.recordband::after { content: ''; position: absolute; z-index: -1; right: -8%; bottom: -30%; width: 55%; height: 90%; background: var(--pat-waves) 0 0 / 120px 60px; opacity: .06; -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.recordband__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
.recordband__seal { position: relative; display: grid; place-items: center; }
/* a wide halo behind the seal, on top of its own pulsing glow */
.recordband__seal::before { content: ''; position: absolute; z-index: -1; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(195, 156, 97, .3) 0%, rgba(195, 156, 97, .1) 38%, rgba(195, 156, 97, 0) 66%); }
.recordband .seal__mark { filter: drop-shadow(0 0 22px rgba(195, 156, 97, .6)) drop-shadow(0 0 3px rgba(255, 242, 223, .6)); }
.recordband__text { display: grid; gap: 22px; justify-items: start; max-width: 40em; }
.recordband__cups { font: 700 clamp(3.4rem, 8.4vw, 9rem)/.86 var(--f-display); color: var(--light-brown); letter-spacing: -.01em; }
.recordband__cups span { display: block; margin-top: .3em; font-size: .3em; letter-spacing: .02em; text-transform: uppercase; color: var(--cornsilk); }
.recordband__text > p:last-child { max-width: 32em; font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: rgba(255, 242, 223, .86); }
@media (max-width: 860px) {
  .recordband { min-height: 0; }
  .recordband__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .recordband__text { justify-items: center; }
  .recordband .eyebrow { justify-content: center; letter-spacing: .16em; }
  .recordband .eyebrow::before { display: none; }
  .recordband::before { background: radial-gradient(ellipse 90% 60% at 50% 35%, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .5) 62%, rgba(0, 0, 0, .78) 100%); }
}
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(60px, 10vh, 110px) var(--px); background: var(--cornsilk); border-top: 1px solid rgba(114, 74, 42, .2); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Menu page ---------- */
.mnav { position: sticky; z-index: 50; top: 0; background: rgba(245, 232, 214, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(114, 74, 42, .2); transition: top .6s var(--ease); }
html.head-shown .mnav, html.head-shown .nbar { top: var(--head-h); }
.mnav__in { display: flex; align-items: center; gap: 20px; padding: 12px var(--px); }
.mnav__groups { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent); }
.mnav__groups::-webkit-scrollbar { display: none; }
.mnav__groups a { flex: none; padding: .7em 1.1em; border-radius: 999px; font: 600 .74rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); border: 1px solid transparent; transition: background .3s, color .3s, border-color .3s; }
.mnav__groups a:hover { border-color: rgba(99, 15, 18, .4); }
.mnav__groups a.is-on { background: var(--maroon); color: var(--cornsilk); }
.mnav__tools { display: flex; align-items: center; gap: 12px; flex: none; }
.mnav__search { position: relative; }
.mnav__search svg { position: absolute; left: 12px; top: 50%; width: 18px; transform: translateY(-50%); color: var(--brown); pointer-events: none; }
.mnav__search input { width: 220px; padding: .7em 1em .7em 2.5em; border-radius: 999px; border: 1px solid rgba(114, 74, 42, .35); background: var(--cornsilk); font-size: .92rem; color: var(--maroon); }
.mnav__search input::placeholder { color: rgba(114, 74, 42, .7); }
.mnav__fav { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 600 .74rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); }
.mnav__fav input { width: 18px; height: 18px; accent-color: var(--maroon); }
@media (max-width: 860px) { .mnav__in { flex-wrap: wrap; gap: 10px; } .mnav__groups { order: 2; flex-basis: 100%; } .mnav__tools { width: 100%; } .mnav__search { flex: 1; } .mnav__search input { width: 100%; } }
.mgroup { padding: clamp(70px, 12vh, 130px) var(--px) 20px; scroll-margin-top: 120px; }
.mgroup__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 26px; border-bottom: 2px solid var(--maroon); }
.mgroup__head p { max-width: 30em; }
.series { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: clamp(24px, 4vw, 64px); padding: clamp(40px, 7vh, 70px) 0; border-bottom: 1px solid rgba(114, 74, 42, .2); scroll-margin-top: 130px; }
.series__aside { position: relative; display: grid; gap: 14px; align-content: start; }
html.motion .series__aside { position: sticky; top: 150px; }
.series__name { font: 700 clamp(1.7rem, 2.6vw, 2.5rem)/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.series__tag { font: 400 1.15rem/1.35 var(--f-display); color: var(--maroon); }
.series__note { font-size: .9rem; padding: 12px 14px; background: var(--cornsilk); border-left: 2px solid var(--light-brown); }
.series__banner { margin-top: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cornsilk); }
.series__banner img { width: 100%; height: 100%; object-fit: cover; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(14px, 2vw, 26px); align-content: start; }
.item { display: grid; grid-template-rows: auto 1fr; background: var(--cornsilk); border: 1px solid rgba(114, 74, 42, .14); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.item:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(99, 15, 18, .12); }
.item__img { aspect-ratio: 1; overflow: hidden; background: var(--cornsilk); }
.item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.item:hover .item__img img { transform: scale(1.06) rotate(-2deg); }
.item__noimg { aspect-ratio: 1; display: grid; place-items: center; background: var(--cornsilk) var(--pat-petal) 0 0 / 30px 30px; }
.item__noimg span { font: 700 1.1rem/1 var(--f-display); letter-spacing: .2em; color: var(--maroon); background: var(--cornsilk); padding: 10px 14px; border: 1px solid var(--light-brown); }
.item__body { display: grid; gap: 6px; padding: 14px 16px 18px; align-content: start; }
.item__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.item__code { font: 600 .68rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .1em; padding: 4px 8px 3px; border: 1px solid rgba(99, 15, 18, .5); border-radius: 999px; color: var(--maroon); }
.item__tags { display: flex; gap: 6px; color: var(--maroon); }
.item__tags svg { width: 18px; height: 18px; }
.item__name { font: 600 1.02rem/1.25 var(--f-body); color: var(--maroon); }
.item__detail { font-size: .85rem; color: var(--brown); }
.item__price { font: 700 1.05rem/1 var(--f-display); color: var(--maroon); }
.item[hidden], .series[hidden], .mgroup[hidden] { display: none; }
.mempty { padding: 80px var(--px); text-align: center; font: 400 1.4rem/1.4 var(--f-display); color: var(--maroon); }
@media (max-width: 860px) {
  .series { grid-template-columns: 1fr; }
  html.motion .series__aside { position: relative; top: auto; }
  .series__banner { aspect-ratio: 16 / 9; }
  .items { grid-template-columns: 1fr; gap: 0; }
  .item { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto; border-width: 0 0 1px; background: transparent; }
  .item:hover { transform: none; box-shadow: none; }
  .item__img, .item__noimg { aspect-ratio: 1; margin: 12px 0; border-radius: 50%; }
  .item__noimg span { font-size: .7rem; padding: 6px 8px; }
}
.haus { background: var(--maroon); color: var(--cream); }
.haus .mgroup__head { border-color: var(--light-brown); }
.haus .d-l { color: var(--cornsilk); }
.haus__board { columns: 2 340px; column-gap: clamp(30px, 6vw, 90px); padding-top: 40px; }
.haus__series { break-inside: avoid; margin-bottom: 40px; }
.haus__series h3 { font: 700 1.4rem/1.1 var(--f-display); text-transform: uppercase; color: var(--light-brown); }
.haus__series > p { font-size: .9rem; color: rgba(245, 232, 214, .7); margin: 4px 0 12px; }
.haus__series li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dotted rgba(195, 156, 97, .4); }
.haus__series li b { font-weight: 600; }
.haus__series li i { flex: 1; }
.haus__series li small { font: 600 .7rem/1 var(--f-body); letter-spacing: .1em; color: var(--light-brown); }
.seasonal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 28px); padding-top: 40px; }
.season { display: grid; background: var(--cornsilk); border: 1px solid rgba(114, 74, 42, .14); }
.season__img { aspect-ratio: 3 / 2; overflow: hidden; }
.season__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.season:hover .season__img img { transform: scale(1.05); }
.season__body { padding: 18px 20px 22px; display: grid; gap: 8px; }
.season__body h3 { font: 700 1.4rem/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.season__body p { font-size: .9rem; }
.also { margin-top: 40px; padding: 26px 28px; border: 1px solid var(--light-brown); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.also b { font: 700 1.2rem/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.price-note { font-size: .85rem; color: rgba(255, 242, 223, .7); }

/* ---------- Outlets page ---------- */
.ofind { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.ofind__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: .7em 1.15em; border-radius: 999px; border: 1px solid rgba(245, 232, 214, .4); background: none; color: var(--cream); font: 600 .74rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--cream); }
.chip[aria-pressed="true"] { background: var(--light-brown); border-color: var(--light-brown); color: var(--maroon); }
.otowns { padding: clamp(70px, 12vh, 130px) var(--px); display: grid; gap: clamp(50px, 8vh, 90px); }
.otown { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 60px); scroll-margin-top: 110px; padding-top: 26px; border-top: 2px solid var(--maroon); }
.otown__name { display: grid; gap: 8px; align-content: start; }
.otown__name h2 { font: 700 clamp(1.8rem, 3vw, 2.8rem)/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.otown__name p { font: 600 .72rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; }
.ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(14px, 2vw, 26px); }
.ocard { display: grid; grid-template-rows: auto 1fr; background: var(--cornsilk); border: 1px solid rgba(114, 74, 42, .16); }
.ocard__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--maroon); }
.ocard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ocard:hover .ocard__img img { transform: scale(1.05); }
.ocard__ph { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--maroon); }
.ocard__ph::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(195, 156, 97, .45); outline: 1px solid rgba(195, 156, 97, .2); outline-offset: -6px; }
.ocard__ph img { position: relative; width: 44%; opacity: .92; }
.ocard__body { display: grid; gap: 10px; padding: 18px 20px 20px; align-content: start; }
.ocard__body h3 { font: 700 1.3rem/1.1 var(--f-display); text-transform: uppercase; color: var(--maroon); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocard__badge { font: 600 .6rem/1 var(--f-body); letter-spacing: .14em; padding: 5px 8px 4px; border-radius: 999px; background: var(--green); color: var(--cream); }
.ocard__addr { font-size: .92rem; }
.ocard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 .74rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); }
.ocard__go svg { width: 18px; }
.ocard__go:hover { color: var(--brown); }
.otown[hidden] { display: none; }
@media (max-width: 860px) { .ofind { grid-template-columns: 1fr; } .otown { grid-template-columns: 1fr; } }

/* ---------- Membership page ---------- */
.mhero__offer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; background: rgba(99, 15, 18, .22); border: 1px solid rgba(195, 156, 97, .5); max-width: 560px; }
.mhero__offer img { width: 120px; background: #fff; padding: 8px; }
.mhero__offer b { display: block; font: 700 1.3rem/1.15 var(--f-display); text-transform: uppercase; color: var(--cornsilk); margin-bottom: 6px; }
.mhero__offer small { display: block; margin-top: 8px; font-size: .78rem; opacity: .75; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.tier { position: relative; display: grid; gap: 18px; align-content: start; padding: 34px 30px 32px; background: var(--cornsilk); border: 1px solid rgba(114, 74, 42, .18); }
.tier--kaki { background: var(--maroon); color: var(--cream); }
.tier--gang { background: var(--brown); color: var(--cream); }
.tier__name { font: 700 clamp(2.2rem, 3.4vw, 3.2rem)/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.tier--kaki .tier__name, .tier--gang .tier__name { color: var(--light-brown); }
.tier__tag { font: 400 1.1rem/1.3 var(--f-display); }
.tier__facts { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; font-size: .92rem; }
.tier__facts b { font-weight: 600; }
.tier ul { display: grid; gap: 8px; font-size: .95rem; }
.tier li { position: relative; padding-left: 20px; }
.tier li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border: 1px solid var(--light-brown); transform: rotate(45deg); }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.refer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.refer__fig { overflow: hidden; aspect-ratio: 4 / 3; }
.refer__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .refer { grid-template-columns: 1fr; } }
.contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.contact > div { display: grid; gap: 12px; align-content: start; padding: 28px; border: 1px solid rgba(195, 156, 97, .45); }
.contact h3 { font: 700 1.4rem/1.1 var(--f-display); text-transform: uppercase; color: var(--light-brown); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }


/* ---------- Home intro (first visit per session): the DOJO pill is a window onto the brand film, then zooms into the hero ----------
   Every moving part animates transform or opacity only; the masks are set once, so the GPU just recomposites. */
.opening { display: none; }
html.first-open .shutter { display: none; }
html.first-open .opening { display: block; position: fixed; inset: 0; z-index: 130; overflow: hidden; --s: 980px; --mask: url(/assets/img/dojo-pill-mask-1600.webp); --cx: 50vw; --cy: 50vh; --r0: 120px; }
.opening__veil, .opening__shine { position: absolute; inset: -15%; will-change: transform, opacity; }
.opening__curtain { position: absolute; inset: 0; will-change: opacity; }
.opening__veil, .opening__curtain { background: radial-gradient(34% 30% at 50% 50%, rgba(195, 156, 97, .16), rgba(195, 156, 97, 0) 70%), var(--maroon); }
/* everything except the logo: the four circles (and their outline ring) show the film, the letters stay maroon */
.opening__veil {
  -webkit-mask-image: linear-gradient(#000, #000), var(--mask); -webkit-mask-size: 100% 100%, var(--s) auto; -webkit-mask-position: 0 0, 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), var(--mask); mask-size: 100% 100%, var(--s) auto; mask-position: 0 0, 50% 50%; mask-repeat: no-repeat; mask-composite: exclude; }
/* a band of light crosses the logo once: the band moves, the mask stays put */
.opening__shine { -webkit-mask: var(--mask) 50% 50% / var(--s) auto no-repeat; mask: var(--mask) 50% 50% / var(--s) auto no-repeat; }
.opening__band { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, rgba(255, 242, 223, 0), rgba(255, 242, 223, .42) 50%, rgba(255, 242, 223, 0)); will-change: transform; transform: translateX(-110%); }
.opening__cap { position: absolute; left: 0; right: 0; top: calc(50% + var(--s) * .167 + clamp(24px, 4vh, 44px)); display: grid; justify-items: center; gap: 12px; text-align: center; will-change: transform, opacity; }
.opening__cap .cjk { font-size: clamp(1.05rem, 1.6vw, 1.4rem); letter-spacing: .6em; margin-right: -.6em; color: var(--light-brown); }
.opening__cap span:last-child { font: 600 .7rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase; color: rgba(245, 232, 214, .75); }
@media (max-width: 760px) { .opening__cap span:last-child { font-size: .6rem; letter-spacing: .2em; } }
.opening__skip { position: absolute; right: var(--px); bottom: 28px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(245, 232, 214, .4); background: none; color: rgba(245, 232, 214, .8); font: 600 .66rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.opening__skip:hover { color: var(--light-brown); border-color: var(--light-brown); }
html.first-open .hero__veil { opacity: 0; }
.hero__veil { will-change: opacity; }
/* if scripts never run, get out of the way */
html.first-open:not(.ready) .opening { animation: opening-failsafe .8s 8s forwards; }
@keyframes opening-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- Malaysia Book of Records seal (gold mark, turning ring, light sweep) ---------- */
.seal { position: relative; width: var(--seal, 200px); aspect-ratio: 1; display: grid; place-items: center; }
.seal::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(195, 156, 97, .22), rgba(195, 156, 97, 0) 70%); animation: seal-glow 3.6s ease-in-out infinite; }
@keyframes seal-glow { 50% { transform: scale(1.18); opacity: .6; } }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: seal-turn 48s linear infinite; }
@keyframes seal-turn { to { transform: rotate(360deg); } }
.seal__ring circle { fill: none; stroke: var(--light-brown); stroke-width: .8; }
.seal__ring circle:first-of-type { stroke-dasharray: 1.2 3.2; stroke-width: 1.4; }
.seal__ring text { font: 600 8.6px var(--f-body); font-stretch: 112%; letter-spacing: .1em; fill: var(--light-brown); }
/* the mark is 640x338 with the box in x 0-588 and the ® to its right: shift by 4.03% so the box itself is centred */
.seal__mark { position: relative; display: block; width: 63%; transform: translateX(4.03%); filter: drop-shadow(0 0 12px rgba(195, 156, 97, .5)) drop-shadow(0 0 2px rgba(255, 242, 223, .55)); }
.seal__mark img { display: block; width: 100%; height: auto; }
.seal__shine { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 242, 223, 0) 38%, rgba(255, 242, 223, .95) 50%, rgba(255, 242, 223, 0) 62%) 130% 0 / 260% 100% no-repeat;
  -webkit-mask: url(/assets/img/mbor-gold-640.webp) 50% 50% / 100% 100% no-repeat; mask: url(/assets/img/mbor-gold-640.webp) 50% 50% / 100% 100% no-repeat; animation: seal-shine 4.8s var(--ease) 1.2s infinite; }
@keyframes seal-shine { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
.seal--tarik { --seal: clamp(240px, 30vw, 420px); }
.seal--about { --seal: clamp(280px, min(42vw, 70svh), 640px); }
@media (max-width: 860px) { .seal--about { --seal: min(80vw, 440px); } }

/* ---------- Social links ---------- */
.foot__social { display: inline-flex; align-items: center; gap: 10px; }
.drawer__social { display: flex; gap: 12px; margin-top: 18px; }
.drawer__social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(195, 156, 97, .5); border-radius: 50%; color: var(--light-brown); }
.drawer__social svg { width: 20px; }
.contact__social { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.contact__social a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--light-brown); }
.contact__social a:hover { color: var(--cornsilk); }
.contact__social svg { width: 20px; }

/* ---------- Shared bits for News, Feedback and Licensing ---------- */
.link--light { color: var(--light-brown); }
.link--light:hover { color: var(--cornsilk); }
.phero--thanks { min-height: min(86svh, 820px); grid-template-columns: minmax(0, 1fr); }
.phero--thanks .phero__text { max-width: 46em; }

/* ---------- Forms (licensing enquiry, private feedback) ---------- */
.dform { display: grid; gap: clamp(26px, 4vh, 40px); }
.dform__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dform__set { margin: 0; padding: 0; border: 0; display: grid; gap: 20px; min-width: 0; }
.dform__set > legend { display: flex; align-items: baseline; gap: 12px; padding: 0 0 6px; margin-bottom: 18px; width: 100%; border-bottom: 1px solid rgba(114, 74, 42, .25); font: 700 clamp(1.3rem, 2vw, 1.6rem)/1.1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.dform__set > legend b { font: 600 .72rem/1 var(--f-body); font-stretch: 125%; letter-spacing: .2em; color: var(--brown); }
.dform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.fld { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld__label { padding: 0; font: 600 .78rem/1.3 var(--f-body); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); }
.fld__opt { margin-left: 6px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--brown); opacity: .85; }
.fld input:not([type=checkbox]):not([type=radio]), .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid rgba(114, 74, 42, .38); border-radius: 10px; background: var(--cornsilk); color: var(--maroon); font: 400 1rem/1.4 var(--f-body); transition: border-color .25s, box-shadow .25s; }
.fld textarea { resize: vertical; min-height: 120px; }
.fld select { appearance: none; padding-right: 44px; background: var(--cornsilk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23630f12' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 18px center; cursor: pointer; }
.fld ::placeholder { color: rgba(114, 74, 42, .6); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(99, 15, 18, .14); }
.fld__err { font-size: .86rem; font-weight: 600; color: var(--maroon); }
.fld__err::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--maroon); vertical-align: middle; }
.fld.is-invalid input:not([type=checkbox]):not([type=radio]), .fld.is-invalid select, .fld.is-invalid textarea { border-color: var(--maroon); border-width: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: block; padding: 12px 18px; border: 1px solid rgba(114, 74, 42, .38); border-radius: 999px; background: var(--cornsilk); color: var(--maroon); font-size: .95rem; line-height: 1.25; transition: background .25s, color .25s, border-color .25s; }
.pill:hover span { border-color: var(--maroon); }
.pill input:checked + span { background: var(--maroon); border-color: var(--maroon); color: var(--cornsilk); }
.pill input:focus-visible + span { outline: 2px solid var(--maroon); outline-offset: 3px; }
.fld.is-invalid .pill span { border-color: var(--maroon); }
.fld--check label { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-size: .95rem; line-height: 1.5; }
.fld--check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--maroon); cursor: pointer; }
.stars { display: flex; align-items: center; gap: 6px; }
.stars label { position: relative; cursor: pointer; }
.stars input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.stars svg { width: 40px; height: 40px; fill: transparent; stroke: var(--light-brown); stroke-width: 1.4; stroke-linejoin: round; transition: fill .2s, transform .3s var(--ease); }
.stars label:hover svg { transform: scale(1.12); }
.stars:not(:hover) label:has(~ label input:checked) svg, .stars:not(:hover) label:has(input:checked) svg,
.stars label:has(~ label:hover) svg, .stars label:hover svg { fill: var(--light-brown); }
.stars input:focus-visible + svg { outline: 2px solid var(--maroon); outline-offset: 2px; border-radius: 4px; }
.stars__word { margin-left: 12px; font: 600 .78rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--brown); }
.dform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.dform__foot .btn[disabled] { opacity: .6; cursor: progress; }
.dform__status { font-weight: 600; color: var(--maroon); }
.dform__done { display: grid; gap: 16px; justify-items: start; padding: clamp(28px, 5vw, 56px); background: var(--cornsilk); border: 1px solid rgba(114, 74, 42, .2); }
.dform__done:focus { outline: none; }
@media (max-width: 640px) { .dform__grid { grid-template-columns: 1fr; } .pill span { padding: 11px 15px; font-size: .92rem; } }

/* ---------- Feedback ---------- */
.fb-hero { min-height: min(92svh, 880px); }
.fb-pick .lattice { padding: 14px; }
.fb-pick__in { display: grid; gap: 20px; padding: clamp(26px, 4vw, 48px); background: var(--cornsilk); color: var(--brown); }
.fb-step { display: flex; align-items: center; gap: 14px; font: 700 clamp(1.4rem, 2.2vw, 1.9rem)/1.1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.fb-step b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--maroon); color: var(--cornsilk); font: 600 .9rem/1 var(--f-body); }
.fb-select { position: relative; }
.fb-select svg { position: absolute; left: 18px; top: 50%; width: 22px; transform: translateY(-50%); color: var(--maroon); pointer-events: none; }
.fb-select select { width: 100%; min-height: 64px; padding: 16px 48px 16px 52px; appearance: none; border: 1px solid var(--maroon); border-radius: 12px; background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23630f12' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 20px center; color: var(--maroon); font: 600 1.08rem/1.3 var(--f-body); cursor: pointer; }
.fb-select select:focus { outline: none; box-shadow: 0 0 0 3px rgba(99, 15, 18, .18); }
.fb-pick__where { font-size: .95rem; min-height: 3em; }
.fb-pick.is-needed .fb-pick__in { animation: fb-nudge .5s var(--ease); }
.fb-pick.is-needed .fb-select select { box-shadow: 0 0 0 4px rgba(195, 156, 97, .7); }
@keyframes fb-nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.fb-ways { background: var(--cream); }
.fb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.fb-card { display: grid; gap: 16px; align-content: start; justify-items: start; padding: clamp(28px, 4vw, 52px); background: var(--cornsilk); border: 1px solid rgba(114, 74, 42, .2); }
.fb-card h3 { font: 700 clamp(1.7rem, 2.8vw, 2.4rem)/1 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.fb-card p { max-width: 32em; }
.fb-card b { color: var(--maroon); }
.fb-card__icon { display: block; height: 30px; color: var(--maroon); }
.fb-card__icon svg { height: 100%; width: auto; }
.fb-card__icon--stars svg { fill: var(--light-brown); }
.fb-card__note { font-size: .86rem; opacity: .85; }
.fb-card .btn { margin-top: 6px; }
.fb-card .btn[aria-disabled=true] { opacity: .55; }
.fb-write { background: var(--cornsilk); border-top: 1px solid rgba(114, 74, 42, .16); }
.fb-write__in { max-width: 880px; }
html.js .fb-write:not(.is-open) { display: none; }
@media (max-width: 860px) { .fb-cards { grid-template-columns: 1fr; } }

/* ---------- Licensing ---------- */
.lic-facts { padding: 0 var(--px); background: var(--maroon); }
.lic-facts dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(195, 156, 97, .35); }
.lic-facts dl > div { display: grid; gap: 6px; align-content: start; padding: clamp(28px, 5vh, 48px) clamp(14px, 2vw, 28px) clamp(40px, 7vh, 72px); border-left: 1px solid rgba(195, 156, 97, .35); }
.lic-facts dl > div:first-child { border-left: 0; padding-left: 0; }
.lic-facts dt { font: 600 .72rem/1.2 var(--f-body); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--light-brown); }
.lic-facts dd { margin: 0; font: 700 clamp(2.4rem, 4.6vw, 4.4rem)/1 var(--f-display); color: var(--cornsilk); }
.lic-facts p { font-size: .92rem; color: rgba(255, 242, 223, .8); max-width: 18em; }
@media (max-width: 860px) { .lic-facts dl { grid-template-columns: 1fr 1fr; } .lic-facts dl > div:nth-child(3) { border-left: 0; padding-left: 0; } .lic-facts dl > div:nth-child(n+3) { border-top: 1px solid rgba(195, 156, 97, .35); } }
.lic-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.lic-why__grid article { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 2px solid var(--maroon); }
.lic-why__grid h3 { font: 700 clamp(1.5rem, 2.2vw, 2rem)/1.05 var(--f-display); text-transform: uppercase; color: var(--maroon); }
@media (max-width: 860px) { .lic-why__grid { grid-template-columns: 1fr; } }
.lic-steps { background: var(--green); color: var(--cream); }
.lic-steps .d-l { color: var(--cornsilk); }
.lic-steps .eyebrow { color: var(--cornsilk); }
.lic-steps__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: step; }
.lic-steps__list li { display: grid; gap: 12px; align-content: start; padding: 26px clamp(14px, 1.6vw, 24px) 10px 0; border-top: 1px solid rgba(255, 242, 223, .4); }
.lic-steps__n { font: 700 2.6rem/1 var(--f-display); color: var(--light-brown); }
.lic-steps__list h3 { font: 700 1.25rem/1.1 var(--f-display); text-transform: uppercase; color: var(--cornsilk); }
.lic-steps__list p { font-size: .95rem; color: rgba(255, 242, 223, .86); }
@media (max-width: 1000px) { .lic-steps__list { grid-template-columns: 1fr; } .lic-steps__list li { grid-template-columns: 70px 1fr; column-gap: 16px; padding: 22px 0; } .lic-steps__n { grid-row: span 2; } }
.lic-form { background: var(--cream); }
.lic-form__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.lic-form__side { position: sticky; top: calc(var(--head-h) + 30px); display: grid; gap: 22px; }
.lic-form__list { display: grid; gap: 10px; }
.lic-form__list li { display: flex; gap: 12px; align-items: baseline; color: var(--maroon); font-weight: 600; }
.lic-form__list li::before { content: ''; flex: none; width: 8px; height: 8px; transform: rotate(45deg) translateY(-2px); background: var(--light-brown); }
.lic-form__small { font-size: .86rem; opacity: .9; max-width: 26em; }
@media (max-width: 960px) { .lic-form__in { grid-template-columns: 1fr; } .lic-form__side { position: static; } }

/* ---------- News & promotions ---------- */
.nbar { position: sticky; z-index: 50; top: 0; background: rgba(245, 232, 214, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(114, 74, 42, .2); transition: top .6s var(--ease); }
.nbar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px var(--px); }
.nbar__cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.nbar__cats::-webkit-scrollbar { display: none; }
.nbar__cat { flex: none; padding: .75em 1.15em; border-radius: 999px; border: 1px solid transparent; font: 600 .74rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); transition: border-color .3s, background .3s, color .3s; }
.nbar__cat:hover { border-color: rgba(99, 15, 18, .4); }
.nbar__cat[aria-current] { background: var(--maroon); color: var(--cornsilk); }
.nbar__outlet { position: relative; display: flex; align-items: center; gap: 8px; }
.nbar__outlet > svg { position: absolute; left: 14px; width: 18px; color: var(--maroon); pointer-events: none; }
.nbar__outlet select { appearance: none; min-width: 240px; padding: .75em 2.6em .75em 2.6em; border-radius: 999px; border: 1px solid rgba(114, 74, 42, .35); background: var(--cornsilk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23630f12' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; color: var(--maroon); font: 600 .9rem/1.2 var(--f-body); cursor: pointer; }
.nbar__go { padding: .75em 1.2em; border-radius: 999px; border: 1px solid var(--maroon); background: var(--maroon); color: var(--cornsilk); font: 600 .72rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
html.js .nbar__go { display: none; }
@media (max-width: 700px) { .nbar__outlet, .nbar__outlet select { width: 100%; } }
.news { padding: clamp(48px, 8vh, 90px) var(--px) clamp(80px, 12vh, 140px); }
.ncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2.2vw, 30px); }
.ncard { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--cornsilk); border: 1px solid rgba(114, 74, 42, .16); transition: border-color .4s; }
.ncard:hover { border-color: rgba(99, 15, 18, .45); }
.ncard.is-pinned { border-color: var(--light-brown); box-shadow: inset 0 0 0 1px var(--light-brown); }
.ncard__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--maroon); }
.ncard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ncard:hover .ncard__img img { transform: scale(1.04); }
.ncard__ph { position: relative; display: grid; place-items: center; height: 100%; background: var(--maroon); }
.ncard__ph::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(195, 156, 97, .45); outline: 1px solid rgba(195, 156, 97, .2); outline-offset: -6px; }
.ncard__ph img { position: relative; width: 40%; height: auto; object-fit: contain; }
.ncard:hover .ncard__ph img { transform: none; }
.ncard__body { display: grid; gap: 12px; align-content: start; padding: 20px 22px 24px; }
.ncard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ntag { display: inline-block; padding: 5px 9px 4px; border-radius: 999px; font: 600 .62rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; background: var(--maroon); color: var(--cornsilk); }
.ntag--news { background: var(--green); }
.ntag--event { background: var(--brown); }
.ntag--notice { background: var(--light-brown); color: var(--maroon); }
.ntag--pin { background: transparent; border: 1px solid var(--light-brown); color: var(--brown); }
.ncard__title { font: 700 clamp(1.35rem, 1.8vw, 1.6rem)/1.08 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.ncard__title a::after { content: ''; position: absolute; inset: 0; }
.ncard__sum { font-size: .96rem; }
.ncard__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; font: 600 .72rem/1.3 var(--f-body); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--brown); }
.ncard__meta span { display: inline-flex; align-items: center; gap: 7px; }
.ncard__meta svg { width: 16px; flex: none; }
.nempty { display: grid; gap: 14px; justify-items: start; max-width: 40em; padding: clamp(30px, 5vw, 56px); border: 1px dashed rgba(114, 74, 42, .4); }
.nempty a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.npreview { position: relative; z-index: 2; margin: 0; padding: calc(var(--head-h) + 10px) var(--px) 12px; background: var(--light-brown); color: var(--maroon); font-weight: 600; }
.npreview + .nitem .nitem__top { padding-top: 48px; }
.nitem__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 6vw, 100px); align-items: center; padding: calc(var(--head-h) + clamp(32px, 6vh, 72px)) var(--px) clamp(56px, 9vh, 96px); background: var(--maroon); color: var(--cream); }
.nitem__top:not(:has(.nitem__img)) { grid-template-columns: minmax(0, 1fr); }
.nhead { display: grid; gap: 22px; justify-items: start; max-width: 44em; }
.nhead .d-l { color: var(--cornsilk); font-size: clamp(2.4rem, 5vw, 4.8rem); }
.nhead .eyebrow { color: var(--light-brown); }
.nhead__sum { font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: rgba(255, 242, 223, .88); max-width: 34em; }
.nback { display: inline-flex; align-items: center; gap: 10px; font: 600 .74rem/1 var(--f-body); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--light-brown); }
.nback svg { width: 18px; transition: transform .4s var(--ease); }
.nback:hover svg { transform: translateX(-4px); }
.nhead__facts { display: grid; gap: 14px; margin: 0; padding: 18px 0; border-top: 1px solid rgba(195, 156, 97, .35); border-bottom: 1px solid rgba(195, 156, 97, .35); width: 100%; }
.nhead__facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.nhead__facts dt { display: inline-flex; align-items: center; gap: 8px; font: 600 .72rem/1.6 var(--f-body); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--light-brown); }
.nhead__facts dt svg { width: 16px; }
.nhead__facts dd { margin: 0; color: var(--cornsilk); }
.nhead__facts ul { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.nhead__facts a { text-decoration: underline; text-decoration-color: rgba(195, 156, 97, .6); text-underline-offset: 3px; }
.nitem__img { position: relative; padding: 14px; }
.nitem__img::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--light-brown); }
.nitem__img img { width: 100%; height: auto; max-height: 72svh; object-fit: cover; }
.nitem__body { display: grid; gap: 1.1em; max-width: 46em; padding: clamp(56px, 9vh, 100px) var(--px) clamp(80px, 12vh, 130px); font-size: 1.08rem; }
.nitem__body a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.nhead--gone { min-height: 70svh; align-content: center; max-width: none; padding: calc(var(--head-h) + 60px) var(--px) 90px; background: var(--maroon); color: var(--cream); }
.nhead--gone .nhead__sum { max-width: 30em; }
@media (max-width: 860px) { .nitem__top { grid-template-columns: 1fr; } .nhead__facts > div { grid-template-columns: 1fr; gap: 4px; } }

/* Home: "Now at DOJO" band (filled from /api/announcements.php; stays hidden when nothing is on) */
.now { padding: clamp(70px, 12vh, 130px) var(--px); background: var(--cornsilk); border-bottom: 1px solid rgba(114, 74, 42, .16); }
.now__head { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 40px; margin-bottom: clamp(30px, 5vh, 52px); }
.now__head .eyebrow { flex-basis: 100%; }
.now__head .link { margin-left: auto; }
.now .ncard { background: var(--cream); }

/* Outlet cards: directions + review, and a live promotion when there is one */
.ocard__links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 4px; }
.ocard__links .ocard__go { margin-top: 0; }
.ocard__promo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--maroon); color: var(--cornsilk); font-size: .88rem; line-height: 1.3; }
.ocard__promo b { flex: none; font: 600 .6rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--light-brown); }
.ocard__promo:hover { background: var(--brown); }

/* ---------- Outlet pages (/outlets/<slug>/) ---------- */
.btn--line-dark { --b: transparent; --t: var(--maroon); --h: var(--maroon); border-color: rgba(99, 15, 18, .45); }
.btn--line-dark:hover { color: var(--cornsilk); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: clamp(30px, 5vh, 56px); font: 600 .72rem/1.4 var(--f-body); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--brown); }
.crumbs a { color: var(--maroon); border-bottom: 1px solid rgba(99, 15, 18, .3); }
.crumbs a:hover { border-color: var(--maroon); }
.crumbs span[aria-hidden] { opacity: .5; }
.oview__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.oview__facts { display: grid; gap: 24px; justify-items: start; }
.oview__facts dl { width: 100%; margin: 0; border-top: 1px solid rgba(114, 74, 42, .22); }
.oview__facts dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(114, 74, 42, .22); }
.oview__facts dt { font: 600 .72rem/1.7 var(--f-body); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--brown); }
.oview__facts dd { margin: 0; color: var(--maroon); }
.oview__facts dd a { text-decoration: underline; text-underline-offset: 3px; }
.oview__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.oview__photo { margin: 0; }
.oview__photo img { display: block; width: 100%; height: auto; }
.oview__photo .ocard__ph { aspect-ratio: 4 / 3; }
.otry { background: var(--cornsilk); }
.otry__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.otry__list a { display: grid; gap: 10px; height: 100%; padding: 24px 22px; border: 1px solid rgba(114, 74, 42, .2); background: var(--cream); transition: border-color .3s, transform .4s var(--ease); }
.otry__list a:hover { border-color: var(--maroon); transform: translateY(-3px); }
.otry__list b { font: 700 1.3rem/1.05 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.otry__list span { font-size: .92rem; }
.otry__list svg { width: 20px; color: var(--maroon); }
.onear { display: grid; gap: 30px; justify-items: start; }
.onear .ocards { width: 100%; }
@media (max-width: 960px) { .otry__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .oview__grid { grid-template-columns: 1fr; } .oview__facts dl > div { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 520px) { .otry__list { grid-template-columns: 1fr; } }
/* outlet card titles are links now */
.ocard__body h3 a, .ocard__body h2 a { transition: color .3s; }
.ocard__body h3 a:hover, .ocard__body h2 a:hover { color: var(--brown); }
.omap__name { display: block; }
.omap__name:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ ---------- */
.faq__list { display: grid; max-width: 980px; border-top: 1px solid rgba(114, 74, 42, .25); }
.faq__item { border-bottom: 1px solid rgba(114, 74, 42, .25); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h2 { font: 700 clamp(1.25rem, 2vw, 1.7rem)/1.15 var(--f-display); text-transform: uppercase; color: var(--maroon); }
.faq__item summary i { position: relative; flex: none; width: 38px; height: 38px; border: 1px solid rgba(99, 15, 18, .4); border-radius: 50%; }
.faq__item summary i::before, .faq__item summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--maroon); transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item summary:hover h2 { color: var(--brown); }
.faq__a { padding: 0 60px 28px 0; max-width: 46em; font-size: 1.04rem; }
.faq__a a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .faq__a { padding-right: 0; } }

/* ---------- Reveal helpers (JS adds the motion) ---------- */
html.motion [data-reveal] { opacity: 0; transform: translateY(28px); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
html.motion [data-clip] { clip-path: inset(100% 0 0 0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }