/* ============================================================
   REGIMEN — Vkus Est, Bangkok
   Soviet sports poster grammar, modern editorial execution.
   Palette: paper / ink / one red. No second accent.
   Photography is duotoned into the same red so stock frames
   read as part of the poster instead of dropped-in stock.
   ============================================================ */

/* ── tokens ─────────────────────────────────────────────── */
:root{
  --paper:      #F7F4EF;
  --paper-hi:   #FFFDFA;   /* tinted toward the paper hue, never pure white */
  --paper-lo:   #EFEAE1;
  --ink:        #16110F;
  --ink-70:     #4A423D;
  --ink-50:     #5A524D;
  --red:        #D8262A;
  --red-deep:   #A81B1F;
  --red-on-dark:#FF8A78;   /* lifted tonal variant; brand red is 1.9:1 on the dark plate section */
  --line:       #DCD5C9;
  --line-soft:  #E7E1D6;

  --f-disp: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shell: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);

  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;    --s8: 8rem;

  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .34s;
}

/* ── reset ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,p,dl,dd,ol,ul,figure,figcaption{ margin:0; }
ol,ul{ list-style:none; padding:0; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
/* The UA rule for [hidden] is display:none at UA priority, so ANY author
   display declaration silently defeats it. Restate it as an author rule. */
[hidden]{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ── paper grain: fixed layer, never inside a scroller ──── */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.3; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── shell + shared type ────────────────────────────────── */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-weight:600;
}
.skip-link:focus{ left:0; }

:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:3px solid var(--red); outline-offset:3px; border-radius:2px;
}

.eyebrow{
  font-family:var(--f-disp); font-weight:600;
  font-size:.8125rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:var(--s3);
}
.eyebrow::before{ content:""; width:2rem; height:3px; background:var(--red); flex:none; }
.eyebrow--light{ color:var(--paper-hi); }
.eyebrow--light::before{ background:var(--paper-hi); }

.sec__ttl{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(2.1rem, 5.2vw, 3.9rem);
  line-height:.98; letter-spacing:-.015em;
  text-transform:uppercase; text-wrap:balance;
  max-width:20ch;
}
.sec__intro{
  margin-top:var(--s3);
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
  color:var(--ink-70); max-width:56ch; text-wrap:pretty;
}
.sec__note{ font-size:.9375rem; color:var(--ink-50); max-width:44ch; text-wrap:pretty; }
.sec{ padding-block:clamp(3rem, 6vw, 5.5rem); }
.sec__head{
  display:grid; gap:var(--s4); grid-template-columns:1fr;
  align-items:end; margin-bottom:var(--s5);
}
@media (min-width:900px){
  .sec__head{ grid-template-columns:1.55fr 1fr; gap:var(--s6); }
}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  --bg:var(--red); --fg:var(--paper-hi); --bd:var(--red);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; min-height:52px; padding:.85rem 1.85rem;
  background:var(--bg); color:var(--fg);
  border:2px solid var(--bd); border-radius:0;
  font-family:var(--f-disp); font-weight:700; font-size:1.0625rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .12s var(--ease);
}
.btn:hover{ --bg:var(--red-deep); --bd:var(--red-deep); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); }
.btn--ghost:hover{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); }
.btn--inv{ --bg:var(--paper-hi); --fg:var(--red); --bd:var(--paper-hi); }
.btn--inv:hover{ --bg:var(--ink); --fg:var(--paper-hi); --bd:var(--ink); }
.btn--sm{ min-height:44px; padding:.45rem 1.15rem; font-size:.9375rem; }
.btn--full{ width:100%; }

/* ── top bar ────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__in{ display:flex; align-items:center; gap:var(--s4); min-height:66px; }
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; flex:none; min-height:44px;
}
.brand__mark{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  background:var(--red); color:var(--paper-hi);
  font-family:var(--f-disp); font-weight:700; font-size:1.375rem; line-height:1;
  padding-top:2px;
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.08; }
.brand__txt b{
  font-family:var(--f-disp); font-weight:700; font-size:1.1875rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.brand__txt i{ font-style:normal; font-size:.75rem; color:var(--ink-50); }

.topnav{ display:none; margin-inline-start:auto; gap:var(--s4); }
@media (min-width:1080px){ .topnav{ display:flex; } }
.topnav a{
  font-family:var(--f-disp); font-weight:600; font-size:1rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-70);
  display:inline-flex; align-items:center; min-height:44px;
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.topnav a:hover{ color:var(--ink); border-bottom-color:var(--red); }

.topbar__cta{ display:none; margin-inline-start:auto; flex:none; }
@media (min-width:600px){ .topbar__cta{ display:inline-flex; } }
@media (min-width:1080px){ .topbar__cta{ margin-inline-start:0; } }

/* ── duotone treatment ──────────────────────────────────
   luminosity keeps the photo's tonal structure and takes hue
   from the red beneath it. One declaration, nothing baked into
   the file, so a photo can be swapped without reprocessing. */
.duo{ background:var(--red); isolation:isolate; overflow:hidden; }
.duo img{
  width:100%; height:100%; object-fit:cover;
  mix-blend-mode:luminosity;
  filter:grayscale(1) contrast(1.06);
  opacity:.93;
}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate;
  padding-block:clamp(2.5rem,7vw,5.5rem) clamp(2.5rem,6vw,4.5rem);
}
.hero__photo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__photo img{
  width:100%; height:100%; object-fit:cover; object-position:58% 42%;
  filter:grayscale(1) contrast(1.06);
  opacity:.44;
  -webkit-mask-image:linear-gradient(96deg, transparent 26%, #000 74%);
          mask-image:linear-gradient(96deg, transparent 26%, #000 74%);
}
.hero__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 38%, var(--paper) 94%);
}
/* diagonal hatch, the poster's paper texture */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(-68deg, transparent 0 46px,
             color-mix(in srgb, var(--red) 5%, transparent) 46px 47px);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 82%);
          mask-image:linear-gradient(to bottom, #000 0%, transparent 82%);
}
.hero__grid{
  position:relative; z-index:1;
  display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:start;
}
@media (min-width:960px){
  .hero__grid{ grid-template-columns:1.62fr 1fr; gap:clamp(2.5rem,5vw,5rem); }
}

.kicker{
  font-family:var(--f-disp); font-weight:600; font-size:.9375rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-50);
  padding-bottom:var(--s2); border-bottom:1px solid var(--line);
  margin-bottom:var(--s3);
}
.hero__ttl{ margin:0; }
.hero__ttl-word{
  display:block;
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(4.5rem, 17vw, 12.5rem);
  line-height:.8; letter-spacing:-.03em;
  text-transform:uppercase; color:var(--red);
}
.hero__sub{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.4rem, 3.6vw, 2.4rem);
  line-height:1.05; text-transform:uppercase;
  margin-top:var(--s3); padding-top:var(--s3);
  border-top:3px solid var(--ink); max-width:14ch;
}
.hero__body{
  margin-top:var(--s3);
  font-size:clamp(1.0625rem,1.55vw,1.1875rem);
  color:var(--ink-70); max-width:52ch; text-wrap:pretty;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.hero__facts{
  display:flex; flex-wrap:wrap; gap:var(--s5);
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line);
}
.hero__facts li{ display:flex; align-items:baseline; gap:.5rem; }
.hero__facts b{
  font-family:var(--f-disp); font-weight:700; font-size:2.25rem;
  line-height:1; font-variant-numeric:tabular-nums;
}
.hero__facts span{
  font-family:var(--f-disp); font-weight:600; font-size:.875rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-50);
}

/* date card — the red block */
.datecard{ position:relative; }
@media (min-width:960px){ .datecard{ transform:rotate(-1.6deg); } }
.datecard__in{
  background:var(--red); color:var(--paper-hi);
  padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:14px 14px 0 var(--ink);
}
.datecard__free{
  display:inline-block;
  background:var(--paper-hi); color:var(--red);
  font-family:var(--f-disp); font-weight:700; font-size:.8125rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.25rem .7rem; margin-bottom:var(--s3);
}
.datecard__mon{
  font-family:var(--f-disp); font-weight:600; font-size:1rem;
  letter-spacing:.24em; text-transform:uppercase; opacity:.85;
}
.datecard__num{
  display:flex; align-items:center; gap:.06em;
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(4rem,11vw,6.5rem); line-height:.85;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  margin-block:.15em .1em;
}
.datecard__num em{ font-style:normal; opacity:.6; font-size:.62em; }
.datecard__dow{
  font-family:var(--f-disp); font-weight:600; font-size:1.0625rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:var(--s3);
  border-bottom:2px solid color-mix(in srgb, var(--paper-hi) 40%, transparent);
}
.cdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:var(--s3); }
.cdown__cell{ text-align:center; }
.cdown__cell b{
  display:block;
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1.75rem,4.5vw,2.5rem);
  line-height:1; font-variant-numeric:tabular-nums;
}
.cdown__cell span{
  font-family:var(--f-disp); font-weight:600; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; opacity:.8;
}
.cdown__note{ margin-top:var(--s2); font-size:.8125rem; opacity:.85; text-align:center; }
.cdown.is-done{ grid-template-columns:1fr; }
.cdown.is-done b{ font-size:1.5rem; }

/* ── marquee ────────────────────────────────────────────── */
.marq{
  overflow:hidden; background:var(--ink); color:var(--paper);
  border-block:3px solid var(--ink); padding-block:.7rem;
}
.marq__track{ display:flex; width:max-content; animation:marq 46s linear infinite; }
.marq__seq{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1rem,2vw,1.375rem);
  letter-spacing:.14em; text-transform:uppercase;
  padding-inline:1.25rem; white-space:nowrap;
}
.marq__seq i{ color:var(--red); font-style:normal; padding-inline:.6rem; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marq__track{ animation:none; } }

/* ── idea / tenets: asymmetric, no equal 3-card row ─────── */
.sec--idea{ border-bottom:1px solid var(--line); }
.tenets{ display:grid; gap:var(--s4); margin-top:var(--s5); }
@media (min-width:900px){
  .tenets{ grid-template-columns:repeat(12,1fr); gap:var(--s5) var(--s4); }
  .tenet--a{ grid-column:1 / span 6; }
  .tenet--b{ grid-column:7 / span 5; margin-top:var(--s5); }
  .tenet--c{ grid-column:2 / span 7; }
}
.tenet{ padding-top:var(--s3); border-top:3px solid var(--ink); }
.tenet__n{
  font-family:var(--f-disp); font-weight:700; font-size:3.25rem;
  line-height:.9; color:var(--red);
  font-variant-numeric:tabular-nums; margin-bottom:.35rem;
}
.tenet h3{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.06; text-transform:uppercase; margin-bottom:var(--s2);
}
.tenet p:not(.tenet__n){ color:var(--ink-70); max-width:46ch; text-wrap:pretty; }

/* ── programme days ─────────────────────────────────────── */
.days{ border-top:3px solid var(--ink); }
.day{
  display:grid; gap:var(--s2) var(--s4); grid-template-columns:1fr;
  padding-block:var(--s4); border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease);
}
.day:hover{ background:var(--paper-lo); }
.day--last{ border-bottom:3px solid var(--ink); }
@media (min-width:860px){
  .day{ grid-template-columns:7rem minmax(0,1fr) 17rem; align-items:start; }
}
.day__date{ display:flex; align-items:baseline; gap:.5rem; }
@media (min-width:860px){ .day__date{ flex-direction:column; gap:0; } }
.day__date b{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(2.75rem,6vw,3.75rem);
  line-height:.85; color:var(--red); font-variant-numeric:tabular-nums;
}
.day__date span{
  font-family:var(--f-disp); font-weight:600; font-size:.875rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-50);
}
.day__name{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.5rem,3vw,2.125rem);
  line-height:1; text-transform:uppercase; margin-bottom:.6rem;
}
.day__desc{ color:var(--ink-70); max-width:58ch; text-wrap:pretty; }
.day__slots{ display:grid; gap:.55rem; align-content:start; }
.day__slots p{
  display:flex; gap:.75rem; align-items:baseline;
  font-size:.9375rem; color:var(--ink-70);
  padding-top:.55rem; border-top:1px solid var(--line-soft);
}
.day__slots b{
  font-family:var(--f-disp); font-weight:700; font-size:1.0625rem;
  letter-spacing:.04em; color:var(--ink); flex:none;
  font-variant-numeric:tabular-nums;
}

/* ── full-bleed photo bands ─────────────────────────────── */
.band{
  position:relative;
  height:clamp(240px, 28vw, 380px);
  border-block:3px solid var(--ink);
}
/* default cover-crop centres on the torso and decapitates the subject */
.band img{ object-position:center 28%; }
.band__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--s4) var(--gut);
  background:linear-gradient(to top, color-mix(in srgb, var(--ink) 80%, transparent), transparent);
}
.band__cap span{
  display:block; max-width:var(--shell); margin-inline:auto;
  color:var(--paper-hi);
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.125rem,2.6vw,1.75rem);
  line-height:1.1; text-transform:uppercase;
  text-wrap:balance;
}

/* ── the five movements ─────────────────────────────────
   Two columns rather than five full-width rows: same content,
   roughly a third of the height. */
.moves{
  display:grid; gap:0;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
}
@media (min-width:820px){
  .moves{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,4vw,3.5rem); }
}
.move{
  display:grid; grid-template-columns:3.4rem minmax(0,1fr);
  column-gap:var(--s2); row-gap:.25rem;
  padding-block:var(--s4);
  border-bottom:1px solid var(--line);
}
@media (min-width:820px){
  /* the two cells that sit on the last row lose their rule */
  .move:nth-last-child(-n+1){ border-bottom:0; }
  .move--last{ border-bottom:0; }
}
.move__n{
  grid-row:1 / span 3; align-self:start;
  font-family:var(--f-disp); font-weight:700; font-size:2.5rem;
  line-height:.85; color:var(--red); font-variant-numeric:tabular-nums;
}
.move h3{
  grid-column:2;
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.5rem,2.8vw,1.875rem);
  line-height:1; text-transform:uppercase;
}
.move__what{ grid-column:2; color:var(--ink-70); font-size:.9375rem; text-wrap:pretty; }
.move__meta{ grid-column:2; display:grid; gap:0; margin-top:.7rem; }
.move__meta div{
  display:grid; grid-template-columns:1fr; gap:.05rem var(--s2);
  padding-block:.5rem; border-top:1px solid var(--line-soft);
}
@media (min-width:520px){
  .move__meta div{ grid-template-columns:5.25rem minmax(0,1fr); }
}
.move__meta dt{
  font-family:var(--f-disp); font-weight:600; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  padding-top:.2rem;
}
.move__meta dd{ margin:0; font-size:.9375rem; color:var(--ink-70); text-wrap:pretty; }

/* ── on the plate ───────────────────────────────────────
   The healthy-food photograph is the section background. The ink
   wash over it is what guarantees text contrast, so it stays even
   if the photo is swapped for a lighter one. */
.plate{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--paper);
  padding-block:clamp(3.5rem,7vw,6rem);
  border-block:3px solid var(--ink);
}
.plate__bg{ position:absolute; inset:0; z-index:0; }
.plate__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  /* brightness() caps the photo's maximum luminance. A wash alone cannot:
     a white bowl rim stayed near-white through a 74% overlay and killed
     contrast for any light text crossing it. Saturation is pushed back up
     so the food still reads as food once darkened. */
  filter:brightness(.46) contrast(1.06) saturate(1.35);
}
.plate__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(22,17,15,.58) 0%, rgba(22,17,15,.40) 100%);
}
.plate__in{ position:relative; z-index:1; }
.plate__head .sec__ttl{ color:var(--paper-hi); }
.plate__intro{
  margin-top:var(--s2);
  font-size:clamp(1rem,1.5vw,1.125rem);
  color:color-mix(in srgb, var(--paper) 84%, var(--ink));
  max-width:52ch; text-wrap:pretty;
}

.rules{ display:grid; gap:var(--s4); margin-top:var(--s5); }
@media (min-width:720px){
  .rules{ grid-template-columns:1fr 1fr; gap:var(--s4) clamp(2rem,4vw,3.5rem); }
}
.rule{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr);
  column-gap:var(--s2); row-gap:.2rem; align-content:start;
  padding-top:var(--s2); border-top:2px solid var(--red-on-dark);
}
.rule__n{
  grid-row:1 / span 2; align-self:start;
  font-family:var(--f-disp); font-weight:700; font-size:1.75rem;
  line-height:1; color:var(--red-on-dark); font-variant-numeric:tabular-nums;
}
.rule h3{
  grid-column:2;
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.125rem,2vw,1.375rem);
  line-height:1.06; text-transform:uppercase; color:var(--paper-hi);
}
.rule p:not(.rule__n){
  grid-column:2; font-size:.9375rem;
  color:color-mix(in srgb, var(--paper) 78%, var(--ink));
  text-wrap:pretty;
}

/* ── coaches: 2-col zig-zag, typographic monogram ───────── */
.coaches{ display:grid; gap:var(--s4); margin-top:var(--s5); }
@media (min-width:680px){ .coaches{ grid-template-columns:1fr 1fr; gap:var(--s4) var(--s5); } }
@media (min-width:1040px){ .coaches{ grid-template-columns:repeat(4,1fr); gap:var(--s4); } }
.coach{ padding-top:var(--s3); border-top:3px solid var(--ink); }
.coach__mono{
  font-family:var(--f-disp); font-weight:700; font-size:2.25rem;
  line-height:.9; letter-spacing:.02em; color:var(--red); margin-bottom:.6rem;
}
.coach__name{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.5rem);
  line-height:1.02; text-transform:uppercase; text-wrap:balance;
}
.coach__role{
  font-family:var(--f-disp); font-weight:600; font-size:.875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-50);
  margin-block:.4rem var(--s2);
}
.coach__bio{ color:var(--ink-70); font-size:.9375rem; max-width:40ch; text-wrap:pretty; }

/* ── registration ───────────────────────────────────────── */
.sec--book{ background:var(--paper-lo); border-block:1px solid var(--line); }
.book__grid{ display:grid; gap:var(--s5); }
@media (min-width:940px){
  .book__grid{ grid-template-columns:1.45fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
}
#bookForm{ display:grid; gap:var(--s3); margin-top:var(--s4); max-width:34rem; }
.field{ display:grid; gap:.4rem; }
.field label{
  font-family:var(--f-disp); font-weight:600; font-size:.9375rem;
  letter-spacing:.13em; text-transform:uppercase;
}
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:.75rem .9rem;
  background:var(--paper-hi); border:2px solid var(--line); border-radius:0;
  font-size:1rem; transition:border-color var(--dur) var(--ease);
}
.field textarea{ min-height:auto; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--ink-50); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ink); }
.field input::placeholder,.field textarea::placeholder{ color:#9A928C; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316110F' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.75rem;
}
.field__hint{ font-size:.8125rem; color:var(--ink-50); }
.field__err{
  font-size:.8125rem; font-weight:600; color:var(--red);
  display:flex; gap:.4rem; align-items:flex-start;
}
.field__err::before{ content:"!"; font-weight:700; flex:none; }
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-color:var(--red); }
.form__status{ font-size:.875rem; color:var(--ink-50); min-height:1.25rem; }
.form__status.is-ok{ color:var(--ink); font-weight:600; }
.form__alt{
  font-size:.9375rem; color:var(--ink-50);
  padding-top:var(--s2); border-top:1px solid var(--line);
}
.form__alt a{ color:var(--ink); text-underline-offset:3px; }
.form__alt i{ padding-inline:.4rem; color:var(--line); }

.book__where{ background:var(--ink); color:var(--paper); padding:clamp(1.5rem,3vw,2.25rem); }
.where__ttl{
  font-family:var(--f-disp); font-weight:600; font-size:.8125rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 62%, var(--ink));
  padding-bottom:var(--s2);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 25%, transparent);
}
.where__place{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(2rem,4.5vw,2.75rem); line-height:1;
  text-transform:uppercase; margin-top:var(--s3);
}
.where__addr{ color:color-mix(in srgb, var(--paper) 72%, var(--ink)); margin-top:.4rem; }
.where__meta{ display:grid; gap:0; margin-block:var(--s4); }
.where__meta div{
  display:flex; justify-content:space-between; gap:var(--s2);
  padding-block:.7rem;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}
.where__meta dt{
  font-family:var(--f-disp); font-weight:600; font-size:.8125rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 58%, var(--ink));
}
.where__meta dd{ margin:0; font-size:.9375rem; text-align:right; }
.where__note{
  font-size:.8125rem; line-height:1.55; margin-bottom:var(--s3);
  color:color-mix(in srgb, var(--paper) 58%, var(--ink));
}
.book__where .btn--ghost{ --fg:var(--paper); --bd:var(--paper); }
.book__where .btn--ghost:hover{ --bg:var(--paper); --fg:var(--ink); }

/* ── faq ────────────────────────────────────────────────── */
.faq{ margin-top:var(--s4); border-top:3px solid var(--ink); max-width:60rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:flex-start; gap:var(--s2);
  padding-block:var(--s3); cursor:pointer; list-style:none;
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.125rem,2.1vw,1.375rem);
  line-height:1.14; text-transform:uppercase;
  transition:color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--red); }
.faq summary::after{
  content:""; flex:none; margin-inline-start:auto;
  width:16px; height:16px; margin-top:.35em; background:var(--red);
  clip-path:polygon(43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%,0 43%,43% 43%);
  transition:transform var(--dur) var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding-bottom:var(--s3); max-width:62ch; color:var(--ink-70); text-wrap:pretty; }

/* ── final cta ──────────────────────────────────────────── */
.cta{ background:var(--red); color:var(--paper-hi); padding-block:clamp(3rem,7vw,var(--s7)); }
.cta__in{ display:grid; gap:var(--s3); justify-items:start; }
.cta__ttl{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(2.1rem,6vw,4.25rem);
  line-height:.96; letter-spacing:-.015em; text-transform:uppercase;
  max-width:18ch; text-wrap:balance;
}
.cta__sub{ font-size:clamp(1.0625rem,1.7vw,1.25rem); max-width:50ch; opacity:.92; text-wrap:pretty; }
.cta .btn{ margin-top:var(--s2); }

/* ── footer ─────────────────────────────────────────────── */
.foot{ background:var(--ink); color:var(--paper); padding-block:var(--s5) var(--s4); }
.foot__grid{ display:grid; gap:var(--s4); }
@media (min-width:720px){ .foot__grid{ grid-template-columns:repeat(2,1fr); gap:var(--s5); } }
@media (min-width:1040px){ .foot__grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.foot__col{ font-size:.9375rem; line-height:1.75; color:color-mix(in srgb, var(--paper) 82%, var(--ink)); }
.foot__brand{
  font-family:var(--f-disp); font-weight:700; font-size:2rem;
  line-height:1; letter-spacing:.04em; text-transform:uppercase;
  color:var(--red); margin-bottom:.6rem;
}
.foot__h{
  font-family:var(--f-disp); font-weight:600; font-size:.75rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 55%, var(--ink));
  padding-bottom:.6rem; margin-bottom:.7rem;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 20%, transparent);
}
.foot__line{ color:color-mix(in srgb, var(--paper) 70%, var(--ink)); }
.foot__col a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease); }
.foot__col a:hover{ border-bottom-color:var(--red); }
.foot__bot{
  display:grid; gap:.6rem; margin-top:var(--s5); padding-top:var(--s3);
  border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  font-size:.8125rem; color:color-mix(in srgb, var(--paper) 52%, var(--ink));
}
@media (min-width:860px){
  .foot__bot{ grid-template-columns:auto 1fr; gap:var(--s4); align-items:baseline; }
  .foot__bot p:last-child{ text-align:right; max-width:62ch; justify-self:end; }
}

/* ── mobile sticky action bar ────────────────────────────
   Shown only where the header CTA is not. Sits above the iOS
   home indicator and reserves matching body padding so the
   footer never hides underneath it. */
.mbar{ display:none; }

@media (max-width:599px){
  .mbar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:120;
    background:var(--ink); color:var(--paper);
    border-top:3px solid var(--red);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .mbar__in{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--s2); padding:.6rem var(--gut);
  }
  .mbar__price{ display:flex; flex-direction:column; line-height:1.05; }
  .mbar__price b{
    font-family:var(--f-disp); font-weight:700; font-size:1.375rem;
    text-transform:uppercase; letter-spacing:.04em;
  }
  .mbar__price span{
    font-family:var(--f-disp); font-weight:600; font-size:.6875rem;
    letter-spacing:.16em; text-transform:uppercase;
    color:color-mix(in srgb, var(--paper) 60%, var(--ink));
  }
  .mbar .btn{ flex:none; }

  body{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ── scroll reveal ───────────────────────────────────────
   Content is visible by DEFAULT. Only once JS has confirmed it
   can run and will animate does it add .js-reveal to <html> and
   opt into hiding. If the script never loads, nothing is hidden
   and the page still reads: a blank page is not an option. */
.reveal{ opacity:1; transform:none; }

.js-reveal .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.js-reveal .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{ opacity:1; transform:none; }
}