/* ============================================================
   TOKENS — design tokens, reset, base type, placeholder system
   Faithful to reference palette: near-black brown #130b08 page,
   cream #EDE8DC stage, ink #2C1711,   red CTA #A11422. Fonts swapped for Kowloon: Noto Serif HK
   for display (covers Latin plus the 九龍冰室 marks),
   Noto Sans HK for body and labels.
   ============================================================ */

:root{
  --ink:#130b08;
  --ink-soft:rgba(19,11,8,.88);
  --cream:#EDE8DC;
  --ink-warm:#2C1711;
  --red:#B4552D;
  --red-deep:#7E3417;
  --cream-dim:rgba(237,232,220,.6);
  --line-cream:rgba(237,232,220,.24);
  --wm:rgba(44,23,17,.045);

  --font-display:"Amiri", Georgia, serif;
  --font-body:"Noto Sans", "Helvetica Neue", sans-serif;
  --font-label:"Noto Sans", Helvetica, Arial, sans-serif;
  --font-script:"Amiri", Georgia, serif;

  --ease-out:cubic-bezier(.19,1,.22,1);
  --mobile-pad:20px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font-body);font-weight:300;line-height:1.4;
  background:var(--ink);color:var(--cream);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:0;color:inherit;cursor:pointer}
img,svg{display:block;max-width:100%}
ul{list-style:none}
h1,h2,h3{font-weight:400}
::selection{background:var(--red);color:var(--cream)}

/* ---------- label type ---------- */
.kicker{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--cream-dim);
}
.body-copy{font-size:clamp(.95rem,1.05vw,1.1rem);line-height:1.65;max-width:46ch}
.body-copy.on-dark{color:rgba(237,232,220,.78)}
.body-copy.on-cream{color:rgba(44,23,17,.78)}

/* ---------- shared scene placeholder (stands in for photos) ------
   Layered gradient "photograph": sky wash + two ridge domes + sun.
   Swap any .scene for a real image — geometry/animation carry over. */
.scene{position:absolute;inset:0;overflow:hidden}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-sun{position:absolute;border-radius:50%;pointer-events:none}
.scene-ridge{position:absolute;left:-12%;width:124%;pointer-events:none;
  border-radius:50% 50% 0 0/100% 100% 0 0}
.scene-role{position:absolute;bottom:.85rem;left:50%;transform:translateX(-50%);
  z-index:6;white-space:nowrap;font-family:var(--font-label);font-size:.55rem;
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(237,232,220,.85)}
.scene-role.dark{color:rgba(44,23,17,.75)}

/* night food scene (landing arc 1) — deep brown + ember sun */
.scene-night{background:linear-gradient(#241209,#130b08 70%)}
.scene-night .scene-sun{width:44%;aspect-ratio:1;left:52%;top:10%;
  background:radial-gradient(circle, rgba(224,122,58,.5), rgba(224,122,58,0) 70%)}
.scene-night .r1{bottom:-6%;height:48%;background:rgba(161,20,34,.16)}
.scene-night .r2{bottom:-12%;height:36%;left:-16%;background:rgba(0,0,0,.5)}

/* warm table scene (landing arc 2) */
.scene-table{background:linear-gradient(#3a1d0e,#1c0e07)}
.scene-table .scene-sun{width:38%;aspect-ratio:1;right:10%;top:8%;
  background:radial-gradient(circle, rgba(237,168,90,.45), rgba(237,168,90,0) 70%)}
.scene-table .r1{bottom:-6%;height:50%;background:rgba(120,80,45,.22)}
.scene-table .r2{bottom:-12%;height:38%;left:-14%;background:rgba(0,0,0,.45)}

/* dining room scene (landing arc 3) */
.scene-room{background:linear-gradient(#241a12,#100a06)}
.scene-room .scene-sun{width:34%;aspect-ratio:1;left:12%;top:12%;
  background:radial-gradient(circle, rgba(237,232,220,.3), rgba(237,232,220,0) 70%)}
.scene-room .r1{bottom:-6%;height:44%;background:rgba(237,232,220,.07)}
.scene-room .r2{bottom:-12%;height:34%;left:-18%;background:rgba(0,0,0,.55)}

/* cream field (story arc photo, chef portrait) */
.scene-day{background:linear-gradient(#efe6d6,#ddd2c0)}
.scene-day .scene-sun{width:36%;aspect-ratio:1;right:10%;top:9%;
  background:radial-gradient(circle, rgba(219,165,116,.45), rgba(219,165,116,0) 70%)}
.scene-day .r1{bottom:-6%;height:46%;background:rgba(44,23,17,.12)}
.scene-day .r2{bottom:-12%;height:36%;left:-16%;background:rgba(44,23,17,.24)}

/* red-lit scene (chef CTA wash area) */
.scene-red{background:linear-gradient(#c96a3e,var(--red) 58%,var(--red-deep))}
.scene-red .scene-sun{width:40%;aspect-ratio:1;left:50%;top:16%;transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,214,190,.3), rgba(255,214,190,0) 70%)}

/* grain overlay (matches reference grain layer) */
.grain{position:absolute;inset:-25%;z-index:5;opacity:.16;pointer-events:none;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.26) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 55%, rgba(0,0,0,.25) 0 1px, transparent 1px);
  background-size:34px 34px, 29px 29px;
  transform:rotate(8deg)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}