/* ══════════════════════════════════════════
   VEIL — the gate. Black curtain, one word.
══════════════════════════════════════════ */
.veil{
  position:fixed; inset:0; z-index:2000; background:#050302;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
  cursor:pointer; transition:transform 1s var(--ease);
}
.veil--open{transform:translateY(-101%)}
.veil__word{
  font-family:var(--serif); font-size:clamp(1.6rem,4.5vw,3rem); letter-spacing:.55em;
  color:var(--ash); padding-left:.55em; opacity:0; animation:veilWordIn 1.8s var(--ease) .25s forwards;
}
@keyframes veilWordIn{from{opacity:0; letter-spacing:.26em}to{opacity:1; letter-spacing:.55em}}
.veil__ember{
  width:5px; height:5px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 26px 7px rgba(199,123,58,.6); animation:veilEmber 2.2s ease-in-out infinite;
}
@keyframes veilEmber{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.5);opacity:.5}}
html.veil-lock{overflow:hidden}
html.reduced .veil{transition:none}
html:not(.js) .veil{display:none}

/* ══════════════════════════════════════════
   HERO — the word itself is the fire
══════════════════════════════════════════ */
.hero{
  position:relative; height:84svh; min-height:560px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  /* no own background — hero and section 01 both sit on the body's var(--bg),
     exactly like sections 01→02, so there is no surface change to see */
}
/* frieze sits inside hero's own flex `gap` — the base .frieze rule (declared later in
   the file) adds up to 6rem of block padding meant for a frieze row sitting alone
   between two sections; inside hero that padding stacked with hero's bottom padding
   and the scrim's solid-bg fade-out, sinking the icons into a dead flat-black gap
   before the marquee. Kill the block padding here; hero's own `gap` already spaces it. */
.frieze.hero__frieze{padding-block:0; position:absolute; left:0; right:0; bottom:clamp(2.5rem,7vw,5rem); margin-top:0}
@media(max-width:640px){
  .hero{height:78svh; min-height:520px; justify-content:center; padding-top:5.5rem; padding-bottom:1.5rem; gap:1.6rem}
  /* three phrases stack cleanly — wrapped diamonds left orphan separators at line ends */
  .hero__tag{flex-direction:column; gap:.55em}
  .hero__sep{display:none}
  /* 7 icons at the default gap wrap an orphan onto its own line — tighten so the row stays whole.
     .frieze.hero__frieze (2 classes) needed to outrank the base .frieze rule declared earlier in the file. */
  .frieze.hero__frieze{margin-top:.2rem; padding-top:1.6rem; padding-bottom:0; gap:1.1rem; flex-wrap:nowrap}
}
@media(max-width:400px){
  .frieze.hero__frieze{gap:.6rem}
  .hero__frieze svg{width:25px; height:25px}
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  /* the entire video stack (video+fog+glow+haze+scrim) dissolves to full
     transparency before the clip edge. Root cause of the visible seam: the
     fixed .ambient glows paint only where the page surface is bare — an
     OPAQUE hero foot (even one painted exactly var(--bg)) blocks them, so
     the tone steps at hero's boundary. A transparent foot makes the hero
     end ON the same bare surface the chant/01 sit on — no step can exist. */
  mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.85) 76%, rgba(0,0,0,.4) 90%, transparent 99%);
  -webkit-mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.85) 76%, rgba(0,0,0,.4) 90%, transparent 99%);
}
.hero__video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  /* slight contrast/saturation lift so the flames read cinematic, not washed */
  filter:contrast(1.06) saturate(1.12) brightness(.94);
  animation:heroZoom 38s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
html.reduced .hero__video{animation:none}
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  /* LAYER ORDER MATTERS: first = topmost. The linear fade must sit ABOVE the
     vignette — its bottom stop is fully opaque var(--bg), so the hero's last
     pixels are painted the exact body color and the clip edge cannot be seen.
     When the vignette was on top, its rgba(5,3,2) darkening landed OVER that
     solid stop, making hero's bottom darker than the page below = a visible
     horizontal seam that no divider should be needed to hide. */
  background:
    /* focused shadow directly behind the text block — contrast lives here, not on the fire */
    radial-gradient(ellipse 46% 34% at 50% 42%, rgba(5,3,2,.6) 0%, rgba(5,3,2,.38) 48%, transparent 74%),
    /* seamless dissolve into the body background: gradual, solid just before the edge */
    linear-gradient(180deg, rgba(11,8,5,.62) 0%, rgba(11,8,5,.26) 28%, rgba(11,8,5,.3) 50%, rgba(11,8,5,.45) 68%, rgba(11,8,5,.75) 84%, rgba(11,8,5,.96) 94%, var(--bg) 98%),
    /* cinematic corner vignette — underneath the fade so it can't reach the bottom edge */
    radial-gradient(ellipse 140% 110% at 50% 40%, transparent 52%, rgba(5,3,2,.52) 90%);
}
.hero__fog{
  position:absolute; inset:-10% -10%; z-index:1; pointer-events:none; opacity:.45; mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 55% 32% at 50% 40%, rgba(190,180,168,.32), transparent 72%),
    radial-gradient(ellipse 50% 30% at 20% 85%, rgba(200,190,175,.22), transparent 70%),
    radial-gradient(ellipse 60% 35% at 80% 90%, rgba(200,190,175,.18), transparent 70%),
    radial-gradient(ellipse 70% 25% at 50% 100%, rgba(200,190,175,.28), transparent 70%);
  animation:fogDrift 22s ease-in-out infinite alternate;
}
/* second smoke sheet — drifts against the first at its own pace, adds parallax depth */
.hero__fog::after{
  content:""; position:absolute; inset:-6% -8%;
  background:
    radial-gradient(ellipse 48% 26% at 68% 56%, rgba(185,175,160,.20), transparent 70%),
    radial-gradient(ellipse 42% 22% at 28% 28%, rgba(185,175,160,.13), transparent 70%),
    radial-gradient(ellipse 64% 30% at 56% 98%, rgba(200,188,172,.17), transparent 72%);
  animation:fogDrift2 33s ease-in-out infinite alternate;
}
html.reduced .hero__fog, html.reduced .hero__fog::after{animation:none}
@keyframes fogDrift{
  0%{transform:translateX(-2%) translateY(0)}
  100%{transform:translateX(2%) translateY(-1.5%)}
}
@keyframes fogDrift2{
  0%{transform:translate(2.2%,1%) scale(1.02)}
  100%{transform:translate(-1.8%,-1.8%) scale(1)}
}
/* smoke bank at the hero's foot — the video frames burning logs at its bottom,
   bright and textured; a plain linear fade over them reads as a visible dark
   band. Progressive backdrop blur (stronger toward the edge, via mask) plus
   warm-grey smoke wisps dissolve the flame texture into atmosphere before the
   scrim finishes the job, so nothing is left for the fade to "cut across". */
.hero__haze{
  position:absolute; left:-2%; right:-2%; bottom:-2%; height:52%; z-index:1; pointer-events:none;
  backdrop-filter:blur(16px) saturate(.9); -webkit-backdrop-filter:blur(16px) saturate(.9);
  background:
    radial-gradient(ellipse 62% 58% at 20% 100%, rgba(56,46,38,.5), transparent 70%),
    radial-gradient(ellipse 74% 62% at 68% 100%, rgba(50,42,35,.45), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(17,12,8,.5) 55%, rgba(13,9,6,.72) 100%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 40%, #000 78%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 40%, #000 78%);
}
.hero__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 42% at 52% 92%, rgba(199,123,58,.22), transparent 66%),
    radial-gradient(ellipse 30% 55% at 62% 70%, rgba(214,140,66,.11), transparent 70%);
  animation:glowBreathe 7s ease-in-out infinite;
}
/* volumetric shaft — a soft warm column standing over the fire, swaying barely */
.hero__glow::before{
  content:""; position:absolute; left:38%; bottom:-8%; width:44%; height:115%;
  transform:rotate(-13deg); transform-origin:bottom center;
  background:linear-gradient(0deg, rgba(199,123,58,.13), rgba(199,123,58,.05) 46%, transparent 72%);
  filter:blur(8px); mix-blend-mode:screen;
  animation:shaftSway 21s ease-in-out infinite alternate;
}
@keyframes glowBreathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes shaftSway{0%{transform:rotate(-15deg)}100%{transform:rotate(-8deg)}}
html.reduced .hero__glow, html.reduced .hero__glow::before{animation:none}
.hero__embers{position:absolute; inset:0; z-index:1; pointer-events:none}
.hero__word{
  position:relative; z-index:2; margin:0; max-width:min(90vw,900px);
  font-family:var(--serif); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(1.6rem,4.2vw,3.1rem); line-height:1.22; text-align:center; color:var(--ash);
  text-shadow:0 1px 18px rgba(6,4,3,.9), 0 0 42px rgba(6,4,3,.6);
}
.hero__tag{
  position:relative; z-index:2; font-family:var(--mono); font-style:normal;
  font-size:clamp(.76rem,1.5vw,.94rem); color:var(--ash-dim); letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:.9em; flex-wrap:wrap; justify-content:center;
  text-shadow:0 1px 18px rgba(6,4,3,.9), 0 0 42px rgba(6,4,3,.6);
}
.hero__sep{color:var(--ember); font-size:.6em}
.hero__panel{
  position:relative; z-index:2; display:flex; flex-direction:column; gap:.6rem; align-items:center;
  margin-top:.4rem;
}
.hero__addr{
  font-family:var(--serif); font-style:normal;
  font-size:clamp(1.2rem,2.3vw,1.6rem); color:var(--ash); letter-spacing:.06em; text-align:center;
  text-shadow:0 1px 18px rgba(6,4,3,.9), 0 0 42px rgba(6,4,3,.6);
}
.hero__phone{
  font-family:var(--mono); font-size:clamp(.92rem,1.7vw,1.1rem);
  letter-spacing:.12em; color:var(--ash-dim); text-align:center;
  text-shadow:0 1px 18px rgba(6,4,3,.9), 0 0 42px rgba(6,4,3,.6);
}
.hero__phone a{color:var(--ash); border-bottom:1px solid rgba(231,223,209,.3); padding-bottom:1px; transition:border-color .3s var(--ease), color .3s var(--ease)}
.hero__phone a:hover{color:var(--ash); border-color:var(--ash)}

/* ══════════════════════════════════════════
   CHANT — slow ritual marquee
══════════════════════════════════════════ */
/* plain in-flow row between the hero and section 01 — no own background, no absolute
   strip, no spacer: it sits directly on the body's var(--bg) like everything around it */
.chant{
  overflow:hidden; padding:clamp(.9rem,2vw,1.4rem) 0; pointer-events:none;
}
.chant__track{display:flex; width:max-content; animation:chant 46s linear infinite}
.chant__track span{
  font-family:var(--serif); font-style:normal; font-size:clamp(1.9rem,4.6vw,3.6rem);
  color:var(--ash-faint); white-space:nowrap; padding-right:.4em;
}
.chant__track em{color:inherit; font-style:normal}
@keyframes chant{to{transform:translateX(-50%)}}
html.reduced .chant__track{animation:none}

/* ══════════════════════════════════════════
   CHAPTER — giant carved numerals
══════════════════════════════════════════ */
.chapter{position:relative}
.chapter__numeral{
  position:absolute; top:.4em; right:1.5vw; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--serif); font-weight:600; font-size:clamp(8rem,22vw,20rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(231,223,209,.13);
  transform:translateY(var(--py,0));
}
.chapter--left .chapter__numeral{right:auto; left:1.5vw}
.distance .chapter__numeral{top:-.06em; font-size:clamp(6rem,16vw,14rem)}
/* small screens: the carved numeral steps back so it can't crowd the header */
@media(max-width:640px){
  .chapter__numeral{font-size:clamp(5.5rem,19vw,8rem); opacity:.7}
  /* hunter glyph is tall (long legs) — on narrow screens its 6% top offset lands it
     right across the section header text, so pull it up into the corner instead */
  #меню .glyph:first-of-type{top:.2rem!important; width:clamp(64px,20vw,90px)!important; height:clamp(64px,20vw,90px)!important}
}

/* shared chapter header — one scale for every section title */
.chapter__head{position:relative; z-index:1; text-align:center; max-width:680px; margin:0 auto clamp(3.2rem,7vw,5rem)}
.chapter__title{font-size:clamp(2.4rem,5.2vw,4.4rem); line-height:1.05; text-wrap:balance}
.chapter__sub{margin-top:1.1rem; font-family:var(--serif); font-style:normal; font-size:clamp(1.05rem,1.8vw,1.3rem); color:var(--ash-dim)}
/* centered call-to-action row under a section's content */
.section-cta{position:relative; z-index:1; margin-top:clamp(3rem,7vw,5rem); text-align:center}

/* ══════════════════════════════════════════
   LIGHT CHAPTER — warm parchment counter-theme (Oakâme/Aker)
══════════════════════════════════════════ */
.chapter--light{
  overflow:hidden;
  --bg: #f6f1eb;
  --ash: #403a34;
  --ash-dim: rgba(64,58,52,.72);
  --ash-faint: rgba(64,58,52,.42);
  --line: rgba(64,58,52,.14);
  --glass-bg: rgba(255,252,246,.55);
  --glass-border: rgba(64,58,52,.18);
  --photo-glow: 0 18px 44px -18px rgba(64,58,52,.4);
  background:
    radial-gradient(ellipse 65% 42% at 50% 8%, rgba(199,123,58,.06), transparent 70%),
    /* soft edge shading so the sheet reads as lit paper, not sterile flat fill */
    radial-gradient(ellipse 130% 100% at 50% 45%, transparent 64%, rgba(64,58,52,.09) 100%),
    var(--bg);
  color:var(--ash);
}
.chapter--light .chapter__numeral{-webkit-text-stroke-color:rgba(64,58,52,.15)}
.chapter--light .glyph{mix-blend-mode:multiply}
.chapter--light .dish-card__img img{filter:saturate(.92) brightness(1) contrast(1.02)}
.chapter--light .dish-card:hover .dish-card__img img{filter:saturate(1) brightness(1.04) contrast(1.02)}

/* torn parchment edges — light chapters are sheets laid over one continuous dark
   environment; each tear silhouette is unique, cut for its own boundary */
.tear{height:0; overflow:visible; position:relative; z-index:2; pointer-events:none}
.tear svg{display:block; width:100%; height:clamp(22px,3vw,40px); fill:#f6f1eb}
.tear--top svg{transform:translateY(calc(1px - 100%))}
.tear--bottom svg{margin-top:-1px}
/* boundary atmosphere: smoke drifting over the sheet's edge from the dark above */
.tear--smoke::before{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:150px; z-index:-1;
  background:
    radial-gradient(ellipse 34% 70% at 22% 100%, rgba(199,186,168,.13), transparent 70%),
    radial-gradient(ellipse 40% 85% at 61% 100%, rgba(199,186,168,.09), transparent 72%),
    radial-gradient(ellipse 26% 60% at 86% 100%, rgba(199,186,168,.11), transparent 70%);
}
/* boundary atmosphere: ember warmth breathing up from the dark below the sheet */
.tear--ember::after{
  content:""; position:absolute; left:0; right:0; top:4px; height:170px;
  background:
    radial-gradient(ellipse 46% 90% at 32% 0%, rgba(199,123,58,.13), transparent 72%),
    radial-gradient(ellipse 30% 70% at 74% 0%, rgba(199,123,58,.08), transparent 70%);
}

/* ══════════════════════════════════════════
   SPARK — floating light motes, dark & light variants
══════════════════════════════════════════ */
.spark{
  position:absolute; z-index:1; pointer-events:none; border-radius:50%;
  width:var(--sw,4px); height:var(--sw,4px); background:var(--ember);
  box-shadow:0 0 18px 4px rgba(199,123,58,.55);
  animation:sparkPulse var(--sd,6s) ease-in-out infinite;
  animation-delay:var(--sdl,0s);
  opacity:0;
}
@keyframes sparkPulse{0%,100%{opacity:0; transform:scale(.6)}45%{opacity:.9; transform:scale(1)}70%{opacity:.3}}
.chapter--light .spark{background:var(--ember); box-shadow:0 0 22px 6px rgba(199,123,58,.35)}
html.reduced .spark{animation:none; opacity:.4}

/* plaster texture — real stone/paper grain so light chapters don't read as sterile flat fill */
.chapter--light::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/bg-light.webp") repeat top center;
  background-size:min(100vw,1100px) auto;
  opacity:.35; mix-blend-mode:multiply; filter:sepia(.35);
}

/* ══════════════════════════════════════════
   PETROGLYPHS + TOTEMS (kept)
══════════════════════════════════════════ */
.glyph{
  position:absolute; fill:none; stroke:var(--ash); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
  opacity:.2; pointer-events:none; z-index:1; mix-blend-mode:screen;
  animation:glyphBreathe 9s ease-in-out infinite;
}
.glyph:nth-of-type(2n){animation-duration:11s; animation-delay:1.4s}
.glyph:nth-of-type(3n){animation-duration:13s; animation-delay:2.8s}
@keyframes glyphBreathe{0%,100%{opacity:var(--gop,.2)}50%{opacity:calc(var(--gop,.2) * 1.8)}}
.chapter--light .glyph{mix-blend-mode:multiply; animation:glyphBreatheLight 9s ease-in-out infinite}
.chapter--light .glyph:nth-of-type(2n){animation-duration:11s; animation-delay:1.4s}
.chapter--light .glyph:nth-of-type(3n){animation-duration:13s; animation-delay:2.8s}
@keyframes glyphBreatheLight{0%,100%{opacity:var(--gop,.22)}50%{opacity:calc(var(--gop,.22) * 1.7)}}
/* mobile: animated opacity on blend-mode glyphs repaints the section every frame */
@media(max-width:768px){
  .glyph, .chapter--light .glyph{animation:none}
}
html.reduced .glyph{animation:none}
.glyph--ember{stroke:var(--ember); opacity:.26}
.glyph--sigil{position:static; flex-shrink:0; z-index:auto; opacity:.5; filter:drop-shadow(0 0 16px rgba(199,123,58,.4)); margin-bottom:1.6rem}

/* ══════════════════════════════════════════
   FRIEZE — a row of cave marks between chapters
══════════════════════════════════════════ */
.frieze{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(1.8rem,5vw,4.2rem); padding:clamp(3.5rem,8vw,6rem) var(--gut)}
/* friezes between sections sit inside two full section paddings — pull them in so the pause reads as pacing, not dead space */
main > .frieze{padding-block:clamp(2rem,4vw,3rem); margin-block:clamp(-4.5rem,-5vw,-2.5rem)}
/* this row sits right under a jagged ridge divider — the shared negative margin-top from .frieze
   pulled it up into the ridge (icons overlapping the edge); keep the pull-up only on the bottom */
main > .frieze--low{padding-top:clamp(5rem,10vw,7.5rem); margin-top:0}
.frieze svg{
  width:clamp(30px,4.2vw,50px); height:clamp(30px,4.2vw,50px);
  fill:none; stroke:var(--ash); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.2;
  animation:glyphGlow 12.6s ease-in-out infinite; will-change:opacity,stroke,filter;
}
.frieze svg:nth-child(1){animation-delay:0s}
.frieze svg:nth-child(2){animation-delay:1.8s}
.frieze svg:nth-child(3){animation-delay:3.6s}
.frieze svg:nth-child(4){animation-delay:5.4s}
.frieze svg:nth-child(5){animation-delay:7.2s}
.frieze svg:nth-child(6){animation-delay:9s}
.frieze svg:nth-child(7){animation-delay:10.8s}
@keyframes glyphGlow{
  0%,84%{opacity:.2; stroke:var(--ash); filter:none}
  8%{opacity:.9; stroke:var(--ember); filter:drop-shadow(0 0 6px rgba(199,123,58,.55))}
  16%,100%{opacity:.2; stroke:var(--ash); filter:none}
}
html.reduced .frieze svg{animation:none}

/* ══════════════════════════════════════════
   COLLAGE — asymmetric, overlapping, off-grid
══════════════════════════════════════════ */
/* first section right after the hero — the hero already provides a dark buffer above
   the fold, so the default section padding-top (clamp 6-11rem) is redundant weight that
   pushes the first photo down and widens the empty gap under the marquee */
#философия{padding-top:clamp(3rem,6vw,5.5rem)}
.collage{
  position:relative; z-index:1; max-width:var(--content-w); margin:0 auto;
  display:grid; grid-template-columns:repeat(12,1fr); align-items:center;
  min-height:74vh; column-gap:1rem;
}
.collage__big{
  grid-column:1/8; grid-row:1;
  aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--radius); box-shadow:var(--photo-glow);
  /* first photo under the hero — fade its top edge into the hero's dark bg instead of
     cutting a hard rectangle against it, so the marquee dissolves into content, not a seam */
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%);
}
.collage__big img{width:100%; height:100%; object-fit:cover; filter:var(--photo-filter)}
.collage__small{
  grid-column:6/9; grid-row:1; z-index:2; align-self:center;
  /* rotate/translate as independent props — .reveal.in resets `transform`, which
     silently erased this tilt/offset when it was written as transform:... */
  rotate:3deg; translate:0 26%; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--radius); box-shadow:var(--photo-glow-near);
}
.collage__small img, .collage__small video{width:100%; height:100%; object-fit:cover; filter:var(--photo-filter)}
.collage__text{grid-column:9/13; grid-row:1; align-self:center; padding-left:1rem}
.collage__title{font-size:clamp(2.4rem,5.2vw,4.4rem); line-height:1.05; margin-bottom:1.6rem}
.collage__line{
  color:var(--ash); font-family:var(--serif); font-weight:300; font-style:normal;
  font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.24;
}
.collage__line em{font-style:normal; color:var(--ember)}
.collage__credit{
  margin-top:2rem; color:var(--ash-dim); font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.5; letter-spacing:.02em; max-width:30ch;
}
@media(max-width:860px){
  .collage{display:flex; flex-direction:column; align-items:flex-start; gap:0; min-height:auto}
  .collage__big{width:100%}
  .collage__small{width:52%; align-self:flex-start; rotate:-3deg; translate:0 0; margin-top:-24%; margin-bottom:0}
  /* grid's align-self:center leaks into this flex column on mobile and centers the whole text block — reset it */
  .collage__text{padding-left:0; margin-top:2.4rem; align-self:flex-start; width:100%}
}

/* ══════════════════════════════════════════
   MANIFEST — fixed image left/right, text opposite (Atlantic/Oakâme pattern)
══════════════════════════════════════════ */
.manifest{
  display:grid; grid-template-columns:7fr 5fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
  padding-block:clamp(6rem,13vw,11rem);
  padding-inline:max(var(--gut), calc((100% - var(--content-w)) / 2));
}
.manifest--rev{grid-template-columns:5fr 7fr}
.manifest--rev .manifest__stack{order:2}
.manifest--rev .manifest__text{order:1}

/* photo composition — each manifest is its own hand-set arrangement:
   one dominant frame in flow, satellites pinned absolutely over its edges.
   rotate/translate as independent properties so .reveal's transform doesn't erase them */
.manifest__stack{position:relative; min-width:0}
.manifest__ph{margin:0; overflow:hidden; border-radius:var(--radius); border:1px solid var(--glass-border); box-shadow:var(--photo-glow)}
.manifest__ph img, .manifest__ph video{
  width:100%; height:100%; object-fit:cover; filter:var(--photo-filter);
  transition:filter .6s var(--ease), transform .8s var(--ease);
}
.manifest__ph:hover img, .manifest__ph:hover video{filter:var(--photo-filter-hover); transform:scale(1.04)}
/* satellites float above the dominant — deeper shadow reads as physically closer */
.manifest__ph:nth-child(2), .manifest__ph:nth-child(3){box-shadow:var(--photo-glow-near)}

/* Кухня — wide dominant (long table in the forest); hall portrait pinned to the
   top-right corner, food close-up breaking the bottom edge */
.manifest__ph:nth-child(1){width:86%; aspect-ratio:4/3}
.manifest__ph:nth-child(2){position:absolute; top:-7%; right:0; width:33%; aspect-ratio:3/4; z-index:2; rotate:2deg}
.manifest__ph:nth-child(3){position:absolute; bottom:-11%; left:42%; width:27%; aspect-ratio:1/1; z-index:3; rotate:-2.5deg}

/* Вино — tall dominant (wine video) pushed right; two supports stepping
   down its left edge, opposite diagonal to Кухня */
.manifest--rev .manifest__ph:nth-child(1){width:62%; aspect-ratio:3/4; margin-left:auto}
/* wine video frames the glass low in shot — cover-crop was centered and cut it off, bias down */
.manifest--rev .manifest__ph:nth-child(1) video{object-position:50% 85%}
.manifest--rev .manifest__ph:nth-child(2){position:absolute; top:2%; left:0; right:auto; width:38%; aspect-ratio:4/5; z-index:2; rotate:-2deg}
/* was 26% — too small next to the other two frames, bumped up and repositioned so it
   still overlaps the dominant's corner without crowding the text column */
.manifest__ph--wine{position:absolute; bottom:-11%; left:20%; width:36%; aspect-ratio:1/1; z-index:3; rotate:1.5deg}
/* the cellar accent is a near-black shot — the standard dimming filter turns it to mud */
.manifest__ph--wine img{filter:var(--photo-filter-bright)}
.manifest__ph--wine:hover img{filter:var(--photo-filter-bright-hover)}

.manifest__text{display:flex; flex-direction:column; gap:clamp(1.5rem,2.4vw,2.1rem); position:relative; z-index:2; max-width:clamp(24rem,34vw,32rem)}
.manifest__line{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.24;
  color:var(--ash); text-wrap:balance;
}
.manifest__line em{font-style:normal; color:var(--ember)}
.manifest__cta{margin-top:.6rem}
@media(max-width:860px){
  .manifest{display:flex; flex-direction:column; gap:2.2rem}
  .manifest--rev .manifest__stack, .manifest--rev .manifest__text{order:initial}
  /* absolute satellites overhang the stack box — reserve room so they don't lap the text below */
  .manifest__stack{width:100%; margin-bottom:9%}
  .manifest__text{max-width:none}
}

/* ══════════════════════════════════════════
   DISH GRID — signature dishes, editorial card grid (Oakâme pattern)
══════════════════════════════════════════ */
.dish-grid{max-width:var(--content-w); margin:0 auto; position:relative; z-index:1}
.dish-grid__items{
  display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(150px,15vw,240px);
  gap:clamp(.7rem,1.4vw,1.2rem);
}
.dish-card{position:relative; display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:zoom-in; border-radius:var(--radius); overflow:hidden; box-shadow:var(--photo-glow); transition:box-shadow .4s var(--ease)}
.dish-card:hover{box-shadow:0 28px 70px -16px rgba(0,0,0,.6), 0 0 46px -16px rgba(199,123,58,.4)}
.dish-card__img{position:relative; width:100%; height:100%; overflow:hidden}
.dish-card__img img{width:100%; height:100%; object-fit:cover; filter:var(--photo-filter-bright); transition:transform .7s var(--ease), filter .7s var(--ease)}
.dish-card:hover .dish-card__img img{transform:scale(1.06); filter:var(--photo-filter-bright-hover)}
.dish-card__glyph{
  position:absolute; top:.8rem; right:.8rem; z-index:2; width:26px; height:26px;
  fill:none; stroke:var(--ember); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.5) rotate(-12deg); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none;
}
.dish-card:hover .dish-card__glyph{opacity:.9; transform:scale(1) rotate(0)}
/* composed mosaic — two 2:1 heroes on a diagonal, 4-col modules between, one portrait; no tile narrower than 4 cols */
.dish-card:nth-child(1){grid-column:1/9; grid-row:1/3}
.dish-card:nth-child(2){grid-column:9/13; grid-row:1/2}
.dish-card:nth-child(3){grid-column:9/13; grid-row:2/3}
.dish-card:nth-child(4){grid-column:1/5; grid-row:3/4}
.dish-card:nth-child(5){grid-column:5/9; grid-row:3/4}
.dish-card:nth-child(6){grid-column:9/13; grid-row:3/4}
.dish-card:nth-child(7){grid-column:1/5; grid-row:4/6}
.dish-card:nth-child(8){grid-column:5/13; grid-row:4/6}
@media(max-width:760px){
  .dish-grid__items{grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw}
  .dish-card:nth-child(n){grid-column:auto; grid-row:auto}
  .dish-card:nth-child(1){grid-column:1/3; grid-row:span 2}
  .dish-card:nth-child(8){grid-column:1/3}
}
@media(max-width:480px){
  .dish-grid__items{grid-template-columns:repeat(2,1fr); grid-auto-rows:52vw}
  .dish-card:nth-child(n){grid-column:auto; grid-row:auto}
  .dish-card:nth-child(1){grid-column:1/3; grid-row:span 2}
  .dish-card:nth-child(4){grid-column:1/3}
  .dish-card:nth-child(7){grid-column:1/3}
  .dish-card:nth-child(8){grid-column:1/3}
}
html.reduced .dish-card__img{transition:none}

.dish-lightbox{
  position:fixed; inset:0; z-index:400; align-items:center; justify-content:center;
  background:rgba(5,3,2,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:clamp(1.2rem,4vw,3rem);
}
.dish-lightbox[hidden]{display:none}
.dish-lightbox:not([hidden]){display:flex}
.dish-lightbox__box{margin:0; max-width:min(92vw,900px); max-height:90vh; display:flex; flex-direction:column; align-items:center}
.dish-lightbox__box img{max-width:100%; max-height:72vh; object-fit:contain; border-radius:var(--radius); box-shadow:var(--photo-glow)}
.dish-lightbox__box figcaption{
  margin-top:1.2rem; font-family:var(--serif); font-size:clamp(.95rem,1.6vw,1.2rem); line-height:1.5; color:var(--ash); text-align:center; max-width:60ch;
}
.dish-lightbox__close{
  position:absolute; top:clamp(.8rem,2vw,1.6rem); right:clamp(.8rem,2vw,1.6rem); z-index:2;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-bg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--ash); font-size:1.6rem; line-height:1; cursor:pointer; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.dish-lightbox__close:hover{color:var(--ember); border-color:rgba(199,123,58,.5)}

/* ══════════════════════════════════════════
   DARK — the torch room. Bring your own fire.
══════════════════════════════════════════ */
.dark__stage{position:relative; max-width:var(--content-w); margin:0 auto}

/* gallery grid — framed shots on a dark wall, generous even gutters */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.2vw,18px)}
.gallery__item{overflow:hidden; position:relative; cursor:pointer; border-radius:var(--radius); box-shadow:var(--photo-glow)}
.chapter--light .gallery__item img{filter:saturate(.85) brightness(1) contrast(1.02)}
/* absolute so the photo's intrinsic (portrait) height can't inflate grid rows —
   row heights are set by the g1–g7 composition below, photos just fill their frame */
.gallery__item img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; filter:var(--photo-filter-bright);
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.gallery__item:hover img{transform:scale(1.05); filter:var(--photo-filter-bright-hover)}

/* lightbox — fullscreen viewing room */
.lightbox{
  position:fixed; inset:0; z-index:1500;
  background:rgba(5,3,2,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.lightbox--open{opacity:1; pointer-events:auto}
.lightbox figure{
  max-width:min(1200px,88vw); margin:0; display:flex; flex-direction:column; gap:1.1rem;
  transform:scale(.965); transition:transform .45s var(--ease);
}
.lightbox--open figure{transform:scale(1)}
.lightbox img{max-width:100%; max-height:80vh; object-fit:contain; border-radius:var(--radius)}
.lightbox figcaption{
  text-align:center; font-family:var(--serif); font-size:clamp(.95rem,1.6vw,1.2rem);
  line-height:1.5; color:var(--ash);
}
/* same glass disc as dish-lightbox close / to-top — one control language */
.lightbox__close{
  position:absolute; top:clamp(.8rem,2vw,1.6rem); right:clamp(.8rem,2vw,1.6rem);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-bg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:pointer;
  font-family:var(--serif); font-size:1.6rem; line-height:1; color:var(--ash);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover{color:var(--ember); border-color:rgba(199,123,58,.5)}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1; cursor:pointer;
  width:52px; height:52px; border-radius:50%; background:rgba(23,16,10,.4); border:1px solid var(--glass-border);
  color:var(--ash-dim); font-size:1.05rem; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__nav:hover{color:var(--ash); border-color:var(--ash)}
.lightbox__nav--prev{left:1.6rem}
.lightbox__nav--next{right:1.6rem}
@media(max-width:640px){.lightbox__nav{display:none}}
/* ══════════════════════════════════════════
   TO-TOP — quiet return, glass disc matching lightbox nav
══════════════════════════════════════════ */
.totop{
  position:fixed; right:var(--gut); bottom:6.4rem; z-index:820;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.totop--visible{opacity:1; transform:translateY(0); pointer-events:auto}
.totop svg{width:16px; height:16px; fill:none; stroke:var(--ash-dim); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s var(--ease)}
.totop:hover{border-color:var(--ember); background:rgba(199,123,58,.12)}
.totop:hover svg{stroke:var(--ember)}
@media(max-width:640px){.totop{width:40px; height:40px; right:1.1rem; bottom:5.6rem}.totop svg{width:14px;height:14px}}
html.reduced .totop{transition:opacity .2s, transform .2s}

/* hand-hung frames: items share the grid's datum lines but hang at their own
   heights (align-self + explicit heights), so outer edges stay ragged
   instead of reading as one boxed block */
.g1{grid-column:1/4; grid-row:1/3; min-height:560px}
.g2{grid-column:4/7; grid-row:1/2; min-height:300px}
.g3{grid-column:4/6; grid-row:2/3}
.g4{grid-column:6/7; grid-row:2/3; height:200px; align-self:end}
.g5{grid-column:1/4; grid-row:3/4; min-height:380px}
.g6{grid-column:4/6; grid-row:3/4; height:300px; align-self:end}
.g7{grid-column:6/7; grid-row:3/4; height:330px; align-self:start}
@media(max-width:760px){
  .gallery{grid-template-columns:1fr 1fr}
  .g1,.g2,.g3,.g4,.g5,.g6,.g7{height:auto; align-self:stretch}
  .g1{grid-column:1/3; grid-row:auto; min-height:340px}
  .g2{grid-column:1/2; grid-row:auto; min-height:220px}
  .g3{grid-column:2/3; grid-row:auto; min-height:220px}
  .g4{grid-column:1/3; grid-row:auto; min-height:220px}
  .g5{grid-column:1/2; grid-row:auto; min-height:220px}
  .g6{grid-column:2/3; grid-row:auto; min-height:220px}
  .g7{grid-column:1/3; grid-row:auto; min-height:220px}
}

/* ══════════════════════════════════════════
   DISTANCE — the monument
══════════════════════════════════════════ */
section.distance{
  position:relative; overflow:hidden; min-height:58vh;
  padding-block:clamp(3rem,6vw,5rem);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1rem;
}
.distance__bg{position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 55% 40% at 50% 54%, rgba(199,123,58,.14), transparent 66%)}
/* night sky over the road — scattered stars, quiet twinkle */
.distance__stars{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:
    radial-gradient(1.6px 1.6px at 6% 18%, rgba(231,223,209,.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 13% 42%, rgba(231,223,209,.7), transparent 100%),
    radial-gradient(1.8px 1.8px at 21% 8%, rgba(231,223,209,.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 28% 64%, rgba(231,223,209,.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 30%, rgba(231,223,209,.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 41% 78%, rgba(231,223,209,.55), transparent 100%),
    radial-gradient(1.8px 1.8px at 48% 12%, rgba(231,223,209,.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 55% 48%, rgba(231,223,209,.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 61% 22%, rgba(231,223,209,.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 67% 68%, rgba(231,223,209,.6), transparent 100%),
    radial-gradient(1.8px 1.8px at 73% 38%, rgba(231,223,209,.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 79% 8%, rgba(231,223,209,.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 58%, rgba(231,223,209,.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 91% 26%, rgba(231,223,209,.65), transparent 100%),
    radial-gradient(1.8px 1.8px at 96% 72%, rgba(231,223,209,.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 9% 88%, rgba(231,223,209,.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 92%, rgba(231,223,209,.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 90%, rgba(231,223,209,.6), transparent 100%);
  animation:starsTwinkle 5s ease-in-out infinite alternate;
}
@keyframes starsTwinkle{0%{opacity:.5}100%{opacity:.85}}
html.reduced .distance__stars{animation:none}
.distance__inner{position:relative; z-index:1; max-width:1000px}
.distance__stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,auto)); grid-auto-rows:auto;
  column-gap:clamp(2.5rem,8vw,6rem); row-gap:1.1rem;
  justify-content:center; justify-items:center; align-items:start;
  margin-bottom:3rem;
}
.stat__num{font-family:var(--serif); font-style:normal; font-size:clamp(2.2rem,4.6vw,3.8rem); color:var(--ash); line-height:1.1; white-space:nowrap}
.stat__label{font-size:.9rem; letter-spacing:.12em; color:var(--ash-faint); text-transform:uppercase}
.distance__coords{font-family:var(--mono); font-size:.66rem; letter-spacing:.26em; color:var(--ash-faint); margin-bottom:2.6rem}
.distance__line{font-family:var(--serif); font-style:normal; font-size:1.3rem; color:var(--ash-dim); margin-bottom:3.2rem}
.distance__actions{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center}
.distance__territory{
  margin-top:4rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash-faint); line-height:1.9;
}
.distance__territory span{color:var(--ember); margin:0 .5em}
@media(max-width:600px){.distance__territory{font-size:.66rem; letter-spacing:.14em}}
@media(max-width:640px){
  .distance .chapter__numeral{font-size:clamp(4.5rem,20vw,7rem); opacity:.5}
  /* single column: interleave each number with its own label */
  .distance__stats{grid-template-columns:1fr; row-gap:.45rem; column-gap:0; margin-bottom:2rem}
  .stat__num{font-size:2.6rem}
  .stat__num:nth-child(1){order:1}
  .stat__label:nth-child(4){order:2; margin-bottom:1.8rem}
  .stat__num:nth-child(2){order:3}
  .stat__label:nth-child(5){order:4; margin-bottom:1.8rem}
  .stat__num:nth-child(3){order:5}
  .stat__label:nth-child(6){order:6}
}

/* ══════════════════════════════════════════
   RESTOPLACE WIDGET — restyled to match site glass buttons
══════════════════════════════════════════ */
#restoplace-wrapper-btn{text-align:left !important; padding-left:var(--gut) !important; box-sizing:border-box !important}
#restoplace-btn{
  background:var(--glass-bg) !important; background-image:none !important;
  border:1px solid var(--glass-border) !important; border-radius:var(--radius) !important;
  backdrop-filter:blur(14px) saturate(1.15) !important; -webkit-backdrop-filter:blur(14px) saturate(1.15) !important;
  font-family:var(--sans) !important; font-size:.74rem !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; color:var(--ash) !important; font-weight:500 !important;
  padding:1rem 1.8rem !important; box-shadow:0 14px 34px -16px rgba(0,0,0,.55) !important;
  transition:background .3s var(--ease), border-color .3s var(--ease) !important;
}
#restoplace-btn:hover{background:rgba(231,223,209,.14) !important; border-color:var(--ash) !important}

/* ══════════════════════════════════════════
   CONTACTS / FORM (kept)
══════════════════════════════════════════ */
section.contacts{padding-block:clamp(4rem,8vw,6.5rem) clamp(5rem,9vw,7.5rem)}
.contacts__head{text-align:center; margin-bottom:clamp(2.6rem,5vw,4rem)}
.contacts__head .kicker{margin-bottom:0}
.contacts__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem 3rem; align-items:start;
  max-width:var(--content-w); margin-inline:auto;
}
.contacts__col{display:flex; flex-direction:column; gap:2.2rem}
.contact{display:flex; flex-direction:column; gap:.45rem}
.contact__label{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember)}
.contact__value{font-family:var(--serif); font-style:normal; font-size:1.2rem; color:var(--ash-dim); line-height:1.3}
a.contact__value:hover{color:var(--ember)}
.contact__sub{font-size:.78rem; color:var(--ash-dim); font-weight:300}
.contact__coords{background:none; border:none; text-align:left; cursor:pointer; font:inherit; padding:0; transition:color .3s var(--ease)}
.contact__coords:hover{color:var(--ember)}
.contact__coords.copied{color:var(--ember)}
.contacts__col.directions{display:block; gap:0}
.contacts__col.directions .contact__label{display:block; margin-bottom:1.2rem}
.directions p{color:var(--ash-dim); font-weight:300; font-size:.88rem; margin-bottom:1rem}
.directions__dist{color:var(--ash-dim) !important; font-family:var(--serif); font-style:normal; font-size:1rem}
@media(max-width:760px){.contacts__grid{grid-template-columns:1fr 1fr}.contacts__col.directions{grid-column:1/3}}
@media(max-width:520px){.contacts__grid{grid-template-columns:1fr}.contacts__col.directions{grid-column:1/2}}