/* ============================================================
   MahjongTableFlow storytelling rebuild — new components only.
   Reuses tokens and conventions from styles.css (forest/gold/cream,
   Georgia serif headlines, pill buttons, soft shadows). Nothing in
   this file overrides an existing selector from styles.css/guides.css.
   ============================================================ */

/* ---------- shared editorial primitives ---------- */
.kicker{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);font-weight:850}
.story-h2{font:700 clamp(32px,4.2vw,54px)/1.08 Georgia,serif;color:var(--forest);letter-spacing:-.03em;margin:12px 0 0;text-wrap:balance}
.story-copy{font-size:17px;line-height:1.75;color:var(--muted);max-width:640px}
.story-section{padding:var(--sp-xl) 0}
.story-section.tight{padding:var(--sp-l) 0}
.story-section.dark{background:linear-gradient(165deg,var(--forest),var(--forest-2));color:#fff}
.story-section.dark .kicker{color:var(--gold-2)}
.story-section.dark .story-h2{color:#fff}
.story-section.dark .story-copy{color:rgba(255,253,249,.74)}
.story-section.linen{background:var(--linen)}
.story-head{max-width:760px;margin-bottom:var(--sp-l)}

/* ---------- 1. cinematic hero — see the consolidated hero block further down
     ("HERO — photography-led"). Kept as a single system in one place so the
     media layer, the tile choreography layer and the type never fight. ---------- */

/* ---------- 3. a night in the life (scroll timeline) ---------- */
.timeline{position:relative;max-width:680px;margin:0 auto;padding-left:36px;border-left:2px solid var(--line)}
.timeline__item{position:relative;padding:0 0 var(--sp-l) 28px;opacity:0;transform:translateY(16px);transition:opacity var(--dur-s) var(--ease),transform var(--dur-s) var(--ease)}
.timeline__item.visible{opacity:1;transform:none}
.timeline__item:before{content:"";position:absolute;left:-41px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--cream)}
.timeline__time{font:700 13px/1 Georgia,serif;color:var(--gold-2);letter-spacing:.04em}
.timeline__text{font-size:19px;line-height:1.55;color:rgba(255,253,249,.92);margin-top:6px;max-width:480px}
.timeline__item.outcome{padding-left:28px}
.timeline__item.outcome:before{background:var(--gold);width:16px;height:16px;left:-43px;box-shadow:0 0 0 5px var(--forest-2)}
.timeline__item.outcome .timeline__text{font:700 26px Georgia,serif;color:#fff;max-width:560px}
@media(prefers-reduced-motion:reduce){.timeline__item{opacity:1;transform:none;transition:none}}

/* ---------- 4. chaos -> flow ---------- */
.chaos-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow)}
.chaos-flow__side{padding:44px 38px}
.chaos-flow__side.before{background:#2a2622;color:#efe7d8}
.chaos-flow__side.after{background:linear-gradient(165deg,var(--forest),#1a5a4b);color:#fff}
.chaos-flow__kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;opacity:.68;margin-bottom:16px}
.chaos-flow__side ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.chaos-flow__side.before li{font-size:15px;opacity:.82;text-decoration:line-through;text-decoration-color:rgba(239,231,216,.35)}
.chaos-flow__side.after li{font-size:16px;font-weight:650}
.chaos-flow__side li:before{content:"— ";opacity:.5}
.chaos-flow__divider{display:flex;align-items:center;justify-content:center;background:var(--gold);color:#fff;width:64px;font:700 22px Georgia,serif}
@media(max-width:820px){.chaos-flow{grid-template-columns:1fr;}.chaos-flow__divider{width:100%;padding:12px 0}}

/* ---------- 5. the flow method ---------- */
.flow-method{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.flow-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:30px 24px;position:relative}
.flow-card__letter{font:700 46px Georgia,serif;color:var(--gold);line-height:1}
.flow-card h3{font:700 20px Georgia,serif;color:var(--forest);margin:16px 0 8px}
.flow-card p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
@media(max-width:980px){.flow-method{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flow-method{grid-template-columns:1fr}}

/* ---------- 6. ROLE SCENE — four points of view on one tabletop ----------
   Replaces the rejected circular-brown-table diagram entirely. This is a
   photographed tabletop, not a schematic: choosing a role moves the light
   to that seat, dims the rest of the frame, and names the physical objects
   that seat is actually responsible for. No circle, no hotspot dots, no
   connector lines. The selector is a typographic rail, so it works on
   touch and by keyboard, and every panel reads without hovering anything.
   ------------------------------------------------------------------ */
.role-scene{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(24px,3.4vw,52px);align-items:stretch}

/* --- the photographed tabletop --- */
.role-scene__frame{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--forest-deep);
  box-shadow:0 40px 90px rgba(0,0,0,.45);min-height:430px}
.role-scene__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transition:transform 1.4s var(--ease-cinematic)}
.role-scene[data-role] .role-scene__frame img{transform:scale(1.08)}
/* The grade: everything outside the focused seat falls away. --fx/--fy are
   set per role by interactive.js; the default holds the whole table. */
.role-scene__grade{position:absolute;inset:0;pointer-events:none;
  transition:background 1.1s var(--ease-cinematic);
  background:radial-gradient(circle 42% at var(--fx,50%) var(--fy,50%),
    rgba(7,32,27,0) 0%, rgba(7,32,27,.22) 40%, rgba(7,32,27,.72) 74%, rgba(7,32,27,.92) 100%)}
.role-scene__warm{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity 1.1s var(--ease-cinematic),background 1.1s var(--ease-cinematic);
  background:radial-gradient(circle 26% at var(--fx,50%) var(--fy,50%),
    rgba(255,238,205,.2) 0%, rgba(255,238,205,.06) 48%, transparent 76%)}
.role-scene[data-role] .role-scene__warm{opacity:1}

/* Object labels sit on the photograph where the objects are — editorial
   captions, not schematic callouts. No leader lines. */
.role-scene__objects{position:absolute;inset:0;pointer-events:none}
.role-object{position:absolute;transform:translate(-50%,-50%) translateY(6px);opacity:0;
  font:700 10.5px/1 Georgia,serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--ivory-warm);padding:7px 12px;border-radius:999px;
  background:rgba(7,32,27,.55);border:1px solid rgba(201,171,121,.45);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  transition:opacity .7s var(--ease-cinematic),transform .7s var(--ease-cinematic)}
.role-object.is-in{opacity:1;transform:translate(-50%,-50%)}

/* Faint seat marks: material, not UI. Only the active one lights. */
.role-scene__seat{position:absolute;width:clamp(42px,4.6vw,60px);height:2px;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  background:rgba(246,239,226,.14);pointer-events:none;
  transition:background .8s var(--ease-cinematic),box-shadow .8s var(--ease-cinematic)}
.role-scene__seat.is-active{background:var(--brass-2);box-shadow:0 0 18px rgba(201,171,121,.55)}

/* --- the selector rail + copy --- */
.role-scene__aside{display:flex;flex-direction:column;justify-content:center}
.role-rail{display:grid;gap:0;margin:0 0 28px;border-top:1px solid rgba(246,239,226,.16)}
.role-rail__btn{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid rgba(246,239,226,.16);
  padding:17px 4px;color:rgba(246,239,226,.58);font:inherit;
  transition:color .35s var(--ease),padding-left .35s var(--ease)}
.role-rail__btn em{font:700 10px Georgia,serif;font-style:normal;letter-spacing:.16em;color:rgba(246,239,226,.36);min-width:22px;transition:color .35s var(--ease)}
.role-rail__btn b{font:700 clamp(19px,1.75vw,24px) Georgia,serif;letter-spacing:-.01em}
.role-rail__btn:hover{color:var(--ivory-warm);padding-left:12px}
.role-rail__btn[aria-pressed="true"]{color:var(--ivory-warm);padding-left:12px}
.role-rail__btn[aria-pressed="true"] em{color:var(--brass-2)}
.role-rail__btn:focus-visible{outline:2px solid var(--jade-2);outline-offset:3px;border-radius:4px}

.role-copy{min-height:170px}
.role-copy h3{font:700 clamp(21px,2vw,26px) Georgia,serif;color:var(--ivory-warm);margin:0 0 12px}
.role-copy p{color:rgba(246,239,226,.74);line-height:1.72;font-size:15.5px;margin:0 0 18px;max-width:46ch}
.role-copy .text-link{color:var(--brass-2);font-weight:750}
.role-copy .text-link:hover{color:var(--ivory-warm)}

@media(max-width:900px){
  .role-scene{grid-template-columns:1fr}
  .role-scene__frame{min-height:0;aspect-ratio:16/10}
  .role-copy{min-height:152px}
}
@media(max-width:560px){
  .role-object{font-size:9px;padding:6px 10px;letter-spacing:.1em}
  .role-rail__btn{padding:15px 4px}
  .role-rail__btn b{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .role-scene__frame img,.role-scene__grade,.role-scene__warm,.role-object,.role-scene__seat{transition:none}
  .role-scene[data-role] .role-scene__frame img{transform:none}
}
/* ---------- 7. product system ---------- */
.library-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.library-group{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:34px}
.library-group__kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:850}
.library-group h3{font:700 27px Georgia,serif;color:var(--forest);margin:10px 0 14px}
.library-group p{color:var(--muted);line-height:1.65;margin:0 0 18px}
.library-group__items{display:grid;gap:10px}
.library-group__item{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.library-group__item:first-child{border-top:0}
.library-group__item b{color:var(--forest)}
.library-group__item span{color:var(--gold);font-weight:800;white-space:nowrap}
@media(max-width:860px){.library-groups{grid-template-columns:1fr}}

/* ---------- 8. try the workflow (demo) ---------- */
.demo{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:38px;box-shadow:0 16px 44px rgba(38,55,48,.06)}
.demo__controls{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
.demo__field label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);margin-bottom:8px}
.demo__field select,.demo__field input[type=number]{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:15px;color:var(--ink)}
.demo__field select:focus,.demo__field input:focus{outline:3px solid var(--sage);border-color:var(--forest)}
.demo__output{display:grid;gap:10px}
.demo__step{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.demo__step:first-child{border-top:0}
.demo__step b{min-width:150px;color:var(--forest);font:700 14px Georgia,serif}
.demo__step span{color:var(--muted);font-size:14px;line-height:1.6}
.demo__cta{margin-top:24px;padding-top:22px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.demo__controls{grid-template-columns:1fr}}

/* ---------- 9. tools hub ---------- */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tool-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:30px;display:flex;flex-direction:column;min-height:260px}
.tool-card__icon{width:50px;height:50px;border-radius:14px;background:var(--sage);display:grid;place-items:center;font:700 20px Georgia,serif;color:var(--forest);margin-bottom:18px}
.tool-card h3{font:700 23px Georgia,serif;color:var(--forest);margin:0 0 10px}
.tool-card p{color:var(--muted);line-height:1.6;font-size:14px;flex:1}
.tool-card .text-link{margin-top:14px}
.tool-card.scaffold{opacity:.7;border-style:dashed}
@media(max-width:860px){.tools-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tools-grid{grid-template-columns:1fr}}

/* shared calculator shell (table calculator / round planner / class pricing) */
.calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:36px;box-shadow:0 16px 44px rgba(38,55,48,.06);max-width:720px}
.calc__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.calc__field label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);margin-bottom:8px}
.calc__field input{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);font:inherit;font-size:16px}
.calc__field input:focus{outline:3px solid var(--sage);border-color:var(--forest)}
.calc__result{margin-top:10px;background:var(--sage);border-radius:var(--r-m);padding:24px 26px}
.calc__result-num{font:700 42px Georgia,serif;color:var(--forest);line-height:1}
.calc__result-label{font-size:13px;color:#3c5347;margin-top:6px}
.calc__notes{margin-top:18px;font-size:14px;line-height:1.7;color:var(--muted)}
.calc__disclaimer{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.6}
.calc__share{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:12px;color:var(--muted)}
.calc__share code{background:var(--cream);padding:6px 10px;border-radius:8px;font-size:11px;word-break:break-all}
@media(max-width:560px){.calc__row{grid-template-columns:1fr}}

/* ---------- 10. workflow finder (wizard) ---------- */
.wizard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:40px;max-width:760px;margin:0 auto;box-shadow:0 16px 44px rgba(38,55,48,.06)}
.wizard__progress{display:flex;gap:6px;margin-bottom:28px}
.wizard__progress span{flex:1;height:4px;border-radius:4px;background:var(--line)}
.wizard__progress span.done{background:var(--gold)}
.wizard__step{display:none}
.wizard__step.active{display:block}
.wizard__step h2{font:700 26px Georgia,serif;color:var(--forest);margin:0 0 20px}
.wizard__options{display:grid;gap:10px}
.wizard__option{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;background:#fff;font:inherit;text-align:left;width:100%}
.wizard__option:hover{border-color:var(--gold-2)}
.wizard__option[aria-pressed="true"]{border-color:var(--forest);background:var(--sage)}
.wizard__option-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0}
.wizard__option[aria-pressed="true"] .wizard__option-check{background:var(--forest);border-color:var(--forest)}
.wizard__nav{display:flex;justify-content:space-between;margin-top:28px}
.wizard__result{background:var(--forest);color:#fff;border-radius:var(--r-m);padding:30px}
.wizard__result h3{font:700 24px Georgia,serif;margin:0 0 6px;color:#fff}
.wizard__result .text-link{color:var(--gold-2)}
.wizard__result-item{background:rgba(255,255,255,.08);border-radius:14px;padding:18px 20px;margin-top:14px}
.wizard__result-item b{display:block;font:700 18px Georgia,serif;margin-bottom:4px}
.wizard__result-item span{font-size:13px;opacity:.78}
@media(max-width:620px){.wizard{padding:26px}}

/* ---------- ask the operations desk ---------- */
.desk{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:36px;max-width:760px;margin:0 auto}
.desk__chips{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 24px}
.desk__chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;font-size:13px;cursor:pointer;color:var(--forest)}
.desk__chip:hover{border-color:var(--gold-2)}
.desk__thread{display:grid;gap:14px;min-height:60px}
.desk__msg{padding:16px 18px;border-radius:16px;max-width:88%;line-height:1.6;font-size:14px}
.desk__msg.user{background:var(--sage);justify-self:end;color:var(--forest)}
.desk__msg.desk{background:var(--forest);color:#fff}
.desk__msg.desk a{color:var(--gold-2);text-decoration:underline}
.desk__form{display:flex;gap:10px;margin-top:18px}
.desk__form input{flex:1;padding:14px 16px;border-radius:999px;border:1.5px solid var(--line);font:inherit}
.desk__note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.6}

/* ---------- about page ---------- */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.about-pillars{display:grid;gap:22px}
.about-pillar{display:grid;grid-template-columns:40px 1fr;gap:16px}
.about-pillar b{display:block;width:40px;height:40px;border-radius:50%;background:var(--sage);color:var(--forest);display:grid;place-items:center;font:700 16px Georgia,serif}
.about-pillar h3{font:700 19px Georgia,serif;color:var(--forest);margin:0 0 6px}
.about-pillar p{color:var(--muted);line-height:1.65;margin:0;font-size:14px}
@media(max-width:860px){.about-split{grid-template-columns:1fr}}

/* ---------- persona extras (social hosts uses same template as instructors/clubs/tournaments) ---------- */
.persona-chaos{margin-top:var(--sp-l)}

/* ---------- FAQ (shared accordion) ---------- */
.faq{display:grid;gap:12px;max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font:700 17px Georgia,serif;color:var(--forest)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";font-size:22px;color:var(--gold);flex-shrink:0;transition:transform var(--dur-f) var(--ease)}
.faq-item[open] summary:after{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 22px 22px;color:var(--muted);line-height:1.7;font-size:15px}

/* ---------- scenario / checklist callout reused in the new guide ---------- */
.scenario-table{width:100%;border-collapse:collapse;font-size:14px}
.scenario-table th,.scenario-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.scenario-table th{background:var(--forest);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.06em}

/* ---------- breadcrumb used on new top-level pages ---------- */
.page-breadcrumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:12px;line-height:1.6;color:var(--muted);padding-top:28px}
.page-breadcrumbs a{text-decoration:underline;text-underline-offset:3px}

/* ---------- nav: Solutions disclosure (native <details>, keyboard-accessible, no JS) ---------- */
.nav-solutions{position:relative}
.nav-solutions summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:5px}
.nav-solutions summary::-webkit-details-marker{display:none}
.nav-solutions summary:after{content:"▾";font-size:10px;color:var(--gold)}
.nav-solutions__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px;display:grid;min-width:200px;z-index:60}
.nav-solutions__menu a{display:block;padding:11px 14px;border-radius:10px;font-size:14px;color:#35453f;white-space:nowrap}
.nav-solutions__menu a:hover{background:var(--sage)}
@media(max-width:980px){
  .nav-solutions summary:after{display:none}
  .nav-solutions__menu{position:static;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 0 14px;margin-top:4px}
}

/* ---------- utility ---------- */
.center{text-align:center;margin-left:auto;margin-right:auto}
.mt-l{margin-top:var(--sp-l)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   MOTION + CINEMATIC SPRINT (GSAP + ScrollTrigger, CDN, no bundler)
   Progressive enhancement model: every element below defaults to a
   plain, static, in-flow, fully-readable state. motion.js adds
   html.motion-active ONLY after GSAP has loaded AND the visitor has
   not requested reduced motion; only then do the absolute-position /
   opacity:0 "animated" rules under html.motion-active apply. No JS,
   a blocked CDN, or prefers-reduced-motion: reduce all land on the
   exact same readable fallback — nothing is ever hidden by default.
   ============================================================ */
:root{
  --dur-fast:.15s;--dur-ui:.3s;--dur-story:.9s;--dur-cinematic:1.8s;--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-cinematic:cubic-bezier(.65,0,.35,1);
  /* material/art-direction tokens: additive only */
  --brass:#a9875a;--brass-2:#c9ab79;--espresso:#120d0a;--espresso-2:#1c140f;--charcoal-ink:#2b2420;--felt:#1a2b24;
}

/* ============================================================
   PREMIUM RESCUE PALETTE (2026-10-16)
   The previous dark treatment collapsed into brown-on-brown: one
   gold accent doing every job, beige cards on muddy backgrounds.
   Four materials now carry the page instead of one — deep forest
   felt, warm ivory paper, walnut, and two restrained metals/accents
   (jade for structure and life, brass for emphasis). Dark sections
   are lit green, never monochrome brown.
   ============================================================ */
:root{
  --forest-deep:#07201b;      /* near-black green: the floor of every dark section */
  --felt-lit:#16463a;         /* felt catching the light */
  --jade:#2f7d68;             /* restrained jade: structure, rules, focus states */
  --jade-2:#5fab92;           /* jade on dark: legible secondary accent */
  --jade-glow:rgba(70,160,131,.30);
  --ivory-warm:#f6efe2;       /* warm ivory: paper, cards, type on dark */
  --clay:#b4654a;             /* the one human/editorial warm accent, used sparingly */
}
/* Dark sections: lit from one side in green, with a jade bounce — not a flat brown wash. */
.story-section.dark{
  background:
    radial-gradient(820px 540px at 82% 6%, rgba(201,171,121,.11) 0%, transparent 58%),
    radial-gradient(760px 620px at 10% 96%, var(--jade-glow) 0%, transparent 62%),
    linear-gradient(168deg,var(--felt-lit) 0%,var(--forest) 42%,var(--forest-deep) 100%)}
.story-section.dark .kicker{color:var(--jade-2)}
.story-section.dark .story-copy{color:rgba(246,239,226,.76)}

/* ================================================================
   HERO — photography-led (2026-10-16 premium rescue)

   Three stacked layers, in z-order:
     0  .cinema-hero__media   real photography (<picture>), video-ready
     2  .cinema-hero__tiles   five real Mahjong tiles, choreographed
     3  .cinema-hero__scrim   the grade that makes type legible
     4  .cinema-hero__content type, set into the frame's own dark mass

   The previous version drew a fake room out of CSS gradients and put one
   ambiguous beige block over the headline. Both are gone: the room is a
   photograph, and the tiles are recognisably tiles.
   ================================================================ */
.cinema-hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:center;overflow:hidden;
  border-radius:0 0 var(--r-xl) var(--r-xl);background:var(--forest-deep)}
.cinema-hero__media{position:absolute;inset:0;z-index:0}
.cinema-hero__media video,.cinema-hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 46%;display:block}
.cinema-hero__media:empty{display:none}
/* A slow, barely-there push-in. The frame is already composed; this only
   keeps it from feeling like a dead JPEG. Paused for reduced motion. */
@keyframes mtf-hero-breathe{from{transform:scale(1.035)}to{transform:scale(1.075)}}
html.motion-active .cinema-hero__media img,
html.motion-active .cinema-hero__media video{animation:mtf-hero-breathe 26s var(--ease-cinematic) infinite alternate}

/* Graded so the photograph's own dark left mass becomes the type canvas.
   No flat black box over the image. */
.cinema-hero__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(94deg, rgba(5,18,14,.94) 0%, rgba(5,18,14,.8) 26%, rgba(5,18,14,.36) 46%, rgba(5,18,14,.06) 64%, transparent 78%),
    linear-gradient(to top, rgba(5,18,14,.72) 0%, transparent 34%),
    radial-gradient(900px 420px at 50% -8%, rgba(5,18,14,.55) 0%, transparent 70%)}

/* .cinema-hero__content also carries .wrap, so it keeps the site's gutter and
   max measure; the copy's own measure is set on the children, not here —
   otherwise margin:auto from .wrap centres the whole block in the frame. */
.cinema-hero__content{position:relative;z-index:4;color:var(--ivory-warm);padding:0}
.cinema-hero__content>*{max-width:600px}
.cinema-hero__content .kicker{color:var(--brass-2);display:flex;align-items:center;gap:12px;letter-spacing:.24em}
.cinema-hero__content .kicker:before{content:"";display:inline-block;width:30px;height:1px;background:var(--brass-2);opacity:.7}
.cinema-hero h1{font:700 clamp(40px,4.9vw,70px)/1.04 Georgia,serif;letter-spacing:-.034em;margin:22px 0 0;max-width:12ch;text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.45)}
/* Second clause set smaller and indented — an authored composition, not a
   headline/subhead stack centred in a column. */
.cinema-hero h1 .hero-line--minor{display:block;font-size:.52em;line-height:1.22;letter-spacing:-.015em;color:rgba(246,239,226,.82);
  margin-top:.5em;padding-left:.18em;border-left:1px solid rgba(201,171,121,.5);padding-left:18px;max-width:22ch}
.cinema-hero__lead{font-size:17px;line-height:1.7;color:rgba(246,239,226,.72);max-width:440px;margin:30px 0 32px}
.cinema-hero__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cinema-hero__actions .btn.ghost{color:var(--ivory-warm);border-color:rgba(246,239,226,.34)}
.cinema-hero__actions .btn.ghost:hover{border-color:var(--jade-2);background:rgba(95,171,146,.1)}

/* Continuation affordance: the page says, quietly, that it keeps going. */
.cinema-hero__scroll{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:26px;display:flex;flex-direction:column;align-items:center;gap:9px;
  font:700 10px/1 Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,239,226,.5)}
.cinema-hero__scroll i{display:block;width:1px;height:42px;background:linear-gradient(to bottom,rgba(201,171,121,.75),transparent);overflow:hidden}
@keyframes mtf-scroll-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
html.motion-active .cinema-hero__scroll i:after{content:"";display:block;width:1px;height:14px;background:var(--brass-2);animation:mtf-scroll-cue 2.4s var(--ease-cinematic) infinite}

/* ---------- hero: the tile choreography layer ----------
   Five real tiles — three suits of original generic motif (dots, bamboo,
   and an abstract character-inspired geometry). They are dealt in from
   the lower edge and settle into a slightly staggered row, the way tiles
   land on a rack. They live in the right-hand two-thirds so they can
   never collide with the type. */
.cinema-hero__tiles{position:absolute;inset:0;z-index:2;perspective:1700px;pointer-events:none;display:none;
  /* sit the CSS tiles in the photograph's own light instead of on top of it */
  filter:brightness(.93) saturate(1.04) drop-shadow(0 18px 22px rgba(0,0,0,.45))}
html.motion-active .cinema-hero__tiles{display:block}
.c-tile{position:absolute;width:clamp(58px,5.4vw,82px);aspect-ratio:3/4;transform-style:preserve-3d;will-change:transform,opacity;opacity:0}
.c-tile__face{position:absolute;inset:0;border-radius:7px;overflow:hidden}
.c-tile__face--front{
  background:
    radial-gradient(130% 150% at 26% 10%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.1) 36%, transparent 54%),
    linear-gradient(168deg, #fffdf7 0%, #f3ecda 52%, #ddd0ad 100%);
  box-shadow:
    inset 0 0 0 1px rgba(43,36,32,.18),
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -9px 14px rgba(80,54,31,.26),
    0 26px 44px rgba(0,0,0,.55),
    0 5px 12px rgba(0,0,0,.4)}
.c-tile__motif{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.c-tile__motif svg{width:54%;height:54%}
/* The thin warm card-stock edge every real tile has. */
.c-tile__face--edge{left:auto;right:-9px;width:9px;height:100%;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#d8c49b,#9c7f52);transform:rotateY(78deg);transform-origin:left center;
  box-shadow:inset 0 0 10px rgba(0,0,0,.45)}
.c-tile--soft{filter:blur(.7px)}
.c-tile--softer{filter:blur(1.6px)}

.hero-line{display:block}
.hero-line span{display:inline-block}
html.motion-active .hero-line{opacity:0;transform:translateY(16px);will-change:transform,opacity}

@media(max-width:980px){
  .cinema-hero__media img,.cinema-hero__media video{object-position:68% 48%}
  .cinema-hero__content{max-width:520px}
}
@media(max-width:720px){
  .cinema-hero{min-height:640px;border-radius:0 0 24px 24px;align-items:flex-end}
  /* Mobile keeps the photograph, not a gradient: the frame is re-cropped to
     the racks and tiles and the type sits in the bottom grade. */
  .cinema-hero__media img,.cinema-hero__media video{object-position:56% 42%}
  .cinema-hero__scrim{background:
    linear-gradient(to top, rgba(5,18,14,.95) 0%, rgba(5,18,14,.86) 30%, rgba(5,18,14,.42) 56%, rgba(5,18,14,.1) 78%, transparent 100%)}
  .cinema-hero__content{max-width:none;padding-bottom:84px}
  /* The kicker wraps to two lines at this width; give it its own bottom
     margin instead of relying on h1's fixed margin-top, so a wrapped
     second line never crowds into the headline. */
  .cinema-hero__content .kicker{letter-spacing:.14em;margin-bottom:14px}
  .cinema-hero h1{max-width:16ch;margin-top:0}
  .cinema-hero h1 .hero-line--minor{font-size:.58em;max-width:none}
  .cinema-hero__lead{max-width:none;margin:22px 0 26px}
  html.motion-active .cinema-hero__tiles{display:none}
  .cinema-hero__scroll{bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .cinema-hero__media video{display:none}
  html.motion-active .cinema-hero__media img,html.motion-active .cinema-hero__media video{animation:none}
  html.motion-active .cinema-hero__scroll i:after{animation:none}
}

/* ---------- night stage: "a night in the life" (pinned, DELIBERATELY SHORT) ----------
   Previously 360vh of pinned scroll — long enough that the page read as
   finished. Now 165vh: the tension builds in about one and a half screens,
   a progress rail shows the scene advancing, and the scene releases while
   the reader is still clearly moving down the page. The pin also hands off
   visibly: the closing line rises out of frame as the next section arrives.
   ------------------------------------------------------------------ */
.night-stage__pin{position:relative}
.night-stage__scene{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:56px 0;text-align:center}
.night-stage__clock{font:700 13px Georgia,serif;letter-spacing:.18em;color:var(--brass-2);opacity:.9}
.night-stage__board{position:relative;width:min(780px,88vw);display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* Paper on felt — ivory card stock with a walnut edge, not beige-on-brown. */
.night-card{position:relative;background:var(--ivory-warm);color:var(--forest);border-radius:3px;padding:11px 15px;
  font:700 13px Georgia,serif;box-shadow:0 12px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.7)}
.night-card.cancelled{background:#30211c;color:#e7b4a0;text-decoration:line-through;box-shadow:0 12px 26px rgba(0,0,0,.45)}
.night-bubble{position:relative;background:var(--clay);color:#fff7f1;border-radius:14px 14px 14px 3px;padding:12px 16px;
  font:700 14px Georgia,serif;box-shadow:0 16px 32px rgba(0,0,0,.38)}
.night-stage__line{font:700 clamp(28px,5.2vw,56px) Georgia,serif;color:var(--ivory-warm);letter-spacing:-.025em;max-width:760px}
.night-stage__line.flow{color:var(--jade-2)}
.night-stage__brand{font:700 18px Georgia,serif;letter-spacing:.07em;color:rgba(246,239,226,.82)}

/* Progress rail — the explicit answer to "has this page ended?". */
/* No overflow:hidden here — the "Keep scrolling" label sits above the 2px
   rail and would be clipped by it. The fill rounds itself instead. */
.night-stage__rail{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;width:min(360px,52vw);
  height:2px;background:rgba(246,239,226,.16);display:none;border-radius:2px}
html.motion-active .night-stage__rail{display:block}
.night-stage__rail i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--jade-2),var(--brass-2));border-radius:2px}
.night-stage__rail span{position:absolute;left:0;bottom:16px;width:100%;text-align:center;
  font:700 9.5px Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,226,.42)}

html.motion-active .night-stage__pin{height:165vh}
html.motion-active .night-stage__scene{position:sticky;top:0;height:100vh;padding:0;overflow:hidden}
html.motion-active .night-stage__board{height:min(360px,42vh);display:block}
html.motion-active .night-card,html.motion-active .night-bubble{position:absolute;opacity:0;will-change:transform,opacity}
html.motion-active .night-stage__line,html.motion-active .night-stage__brand{position:absolute;left:50%;bottom:24%;transform:translate(-50%,24px);opacity:0;will-change:transform,opacity}
html.motion-active .night-stage__brand{bottom:16%}
@media(max-width:860px){
  /* Mobile never pins this scene: the same beats play as a short reveal
     sequence, so a thumb-scroll is never held in place. */
  html.motion-active .night-stage__pin{height:auto}
  html.motion-active .night-stage__scene{position:relative;height:auto;padding:52px 0}
  html.motion-active .night-stage__board{height:auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  html.motion-active .night-card,html.motion-active .night-bubble{position:relative;opacity:1}
  html.motion-active .night-stage__line,html.motion-active .night-stage__brand{position:relative;left:auto;bottom:auto;transform:none;opacity:1;text-align:center}
  html.motion-active .night-stage__rail{display:none}
}

/* ---------- chaos, physically, becoming flow (scroll-scrubbed, never pinned) ---------- */
.chaos-physical{position:relative;border-radius:var(--r-l);overflow:hidden;
  background:
    radial-gradient(700px 480px at 16% 94%, var(--jade-glow) 0%, transparent 64%),
    linear-gradient(168deg,var(--felt-lit),var(--forest-deep));
  box-shadow:var(--shadow);padding:52px 20px 24px}
.chaos-physical:before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px)}
.chaos-physical__label{position:relative;font:700 11px Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2);margin:0 0 18px}
.cp-note{position:relative;background:var(--ivory-warm);color:var(--charcoal-ink);padding:14px 16px;font-size:13px;line-height:1.45;
  box-shadow:0 12px 20px rgba(0,0,0,.36),0 1px 0 rgba(255,255,255,.5) inset}
.chaos-physical__field{position:relative;display:grid;gap:10px}
.cp-note.cp-before{background:#e9ddc4;box-shadow:0 12px 20px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.35) inset;opacity:.9;text-decoration:line-through;border-radius:2px}
.cp-note.cp-before:nth-child(3n){clip-path:polygon(0 0,97% 0,100% 8%,100% 100%,3% 100%,0 92%)}
.cp-note.cp-after{border-radius:3px;background:#fffdf8;box-shadow:0 10px 18px rgba(0,0,0,.3);border-left:3px solid var(--jade)}
.cp-note b{display:block;font:700 10px Georgia,serif;letter-spacing:.08em;text-transform:uppercase;opacity:.52;margin-bottom:4px;text-decoration:none}
html.motion-active .chaos-physical{min-height:520px;padding:0}
html.motion-active .chaos-physical__label{position:absolute;top:24px;left:28px;z-index:4;margin:0}
html.motion-active .chaos-physical__field{height:520px;padding:52px 20px 24px}
html.motion-active .cp-note{position:absolute;width:168px;opacity:0;will-change:transform,opacity;text-decoration:none}
@media(max-width:720px){html.motion-active .chaos-physical__field{height:640px}html.motion-active .cp-note{width:128px;font-size:12px}}

/* ---------- flow stage (pinned: F L O W snap-together — also shortened) ---------- */
.flow-stage__pin{position:relative}
.flow-stage__scene{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:56px 0}
.flow-stage__row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.flow-tile{width:112px;height:140px;border-radius:14px;background:linear-gradient(155deg,var(--paper),var(--linen));border:1px solid var(--line);box-shadow:0 20px 40px rgba(38,55,48,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px}
.flow-tile__letter{font:700 48px Georgia,serif;color:var(--jade);line-height:1}
.flow-tile__word{font:700 12px Georgia,serif;color:var(--forest);text-align:center}
.flow-stage__visual{min-height:64px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.flow-chip{background:var(--sage);color:var(--forest);border-radius:10px;padding:8px 12px;font:700 12px Georgia,serif}
.flow-stage__final{font:700 clamp(24px,4vw,40px) Georgia,serif;color:var(--forest)}
html.motion-active .flow-stage__pin{height:150vh}
html.motion-active .flow-stage__scene{position:sticky;top:0;height:100vh;padding:0}
html.motion-active .flow-tile{opacity:0;will-change:transform,opacity}
html.motion-active .flow-tile__word{opacity:0}
html.motion-active .flow-chip{opacity:0;will-change:transform,opacity}
html.motion-active .flow-stage__final{opacity:0;will-change:transform,opacity}
@media(max-width:860px){
  html.motion-active .flow-stage__pin{height:auto}
  html.motion-active .flow-stage__scene{position:relative;height:auto;padding:56px 0}
  html.motion-active .flow-tile{opacity:1}
  html.motion-active .flow-tile__word{opacity:1}
  html.motion-active .flow-chip{opacity:1}
  html.motion-active .flow-stage__final{opacity:1}
  .flow-tile{width:86px;height:112px}
  .flow-tile__letter{font-size:36px}
}

/* ---------- tournament token simulator (FLIP, click-driven) ---------- */
.tourney-sim{background:linear-gradient(165deg,var(--forest),var(--forest-2));color:#fff;border-radius:var(--r-l);padding:var(--sp-l)}
.tourney-sim__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.tourney-sim__head b{font:700 13px Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2)}
.tourney-sim__head p{color:rgba(255,253,249,.74);margin:6px 0 0;max-width:460px;font-size:14px;line-height:1.6}
.tourney-sim__tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.ts-table{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px;min-height:96px}
.ts-table__label{font:700 11px Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);margin-bottom:10px}
.ts-table__seats{display:flex;gap:6px;flex-wrap:wrap}
.ts-token{width:30px;height:30px;border-radius:50%;background:var(--gold);color:#2a1f0e;display:flex;align-items:center;justify-content:center;font:700 11px Georgia,serif;will-change:transform}
@media(prefers-reduced-motion:reduce){.ts-token{transition:none}}

/* ---------- reduced-motion / no-GSAP: force every animated primitive to its readable resting state ---------- */
@media(prefers-reduced-motion:reduce){
  html.motion-active .c-tile,html.motion-active .hero-line span,html.motion-active .night-card,html.motion-active .night-bubble,
  html.motion-active .night-stage__line,html.motion-active .night-stage__brand,html.motion-active .cp-note,html.motion-active .flow-tile,
  html.motion-active .flow-tile__word,html.motion-active .flow-chip,html.motion-active .flow-stage__final{
    opacity:1!important;transform:none!important;position:relative!important}
  html.motion-active .night-stage__pin,html.motion-active .flow-stage__pin{height:auto!important}
  html.motion-active .night-stage__scene,html.motion-active .flow-stage__scene{position:relative!important;height:auto!important;padding:52px 0!important}
  html.motion-active .night-stage__board,html.motion-active .chaos-physical__field{height:auto!important}
}

/* ============================================================
   PREMIUM RESCUE — new homepage sections (2026-10-16)
   ============================================================ */

/* ---------- operational tension: the still beat before the chaos ----------
   Asymmetric by construction (copy wider than image, image offset down),
   so it does not read as the stock left-text / right-picture template. */
.tension{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4.4vw,72px);align-items:start}
.tension__copy .story-copy{margin:22px 0 0}
.tension__copy .story-copy+.story-copy{margin-top:16px}
.tension__list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line);max-width:560px}
.tension__list li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55;color:#44544e}
.tension__list li:before{content:"";position:absolute;left:0;top:23px;width:12px;height:1px;background:var(--jade);opacity:.8}
.tension__figure{margin:0;position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:0 34px 70px rgba(28,40,36,.22);
  transform:translateY(42px);background:var(--forest-deep)}
.tension__figure img{width:100%;height:100%;min-height:380px;object-fit:cover;object-position:58% 50%;display:block}
.tension__video{width:100%;height:100%;min-height:380px;object-fit:cover;object-position:center;display:block;background:var(--forest-deep)}
.tension__figure figcaption{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;color:var(--ivory-warm);text-shadow:0 2px 18px rgba(0,0,0,.62)}
.tension__figure figcaption b{font:700 13px Georgia,serif;letter-spacing:.11em;text-transform:uppercase}
.tension__figure figcaption span{font-size:12px;color:rgba(246,239,226,.76);text-align:right;max-width:26ch}

.tension__figure:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,32,27,.42) 0%,transparent 42%)}
.tension__figure--video:after{background:linear-gradient(to top,rgba(7,32,27,.58) 0%,rgba(7,32,27,.08) 42%,transparent 66%)}
@media(max-width:900px){
  .tension{grid-template-columns:1fr;gap:34px}
  .tension__figure{transform:none}
  .tension__figure img,.tension__video{min-height:260px}
  .tension__figure figcaption{left:16px;right:16px;bottom:14px;display:block}
  .tension__figure figcaption span{display:block;text-align:left;margin-top:6px;max-width:none}
}

/* ---------- role scene: the "go straight there" link row ---------- */
.role-scene__links{margin:38px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;
  font-size:14px;color:rgba(246,239,226,.5);padding-top:24px;border-top:1px solid rgba(246,239,226,.14)}
.role-scene__links span{font:700 10px Georgia,serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,239,226,.42)}
.role-scene__links a{color:var(--ivory-warm);font-weight:650;border-bottom:1px solid rgba(201,171,121,.45);padding-bottom:2px}
.role-scene__links a:hover{border-bottom-color:var(--brass-2);color:#fff}

/* ---------- proof pair: two live things presented as one section ---------- */
.proof-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.proof-pair__title{font:700 20px Georgia,serif;color:var(--forest);margin:0 0 22px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.proof-pair__title.light{color:var(--ivory-warm);border-bottom-color:rgba(246,239,226,.18)}
.proof-pair .demo,.proof-pair .tourney-sim{height:100%}
.proof-pair .tourney-sim__head{align-items:flex-start}
@media(max-width:980px){.proof-pair{grid-template-columns:1fr}}