/* ════════════════════════════════════════════════════════════════
   HOW TO EAT PEKING DUCK — an annotated hanging scroll.
   The film is 9:16, shot in the warm amber of the dining room. On wide
   screens it hangs in the centre like a scroll painting, with each step
   written in the lacquer margins and joined to the food by a hairline
   leader. On phones the film fills the screen and the words sit on the
   table at its foot. Italiana · Josefin Sans · Noto Serif SC
   ════════════════════════════════════════════════════════════════ */

:root{
  --ink-0:#060504;
  --ink-1:#0b0908;
  --gold:#c8a35e;
  --gold-hi:#e9cf94;
  --gold-12:rgba(200,163,94,.12);
  --gold-22:rgba(200,163,94,.22);
  --gold-40:rgba(200,163,94,.40);
  --gold-60:rgba(216,178,108,.60);
  --cream:#f3ebd9;
  --paper:#cfc3ab;
  --mute:#9b8e74;
  --font-display:"Italiana",serif;
  --font-body:"Spectral",Georgia,serif;
  --font-ui:"Josefin Sans",sans-serif;
  --font-zh:"Noto Serif SC","Songti SC","STSong",serif;
  --ease-out:cubic-bezier(.22,.61,.21,1);
  --pad-x:clamp(1.25rem,4.5vw,3.5rem);
  --header-h:clamp(58px,8svh,80px);
  --scroll-gap:clamp(14px,2.6svh,28px);   /* breathing room above and below the scroll */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html.ritual-document{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body.ritual-page{
  min-height:100svh;overflow-x:clip;
  background:var(--ink-0);color:var(--paper);
  font-family:var(--font-body);font-weight:300;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.ritual-page::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 50% 55%, rgba(193,148,72,.10), transparent 70%),
    linear-gradient(180deg,#070605,#060504);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ol{list-style:none}
em{font-style:italic}
svg{display:block}
::selection{background:rgba(200,163,94,.85);color:#15100a}
/* Keep scroll-driven playback, without a visible page scrollbar. */
html.ritual-document,body.ritual-page{scrollbar-width:none}
html.ritual-document::-webkit-scrollbar,
body.ritual-page::-webkit-scrollbar{display:none;width:0;height:0}
:focus-visible{outline:2px solid #dcba6f;outline-offset:3px;border-radius:2px}

.ritual-skip{position:fixed;z-index:20;top:10px;left:10px;padding:.9rem 1.1rem;font-family:var(--font-ui);font-size:.8rem;letter-spacing:.1em;color:var(--ink-1);background:var(--gold-hi);transform:translateY(-150%)}
.ritual-skip:focus{transform:none}

/* ── stage ─────────────────────────────────────────────────────── */
.ritual-scroll{position:relative;height:640svh}
.ritual-stage{
  position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--header-h) minmax(0,1fr);
  background:var(--ink-0);
}

.ritual-header{
  position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:env(safe-area-inset-top,0px) var(--pad-x) 0;
}
.ritual-brand{display:flex;align-items:baseline;gap:.7rem;white-space:nowrap}
.ritual-brand-en{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.ritual-brand-zh{font-family:var(--font-zh);font-size:.78rem;letter-spacing:.22em;color:var(--gold);border-left:1px solid var(--gold-22);padding-left:.7rem}
.ritual-counter{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--font-ui);font-size:.68rem;letter-spacing:.24em;color:var(--mute);font-variant-numeric:tabular-nums}
.ritual-back{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;font-family:var(--font-ui);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);transition:color .3s}
.ritual-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .35s var(--ease-out)}
.ritual-back:hover{color:var(--gold-hi)}
.ritual-back:hover svg{transform:translateX(-4px)}
.ritual-progress{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:0;height:1px;background:var(--gold-22)}
.ritual-progress::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(var(--progress,0));transform-origin:left}
.ritual-counter,.ritual-progress{display:none}

/* ── the scroll ────────────────────────────────────────────────── */
.ritual-screen{position:relative;overflow:clip;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center}
.ritual-picture{
  position:relative;height:calc(100% - 2 * var(--scroll-gap));aspect-ratio:9/16;
  container-type:size;background:#0d0a08;
}
.ritual-picture img,.ritual-picture canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Match the aligned opening before the first decoded canvas frame arrives. */
.ritual-picture .ritual-poster{transform:translateY(-5.381944%)}
.ritual-picture canvas{opacity:0}
.ritual-picture.is-ready canvas{opacity:1}
.ritual-picture.is-ready .ritual-poster{visibility:hidden}
/* a whisper of shade at head and foot so ink on the film always reads */
.ritual-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,5,4,.38),transparent 26%,transparent 72%,rgba(6,5,4,.55) 100%)}
.ritual-mat{position:absolute;inset:-14px;border:1px solid var(--gold-12);pointer-events:none}
.ritual-mat i{position:absolute;width:16px;height:16px;border:solid var(--gold-60);border-width:0}
.ritual-mat i:nth-child(1){top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.ritual-mat i:nth-child(2){top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.ritual-mat i:nth-child(3){bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.ritual-mat i:nth-child(4){bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.ritual-stage.is-fallback .ritual-poster,.ritual-stage.is-fallback canvas{opacity:0}

/* ── leader lines (SVG in film coordinates) ───────────────────── */
.ritual-leaders{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.ritual-leaders g{opacity:0}
.ritual-leader-halo,.ritual-leader-line{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,1)}
.ritual-leader-halo{stroke:rgba(8,6,4,.62);stroke-width:3.4}
.ritual-leader-line{stroke:rgba(243,235,217,.66);stroke-width:1.15}
.ritual-anchor{fill:none;stroke:#1b150f;stroke-width:1.1;transform-box:fill-box;transform-origin:center;transform:scale(var(--dot,0));filter:drop-shadow(0 0 1.6px rgba(255,252,246,.8))}
.ritual-anchor-core{fill:#1b150f;transform-box:fill-box;transform-origin:center;transform:scale(var(--dot,0))}

/* ── intro, written in the lantern light above the plate ───────── */
.ritual-intro{
  position:absolute;z-index:3;left:50%;top:18%;transform:translate(-50%,-50%);
  width:max-content;max-width:86%;text-align:center;color:var(--cream);
  text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 22px rgba(0,0,0,.55);
  will-change:opacity,transform;
}
.ritual-intro h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,6.6cqh,72px);line-height:1;letter-spacing:-.02em;
}
.ritual-intro h1 em{font-family:var(--font-body);font-weight:300;color:var(--gold-hi)}
.ritual-cue{
  display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1.2cqh,.9rem);
  margin-top:clamp(.8rem,2cqh,1.4rem);
  font-family:var(--font-ui);font-size:clamp(10px,1.2cqh,12px);font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--paper);
}
.ritual-cue i{position:relative;display:block;width:1px;height:clamp(20px,3cqh,34px);background:var(--gold-22);overflow:hidden}
.ritual-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--gold-hi);animation:ritual-drip 2.2s var(--ease-out) infinite}
@keyframes ritual-drip{0%{transform:translateY(-100%);opacity:0}30%{opacity:1}100%{transform:translateY(260%);opacity:0}}

/* ── step labels ───────────────────────────────────────────────── */
.ritual-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
.ritual-label{
  position:absolute;top:var(--y);transform:translateY(-50%) translateY(var(--rise,0px));
  width:max-content;max-width:min(38vw,340px);color:var(--cream);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  opacity:0;will-change:opacity,transform;
}
/* landscape: labels hang in the margins beside the scroll */
.ritual-label.is-left{right:calc(100% + clamp(1.4rem,3vw,2.6rem));text-align:right}
.ritual-label.is-right{left:calc(100% + clamp(1.4rem,3vw,2.6rem));text-align:left}
.ritual-eyebrow{
  display:flex;align-items:center;gap:.6em;
  font-family:var(--font-ui);font-weight:500;font-size:clamp(10px,1.35cqh,13px);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);white-space:nowrap;
}
.ritual-label.is-left .ritual-eyebrow{justify-content:flex-end}
.ritual-label.is-right .ritual-eyebrow{justify-content:flex-start}
.ritual-eyebrow i{font-family:var(--font-zh);font-style:normal;font-size:1.25em;letter-spacing:0;color:var(--gold-hi);text-transform:none}
.ritual-eyebrow i::before{content:"";display:inline-block;width:.9em;height:1px;margin-right:.6em;vertical-align:middle;background:var(--gold-40)}
.ritual-label h2{
  margin-top:clamp(.25rem,.7cqh,.5rem);
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,3.3cqh,38px);line-height:1.06;letter-spacing:-.015em;text-wrap:balance;
}
.ritual-label h2 em{font-family:var(--font-body);font-weight:300;color:var(--gold-hi)}
.ritual-finish{display:flex;margin-top:clamp(.5rem,1.2cqh,.9rem);opacity:0;visibility:hidden;pointer-events:auto;will-change:opacity,transform}
.ritual-label.is-left .ritual-finish{justify-content:flex-end}
.ritual-finish a{
  display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:.15em 0;
  font-family:var(--font-ui);font-weight:500;font-size:clamp(10px,1.25cqh,12px);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi);
  border-bottom:1px solid var(--gold-40);transition:color .3s,border-color .3s;
}
.ritual-finish a svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.4}
.ritual-finish a:hover{color:var(--cream);border-color:var(--gold)}

.ritual-scroll.is-fallback{height:100svh}
.ritual-stage.is-fallback .ritual-labels,
.ritual-stage.is-fallback .ritual-leaders,
.ritual-stage.is-fallback .ritual-intro{visibility:hidden}
.ritual-video-fallback{position:absolute;inset:0;z-index:4;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;background:var(--ink-0)}
.ritual-video-fallback[hidden]{display:none}
.ritual-video-fallback video{width:100%;height:100%;min-height:0;object-fit:contain}
.ritual-fallback-actions{text-align:center;padding:.65rem .4rem;font-size:.95rem}
.ritual-fallback-actions nav{display:flex;justify-content:center;flex-wrap:wrap;gap:0 1.2rem}
.ritual-fallback-actions a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-ui);font-size:12px;color:var(--gold-hi);text-decoration:underline;text-underline-offset:4px}

/* ── written version: present for assistive tech, hidden from view ─ */
.ritual-recap{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.ritual-recap:target,.ritual-recap:focus-within{position:relative;width:auto;height:auto;clip-path:none;max-width:720px;margin:auto;padding:4rem var(--pad-x)}
.ritual-recap h2{font-family:var(--font-display);font-weight:400;font-size:2rem;color:var(--cream)}
.ritual-recap ol{list-style:decimal;padding-left:1.5rem;margin-top:1.5rem;font-size:1.1rem;line-height:1.9}
.ritual-recap a{display:inline-block;margin-top:2rem;color:var(--gold-hi);border-bottom:1px solid var(--gold-40)}

/* ── portrait screens: the film fills the screen, words sit on the table ── */
@media (orientation:portrait){
  :root{--header-h:calc(56px + env(safe-area-inset-top,0px))}
  .ritual-scroll{height:560svh}
  .ritual-brand-en{font-size:1.15rem}
  .ritual-brand-zh{font-size:.72rem}
  .ritual-back span{display:none}
  .ritual-back{min-width:44px;justify-content:flex-end}
  .ritual-header{gap:.9rem}
  .ritual-counter{position:static;transform:none;margin-left:auto;font-size:.62rem}
  .ritual-screen{padding-bottom:env(safe-area-inset-bottom,0px)}
  /* never cut the plate: the film is as tall as fits, but never wider than the screen */
  .ritual-picture{height:min(100%,calc(100vw * 16 / 9))}
  .ritual-mat{display:none}
  .ritual-picture img,.ritual-picture canvas{
    -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);
    mask-image:linear-gradient(180deg,#000 92%,transparent);
  }
  .ritual-shade{background:linear-gradient(180deg,rgba(6,5,4,.42),transparent 24%,transparent 66%,rgba(6,5,4,.72) 100%)}
  .ritual-intro{top:17%;max-width:88%}
  .ritual-intro h1{font-size:clamp(30px,5.4cqh,54px)}
  .ritual-label,.ritual-label.is-left,.ritual-label.is-right{
    left:50%;right:auto;top:87%;transform:translate(-50%,-50%) translateY(var(--rise,0px));
    max-width:86%;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 18px rgba(0,0,0,.6);
  }
  .ritual-label .ritual-eyebrow{justify-content:center;font-size:12px;letter-spacing:.18em}
  .ritual-label h2{font-size:clamp(22px,3cqh,30px)}
  .ritual-label .ritual-finish{justify-content:center;margin-top:.7rem}
  .ritual-label .ritual-finish a{font-size:12px}
}
@media (orientation:portrait) and (max-height:700px){
  .ritual-intro h1{font-size:clamp(26px,5cqh,40px)}
  .ritual-label h2{font-size:21px}
  .ritual-label{top:86%}
}
@media (orientation:landscape) and (max-height:520px){
  :root{--header-h:48px;--scroll-gap:8px}
  .ritual-back span{display:none}
  .ritual-label h2{font-size:clamp(16px,3.3cqh,22px)}
}

@media (prefers-reduced-motion:reduce){
  .ritual-cue i::after{animation:none;transform:none;opacity:1;height:100%}
  .ritual-picture canvas{transition:none}
  .ritual-back svg{transition:none}
}