/* Fire Flow Yoga v6 · "Class arc".
   One hot class, from the door to the towel: the poster opens (doors), you warm up (rub), you find your class on
   the wall, you hold the pose with a real teacher (peak), you rest, you book. The nav is a yoga mat that unrolls.
   Motion contract: scroll frames write only transform and opacity. One rAF loop, geometry cached on width change.
   Fonts: Barlow Condensed (display) + Manrope (text) + Bricolage Grotesque variable for the heat words only. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fire-flow/fonts/bricolage-300-800.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --ff-apricot: #f79a5b;
  --ff-ember: #c2531f;
  --ff-ember-deep: #a8401a;
  --ff-coal: #2a140b;
  --ff-coal-2: #1c0d07;
  --ff-paper: #fbf3ea;
  --ff-cream: #fff3e4;
  --ff-hot: #ffe4c8;
  --ff-ash: #b3a095;
  --ff-bric: "Bricolage Grotesque", "Barlow Condensed", system-ui, sans-serif;
  --h-ground: var(--ff-paper);
  --h-ink: var(--ff-coal);
  --h-soft: #6b4636;
  --h-accent: var(--ff-ember-deep);
  --h-accent-ink: #fff8ee;
  --h-line-ink: var(--ff-coal);
  --h-dark: var(--ff-coal);
  --h-focus: var(--ff-ember-deep);
  --mat-h: 62px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
html { background: var(--ff-coal-2); -webkit-text-size-adjust: 100%; scroll-padding: 8px 0 calc(var(--mat-h) + 14px); }
.ff6 { margin: 0; background: var(--ff-coal-2); color: var(--ff-coal); font-family: var(--fw-text); font-size: 16px; line-height: 1.55; overflow-x: clip; }
.ff6 *, .ff6 *::before, .ff6 *::after { box-sizing: border-box; }
.ff6 img, .ff6 video, .ff6 canvas { display: block; max-width: 100%; }
.ff6 img { height: auto; }
.ff6 a { text-underline-offset: .2em; }
.ff6 :focus-visible { outline: 3px solid var(--h-focus); outline-offset: 3px; }
.ff6 .on-dark :focus-visible, .warm :focus-visible, .wall :focus-visible, .hold :focus-visible, .rest :focus-visible, .mat :focus-visible, .close :focus-visible { outline-color: var(--ff-apricot); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* entrances: one-shot, transform + opacity */
@media (min-width: 761px) and (hover: hover) {
  .js [data-in] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); }
  .js [data-in].is-in { opacity: 1; transform: none; }
}

/* ============================ 1 · THE DOORS (hero) ============================ */
.hero {
  --F: min(54vw, 27svh);            /* letter size */
  --row: calc(var(--F) * .74);       /* phone: one letter per row */
  --wtop: 64px;                      /* top of the word block */
  --wx: 14px;
  --oshift: calc(var(--F) * .02);
  --split: calc(var(--wtop) + var(--row) * 1.5 + var(--oshift));
  --travel: 100svh;
  position: relative; height: calc(100lvh + var(--travel)); background: var(--ff-apricot);
}
.hero__stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; background: var(--ff-apricot); isolation: isolate; }

.hero__room { position: absolute; inset: 0; transform-origin: 50% 88%; }
.hero__plate, .hero__plate img, .hero__plate picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__plate img { object-fit: cover; object-position: 50% 62%; max-width: none; }
.hero__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; max-width: none; opacity: 0; transition: opacity .6s linear; }
.hero__loop.is-on { opacity: 1; }
.hero__sweep { position: absolute; top: -5%; bottom: -5%; left: 0; width: 120vw; opacity: 0; transform: translate3d(-130%, 0, 0);
  background: url("/fire-flow/assets/rays-900.webp") 100% 50% / cover no-repeat; }
.hero__contact { position: absolute; z-index: 4; left: -6vw; right: -6vw; bottom: 44px; height: 46px; pointer-events: none; opacity: .55; background: radial-gradient(closest-side, rgba(24, 10, 4, .55), rgba(24, 10, 4, 0)); }

/* the doors: apricot panels carrying HOT, cut through the equator of the O */
.hero__doors { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.door { position: absolute; left: 0; right: 0; overflow: hidden; background: var(--ff-apricot); pointer-events: auto; }
.door--a { top: 0; height: var(--split); }
.door--b { top: var(--split); bottom: 0; }
.door--a::after, .door--b::before { content: ""; position: absolute; left: 0; right: 0; height: 22px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .25s linear; }
.hero.is-open .door--a::after, .hero.is-open .door--b::before { opacity: 1; }
.door--a::after { bottom: 0; background: linear-gradient(to bottom, rgba(42, 20, 11, 0), rgba(42, 20, 11, .26)); }
.door--b::before { top: 0; background: linear-gradient(to top, rgba(42, 20, 11, 0), rgba(42, 20, 11, .26)); }
.door__word { position: absolute; left: var(--wx); margin: 0; display: flex; flex-direction: column; font: 800 var(--F)/var(--row) var(--ff-bric); letter-spacing: -.04em; color: var(--ff-coal); user-select: none; -webkit-user-select: none; pointer-events: none; }
.door--a .door__word { top: var(--wtop); }
.door--b .door__word { top: calc(var(--wtop) - var(--split)); }
.door__word span { display: block; height: var(--row); line-height: var(--row); }

.hero__copy { position: absolute; left: 14px; right: 14px; z-index: 4; }
.hero__copy--a { top: 0; }
.hero__badge { position: absolute; top: 14px; left: 0; margin: 0; display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--fw-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ff-coal); }
.hero__badge img { width: 36px; height: 36px; }
.hero__h { position: absolute; left: calc(var(--wx) + var(--F) * .86 + 8px); right: 0; top: calc(var(--wtop) + var(--F) * .06); margin: 0; font: 700 clamp(22px, 6.9vw, 34px)/.98 var(--fw-display); text-transform: uppercase; letter-spacing: .005em; color: var(--ff-coal); text-wrap: balance; }
.hero__lede { position: absolute; left: calc(var(--wx) + var(--F) * .86 + 8px); right: 0; top: calc(var(--wtop) + var(--F) * .06 + clamp(88px, 27vw, 128px)); margin: 0; font: 500 clamp(13px, 3.6vw, 15px)/1.4 var(--fw-text); color: #4a2412; }
.hero__copy--b { top: 0; }
.hero__cta { position: absolute; left: calc(var(--wx) + var(--F) * .86 + 8px); right: 0; top: calc(var(--row) * .16 + 4px); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hero__cta .fw-btn { --h-accent: var(--ff-coal); --h-accent-ink: var(--ff-cream); min-height: 50px; padding: 0 16px; font-size: 13px; white-space: nowrap; }
.hero__more { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1 var(--fw-text); color: var(--ff-coal); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* the teacher: a real photograph, cut out; she stands in front of the letters and then on the room's floor */
.hero__frame { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; }
.hero__dancer { position: absolute; z-index: 5; right: -4vw; bottom: 60px; width: min(100vw, 42svh * 1.055); max-width: none; height: auto; transform-origin: 70% 100%; pointer-events: none; }
.hero__bokeh { position: absolute; z-index: 6; inset: 0; pointer-events: none; opacity: .85;
  background:
    radial-gradient(circle at 22% 38%, rgba(255, 236, 200, .95) 0 2px, rgba(255, 236, 200, 0) 4px),
    radial-gradient(circle at 41% 52%, rgba(255, 226, 180, .8) 0 3px, rgba(255, 226, 180, 0) 6px),
    radial-gradient(circle at 63% 29%, rgba(255, 240, 210, .95) 0 2px, rgba(255, 240, 210, 0) 4px),
    radial-gradient(circle at 76% 47%, rgba(255, 224, 170, .85) 0 3.5px, rgba(255, 224, 170, 0) 7px),
    radial-gradient(circle at 33% 66%, rgba(255, 232, 190, .8) 0 2.5px, rgba(255, 232, 190, 0) 5px),
    radial-gradient(circle at 54% 41%, rgba(255, 240, 215, .9) 0 1.5px, rgba(255, 240, 215, 0) 3px),
    radial-gradient(circle at 12% 56%, rgba(255, 226, 180, .75) 0 3px, rgba(255, 226, 180, 0) 6px),
    radial-gradient(circle at 86% 24%, rgba(255, 236, 200, .9) 0 2px, rgba(255, 236, 200, 0) 4px); }

.hero__after { position: absolute; z-index: 7; left: 20px; right: 20px; top: 28px; opacity: 0; color: var(--ff-cream); pointer-events: none; text-shadow: 0 1px 18px rgba(20, 8, 3, .7); }
.hero__after::before { content: ""; position: absolute; z-index: -1; left: -20px; right: -20px; top: -28px; height: 330px; background: linear-gradient(to bottom, rgba(24, 10, 4, .62), rgba(24, 10, 4, 0)); }
.hero__after-h { margin: 0 0 8px; font: 700 clamp(40px, 12.5vw, 64px)/.9 var(--fw-display); text-transform: uppercase; letter-spacing: -.005em; }
.hero__after p { margin: 0; max-width: 26ch; font: 600 15px/1.45 var(--fw-text); }

/* short phones: the teacher steps back so her raised hand stays clear of the button */
@media (max-width: 760px) and (max-height: 700px) {
  .hero__dancer { width: min(88vw, 36svh * 1.055); right: -2vw; bottom: 54px; }
  .hero__cta { top: calc(var(--row) * .06); }
}

/* desktop: HOT is one line, and the doors part left and right through the O */
@media (min-width: 761px) {
  .hero { --F: min(35vw, 50svh); --wtop: 15svh; --wx: 7vw; --row: var(--F); --travel: 115svh; --splitx: calc(var(--wx) + var(--F) * 1.0); }
  .door--a { top: 0; bottom: 0; right: auto; width: var(--splitx); height: auto; }
  .door--b { top: 0; bottom: 0; left: var(--splitx); right: 0; }
  .door--a::after { top: 0; bottom: 0; left: auto; right: 0; width: 22px; height: auto; background: linear-gradient(to right, rgba(42, 20, 11, 0), rgba(42, 20, 11, .26)); }
  .door--b::before { top: 0; bottom: 0; left: 0; right: auto; width: 22px; height: auto; background: linear-gradient(to left, rgba(42, 20, 11, 0), rgba(42, 20, 11, .26)); }
  .door__word { flex-direction: row; line-height: .8; height: auto; }
  .door--a .door__word { top: var(--wtop); left: var(--wx); }
  .door--b .door__word { top: var(--wtop); left: calc(var(--wx) - var(--splitx)); }
  .door__word span { display: inline-block; height: auto; line-height: .8; }
  .hero__h { left: 0; right: auto; width: min(34vw, 460px); top: auto; bottom: calc(var(--mat-h) + 74px); font-size: clamp(34px, 3.4vw, 54px); }
  .hero__lede { left: 0; right: auto; width: min(30vw, 400px); top: auto; bottom: calc(var(--mat-h) + 18px); font-size: 16px; }
  .hero__badge { top: 20px; }
  .hero__copy { left: 4.5vw; right: 4.5vw; top: 0; bottom: 0; }
  .hero__cta { left: auto; right: 0; top: auto; bottom: calc(var(--mat-h) + 14px); flex-direction: row; align-items: center; gap: 14px; }
  .hero__dancer { left: 37vw; right: auto; bottom: 5svh; width: min(40vw, 74svh * 1.055); }
  .hero__after { left: 6vw; right: auto; top: 12svh; width: min(40vw, 560px); }
  .hero__after::before { left: -6vw; top: -12svh; width: 62vw; height: 70svh; right: auto; background: radial-gradient(ellipse 62% 62% at 28% 30%, rgba(24, 10, 4, .72), rgba(24, 10, 4, 0) 100%); }
  .hero__contact { left: 8vw; right: 8vw; bottom: 3svh; }
  .hero__after-h { font-size: clamp(56px, 6.4vw, 104px); }
  .hero__after p { font-size: 18px; }
}

/* ============================ 2 · WHO IT'S FOR ============================ */
.who::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: -22svh; height: 22svh; pointer-events: none; background: linear-gradient(to bottom, rgba(251, 243, 234, 0), var(--ff-paper)); }
.who { position: relative; background: var(--ff-paper); color: var(--ff-coal); padding: clamp(40px, 10vw, 120px) 0 clamp(36px, 8vw, 96px); }
.who__lines { margin: 0; padding: 0 20px; }
.who__lines span { display: block; font: 700 clamp(42px, 12.4vw, 132px)/.9 var(--fw-display); text-transform: uppercase; letter-spacing: -.005em; }
.who__lines span:nth-child(2) { margin-left: 9vw; color: var(--ff-ember-deep); }
.who__lines span:nth-child(3) { margin-left: 3vw; }
.who__lines span:nth-child(4) { margin-left: 15vw; color: var(--ff-ember-deep); }
.who__body { margin: clamp(24px, 6vw, 64px) 20px 0; max-width: 46ch; }
.who__shake { margin: 0 0 10px; font: 300 clamp(28px, 8vw, 54px)/1 var(--ff-bric); letter-spacing: -.03em; }
.who__shake b { font-weight: 800; color: var(--ff-ember-deep); }
.who__body p:not(.who__shake) { margin: 0; font-size: 16px; line-height: 1.55; color: #4a2c1d; }
.who__photos { list-style: none; margin: clamp(26px, 6vw, 72px) 0 0; padding: 0 20px; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 10px; align-items: start; }
.wp--3 { display: none; }
.wp img { width: 100%; height: auto; border-radius: 2px; background: #e9d9c6; }
.wp--1 { grid-row: 1 / span 2; }
.wp--2 { margin-top: 28px; }
.wp--3 { margin-top: -6px; }
.who__quote { margin: clamp(28px, 7vw, 80px) 20px 0; max-width: 28ch; }
.who__quote blockquote { margin: 0; }
.who__quote p { margin: 0; font: 700 clamp(26px, 7vw, 40px)/1.08 var(--fw-display); text-transform: uppercase; }
.who__quote figcaption { margin-top: 12px; font: 700 12px/1 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; color: var(--h-soft); }
@media (min-width: 761px) {
  .who { padding-bottom: clamp(72px, 9vw, 120px); }
  .who__lines, .who__body, .who__photos, .who__quote { margin-left: max(5vw, calc((100vw - 1320px) / 2 + 56px)); margin-right: 5vw; padding: 0; max-width: none; }
  .who__lines span { font-size: clamp(64px, 7.4vw, 124px); }
  .who__body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 980px; align-items: end; }
  .who__photos { grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: auto; gap: 16px; max-width: 1100px; }
  .wp--1 { grid-row: auto; } .wp--2 { margin-top: 56px; } .wp--3 { display: block; margin-top: 20px; }
  .who__quote { max-width: 36ch; }
}

/* ============================ 3 · RUB THEM WARM ============================ */
.warm { position: relative; background: var(--ff-coal); color: var(--ff-cream); overflow: hidden; }
.warm__stage { position: relative; min-height: min(100svh, 680px); padding: clamp(48px, 11vw, 120px) 20px clamp(32px, 7vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.warm__glow { position: absolute; left: 50%; top: 44%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; border-radius: 50%; opacity: 0; pointer-events: none; transform: scale(.5);
  background: radial-gradient(closest-side, rgba(247, 154, 91, .55) 0, rgba(194, 83, 31, .28) 38%, rgba(194, 83, 31, 0) 70%); }
.warm__ask { position: relative; margin: 0 0 6px; font: 700 clamp(30px, 8vw, 54px)/.95 var(--fw-display); text-transform: uppercase; }
.warm__pad { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; padding: clamp(8px, 3vw, 28px) 0; margin: 0 -8px; border-radius: 6px; }
.warm__pad:focus-visible { outline: 3px solid var(--ff-apricot); outline-offset: 4px; }
.warm__word { display: block; font: 300 clamp(96px, 31vw, 260px)/.86 var(--ff-bric); font-variation-settings: "wght" 300; letter-spacing: -.02em; color: #a8958a; text-wrap: balance; padding: 0 8px; }
.warm__how { position: relative; margin: 8px 0 18px; max-width: 40ch; color: #d8c7bb; font-size: 15px; }
.warm__meter { position: relative; height: 6px; max-width: 420px; border-radius: 3px; background: #44251a; overflow: hidden; }
.warm__meter i { position: absolute; inset: 0; background: linear-gradient(90deg, #c2531f, #f79a5b 70%, #ffe4c8); transform-origin: 0 50%; transform: scaleX(0); }
.warm__answer { position: relative; margin-top: 20px; min-height: 108px; }
.warm__tier { margin: 0 0 6px; font: 700 clamp(26px, 6.6vw, 38px)/1.04 var(--ff-bric); letter-spacing: -.02em; }
.warm__next { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ff-hot); }
.warm__next a, .warm__wall { color: var(--ff-apricot); font-weight: 800; }
.warm__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 8px; }
.warm__btn { min-height: 48px; padding: 0 22px; border: 1.5px solid var(--ff-apricot); border-radius: 2px; background: none; color: var(--ff-apricot); font: 700 14px/1 var(--fw-text); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .18s var(--ease-out); }
.warm__btn:active { transform: scale(.97); }
.warm__wall { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
@media (min-width: 761px) {
  .warm__stage { padding-left: max(5vw, calc((100vw - 1320px) / 2 + 56px)); padding-right: 5vw; }
  .warm__ask { font-size: clamp(34px, 3.4vw, 54px); }
  .warm__word { font-size: clamp(120px, 17.5vw, 300px); }
  .warm__how, .warm__meter { max-width: 520px; }
}

/* ============================ 4 · THE WALL ============================ */
.wall { position: relative; background: var(--ff-coal-2); color: var(--ff-cream); --sb: 0px; }
.wall__stage { position: relative; display: flex; flex-direction: column; height: min(calc(100svh - var(--mat-h) - 8px), 700px); min-height: 520px; overflow: hidden; }
.wall.is-pin { }
.wall.is-pin .wall__stage { position: sticky; top: 0; height: 100lvh; max-height: none; min-height: 0; }
.wall__scroller { position: relative; flex: 1; overflow: hidden; outline-offset: -3px; }
.wall.is-swipe .wall__scroller { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wall.is-swipe .wall__scroller::-webkit-scrollbar { display: none; }
.wall__track { position: relative; height: 100%; width: 100vw; overflow: clip; }
.wall.is-pin .wall__track.is-laid { will-change: transform; }
.js .wall__track:not(.is-laid) { visibility: hidden; }
.wall__mural { position: absolute; left: 0; top: 0; height: var(--hm, 80%); overflow: hidden; background: #2a1a12; }
.wall.is-pin .wall__scroller { background: linear-gradient(to bottom, #2a1a12 0, #2a1a12 var(--hm, 80%), #d8cbbd var(--hm, 80%), #b9a692 100%); }
.wall__seg { position: absolute; top: 0; bottom: 0; display: flex; overflow: hidden; }
.wall__seg img { height: 100%; width: auto; max-width: none; flex: none; }
.wall__post { position: absolute; top: 0; bottom: 0; width: 16px; background: linear-gradient(90deg, #6b4630, #4a2f1c 55%, #2e1c10); z-index: 1; }
/* the rail rides on the mural strips; the floor is the scroller's own background, so nothing here is as wide as the wall */
.wall__seg::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: var(--rail, 14px); height: 10px; background: linear-gradient(to bottom, #8a6243, #4a2f1c 70%, #2e1c10); }
.wall__scroller { background: linear-gradient(to bottom, #2a1a12 0, #2a1a12 var(--hm, 80%), #d8cbbd var(--hm, 80%), #b9a692 100%); }
.wall__wire { position: absolute; z-index: 3; left: 0; width: 100%; overflow: visible; pointer-events: none; }
.wall__line { position: absolute; left: 0; width: 100%; height: 1.6px; background: #2a1a10; }
.wall__dim { position: absolute; left: 0; top: 0; width: 100%; height: 14px; background-image: radial-gradient(circle at 50% 50%, #5a4532 0 2.4px, rgba(90, 69, 50, 0) 3px); background-repeat: repeat-x; }

.wall__label { position: absolute; z-index: 5; background: var(--ff-cream); color: var(--ff-coal); padding: clamp(18px, 2.4vw, 32px); border-radius: 2px; }
.wall__label::before, .wall__label::after { content: ""; position: absolute; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3c49e, #a8401a 70%); }
.wall__label::before { left: 11px; } .wall__label::after { right: 11px; }
.wall__h { margin: 0; font: 700 clamp(38px, 10.6vw, 72px)/.9 var(--fw-display); text-transform: uppercase; text-wrap: balance; }
.wall__h--end { font-size: clamp(32px, 8.6vw, 52px); margin-bottom: 10px; }
.wall__p { margin: 12px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.5; color: #4a2c1d; }
.wall__label--end .fw-btn { margin-top: 14px; --h-accent: var(--ff-ember-deep); }
.wall__filter { margin: 12px 0 0; font-size: 13px; color: #4a2c1d; }
.wall__filter button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ff-ember-deep); font: 800 13px/1 var(--fw-text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.wall__key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid #e8d3c2; font-size: 12.5px; color: #4a2c1d; }
.wall__key li { display: inline-flex; align-items: center; gap: 6px; }
.wall__key b { font-weight: 800; color: var(--ff-coal); }
.wall__key i { width: 12px; height: 16px; border-radius: 2px; border: 1.5px solid rgba(42, 20, 11, .4); }
[data-heat="gentle"] > i { background: var(--ff-cream); }
[data-heat="steady"] > i { background: var(--ff-apricot); }
[data-heat="fierce"] > i { background: var(--ff-ember-deep); }

.wall__days { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.wall__day { position: absolute; top: 0; height: var(--hm, 80%); }
.wall__dayname { position: absolute; z-index: 4; left: 0; top: calc(var(--rail, 14px) + 22px); margin: 0; padding: 9px 12px 10px; background: rgba(34, 16, 10, .9); color: var(--ff-cream); border-radius: 2px; font: 700 22px/1 var(--fw-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.wall__dayname small { display: block; margin-top: 5px; font: 600 11px/1 var(--fw-text); letter-spacing: .1em; text-transform: uppercase; color: #f6d4bb; }
.wall__day--empty .wall__dayname { background: rgba(34, 16, 10, .72); font-size: 18px; }
.wall__day::before { content: ""; position: absolute; left: -1px; top: calc(var(--rail, 14px) + 10px); bottom: 0; width: 2px; background: linear-gradient(to bottom, rgba(255, 244, 234, .28), rgba(255, 244, 234, 0)); }
.wall__tags { margin: 0; padding: 0; list-style: none; }
.wall__tag { --bg: var(--ff-apricot); --fg: var(--ff-coal); --sub: #5a2a12; position: absolute; z-index: 3; display: grid; gap: 3px; width: var(--tag-w, 164px); padding: 24px 14px 13px; background: var(--bg); color: var(--fg); text-decoration: none; border-radius: 8px 8px 10px 10px; pointer-events: auto; transform-origin: 50% calc(-1 * var(--drop, 120px)); transition: transform .5s var(--ease-out), opacity .4s var(--ease-out); }
.wall__tag::before { content: ""; position: absolute; left: 50%; bottom: calc(100% - 12px); width: 1.5px; height: calc(var(--drop, 120px) + 12px); background: rgba(250, 236, 220, .85); transform: translateX(-50%); }
.wall__tag::after { content: ""; position: absolute; left: 50%; top: 8px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--ff-coal); border: 3px solid rgba(255, 255, 255, .45); box-sizing: content-box; }
.wall__tag[data-heat="gentle"] { --bg: var(--ff-cream); --sub: #6b4636; }
.wall__tag[data-heat="fierce"] { --bg: var(--ff-ember-deep); --fg: var(--ff-cream); --sub: #fde1cc; }
.wall__tag.is-full { --bg: #d9c7b8; --fg: #4a2c1d; --sub: #6b4636; }
.wall__t { font: 700 40px/.9 var(--fw-display); letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.wall__n { font: 800 14.5px/1.2 var(--fw-text); margin-top: 5px; }
.wall__m, .wall__pl { font-size: 12.5px; line-height: 1.35; color: var(--sub); }
.wall__pl { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); font-weight: 700; color: var(--fg); }
.wall__pl b { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.wall__next { position: absolute; right: 10px; top: 9px; padding: 4px 7px; border-radius: 999px; background: var(--ff-coal); color: var(--ff-cream); font: 700 10px/1 var(--fw-text); letter-spacing: .14em; text-transform: uppercase; }
/* the class you rubbed for: the others step back */
.wall[data-heat="gentle"] .wall__tag:not([data-heat="gentle"]),
.wall[data-heat="steady"] .wall__tag:not([data-heat="steady"]),
.wall[data-heat="fierce"] .wall__tag:not([data-heat="fierce"]) { opacity: .34; }
.wall__tag:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .wall__tag:hover { transform: rotate(-2.5deg); } }

.wall__lit { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
/* a straight vertical glow band: an elliptical radial gradient or a mask here costs a ~100 ms first-paint hitch on phones */
.wall__pool { position: absolute; height: 30px; background: linear-gradient(to bottom, rgba(255, 196, 112, 0), rgba(255, 196, 112, .2) 50%, rgba(255, 196, 112, 0)); }
.wall__bulbs { position: absolute; height: 14px; background-image: radial-gradient(circle at 50% 50%, #fffdf2 0 2px, #ffd690 2.6px 3.3px, rgba(255, 196, 110, .6) 4.1px 4.9px, rgba(255, 196, 110, 0) 5.5px); background-repeat: repeat-x; }
.wall.is-pin .wall__tags { will-change: transform, opacity; }
.wall.is-pin .wall__tags { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.wall.is-pin .wall__lit { transition: opacity 1.2s ease .35s; }
.wall.is-pin .wall__day:not(.is-lit) .wall__tags { opacity: 0; transform: translateY(-28px); }
.wall.is-pin .wall__lit:not(.is-lit) { opacity: 0; }

.wall__chips-wrap { flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 10px; background: var(--ff-coal-2); border-top: 1px solid #3a2116; }
.wall__step { flex: none; position: relative; width: 44px; height: 44px; border: 1.5px solid #6b4433; border-radius: 50%; background: none; color: var(--ff-cream); cursor: pointer; }
.wall__step::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -2px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.wall__step--next::after { margin-left: -7px; transform: rotate(-135deg); }
.wall__step:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .wall__step:hover:not(:disabled) { background: var(--ff-apricot); border-color: var(--ff-apricot); color: var(--ff-coal); } }
.wall__chips { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; scroll-padding-inline: 8px; }
.wall__chips::-webkit-scrollbar { display: none; }
.wall__chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 1.5px solid #3a2116; border-radius: 999px; background: #3a2116; color: #f6d4bb; font: 700 13px/1 var(--fw-text); cursor: pointer; white-space: nowrap; }
.wall__chip b { font-weight: 800; color: var(--ff-cream); }
.wall__chip i { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(255, 244, 234, .14); font: 800 11px/18px var(--fw-text); font-style: normal; color: var(--ff-cream); }
.wall__chip.is-empty { background: none; color: #b8957f; }
.wall__chip[aria-current="true"] { background: var(--ff-apricot); border-color: var(--ff-apricot); color: var(--ff-coal); }
.wall__chip[aria-current="true"] b, .wall__chip[aria-current="true"] i { color: var(--ff-coal); }
.wall__chip[aria-current="true"] i { background: rgba(42, 20, 11, .14); }
@media (min-width: 761px) {
  .wall.is-pin .wall__chips-wrap { margin-bottom: calc(var(--mat-h) + 22px); border-top: 0; background: none; padding: 0 clamp(14px, 4vw, 56px); }
  .wall.is-pin .wall__chip { box-shadow: 0 0 0 1px #3a2116; }
  .wall__tag { padding: 26px 18px 16px; }
  .wall__t { font-size: 48px; }
  .wall__n { font-size: 16px; }
  .wall__m, .wall__pl { font-size: 13px; }
}

/* ============================ 5 · HOLD IT WITH HER (peak) ============================ */
.hold { --hold-travel: 150svh; position: relative; height: calc(100lvh + var(--hold-travel)); background: var(--ff-coal-2); color: var(--ff-cream); }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) { .hold { --hold-travel: 340svh; } }
.hold__stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; --heat: 0; }
.hold__ground { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, #4a2412 0, #2a140b 55%, #1c0d07 100%); }
.hold__film { will-change: opacity; position: absolute; top: 0; bottom: 0; left: 50%; width: calc(100lvh * 9 / 16); transform: translateX(-50%); overflow: hidden; background: #1c0d07; }
.hold__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1c0d07; }
.hold__heat { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 62%, rgba(194, 83, 31, 0) 28%, rgba(168, 64, 26, .5) 72%, rgba(120, 40, 12, .78) 100%); }
.hold__drops { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hold__stage.is-shaking .hold__video { animation: ff-shake .16s steps(2, end) infinite; }
@keyframes ff-shake { 0% { transform: translate3d(-.7px, .4px, 0); } 100% { transform: translate3d(.7px, -.5px, 0); } }

.hold__knee { position: absolute; left: 49%; top: 69%; width: 112px; height: 112px; margin: -56px 0 0 -56px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ff-cream); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; z-index: 3; }
.hold__ring { position: absolute; inset: 14px; border: 2px solid var(--ff-hot); border-radius: 50%; opacity: .85; }
html:not(.is-scrolling) .hold.is-live .hold__ring { animation: ff-ring 2.2s var(--ease-out) infinite; }
.hold__ring::after { content: ""; position: absolute; inset: -12px; border: 1.5px solid rgba(255, 228, 200, .55); border-radius: 50%; }
html:not(.is-scrolling) .hold.is-live .hold__ring::after { animation: ff-ring 2.2s var(--ease-out) .5s infinite; }
@keyframes ff-ring { 0% { transform: scale(.82); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.14); opacity: 0; } }
.hold__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 13px/1 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.hold.is-live .hold__knee.is-held .hold__ring { animation: none; background: rgba(255, 228, 200, .22); transform: scale(1.06); border-color: #fff; }
.hold.is-live .hold__knee.is-held .hold__ring::after { animation: none; opacity: 0; }
.hold__knee:focus-visible { outline: 3px solid var(--ff-apricot); outline-offset: 2px; }

.hold__frame { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; }
.hold__copy { position: absolute; left: 20px; right: 20px; top: calc(var(--fw-bar-h, 44px) + 4px); text-shadow: 0 1px 14px rgba(20, 8, 3, .75); }
.hold__h { margin: 0 0 10px; font: 700 clamp(44px, 13vw, 84px)/.9 var(--fw-display); text-transform: uppercase; }
.hold__help { margin: 0; max-width: 34ch; font-size: 14.5px; line-height: 1.45; color: var(--ff-hot); }
.hold__result { margin: 0; max-width: 36ch; padding: 14px 16px; background: rgba(28, 13, 7, .9); border: 1.5px solid #5a3220; border-radius: 2px; font-size: 16px; line-height: 1.5; color: var(--ff-cream); text-shadow: none; pointer-events: auto; }
.hold__result strong { color: var(--ff-apricot); }
.hold__result a { color: var(--ff-apricot); font-weight: 800; }
.hold__live { position: absolute; left: 20px; right: 20px; bottom: calc(var(--mat-h) + 16px); display: flex; flex-direction: column; gap: 8px; text-shadow: 0 1px 14px rgba(20, 8, 3, .8); }
.hold__timer { align-self: flex-end; margin: 0 0 56px; font: 800 44px/1 var(--fw-display); font-variant-numeric: tabular-nums; color: var(--ff-apricot); }
.hold__timer small { font-size: 22px; margin-left: 2px; }
.hold__coach { margin: 0; min-height: 2em; font: 400 clamp(30px, 9vw, 52px)/1 var(--ff-bric); font-variation-settings: "wght" 400; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.hold__meter { position: relative; height: 5px; border-radius: 3px; background: rgba(255, 228, 200, .22); overflow: hidden; }
.hold__meter i { position: absolute; inset: 0; background: linear-gradient(90deg, #c2531f, #f79a5b 70%, #ffe4c8); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-height: 720px) { .hold__help { display: none; } .hold__h { font-size: clamp(38px, 11vw, 60px); } }
@media (min-width: 761px) {
  .hold__film { left: auto; right: max(2vw, calc((100vw - 1320px) / 2)); transform: none; width: calc(100lvh * .8); }
  .hold__video { object-position: 50% 66%; }
  .hold__knee { top: 70.7%; }
  .hold__copy { left: max(5vw, calc((100vw - 1320px) / 2 + 56px)); right: auto; width: min(42vw, 560px); top: 14svh; }
  .hold__h { font-size: clamp(44px, 5.2vw, 76px); }
  .hold__help { font-size: 17px; max-width: 38ch; }
  .hold__live { left: max(5vw, calc((100vw - 1320px) / 2 + 56px)); right: auto; width: min(44vw, 640px); bottom: calc(var(--mat-h) + 56px); }
  .hold__timer { align-self: flex-start; margin: 0 0 8px; }
  .hold__coach { font-size: clamp(36px, 3.6vw, 60px); }
}

/* ============================ 6 · SAVASANA ============================ */
.rest { position: relative; background: #1d1612; color: var(--ff-cream); overflow: hidden; }
.rest__photo { position: relative; height: min(68svh, 600px); }
.rest__photo picture, .rest__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.rest__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, #1d1612 0, rgba(29, 22, 18, .6) 50%, rgba(29, 22, 18, 0) 100%); }
.rest__photo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1; background: linear-gradient(to bottom, #1c0d07 0, rgba(28, 13, 7, 0) 100%); }
.rest__copy { position: relative; z-index: 2; margin: -20svh 20px 0; padding-bottom: clamp(40px, 9vw, 96px); max-width: 560px; }
.rest__h { margin: 0 0 10px; font: 700 clamp(52px, 16vw, 110px)/.88 var(--fw-display); text-transform: uppercase; }
.rest__p { margin: 0 0 20px; font-size: 18px; color: #e9d7c8; max-width: 30ch; }
.rest__quote { margin: 0; padding-top: 16px; border-top: 1px solid #4a3a30; }
.rest__quote blockquote { margin: 0; }
.rest__quote p { margin: 0; font: 300 clamp(22px, 6vw, 30px)/1.15 var(--ff-bric); font-variation-settings: "wght" 300; letter-spacing: -.02em; color: #f3e4d6; }
.rest__quote figcaption { margin-top: 10px; font: 700 11px/1 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; color: #b8a392; }
@media (min-width: 761px) {
  .rest { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; min-height: 82svh; }
  .rest__photo { height: 100%; min-height: 82svh; }
  .rest__photo::after { top: 0; height: auto; width: 40%; left: auto; right: 0; background: linear-gradient(to left, #1d1612, rgba(29, 22, 18, 0)); }
  .rest__copy { margin: 0 5vw 0 3vw; padding: 60px 0; }
}

/* ============================ 8 · FIRST CLASS ============================ */
.first { background: var(--ff-paper); color: var(--ff-coal); padding: clamp(44px, 9vw, 120px) 0; }
.first__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--fw-gutter); display: grid; gap: clamp(28px, 5vw, 56px) clamp(32px, 6vw, 96px); }
.first__h { margin: 0 0 10px; font: 700 clamp(44px, 11.5vw, 100px)/.9 var(--fw-display); text-transform: uppercase; }
.first__lede { margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: #4a2c1d; }
.first__faq details { border-top: 1px solid #dcc9b8; }
.first__faq details:last-child { border-bottom: 1px solid #dcc9b8; }
.first__faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 50px; padding: 8px 0; font: 700 17px/1.3 var(--fw-text); cursor: pointer; list-style: none; }
.first__faq summary::-webkit-details-marker { display: none; }
.first__faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ff-ember-deep); border-bottom: 2px solid var(--ff-ember-deep); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease-out); }
.first__faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.first__faq details p { margin: 0 0 16px; max-width: 56ch; color: #4a2c1d; }
.first__faq a, .first__note a { color: var(--ff-ember-deep); font-weight: 700; }
.first__h3 { margin: 0 0 10px; font: 700 28px/1 var(--fw-display); text-transform: uppercase; }
.prices { margin: 0 0 10px; padding: 0; }
.prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-top: 1px solid #dcc9b8; }
.prices > div:last-child { border-bottom: 1px solid #dcc9b8; }
.prices dt { font-weight: 700; }
.prices dd { margin: 0; font: 700 30px/1 var(--fw-display); color: var(--ff-ember-deep); font-variant-numeric: tabular-nums; }
.first__note { margin: 0 0 16px; max-width: 46ch; font-size: 14px; color: var(--h-soft); }
.first .fw-btn { --h-accent: var(--ff-ember-deep); }
.first .fw-btn--line { color: var(--ff-coal); }
@media (min-width: 761px) {
  .first__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .first__head { grid-row: span 2; }
  .first__prices { grid-column: 2; }
}

/* ============================ 9 · THE CLOSE: the week, printed on the mat ============================ */
.close { position: relative; background: var(--ff-coal-2); color: var(--ff-cream); overflow: hidden; padding: clamp(44px, 9vw, 112px) 0 clamp(60px, 11vw, 128px); }
.close__mat { will-change: transform; position: absolute; inset: 0; background: url("/fire-flow/assets/mat-texture-1400.webp") center / cover no-repeat; transform: translate3d(0, -101%, 0); }
.close.is-in .close__mat { transform: none; transition: transform 1.25s var(--ease-out); }
.no-js .close__mat, .is-still .close__mat { transform: none; transition: none; }
.close__mat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(42, 20, 11, .78) 0, rgba(42, 20, 11, .64) 100%); }
.close__roll { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(to bottom, #f08a45 0 3px, #a8401a 3px 6px); border-top: 2px solid #fbd9bd; }
.close__in { position: relative; max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--fw-gutter); display: grid; gap: 26px clamp(32px, 6vw, 96px); }
.js .close__in { opacity: 0; transition: opacity .7s ease .5s; }
.js .close.is-in .close__in { opacity: 1; }
.is-still .close__in { opacity: 1 !important; transition: none; }
.close__h { margin: 0 0 10px; font: 700 clamp(52px, 15vw, 112px)/.88 var(--fw-display); text-transform: uppercase; }
.close__p { margin: 0; max-width: 32ch; font-size: 18px; color: var(--ff-hot); }
.ff-slots { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.ff-slots[aria-busy="true"] { min-height: 220px; }
.ff-slots__note { font-size: 15px; color: var(--ff-hot); }
.ff-slots__note a { color: var(--ff-cream); font-weight: 700; }
.ff-day { margin: 22px 0 4px; font: 700 11px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--ff-hot); }
.ff-day:first-child { margin-top: 0; }
.ff-slot { display: grid; grid-template-columns: 3.6em 1fr auto; gap: 2px 14px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255, 228, 200, .26); }
.ff-slot__t { font: 700 28px/1 var(--fw-display); }
.ff-slot__n { font-weight: 800; font-size: 16px; line-height: 1.25; }
.ff-slot__n small { display: block; margin-top: 3px; font-weight: 500; font-size: 13px; line-height: 1.35; color: #f1d9c4; }
.ff-slot__go { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ff-cream); border-radius: 2px; color: var(--ff-cream); font: 800 13px/1 var(--fw-text); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: transform .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out); }
.ff-slot__go:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ff-slot__go:hover { background: var(--ff-cream); color: var(--ff-coal); } }
.ff-slot.is-full .ff-slot__go { border-color: rgba(255, 228, 200, .5); color: #f1d9c4; }
.close__act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.close__book { --h-accent: var(--ff-cream); --h-accent-ink: var(--ff-coal); min-height: 54px; padding: 0 28px; }
.close__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ff-cream); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.close__addr { font-style: normal; font-size: 15px; line-height: 1.55; color: var(--ff-hot); max-width: 40ch; }
@media (min-width: 761px) {
  .close__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .close__head { grid-row: span 3; }
  .close__in > .ff-slots, .close__act, .close__addr { grid-column: 2; }
  .ff-slot { grid-template-columns: 4em 1fr auto; }
}

/* ============================ THE MAT (nav) ============================ */
.mat { will-change: transform; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; height: calc(var(--mat-h) + env(safe-area-inset-bottom, 0px)); padding: 0 10px env(safe-area-inset-bottom, 0px) 8px; background: rgba(28, 13, 7, .97); color: var(--ff-cream); border-top: 1px solid #4a2616; transform: translate3d(0, 110%, 0); transition: transform .45s var(--ease-out); }
.mat.is-on { transform: none; }
.mat__track { position: relative; flex: 1; height: 100%; padding: 0 12px; }
.mat__base, .mat__fill { position: absolute; left: 12px; right: 12px; bottom: 11px; height: 12px; border-radius: 6px; }
.mat__base { background: #3a1d10; }
.mat__fill { background: url("/fire-flow/assets/mat-tile.webp") 0 0 / 96px 12px repeat-x; transform-origin: 0 50%; transform: scaleX(0); }
.mat__roll { position: absolute; left: 0; bottom: 5px; width: 24px; height: 24px; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #f08a45 0 1.6px, #a8401a 1.6px 3.4px); border: 1.5px solid #fbd9bd; }
.mat__stops { position: absolute; inset: 0 12px 0 12px; margin: 0; padding: 0; list-style: none; }
.mat__stops li { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 20%); width: 52px; margin-left: -26px; }
.mat__stops li:nth-child(1) { --i: 1; } .mat__stops li:nth-child(2) { --i: 2; } .mat__stops li:nth-child(3) { --i: 3; } .mat__stops li:nth-child(4) { --i: 4; }
.mat__stops li::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 2px; height: 18px; margin-left: -1px; background: #fbd9bd; opacity: .55; border-radius: 1px; pointer-events: none; }
.mat__stops a { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 7px; font: 700 11px/1 var(--fw-text); letter-spacing: .12em; text-transform: uppercase; color: #e9cdb6; text-decoration: none; }
.mat__stops a[aria-current="true"] { color: var(--ff-apricot); }
.mat__book { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 44px; padding: 0 16px; border-radius: 2px; background: var(--ff-apricot); color: var(--ff-coal); font: 800 14px/1 var(--fw-text); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: transform .18s var(--ease-out); }
.mat__book:active { transform: scale(.97); }
.mat a:focus-visible { outline: 2px solid var(--ff-apricot); outline-offset: -2px; }
@media (min-width: 761px) {
  .mat { left: 50%; right: auto; width: min(620px, calc(100vw - 32px)); bottom: 14px; padding-bottom: 0; height: var(--mat-h); border: 1px solid #4a2616; border-radius: 6px; transform: translate3d(-50%, 150%, 0); }
  .mat.is-on { transform: translate3d(-50%, 0, 0); }
}

/* ============================ reduced motion / no JS: a complete, still page ============================ */
@media (prefers-reduced-motion: reduce) {
  .js [data-in] { opacity: 1; transform: none; transition: none; }
  .hold.is-live .hold__ring, .hold.is-live .hold__ring::after { animation: none; opacity: .8; }
  .mat { transition: none; }
  .wall__tag { transition: none; }
}
.hero-still { display: none; position: relative; background: #1c0d07; color: var(--ff-cream); }
.hero-still picture, .hero-still img { display: block; width: 100%; }
.hero-still img { height: min(78svh, 640px); object-fit: cover; object-position: 50% 60%; }
.hero-still__copy { position: absolute; left: 20px; right: 20px; top: 24px; text-shadow: 0 1px 18px rgba(20, 8, 3, .75); }
.hero-still__copy::before { content: ""; position: absolute; z-index: -1; left: -20px; right: -20px; top: -24px; height: 300px; background: linear-gradient(to bottom, rgba(24, 10, 4, .66), rgba(24, 10, 4, 0)); }
.hero-still__copy p { margin: 0; max-width: 28ch; font: 600 15px/1.45 var(--fw-text); }
.is-still .hero-still, .no-js .hero-still { display: block; }
.is-still .hero, .no-js .hero { height: auto; }
.is-still .hero__stage, .no-js .hero__stage { position: relative; height: calc(100svh - var(--fw-bar-h, 44px)); }
.is-still .hero__room, .is-still .hero__after, .no-js .hero__room, .no-js .hero__after { display: none; }
@media (min-width: 761px) { .hero-still__copy { left: 6vw; right: auto; top: 12svh; } .hero-still img { height: min(86svh, 760px); } }

/* family snippet contrast: the water "next door" soft text (#8bd3db on #14666f) is 3.93:1; lifted here until family.css changes */
.is-still .hold, .no-js .hold { height: auto; }
.is-still .hold__stage, .no-js .hold__stage { position: relative; height: max(100svh, 640px); }

/* phone length: a little less air in two acts keeps the page at 14 phone viewport-heights */
@media (max-width: 760px) {
  .who { padding: 32px 0 28px; }
  .who__photos { margin-top: 20px; }
  .who__quote { margin-top: 22px; }
  .rest__photo { height: min(58svh, 600px); }
}