:root{
  --vino:#2B1721;
  --wheat:#F3E7CE;
  --terracotta:#9C4A34;
  --olive:#8C8A3D;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--vino);color:var(--wheat);font-family:'Assistant',sans-serif;}
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
h2,h3{font-family:'Suez One',serif;font-weight:400;text-wrap:balance;}

.tour{position:relative;}

.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;}

.progress{position:fixed;inset-inline-end:18px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;z-index:30;}
.progress i{width:10px;height:10px;border-radius:50%;background:rgba(243,231,206,.35);
  border:1px solid rgba(243,231,206,.55);display:block;transition:background .3s,transform .3s;}
.progress i.on{background:var(--terracotta);border-color:var(--terracotta);transform:scale(1.25);}

/* small persistent brand mark — a fixed physical side (right), deliberately not tied
   to inline-start/end, so it never flips or swaps sides with the progress dots. */
.brand-mark{position:fixed;top:16px;right:16px;z-index:35;height:26px;width:auto;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));pointer-events:none;}
@media (max-width:640px){
  .brand-mark{height:20px;top:12px;right:12px;}
}

/* the pinned stage: stays fixed in the viewport while .track scrolls underneath it.
   overflow:hidden must NOT sit on this element together with position:sticky — that
   combination silently breaks sticky positioning in WebKit/mobile Safari. The clipping
   needed for each layer's background lives on .layer instead (a descendant, not the
   sticky element itself). */
.stage{position:sticky;top:0;height:100vh;height:100svh;z-index:1;}
.layer{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity 1s ease;}
.layer.on{opacity:1;visibility:visible;}
.layer .bg{position:absolute;inset:-3%;background-size:cover;background-position:center;
  transform:scale(1.001);}
[data-i="0"] .bg{background-position:center;}
[data-i="1"] .bg{background-position:30% center;}
[data-i="2"] .bg{background-position:55% center;}
[data-i="3"] .bg{background-position:48% center;}
[data-i="4"] .bg{background-position:32% center;}
[data-i="5"] .bg{background-position:38% center;}
[data-i="6"] .bg{background-position:58% center;}
[data-i="7"] .bg{background-position:35% center;}

/* default: caption sits at the bottom, so the bottom of the frame darkens down to the
   caption's contrast floor while the top (usually the face/subject) stays fully lit. */
.layer::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.9) 85%, rgba(0,0,0,.95) 100%);}
.caption{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;
  padding:0 min(8vw,72px) 9vh;z-index:2;direction:rtl;max-width:560px;
  max-height:100%;overflow-y:auto;}

/* scenes 4 (RANKING) and 5 (GENERATION): the thing that matters (the hand+bowl, the
   finished plate) sits low in these two source photos, not high like the others —
   darkening the bottom here would bury exactly what the caption is talking about.
   Flipped instead: dark from the top down, caption up there, bottom stays fully lit. */
[data-i="4"]::after, [data-i="5"]::after{
  background:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 15%, rgba(0,0,0,.55) 38%, rgba(0,0,0,0) 70%);}
[data-i="4"] .caption, [data-i="5"] .caption{bottom:auto;top:0;padding:9vh min(8vw,72px) 0;}

.tag{display:inline-block;direction:ltr;font-family:'Courier New',monospace;letter-spacing:.15em;font-size:.72rem;
  color:var(--wheat);background:rgba(43,23,33,.82);border:1px solid var(--terracotta);
  padding:.3em .8em;border-radius:2px;margin-bottom:.8em;}
.caption h2{font-size:clamp(1.7rem,4.2vw,2.9rem);margin:.15em 0 .4em;}
.caption p{font-size:1.05rem;line-height:1.65;opacity:.95;max-width:34em;}

.depth-btn{float:left;clear:both;margin-top:1em;background:var(--olive);color:var(--vino);border:none;
  padding:.65em 1.3em;border-radius:20px;cursor:pointer;font-family:'Assistant',sans-serif;font-size:.95rem;font-weight:600;}
.depth-btn:hover{filter:brightness(1.12);}
.depth-btn:focus-visible, .cta:focus-visible, .back-link:focus-visible, .progress i, .depth-close:focus-visible{outline:2px solid var(--wheat);outline-offset:3px;}

.depth-modal{position:fixed;inset:0;background:rgba(20,10,14,.82);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.depth-modal.open{display:flex;}
.depth-card{background:var(--wheat);color:var(--vino);border:3px solid var(--terracotta);border-radius:14px;
  max-width:560px;width:100%;padding:28px;position:relative;max-height:88vh;overflow:auto;}
.depth-card img{width:100%;border-radius:8px;margin-bottom:16px;display:block;}
.depth-card h3{margin:0 0 .5em;font-size:1.4rem;}
.depth-card p{line-height:1.6;margin:0 0 .9em;}
.depth-card .tech-note{font-size:.9rem;background:rgba(156,74,52,.12);border-inline-start:3px solid var(--terracotta);padding:.6em .9em;border-radius:4px;}
.depth-close{position:absolute;top:10px;left:10px;background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--vino);}

.cta{display:inline-flex;align-items:center;gap:.5em;background:var(--olive);color:var(--vino);
  padding:.75em 1.5em;border-radius:24px;text-decoration:none;font-weight:700;margin-top:1.1em;}
.cta:hover{filter:brightness(1.12);}
.back-link{display:block;margin-top:1em;color:var(--wheat);opacity:.75;text-decoration:underline;font-size:.9rem;}

/* the summary layer: a "title card" pause between the pipeline scenes and the closing
   scene. Its content (term chain + giant RAG reveal + recap line) sits centered over
   the whole frame rather than pinned to one edge, so it needs one even, flat scrim
   across the full photo instead of the top/bottom vignette the other scenes use. */
.layer.summary{display:flex;align-items:center;justify-content:center;}
.layer.summary::after{background:rgba(0,0,0,.78);}
.summary-inner{position:relative;z-index:2;text-align:center;max-width:680px;padding:0 24px;}
.chain{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;
  font-family:'Courier New',monospace;font-size:.8rem;letter-spacing:.03em;
  direction:ltr;margin-bottom:1.6em;}
.chain span{color:var(--wheat);background:rgba(43,23,33,.82);border:1px solid var(--terracotta);padding:.25em .7em;border-radius:2px;}
.chain i{font-style:normal;opacity:.6;color:var(--wheat);}
.rag-reveal{font-size:clamp(4rem,14vw,8.5rem);margin:0 0 .25em;letter-spacing:.02em;
  color:var(--wheat);direction:ltr;}
.summary-inner p{font-size:1.1rem;line-height:1.7;opacity:.92;max-width:46ch;margin:0 auto;}
.summary-inner strong{color:var(--wheat);font-weight:700;}

.track{position:relative;z-index:2;margin-top:-100svh;pointer-events:none;}
.step{height:170vh;height:170svh;}

/* fixed footer bar — always reachable (legal links especially) without scrolling
   through all 8 pinned scenes to reach the very end of the page. */
.site-footer{position:fixed;inset-inline:0;bottom:0;z-index:25;text-align:center;
  padding:8px 16px;background:rgba(43,23,33,.88);backdrop-filter:blur(4px);
  font-size:.75rem;letter-spacing:.05em;font-family:'Courier New',monospace;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;}
.site-footer > span{opacity:.7;direction:ltr;}
.legal-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.legal-link{background:none;border:none;color:var(--wheat);opacity:.75;text-decoration:underline;
  cursor:pointer;font-family:'Assistant',sans-serif;font-size:.8rem;letter-spacing:normal;padding:4px;}
.legal-link:hover, .legal-link:focus-visible{opacity:1;}

.legal-modal{background:var(--wheat);color:var(--vino);border:3px solid var(--terracotta);
  border-radius:14px;max-width:560px;width:calc(100% - 40px);padding:28px;position:relative;
  max-height:80vh;overflow:auto;}
.legal-modal::backdrop{background:rgba(20,10,14,.75);}
.legal-modal h2{margin:0 0 .6em;font-size:1.5rem;}
.legal-modal p{line-height:1.6;margin:0 0 .9em;font-size:.95rem;}
.legal-modal a{color:var(--terracotta);}
.draft-notice{background:rgba(156,74,52,.15);border:1px solid var(--terracotta);
  border-radius:6px;padding:.7em .9em;font-weight:700;}
.terms-list{padding-inline-start:1.4em;margin:0 0 .9em;}
.terms-list li{line-height:1.6;font-size:.95rem;margin-bottom:.7em;}
.terms-list li::marker{color:var(--terracotta);font-weight:700;}
.legal-close{position:absolute;top:10px;left:10px;background:none;border:none;
  font-size:1.6rem;line-height:1;cursor:pointer;color:var(--vino);}
.legal-close:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  .layer{transition:none;}
  .layer .bg{transition:none;}
}
@media (max-width:640px){
  .caption{padding:0 20px 6vh;}
  [data-i="4"] .caption, [data-i="5"] .caption{padding:6vh 20px 0;}
  .progress{inset-inline-end:8px;gap:9px;}
  .progress i{width:8px;height:8px;}
  .layer .bg{background-size:cover !important;}
}

/* short/landscape phones: 100vh caption content (tag+title+paragraph+button) can be
   taller than the viewport itself — shrink the type scale and padding so it still
   fits, instead of relying only on the .caption overflow-y scroll as a last resort */
@media (max-height:480px){
  .caption{padding-top:8px;padding-bottom:8px;}
  [data-i="4"] .caption, [data-i="5"] .caption{padding-top:8px;padding-bottom:8px;}
  .caption h2{font-size:clamp(1.2rem,4vw,1.8rem);margin:.1em 0 .25em;}
  .caption p{font-size:.9rem;line-height:1.4;}
  .tag{margin-bottom:.4em;}
  .cta{padding:.5em 1.1em;margin-top:.6em;}
  .depth-btn{padding:.45em 1em;margin-top:.6em;}
  .rag-reveal{font-size:clamp(2.5rem,10vw,4rem);}
  .chain{margin-bottom:.8em;}
  .summary-inner p{font-size:.9rem;line-height:1.4;}
}