/* =====================================================================
   UPGRADE v2: new type system, hero FX layer, design fixes
   Display: Big Shoulders Display (tall, sharp, premium street food)
   Accent:  Instrument Serif italic, in gold, for one word per title
   Text:    Manrope
   ===================================================================== */

/* ---- display type: heavy, upright, tight ---- */
.h2, .logo, .hero-brand, .worlds, .dish h3, .price, .build-name, .size, .build-total strong, .stat-v,
.roast-big, .roast-num, .craft-title, .craft-card h3, .order-title, .loader-mark, .loader-num,
.menu-links a, .foot-big, .dock-total, .spec-title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0;
}
.worlds, .hero-brand, .h2, .story-title, .roast-big, .craft-title, .order-title, .craft-card h3, .foot-big { transform: none; }
.worlds { line-height: 0.84; letter-spacing: -0.005em; }
.hero-brand { line-height: 0.86; }
.roast-big, .craft-title, .order-title, .story-title { line-height: 0.86; }
.foot-big { font-weight: 900; }
.logo { font-weight: 900; font-size: 19px; letter-spacing: 0.06em; }
.stat-v, .roast-num, .price, .build-total strong, .loader-num, .dock-total { font-weight: 700; }

/* ---- the gold accent word: elegant serif italic against the tall sans ---- */
em.ac {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--gold);
  font-size: 1.04em;
  line-height: 0.9;
  padding-right: 0.06em;
  text-shadow: 0 0 22px rgba(246, 180, 44, 0.35);
}
.worlds em.ac { font-size: 1.12em; text-shadow: var(--glow); }
.order-title em.ac, .craft-title em.ac, .roast-big em.ac { font-size: 1.06em; }

/* ---- labels in Manrope read a touch wider: tighten the tracking ---- */
.eyebrow, .lbl, .spec-head, .worlds-note, .nav-links a, .btn, .link, .dish-tag, .frame-tag, .scroll-hint { letter-spacing: 0.2em; }
.btn { font-weight: 700; letter-spacing: 0.16em; }
.spec-rows, .build-lines, .order-lines, .extra span, .base span { letter-spacing: 0.06em; }
.spec-rows { font-weight: 600; font-size: 12px; }

/* ---- hero FX canvas sits between the film and the text ---- */
.hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; }
.hero-right, .hero-left { will-change: opacity; }

/* ---- phones: dark band behind the big title so it never sits on the food ---- */
@media (max-width: 900px) {
  .hero-stick::before { content: ""; position: absolute; inset: 0 0 auto; height: 44%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0) 100%); }
  .worlds { font-size: clamp(34px, 9.6vw, 50px); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9); }
  .hero-right .eyebrow { font-size: 10px; margin-bottom: 8px; }
}

/* ---- build: the size letter now glows BEHIND the wrap, off to the right ---- */
.build-visual .size-letter { z-index: 0; left: 80%; font-weight: 900; font-size: clamp(130px, 17vw, 260px); mix-blend-mode: normal; color: var(--gold); }
.build-visual img { z-index: 1; mix-blend-mode: lighten; }
@media (max-width: 900px) { .build-visual .size-letter { left: 84%; font-size: clamp(110px, 30vw, 170px); } }

/* ---- phones: the order dock steps aside while the builder (with its own button) is on screen ---- */
@media (max-width: 900px) {
  body.dock-away .dock { opacity: 0 !important; visibility: hidden; pointer-events: none !important; }
}

/* ---- the footer wordmark in the new display face ---- */
.foot-ln .slash { font-family: var(--serif); font-style: italic; font-weight: 400; }

@media (prefers-reduced-motion: reduce) { .hero-fx { display: none; } }
.lite .hero-fx { opacity: 0.85; }

/* ---- performance: the grain no longer animates (a full-screen layer moving 6 times a second) ---- */
.grain { animation: none !important; }

/* ---- numbers over the kitchen film ---- */
.numbers { position: relative; overflow: hidden; padding-top: 16vh; padding-bottom: 16vh; }
.numbers-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.numbers-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--bg) 0%, rgba(8, 7, 6, 0.72) 22%, rgba(8, 7, 6, 0.72) 78%, var(--bg) 100%); }
.numbers-grid { position: relative; z-index: 2; }
.numbers .stat { border-top-color: rgba(243, 236, 225, 0.22); }
.numbers .stat-v { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8), var(--glow); }

/* ---- the order title fills the screen, like a poster ---- */
.order-title { font-size: clamp(72px, 13.5vw, 230px); line-height: 0.84; }

/* ---- phones: a calm, readable hero ---- */
@media (max-width: 900px) {
  .hero .hud, .scroll-hint { display: none !important; }
  .hero-stick::before { height: 30%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0) 100%); }
  .hero-right { top: calc(76px + env(safe-area-inset-top, 0px)); left: var(--pad); right: var(--pad); text-align: left; justify-items: start; }
  .hero-right .eyebrow { margin-bottom: 6px; }
  .worlds { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.22em; font-size: clamp(36px, 11vw, 52px); line-height: 0.9; margin: 0; }
  .worlds > span:nth-child(-n+2) { order: 1; }
  .worlds::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .worlds > span:nth-child(n+3) { order: 3; }
  .worlds > span { margin: 0; padding: 0 0 0.04em; }
  .hero-left { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); padding-top: 70px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 30%, rgba(0, 0, 0, 0)); left: 0; right: 0; padding-left: var(--pad); padding-right: var(--pad); padding-bottom: 6px; }
  .spec { border-top: 0; padding-top: 0; }
  .spec-item { grid-template-columns: 1fr; }
  .spec-item .spec-rows { display: none; }
  .spec-head { font-size: 0; margin: 0; }
  .spec-head > span { font-size: 12px; letter-spacing: 0.2em; margin: 0; }
  .spec-title { font-size: 30px; margin: 4px 0 0; }
  .hero-progress { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .grain { display: none; }
}