/* 8 Limbs: a Thai fight poster printed in Kerala.
   Three spot inks (corner red, corner blue, indigo) on marigold, with deliberate misregistration.
   Layout: full-bleed colour bands, each one a sheet from the same print run. */
:root {
  --marigold: #FFB400;
  --red: #E30B2C;
  --blue: #0B3BE0;
  --ink: #17124F;
  --paper: #FFF3D6;
  --pink: #FF5FA2;
  --leaf: #0E9F6E;

  --display: 'Dela Gothic One', 'Arial Black', Impact, sans-serif;
  --body: 'Kanit', 'Sarabun', 'Segoe UI', system-ui, sans-serif;
  --mal: 'Baloo Chettan 2', 'Noto Sans Malayalam', sans-serif;

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --band: clamp(56px, 9vw, 120px);

  --t-sm: 1rem;
  --t-md: 1.25rem;
  --t-lg: clamp(1.5rem, 2.6vw, 2.1rem);
  --t-xl: clamp(2.4rem, 6.2vw, 5.4rem);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--marigold);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--body);
  overflow-x: clip;
}
/* Clip here, not on body: body overflow moves to the viewport, which can still scroll sideways on refresh */
main { overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h2 {
  font: 400 var(--t-xl)/1.02 var(--display);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h3 { font: 700 var(--t-lg)/1.15 var(--body); }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.limbs :focus-visible, .terrace :focus-visible { outline-color: var(--paper); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .5em 1em;
}
.skip:focus { top: 12px; }

/* Buttons: a printed block with a hard offset, pressed like a stamp */
.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font: 700 var(--t-sm)/1.1 var(--body);
  padding: .7em 1.05em;
  text-decoration: none;
  transition: transform .09s, box-shadow .09s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn-big { font-size: var(--t-md); padding: .8em 1.2em; }
.btn-small { padding: .5em .8em; box-shadow: 3px 3px 0 var(--ink); }

/* Top bar */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter-r) 8px var(--gutter);
  background: var(--ink); color: var(--paper);
}
.wordmark { font: 400 1.25rem/1 var(--display); text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--marigold); }
.topbar nav { display: flex; gap: 22px; margin-left: auto; }
.topbar nav a { text-decoration: none; font-weight: 500; font-size: .95rem; }
.topbar nav a:hover { color: var(--marigold); text-decoration: underline; text-underline-offset: 4px; }
.topbar :focus-visible { outline-color: var(--marigold); }

.topbar-call { display: none; margin-left: auto; font-weight: 700; color: var(--marigold); }
.topbar .btn { border-color: var(--paper); box-shadow: 3px 3px 0 var(--marigold); }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--marigold);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 25rem);
  grid-template-rows: 1fr auto;
  column-gap: 24px;
  min-height: min(100svh, 62vw + 120px);
  padding: 92px var(--gutter-r) 0 var(--gutter);
}
.hero-rays {
  position: absolute; left: 34%; top: 46%;
  width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, var(--red) 0 7.5deg, transparent 7.5deg 15deg);
  opacity: .92;
  animation: spin 90s linear infinite;
  -webkit-mask-image: radial-gradient(circle, transparent 7vmax, #000 7.2vmax);
          mask-image: radial-gradient(circle, transparent 7vmax, #000 7.2vmax);
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero-eight {
  position: absolute; left: 34%; top: 46%;
  translate: -50% -50%;
  font: 400 clamp(20rem, 54vw, 46rem)/.8 var(--display);
  color: var(--paper);
  text-shadow: -.018em .014em 0 var(--blue), .018em -.014em 0 var(--ink);
  pointer-events: none;
}
.hero-eight span { display: block; }
.hero-thai {
  position: absolute; left: var(--gutter); top: 84px;
  font: 800 italic clamp(2.2rem, 5.6vw, 4.8rem)/1 var(--body);
  color: var(--ink);
  background: var(--marigold);
  padding: .08em .22em .12em;
  transform: rotate(-3deg);
}
.hero-fighter {
  --fw: min(46vw, 80svh);
  position: absolute; left: 34%; z-index: 3;
  bottom: calc(16.2vw - var(--fw) * .0412);
  width: var(--fw); height: auto;
  translate: -46% 0;
  overflow: visible;
  pointer-events: none;
}
.hero-copy {
  grid-column: 2; grid-row: 1;
  position: relative; z-index: 3;
  align-self: start;
  display: grid; gap: 18px; justify-items: start;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 22px;
  margin-top: 16px;
}
.stamp {
  font: 400 1.25rem/1 var(--display);
  color: var(--red);
  border: 3px solid currentColor;
  padding: .3em .55em .4em;
  transform: rotate(-4deg);
}
.hero-lead { font-size: var(--t-md); line-height: 1.35; font-weight: 500; }
.hero-facts { display: flex; gap: 28px; }
.hero-facts dt { font-size: .95rem; }
.hero-facts dd { font: 400 var(--t-lg)/1.1 var(--display); color: var(--blue); }
.hero-title {
  grid-column: 1 / -1; grid-row: 2;
  position: relative; z-index: 2;
  margin: 0 calc(var(--gutter) * -1) 0;
  overflow: hidden;
  font-weight: 400;
}
.hero-limbs {
  display: flex; justify-content: space-between;
  font: 400 20.8vw/.92 var(--display);
  color: var(--ink);
  padding-inline: .02em;
}
.hero-limbs span { display: block; text-shadow: .022em .022em 0 var(--red); }
.hero-sub {
  position: absolute; right: var(--gutter-r); top: .4em;
  display: block;
  background: var(--blue); color: var(--paper);
  font: 700 clamp(1rem, 2.1vw, 1.75rem)/1 var(--body);
  padding: .3em .6em .4em;
  transform: rotate(-2deg);
}

/* Tape: the seam behind it is split into the two neighbouring sheets, so the tilt shows no gap */
.seam {
  position: relative; z-index: 4; overflow: hidden;
  padding-block: 1.1vw;
  background: linear-gradient(var(--seam-a) 50%, var(--seam-b) 50%);
}
.seam-hero { --seam-a: var(--marigold); --seam-b: var(--ink); }
.seam-terrace { --seam-a: var(--paper); --seam-b: var(--leaf); }
.seam-terrace:has(+ .terrace[data-monsoon='on']) { --seam-b: #233A7D; }
.tape {
  position: relative; z-index: 4;
  overflow: hidden;
  background: var(--ink); color: var(--marigold);
  border-block: 4px solid var(--red);
  transform: rotate(-1deg) scale(1.03);
  font: 400 1.1rem/1 var(--display);
  padding-block: .65em;
}
.tape-blue { background: var(--paper); color: var(--blue); border-color: var(--blue); transform: rotate(1deg) scale(1.03); }
.tape-track { display: flex; width: max-content; white-space: pre; animation: tape 42s linear infinite; }
@keyframes tape { to { translate: -50% 0; } }

/* Limbs */
.limbs {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: var(--band) var(--gutter-r) calc(var(--band) * .8) var(--gutter);
  overflow: hidden;
}
.limbs::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 180, 0, .17) 2.5px, transparent 3px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000, transparent 68%);
          mask-image: radial-gradient(ellipse at 50% 55%, #000, transparent 68%);
}
.limbs > * { position: relative; }
.limbs-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; max-width: 1400px; margin: 0 auto 28px; }
.limbs h2 { color: var(--marigold); }
.limbs-head p { font-size: var(--t-md); line-height: 1.4; }
.limbs-stage {
  display: grid;
  grid-template-columns: minmax(130px, 11rem) minmax(0, 1fr) minmax(130px, 11rem);
  gap: 18px; align-items: center;
  max-width: 1400px; margin: 0 auto;
}
.limb-buttons { display: grid; gap: 12px; }
.limb-btn {
  display: grid; text-align: left; gap: 0;
  background: transparent; color: var(--paper);
  border: 3px solid var(--marigold);
  padding: .4em .7em .5em;
  font-weight: 500;
  transition: background .1s, color .1s, transform .1s;
}
.limb-btn i { font: 800 italic 1.55rem/1.2 var(--body); color: var(--marigold); }
.limb-btn:hover { transform: translateX(3px); background: rgba(255, 180, 0, .16); }
.limb-buttons-left .limb-btn:hover { transform: translateX(-3px); }
.limb-btn.tried { border-color: var(--pink); }
.limb-btn.tried i { color: var(--pink); }
.limb-btn.is-on { background: var(--red); border-color: var(--paper); color: #fff; }
.limb-btn.is-on i { color: #fff; }
.ring svg { width: 100%; height: auto; max-height: 62svh; overflow: visible; }
.mat { fill: var(--blue); }
.mat-alt { fill: #2A5BFF; }
.beam { fill: #6E6AA8; }
.bag-chain { stroke: #6E6AA8; stroke-width: 6; fill: none; }
.bag-body { fill: var(--red); stroke: var(--paper); stroke-width: 4; }
.bag-band { fill: var(--paper); }
.bag-8 { font: 400 112px/1 var(--display); fill: var(--paper); }
.burst-star { fill: var(--paper); stroke: var(--red); stroke-width: 7; stroke-linejoin: round; }
.burst-txt { font: 800 italic 58px/1 var(--body); fill: var(--red); }

.limb-read {
  display: grid;
  grid-template-columns: minmax(150px, 15rem) minmax(0, 1fr) minmax(170px, 17rem);
  gap: 20px 32px; align-items: center;
  max-width: 1400px; margin: 24px auto 0;
  padding-top: 20px;
  border-top: 3px solid var(--marigold);
}
.limb-word { font: 800 italic clamp(3rem, 7vw, 5.4rem)/1.15 var(--body); color: var(--marigold); transform-origin: 0 60%; }
.limb-text p { max-width: 55ch; }
.limb-dots { display: flex; gap: 7px; margin-bottom: 8px; }
.limb-dots span { width: 18px; height: 18px; border: 3px solid var(--marigold); transform: rotate(45deg); }
.limb-dots span.on { background: var(--pink); border-color: var(--pink); }
.limb-score a { color: var(--marigold); font-weight: 700; }

/* Fighter inks */
.ftr, .ftr-ghost {
  --f-near: var(--ink); --f-far: #3D31B8; --f-shorts: var(--red); --f-shorts-far: #A80720;
  --f-glove: var(--red); --f-glove-far: #A80720; --f-wrap: var(--paper); --f-band: var(--blue); --f-tail: var(--red);
  --f-shade: var(--marigold); --f-hot: var(--paper);
}
.limbs .ftr, .limbs .ftr-ghost, .corner .ftr, .corner .ftr-ghost {
  --f-near: var(--marigold); --f-far: #D97F00; --f-shorts: var(--blue); --f-shorts-far: #082BA6;
  --f-glove: var(--red); --f-glove-far: #A80720; --f-band: var(--red); --f-tail: var(--pink);
  --f-shade: var(--red); --f-hot: #fff;
}
.day-fighter .ftr, .day-fighter .ftr-ghost {
  --f-near: var(--marigold); --f-far: #D97F00; --f-shorts: var(--red); --f-shorts-far: #A80720; --f-shade: var(--red); --f-band: var(--pink); --f-tail: var(--pink);
}
.ftr-near { fill: var(--f-near); }
.ftr-far { fill: var(--f-far); }
.ftr-shorts { fill: var(--f-shorts); }
.ftr-shorts-far { fill: var(--f-shorts-far); }
.ftr-glove { fill: var(--f-glove); }
.ftr-glove-far { fill: var(--f-glove-far); }
.ftr-wrap { fill: var(--f-wrap); }
.ftr-belt { fill: var(--f-wrap); }
.ftr-band { fill: var(--f-band); }
.ftr-tail { fill: var(--f-tail); }
.ftr-shade { opacity: .9; }
.ftr-ht { fill: var(--f-shade); }
path.ftr-hot { fill: var(--f-hot) !important; }
.ftr-ghost-a { --f-near: var(--red); --f-far: var(--red); --f-shorts: var(--red); --f-shorts-far: var(--red); --f-glove: var(--red); --f-glove-far: var(--red); --f-wrap: var(--red); --f-band: var(--red); --f-tail: var(--red); --f-shade: transparent; }
.ftr-ghost-b { --f-near: #17C3FF; --f-far: #17C3FF; --f-shorts: #17C3FF; --f-shorts-far: #17C3FF; --f-glove: #17C3FF; --f-glove-far: #17C3FF; --f-wrap: #17C3FF; --f-band: #17C3FF; --f-tail: #17C3FF; --f-shade: transparent; }

/* Day */
.day { position: relative; min-height: 100svh; background: var(--ink); overflow: hidden; display: grid; }
.day-scene { position: absolute; inset: 0; }
.day-scene svg { width: 100%; height: 100%; }
.stars circle { fill: #fff; }
.sun polygon, .sun circle { fill: #FFE14D; }
.moon path { fill: var(--paper); }
.towers rect { fill: #2B2470; }
.lit rect { fill: var(--marigold); }
.trunk { fill: none; stroke: var(--ink); stroke-width: 15; stroke-linecap: round; }
.frond { fill: var(--ink); stroke: var(--ink); stroke-width: 4; }
.roof { fill: var(--ink); }
.truss { fill: none; stroke: var(--ink); stroke-width: 7; }
.post, .building, .lamp { fill: var(--ink); }
.parapet { fill: var(--red); }
.bld-win { fill: #2B2470; }
.lamp-glow { fill: var(--marigold); opacity: 0; mix-blend-mode: screen; }
.lamp { stroke: var(--marigold); stroke-width: 3; }

.day-ui {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 24rem);
  grid-template-rows: 1fr auto;
  gap: 20px 40px;
  padding: 96px var(--gutter-r) 24px var(--gutter);
  height: 100svh; min-height: 620px;
}
.day-head { align-self: start; max-width: 34rem; }
.day-head h2 { color: #fff; text-shadow: 4px 4px 0 var(--ink); }
.day-head p {
  background: var(--ink); color: var(--paper);
  display: inline; padding: .12em .4em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  line-height: 1.9;
}
.ticket {
  --k: var(--ink);
  align-self: start;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  border-top: 14px solid var(--k);
  padding: 14px 20px 18px;
  display: grid; gap: 4px;
  transition: border-color .2s;
}
.ticket[data-kind='fight'] { --k: var(--red); }
.ticket[data-kind='fitness'] { --k: var(--blue); }
.ticket[data-kind='yoga'] { --k: var(--pink); }
.ticket[data-kind='pt'] { --k: var(--leaf); }
.ticket-time { font: 400 clamp(2.2rem, 4vw, 3.2rem)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ticket-slot { font-weight: 700; color: var(--ink); }
.rail { grid-column: 1 / -1; position: relative; background: var(--ink); color: var(--paper); padding: 14px 16px 8px; }
.rail-blocks { position: absolute; left: 16px; right: 16px; top: 22px; height: 18px; pointer-events: none; }
.rail-b { position: absolute; top: 0; bottom: 0; border-inline: 1px solid var(--ink); }
.rail-fight { background: var(--red); }
.rail-fitness { background: #3E6BFF; }
.rail-yoga { background: var(--pink); }
.rail-pt { background: var(--leaf); }
#dayRange {
  position: relative; z-index: 2;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; margin: 0; background: transparent; cursor: ew-resize;
}
#dayRange::-webkit-slider-runnable-track { height: 18px; background: rgba(255, 243, 214, .14); }
#dayRange::-moz-range-track { height: 18px; background: rgba(255, 243, 214, .14); }
#dayRange::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 34px; margin-top: -8px; background: var(--marigold); border: 3px solid var(--paper); }
#dayRange::-moz-range-thumb { width: 12px; height: 30px; border-radius: 0; background: var(--marigold); border: 3px solid var(--paper); }
.rail-marks { position: relative; height: 1.5em; font-size: .9rem; margin-inline: 0; }
.rail-marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rail-marks span:first-child { transform: none; }
.rail-marks span:last-child { transform: translateX(-100%); }

/* Fees */
.fees {
  background: var(--paper);
  padding: var(--band) var(--gutter-r) var(--band) var(--gutter);
  position: relative; overflow: hidden;
}
.fees-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; max-width: 1400px; margin: 0 auto 28px; }
.fees h2 { color: var(--red); text-shadow: .03em .03em 0 var(--marigold); }
.fees-head p { font-size: var(--t-md); }
.fees-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: start; max-width: 1400px; margin: 0 auto 26px; }
.who { border: 0; padding: 0; margin: 0; min-width: 0; }
.who legend { font-weight: 700; padding: 0 0 8px; font-size: var(--t-md); }
.who-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.who-opts button {
  background: transparent; border: 2px solid var(--ink); padding: .32em .75em; font-weight: 500;
}
.who-opts button:hover { background: var(--marigold); }
.who-opts button.on { background: var(--ink); color: var(--marigold); }
.who-say { margin-top: 10px; font-weight: 500; }
.launch { display: grid; grid-template-columns: auto auto; gap: 12px; align-items: center; cursor: pointer; font-weight: 700; }
.launch small { display: block; font-weight: 400; font-size: .92rem; }
.launch input, .monsoon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.launch-switch, .monsoon-switch {
  position: relative; display: block; width: 64px; height: 34px;
  background: transparent; border: 3px solid var(--ink);
}
.launch-switch::after, .monsoon-switch::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px;
  background: var(--ink); transition: transform .16s cubic-bezier(.3, 1.8, .6, 1);
}
.launch input:checked + .launch-switch { background: var(--marigold); }
.launch input:checked + .launch-switch::after, .monsoon input:checked + .monsoon-switch::after { transform: translateX(29px); }
.launch input:focus-visible + .launch-switch, .monsoon input:focus-visible + .monsoon-switch { outline: 3px solid var(--blue); outline-offset: 3px; }

.card { max-width: 1400px; margin: 0 auto; display: grid; gap: 8px; }
.bout {
  --c: var(--ink); --on: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(12rem, auto);
  gap: 6px 26px; align-items: center;
  background: var(--c); color: var(--on);
  padding: 16px 24px;
  transition: opacity .2s, box-shadow .2s, translate .2s;
}
.bout-fight { --c: var(--red); --on: #fff; }
.bout-fitness { --c: var(--blue); --on: #fff; }
.bout-yoga { --c: var(--pink); --on: var(--ink); }
.bout-pt { --c: var(--marigold); --on: var(--ink); }
.bout-studio { --c: var(--ink); --on: var(--paper); }
.bout h3 { font: 400 clamp(1.6rem, 3vw, 2.6rem)/1.05 var(--display); }
.bout-when { font-weight: 700; }
.bout-price { text-align: right; font: 400 clamp(1.9rem, 3.4vw, 3rem)/1 var(--display); font-variant-numeric: tabular-nums; position: relative; }
.bout-price small { display: block; font: 400 1rem/1.3 var(--body); }
.bout.dim { opacity: .28; }
.bout.pick { box-shadow: 0 0 0 4px var(--paper), 0 0 0 8px var(--ink); translate: 0 0; z-index: 1; }
.launch-on .rupee[data-offer]::after {
  content: '20% off';
  position: absolute; right: 100%; top: 0; margin-right: 10px;
  font: 400 .85rem/1 var(--display);
  background: var(--paper); color: var(--red);
  border: 2px solid var(--red);
  padding: .3em .4em;
  transform: rotate(-7deg);
  white-space: nowrap;
}

/* Terrace */
.terrace {
  --bg: var(--leaf); --flash: 0;
  position: relative; overflow: hidden;
  background: var(--bg);
  color: var(--paper);
  padding: var(--band) var(--gutter-r) var(--band) var(--gutter);
  transition: background .8s;
}
.terrace[data-monsoon='on'] { --bg: #233A7D; }
.terrace::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: var(--flash); pointer-events: none; z-index: 5; }
.terrace-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px 48px; max-width: 1400px; margin: 0 auto 24px; align-items: end; }
.terrace-head h2 { color: #fff; text-shadow: .04em .04em 0 var(--ink); }
.terrace-head p { font-size: var(--t-md); line-height: 1.4; }
.monsoon { grid-column: 2; display: inline-flex; gap: 12px; align-items: center; font: 400 1.15rem/1 var(--display); cursor: pointer; justify-self: start; }
.monsoon-switch { border-color: var(--paper); }
.monsoon-switch::after { background: var(--paper); }
.monsoon input:checked + .monsoon-switch { background: #17C3FF; }
.monsoon input:focus-visible + .monsoon-switch { outline-color: var(--paper); }
.terrace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 23rem); gap: 28px; max-width: 1400px; margin: 0 auto; align-items: center; }
.iso-wrap { position: relative; min-width: 0; }
.iso-wrap svg { width: 100%; height: auto; overflow: visible; }
#rainCanvas { position: absolute; inset: -4%; width: 108%; height: 108%; pointer-events: none; z-index: 3; }

.f-t, .f-l, .f-r { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.slab .f-t { fill: var(--paper); } .slab .f-l { fill: #D8C39B; } .slab .f-r { fill: #BDA67A; }
.mirror { fill: #C9F1FF; stroke: var(--ink); stroke-width: 3; }
.sheen { fill: #fff; opacity: .85; animation: sheen 5s ease-in-out infinite alternate; }
@keyframes sheen { to { transform: translate(250px, 145px); } }
.parapet-iso { fill: #D8C39B; stroke: var(--ink); stroke-width: 3; }
.tile { stroke: var(--ink); stroke-width: 1.5; }
.tile-a { fill: var(--blue); } .tile-b { fill: #2A5BFF; } .tile-edge { fill: var(--red); }
.mat-8 { font: 400 190px/1 var(--display); fill: var(--marigold); }
.steel .f-t, .steel .f-l, .steel .f-r, .bar .f-t, .bar .f-l, .bar .f-r { fill: var(--ink); stroke-width: 1; }
.rack .f-t, .rack .f-l, .rack .f-r { fill: var(--red); stroke-width: 1; }
.iso-chain { stroke: var(--ink); stroke-width: 3; fill: none; }
.iso-bag { animation: bagsway 3.4s ease-in-out infinite alternate; }
@keyframes bagsway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.iso-bag-body { fill: var(--red); stroke: var(--ink); stroke-width: 3; }
.iso-bag-band { fill: var(--paper); }
.room .f-t { fill: var(--paper); } .room .f-l { fill: var(--pink); } .room .f-r { fill: #E23E86; }
.tank .f-t { fill: #fff; } .tank .f-l { fill: #17C3FF; } .tank .f-r { fill: #0C9CD0; }
.door { fill: var(--ink); }
.rack-db .f-t { fill: var(--paper); } .rack-db .f-l, .rack-db .f-r { fill: var(--ink); }
.db { fill: var(--ink); }
.plyo .f-t { fill: var(--marigold); } .plyo .f-l { fill: #E09A00; } .plyo .f-r { fill: #C78600; }
.kb { stroke: var(--ink); stroke-width: 3; }
.kb-0 { fill: var(--red); } .kb-1 { fill: var(--blue); } .kb-2 { fill: var(--marigold); }
.desk .f-t { fill: var(--marigold); } .desk .f-l { fill: var(--ink); } .desk .f-r { fill: #2B2470; }
.iso-post { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.iso-truss { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.iso-web { stroke: var(--ink); stroke-width: 2.5; }
.iso-roller { stroke: var(--paper); stroke-width: 7; stroke-linecap: round; }
.iso-lamp line { stroke: var(--ink); stroke-width: 3; }
.iso-lamp circle { fill: #FFE14D; stroke: var(--ink); stroke-width: 3; }
.fan-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fan-blades { fill: var(--ink); animation: spin 1.1s linear infinite; transform-box: fill-box; transform-origin: center; }
.curtain { stroke: var(--ink); stroke-width: 1; }
.curtain.c0 { fill: rgba(23, 195, 255, .5); } .curtain.c1 { fill: rgba(255, 243, 214, .5); }
.spot { cursor: pointer; }
.spot circle { fill: var(--ink); stroke: var(--paper); stroke-width: 4; transition: fill .12s; }
.spot text { font: 700 24px/1 var(--body); fill: var(--paper); pointer-events: none; }
.spot.on circle, .spot:hover circle { fill: var(--red); }

.iso-side { display: grid; gap: 14px; min-width: 0; }
.iso-list { display: grid; gap: 4px; }
.iso-list button {
  width: 100%; display: flex; gap: 10px; align-items: center; text-align: left;
  background: transparent; border: 0; color: inherit; padding: 3px 0; font-weight: 500;
}
.iso-list b { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; background: var(--ink); color: var(--paper); font-size: .9rem; }
.iso-list button:hover { text-decoration: underline; text-underline-offset: 3px; }
.iso-list button.on b { background: var(--red); }
.iso-card { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); padding: 14px 18px; min-height: 8.6em; }
.iso-card h3 { font-size: var(--t-md); font-weight: 700; }

/* Corner */
.corner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.corner-coach {
  background: var(--red); color: #fff;
  padding: var(--band) 32px var(--band) var(--gutter);
  display: grid; grid-template-columns: minmax(170px, 21rem) minmax(0, 1fr); gap: 24px; align-items: center;
}
.corner-coach svg { width: 100%; height: auto; overflow: visible; }
.corner-coach p { margin-top: 14px; font-size: var(--t-md); line-height: 1.4; max-width: 34em; }
.corner h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.corner-sunday {
  position: relative; overflow: hidden;
  background: var(--pink); color: var(--ink);
  padding: var(--band) var(--gutter-r) var(--band) 32px;
  display: grid; gap: 16px; align-content: center;
}
.corner-sunday > * { position: relative; }
.sun-thai { position: absolute; right: -.08em; bottom: -.32em; font: 800 clamp(7rem, 15vw, 13rem)/1 var(--mal); color: #FF8CBF; }
.corner-sunday li { font: 700 var(--t-lg)/1.3 var(--body); }

/* FAQ */
.faq { background: var(--marigold); padding: var(--band) var(--gutter-r) var(--band) var(--gutter); }
.faq h2 { max-width: 1400px; margin: 0 auto 26px; }
.faq-list { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
.faq details { border-top: 3px solid var(--ink); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px;
  font: 700 var(--t-md)/1.25 var(--body);
  padding: 14px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.6rem/1 var(--display); color: var(--red); transition: transform .16s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; max-width: 58ch; }

/* Booking */
.book {
  position: relative; overflow: hidden;
  background: var(--blue); color: #fff;
  padding: var(--band) var(--gutter-r) var(--band) var(--gutter);
}
.book-rays {
  position: absolute; left: 50%; top: 110%;
  width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 180, 0, .95) 0 6deg, transparent 6deg 12deg);
  animation: spin 120s linear infinite reverse;
}
.book-inner {
  position: relative; max-width: 60rem; margin: 0 auto;
  background: var(--paper); color: var(--ink);
  border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
  padding: clamp(20px, 4vw, 44px);
  display: grid; gap: 16px;
}
.book h2 { color: var(--red); text-shadow: .03em .03em 0 var(--marigold); }
.book-lead { font-size: var(--t-md); line-height: 1.35; }
#bookForm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-weight: 700; }
.field select { width: 100%; background: #fff; border: 3px solid var(--ink); padding: .62em .6em; border-radius: 0; }
.book-alt a { font-weight: 700; color: var(--red); }

/* Footer */
.foot {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: center;
  padding: 36px var(--gutter-r) 36px var(--gutter);
}
.foot-mark { font: 400 2.2rem/1 var(--display); }
.foot-mark span { color: var(--marigold); }
.foot-ml { margin-left: auto; font: 800 3.4rem/1 var(--mal); color: var(--marigold); }

.foot-link { font-weight: 500; text-underline-offset: 4px; }
.foot-link:hover { color: var(--marigold); }
.foot :focus-visible { outline-color: var(--marigold); }

/* Privacy page: a plain sheet, so the words are the only thing on it */
.legal-page { background: var(--paper); }
.legal-back { margin-left: auto; font-weight: 700; color: var(--marigold); }
.legal {
  max-width: 44rem; margin: 0 auto; display: grid; gap: 14px;
  padding: 120px var(--gutter-r) var(--band) var(--gutter);
}
.legal h1 { font: 400 var(--t-xl)/1.02 var(--display); color: var(--red); text-shadow: .03em .03em 0 var(--marigold); }
.legal h2 { font: 700 var(--t-lg)/1.2 var(--body); letter-spacing: 0; margin-top: 18px; }
.legal a { color: var(--blue); font-weight: 500; }
.legal-date { font-size: .95rem; }

.dock { display: none; }

/* Tablet */
@media (max-width: 1100px) {
  .topbar nav { display: none; }
  .topbar .btn { margin-left: auto; }
  .bout { grid-template-columns: minmax(0, 1fr) auto; }
  .bout-what, .bout-when { grid-column: 1; }
  .bout-price { grid-column: 2; grid-row: 1 / span 3; }
}

@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; min-height: 0; padding-top: 68px; }
  .hero-rays, .hero-eight { left: 50%; top: 262px; }
  .hero-eight { font-size: 28rem; }
  .hero-fighter { --fw: 104vw; left: 50%; bottom: auto; top: 70px; translate: -44% 0; max-width: none; }
  .hero-thai { top: 70px; }
  .hero-title { order: 1; margin-top: 370px; margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1); }
  .hero-limbs { font-size: 20.4vw; }
  .hero-sub { position: static; display: inline-block; margin: 8px 0 0 var(--gutter); }
  .hero-copy { order: 2; margin: 16px 0 28px; box-shadow: 6px 6px 0 var(--ink); }

  .limbs-head, .terrace-head, .terrace-grid { grid-template-columns: minmax(0, 1fr); }
  .limbs-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ring { grid-column: 1 / -1; grid-row: 1; }
  .limb-buttons { gap: 8px; }
  .limb-buttons-left { grid-row: 2; } .limb-buttons-right { grid-row: 2; }
  .limb-btn { padding: .2em .55em .3em; font-size: .95rem; }
  .limb-btn i { font-size: 1.25rem; }
  .limb-read { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .day { min-height: 0; }
  .day-scene { position: relative; height: 52svh; order: 2; }
  .day-ui { display: contents; }
  .day-head { order: 1; background: var(--ink); padding: 56px var(--gutter-r) 16px var(--gutter); max-width: none; }
  .day-head h2 { color: var(--marigold); text-shadow: none; }
  .ticket { order: 3; margin: -46px var(--gutter-r) 0 var(--gutter); position: relative; z-index: 2; box-shadow: 5px 5px 0 var(--paper); }
  .rail { order: 4; margin-top: 16px; }
  .rail { padding-left: var(--gutter); padding-right: var(--gutter-r); padding-bottom: 20px; }
  .rail-blocks { left: var(--gutter); right: var(--gutter-r); }
  .rail-marks span:nth-child(even) { display: none; }

  .fees-tools { grid-template-columns: minmax(0, 1fr); }
  .launch { grid-template-columns: auto minmax(0, 1fr); }
  .launch-on .rupee[data-offer]::after { right: 0; top: -1.7em; margin: 0; }
  .bout { padding: 14px 16px; }
  .bout.bout-fight, .bout.bout-fitness, .bout.bout-yoga { padding-top: 20px; }

  .monsoon { grid-column: 1; }
  .terrace-grid { gap: 18px; }
  .iso-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; font-size: .95rem; }
  .iso-card { order: -1; min-height: 7.4em; }
  .iso-side { display: flex; flex-direction: column; }

  .corner, .corner-coach { grid-template-columns: minmax(0, 1fr); }
  .corner-coach { padding-right: var(--gutter-r); }
  .corner-coach svg { max-width: 220px; }
  .corner-sunday { padding-left: var(--gutter); }
  .faq-list { grid-template-columns: minmax(0, 1fr); }
  #bookForm { grid-template-columns: minmax(0, 1fr); }
  .book { padding-bottom: calc(var(--band) + 48px); }

  .topbar .btn { display: none; }
  .topbar-call { display: block; }

  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: block; text-align: center; text-decoration: none;
    background: var(--red); color: #fff; border-top: 3px solid var(--ink);
    font: 400 1.05rem/1 var(--display);
    padding: 15px 16px calc(15px + env(safe-area-inset-bottom, 0px));
  }
  .foot { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-rays, .book-rays, .tape-track, .sheen, .iso-bag, .fan-blades { animation: none; }
}