/* =========================================================
   Low Light Candle Co. — styles
   Palette roles (warm & moody):
     --night   base (page background)
     --almond  ink on dark / base of the lit "maker" section
     --plum    main surface (panels, shelf)
     --ember   pop: flame, key actions, highlights
   ========================================================= */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --night: #141311;
  --night-2: #1b1613;
  --plum: #4B262E;
  --plum-deep: #2a1418;
  --almond: #EDD3BA;
  --almond-dim: #b8a08c;
  --ember: #DF9441;
  --ember-hot: #ffb867;
  --ink: #1f1512;
  --ink-soft: #5a4336;

  --display: "Gloock", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --bar: 34px;
  --nav-h: 56px;
  --radius-xl: clamp(1.5rem, 3vw, 2.75rem);

  --p: 0;      /* hero scroll progress 0..1, set by JS */
  --lit: 1;    /* candle light level */
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(var(--bar) + var(--nav-h) + 28px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--almond);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* fine grain for craft */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.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;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ember); color: var(--night); padding: .6rem 1rem; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: calc(var(--bar) + 8px); }

:focus-visible { outline: 2px solid var(--ember-hot); outline-offset: 3px; border-radius: 6px; }

.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ember);
}

/* ---------- Placeholders (draft only) ---------- */
.ph {
  color: #f0b36a;
  text-decoration: underline dashed rgba(223, 148, 65, .75);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.maker .ph { color: #8a4510; text-decoration-color: rgba(138, 69, 16, .6); }

/* ---------- Draft bar ---------- */
.draft-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--bar);
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 0 var(--gutter);
  background: #0c0b0a;
  border-bottom: 1px solid rgba(223, 148, 65, .22);
  color: var(--almond-dim);
  font-size: .78rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.draft-bar > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.draft-bar strong { color: var(--almond); font-weight: 600; }
.draft-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.ph-inline { padding: 0 .1em; }
.draft-short { display: none; }
@media (max-width: 640px) { .draft-long { display: none; } .draft-short { display: inline; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 70;
  top: calc(var(--bar) + 10px); left: var(--gutter); right: var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 6px 0 22px;
  border-radius: 999px;
  background: rgba(20, 19, 17, .58);
  border: 1px solid rgba(237, 211, 186, .12);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.nav-mark {
  font-family: var(--display); font-size: 1.45rem; text-decoration: none; letter-spacing: -.01em;
  white-space: nowrap;
}
.nav-links { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem;
  text-decoration: none; font-size: .95rem; color: var(--almond-dim); border-radius: 999px;
  transition: color .2s, background-color .2s;
}
.nav-links a:hover { color: var(--almond); background: rgba(237, 211, 186, .07); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 1.45rem;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 1rem/1 var(--text); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, box-shadow .35s, color .25s, border-color .25s;
}
.btn-sm { min-height: 44px; padding: 0 1.15rem; font-size: .95rem; }
.btn-ember { background: var(--ember); color: var(--night); }
.btn-ember:hover { background: var(--ember-hot); box-shadow: 0 0 34px rgba(255, 170, 80, .35); }
.btn-line { border-color: rgba(237, 211, 186, .38); color: var(--almond); }
.btn-line:hover { border-color: var(--almond); background: rgba(237, 211, 186, .06); }
.link-quiet {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--almond-dim); text-underline-offset: .3em; text-decoration-color: rgba(237, 211, 186, .35);
}
.link-quiet:hover { color: var(--almond); }

/* =========================================================
   Candle stand-in (code-built, render-like). Sized in em:
   set font-size on .candle to scale. 10em wide, 17em tall.
   ========================================================= */
.candle {
  --glass: #8d4a17; --wax: #f1e1c6; --delay: 0s;
  position: relative; display: block;
  width: 10em; height: 17em;
  isolation: isolate;
}
.candle > span, .candle .c-body > span { position: absolute; display: block; }

.c-glow {
  left: 50%; top: 3.6em; width: 36em; height: 36em; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 176, 90, .42) 0, rgba(223, 148, 65, .16) 24%, rgba(75, 38, 46, .10) 42%, transparent 64%);
  opacity: var(--lit);
  transition: opacity 1.2s ease;
  animation: breathe 4.2s ease-in-out var(--delay) infinite alternate;
}
.c-shadow {
  left: 50%; bottom: -1.1em; width: 15em; height: 2.4em; transform: translateX(-50%);
  border-radius: 50%; z-index: -1;
  background:
    radial-gradient(ellipse 50% 50% at 50% 45%, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .35) 45%, transparent 72%);
}
.c-body {
  left: 0; right: 0; top: 6em; bottom: 0;
  border-radius: 0 0 50% 50% / 0 0 1.1em 1.1em;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 9%, rgba(255,255,255,.09) 19%, rgba(255,255,255,0) 31%, rgba(0,0,0,0) 60%, rgba(0,0,0,.26) 83%, rgba(0,0,0,.66) 100%),
    radial-gradient(ellipse 72% 40% at 50% 0%, rgba(255, 190, 110, calc(.55 * var(--lit))) 0, rgba(255, 170, 80, 0) 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--glass) 72%, #fff 28%) 0%, var(--glass) 34%, color-mix(in srgb, var(--glass) 62%, #000 38%) 100%);
  box-shadow: inset 0 -.5em .9em rgba(0, 0, 0, .35);
}
.c-inner { /* flame light caught inside the glass */
  left: 20%; right: 20%; top: -.6em; height: 3.4em; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 214, 150, .75), rgba(255, 160, 70, 0) 70%);
  filter: blur(.35em); mix-blend-mode: screen;
  opacity: var(--lit); transition: opacity 1.2s ease;
}
.c-label {
  left: 50%; top: 34%; width: 64%; height: 38%; transform: translateX(-50%);
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .35em;
  border-radius: .12em;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 20%, rgba(255,255,255,.22) 40%, rgba(255,255,255,0) 58%, rgba(0,0,0,.34) 100%),
    #ecdcc6;
  color: #2a1d17;
  box-shadow: 0 .05em .2em rgba(0,0,0,.25);
}
.c-label-mark { font-family: var(--display); font-size: 1.35em; line-height: 1; letter-spacing: -.01em; }
.c-label-sub { font-size: .52em; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.c-spec {
  left: 13%; top: 7%; bottom: 12%; width: 5%;
  border-radius: 1em;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.14) 38%, rgba(255,255,255,.3) 78%, rgba(255,255,255,0));
  filter: blur(.07em);
}
.c-spec::after {
  content: ""; position: absolute; left: 1300%; top: 10%; bottom: 20%; width: 45%;
  border-radius: 1em; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.c-base {
  left: 0; right: 0; bottom: 0; height: 1.4em;
  border-radius: 0 0 50% 50% / 0 0 1.1em 1.1em;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 40%, rgba(0,0,0,.3));
}
.c-rim {
  left: 0; right: 0; top: 5em; height: 2em; border-radius: 50%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--glass) 55%, #000 45%) 0%,
    color-mix(in srgb, var(--glass) 55%, #fff 45%) 26%,
    color-mix(in srgb, var(--glass) 80%, #fff 20%) 70%,
    color-mix(in srgb, var(--glass) 55%, #000 45%) 100%);
  box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .22);
}
.c-wax {
  left: .38em; right: .38em; top: .36em; bottom: .22em; border-radius: 50%;
  background: radial-gradient(ellipse 48% 58% at 50% 46%, #fff8ea 0, var(--wax) 42%, color-mix(in srgb, var(--wax) 70%, #6b4a33 30%) 100%);
  box-shadow: inset 0 .28em .38em rgba(0, 0, 0, .38);
  filter: brightness(calc(.55 + .45 * var(--lit)));
  transition: filter 1.2s ease;
}
.c-wick {
  left: 50%; top: 5.35em; width: .18em; height: .8em; margin-left: -.09em;
  border-radius: .1em; background: linear-gradient(180deg, #120c0a, #3b2a20);
}
.c-flame {
  left: 50%; top: 2.75em; width: 1.25em; height: 3em; margin-left: -.625em;
  transform-origin: 50% 88%;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse 52% 62% at 50% 72%, #fffdf3 0, #ffeab0 26%, #ffb24f 52%, rgba(240, 120, 40, .0) 80%);
  box-shadow: 0 0 1.3em .35em rgba(255, 170, 70, .45);
  filter: blur(.05em);
  animation: flicker 2.8s ease-in-out var(--delay) infinite alternate;
  transition: opacity .5s ease, transform .5s ease;
}
.c-core {
  left: 50%; bottom: .18em; width: .5em; height: .75em; margin-left: -.25em; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(110, 140, 255, .55), rgba(110, 140, 255, 0) 70%);
}
.c-smoke {
  left: 50%; top: .6em; width: 1.2em; height: 5em; margin-left: -.6em; opacity: 0;
  background:
    radial-gradient(ellipse 40% 18% at 40% 80%, rgba(220, 210, 200, .45), transparent 70%),
    radial-gradient(ellipse 35% 16% at 62% 55%, rgba(220, 210, 200, .32), transparent 70%),
    radial-gradient(ellipse 30% 14% at 45% 28%, rgba(220, 210, 200, .2), transparent 70%);
  filter: blur(.18em);
}

@keyframes flicker {
  0%   { transform: scale(1, 1) skewX(0deg); }
  18%  { transform: scale(.96, 1.05) skewX(1.6deg); }
  37%  { transform: scale(1.03, .97) skewX(-1deg); }
  58%  { transform: scale(.98, 1.07) skewX(.9deg); }
  79%  { transform: scale(1.02, .98) skewX(-1.5deg); }
  100% { transform: scale(.99, 1.03) skewX(.4deg); }
}
@keyframes breathe { from { opacity: calc(var(--lit) * .82); } to { opacity: var(--lit); } }
@keyframes smoke {
  0% { opacity: 0; transform: translateY(.6em) scaleX(.8); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-2.6em) scaleX(1.4) skewX(8deg); }
}

/* blown out (hero candle only) */
.is-out .hero .candle { --lit: .07; }
.is-out .hero .c-flame { opacity: 0; transform: scale(.25, .1); animation: none; }
.is-out .hero .c-smoke { animation: smoke 3.2s ease-out forwards; }
.is-out .hero .c-glow { animation: none; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--bar) + var(--nav-h) + 44px) var(--gutter) clamp(24px, 4vw, 44px);
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem;
  background: var(--night);
  overflow: clip;
  isolation: isolate;
}
.hero-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(223, 148, 65, calc(.16 + .14 * var(--p))) 0,
      rgba(75, 38, 46, calc(.35 + .4 * var(--p))) calc(22% + 26% * var(--p)),
      rgba(20, 19, 17, 0) calc(52% + 40% * var(--p))),
    linear-gradient(180deg, rgba(20,19,17,0) 62%, var(--plum-deep) 100%);
  transition: opacity 1.2s ease;
}
.is-out .hero-glow { opacity: .25; }

.hero-eyebrow { text-align: center; color: var(--almond-dim); }
.hero-eyebrow .sep { color: var(--ember); margin: 0 .4em; }

.hero-title {
  align-self: center;
  display: flex; align-items: flex-end; justify-content: center;
  font-size: clamp(4rem, 15.2vw, 15.5rem);
  line-height: .86;
  letter-spacing: -0.025em;
  padding-top: .3em;
}
.word {
  display: block;
  padding-bottom: .06em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter 1.2s ease;
}
.word-low   { background-image: radial-gradient(140% 150% at 100% 58%, #ffd598 0%, #EDD3BA 34%, #a38a79 78%, #6f5a4e 100%); }
.word-light { background-image: radial-gradient(140% 150% at 0% 58%, #ffd598 0%, #EDD3BA 34%, #a38a79 78%, #6f5a4e 100%); }
.is-out .word { filter: brightness(.42) saturate(.6); }

.hero-candle {
  display: block; flex: none;
  font-size: .08em;            /* candle scales with the headline */
  margin: 0 .8em -1.1em;       /* in candle units */
  position: relative; z-index: 1;
}

.hero-foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.25rem;
}
.hero-line {
  font-family: var(--display); font-size: clamp(1.3rem, 2.1vw, 1.9rem); line-height: 1.15; max-width: 16ch;
}
.hero-actions { justify-self: end; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }

.flame-toggle {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: 0 1.1rem 0 .9rem;
  border-radius: 999px; border: 1px solid rgba(237, 211, 186, .22);
  background: rgba(20, 19, 17, .35); color: var(--almond-dim);
  font: 500 .875rem/1 var(--text); cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.flame-toggle:hover { color: var(--almond); border-color: rgba(237, 211, 186, .5); }
.ft-icon {
  width: 10px; height: 15px; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 50% 72%, #fff5d6, var(--ember) 60%, rgba(223,148,65,.2));
  box-shadow: 0 0 10px rgba(255, 170, 80, .7);
  transition: opacity .3s, box-shadow .3s;
}
.is-out .ft-icon { background: rgba(237, 211, 186, .35); box-shadow: none; }

/* =========================================================
   Shelf
   ========================================================= */
.shelf-section {
  position: relative;
  padding: clamp(72px, 9vw, 128px) 0 calc(clamp(64px, 7vw, 110px) + var(--radius-xl));
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(223, 148, 65, .10), transparent 70%),
    linear-gradient(180deg, var(--plum-deep) 0%, #1c0f11 100%);
}
.section-head { padding: 0 var(--gutter); display: grid; gap: .9rem; }
.section-head h2 { font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: .95; }
.lede { color: var(--almond-dim); font-size: 1.125rem; }

.shelf { margin-top: clamp(28px, 4vw, 48px); }
.shelf-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); margin-bottom: 1rem;
}
.shelf-count { font-size: .875rem; letter-spacing: .12em; color: var(--almond-dim); font-variant-numeric: tabular-nums; }
.shelf-count span:first-child { color: var(--almond); }
.shelf-arrows { display: flex; gap: .5rem; }
.round-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(237, 211, 186, .3); background: transparent; color: var(--almond);
  font: 400 1.15rem/1 var(--text); cursor: pointer;
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.round-btn:hover:not(:disabled) { background: rgba(237, 211, 186, .08); border-color: var(--almond); }
.round-btn:disabled { opacity: .35; cursor: default; }

.shelf-track {
  --stage-h: 380px;
  list-style: none; margin: 0;
  padding: 0 var(--gutter) 1.25rem;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(262px, 27vw, 360px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: rgba(237,211,186,.25) transparent;
}
.shelf-track:focus-visible { outline-offset: -2px; }

.card { scroll-snap-align: start; display: flex; flex-direction: column; }
.card-stage {
  position: relative; height: var(--stage-h);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 30px;
  overflow: hidden;
}
/* the shelf ledge: continuous because cards sit edge to edge */
.card-stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; z-index: -1;
  background:
    linear-gradient(180deg, #8a5a3e 0, #6d4230 5px, #452719 6px, #2f1a12 60%, #1c0f0c 100%);
}
.card-stage::before { /* warm pool of light on the ledge */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 20px; height: 40px; z-index: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 170, 90, .28), transparent 70%);
  pointer-events: none;
}
.card:first-child .card-stage::after { border-top-left-radius: 6px; }
.card:last-child .card-stage::after { border-top-right-radius: 6px; }
.card-stage { isolation: isolate; }

.card-candle { position: relative; z-index: 1; font-size: 17px; margin-bottom: -4px; }
.card-photo { position: absolute; inset: 0 0 36px; width: 100%; height: calc(100% - 36px); object-fit: cover; }

.stand-in-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--almond-dim);
  border: 1px dashed rgba(237, 211, 186, .38); border-radius: 999px;
  padding: .3rem .65rem;
  background: rgba(20, 19, 17, .4);
}

.card-body { padding: 1.4rem clamp(16px, 1.6vw, 24px) 0; display: grid; gap: .45rem; }
.card-index { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; color: var(--ember); }
.card-name { font-size: clamp(1.45rem, 1.9vw, 1.8rem); line-height: 1.1; }
.card-notes { color: var(--almond-dim); font-size: 1rem; }
.card-meta {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: .6rem; padding-top: .8rem;
  border-top: 1px solid rgba(237, 211, 186, .14);
  font-size: .9375rem;
}

/* =========================================================
   Maker (the lit room)
   ========================================================= */
.maker {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--radius-xl));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(255, 214, 160, .55), transparent 70%),
    var(--almond);
  color: var(--ink);
  padding: clamp(72px, 9vw, 136px) var(--gutter) calc(clamp(88px, 10vw, 150px) + var(--radius-xl));
}
.maker .eyebrow { color: #8a4510; }
.maker-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 110px); align-items: center;
}
.photo-slot {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5; border-radius: 1.25rem; overflow: hidden;
  background: linear-gradient(160deg, #3a1f24, var(--plum-deep));
  box-shadow: 0 30px 60px -30px rgba(42, 20, 24, .55);
  display: grid; place-items: center;
}
.photo-slot::before {
  content: ""; position: absolute; inset: 14px; border-radius: .8rem;
  border: 1px dashed rgba(237, 211, 186, .35);
}
.slot-glow {
  position: absolute; left: 50%; top: 58%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 176, 90, .35), rgba(223, 148, 65, .08) 35%, transparent 62%);
}
.slot-label { position: relative; padding: 0 1.5rem; text-align: center; font-size: .9375rem; }
.maker .slot-label .ph { color: #f0b36a; text-decoration-color: rgba(223, 148, 65, .75); }

.maker-copy { display: grid; gap: 1.5rem; }
.maker-quote { margin: 0; font-family: var(--display); font-size: clamp(2rem, 3.9vw, 3.6rem); line-height: 1.08; letter-spacing: -.015em; }
.maker-copy h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.maker-body { color: var(--ink-soft); max-width: 46ch; font-size: 1.125rem; }

/* =========================================================
   Visit & order
   ========================================================= */
.visit {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--radius-xl));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--night);
  padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 5vw, 72px);
}
.visit .section-head { margin: 0 auto; max-width: calc(1320px + 2 * var(--gutter)); }
.visit-grid {
  max-width: calc(1320px + 2 * var(--gutter)); margin: clamp(32px, 4vw, 56px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px);
}
.panel {
  position: relative; overflow: hidden;
  display: grid; gap: 1.75rem; align-content: start; justify-items: start;
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: 1.5rem;
  background: var(--night-2);
  border: 1px solid rgba(237, 211, 186, .1);
}
.panel-lit {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(223, 148, 65, .28), transparent 70%),
    var(--plum);
  border-color: rgba(237, 211, 186, .14);
}
.panel h3 { font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; }
.facts { margin: 0; display: grid; gap: 1.25rem; width: 100%; }
.facts > div { display: grid; gap: .3rem; padding-top: 1.1rem; border-top: 1px solid rgba(237, 211, 186, .14); }
.facts dt { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--almond-dim); }
.facts dd { margin: 0; font-size: 1.125rem; line-height: 1.5; }

/* =========================================================
   Footer: Phoenix dusk
   ========================================================= */
.footer {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, #22110f 45%, #4B262E 100%);
  padding: clamp(48px, 6vw, 88px) var(--gutter) 0;
  min-height: clamp(480px, 46vw, 620px);
  display: flex; flex-direction: column;
}
.footer-inner { position: relative; z-index: 1; text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.footer-mark { font-family: var(--display); font-size: clamp(3.4rem, 10vw, 8.5rem); line-height: 1.05; letter-spacing: -.02em; }
.footer-sub { color: var(--almond-dim); font-size: .9375rem; letter-spacing: .08em; }
.footer-links { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .5rem; }
.footer-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem;
  text-decoration: none; border-radius: 999px;
}
.footer-links a:hover { background: rgba(237, 211, 186, .08); }
.dusk { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(230px, 25vw, 360px); }
.footer-legal {
  position: relative; z-index: 1; margin-top: auto;
  padding: 1.25rem 0; text-align: center; font-size: .8125rem; color: var(--almond-dim);
}

/* ---------- Reveals ---------- */
.can-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.can-reveal .reveal.in { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .maker-grid { grid-template-columns: 1fr; }
  .photo-slot { max-width: 460px; width: 100%; }
  .visit-grid { grid-template-columns: 1fr; }
  .hero-foot { grid-template-columns: 1fr; justify-items: start; }
  .hero-actions { justify-self: start; justify-content: flex-start; }
  .flame-toggle { order: 3; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav { padding-left: 18px; }
  .nav-mark { font-size: 1.3rem; }
}
@media (max-width: 640px) {
  :root { --bar: 30px; --nav-h: 52px; }
  .draft-bar { font-size: .75rem; justify-content: flex-start; }
  .hero { min-height: auto; padding-top: calc(var(--bar) + var(--nav-h) + 32px); gap: 1.75rem; }
  /* phone: "Low" + candle on one row, "Light" below */
  .hero-title {
    display: grid; grid-template-columns: auto auto; grid-template-areas: "low candle" "light light";
    justify-content: center; align-items: end;
    font-size: 29vw; line-height: .84; padding-top: .55em;
  }
  .word-low { grid-area: low; }
  .word-light { grid-area: light; justify-self: center; background-image: radial-gradient(140% 150% at 75% 0%, #ffd598 0%, #EDD3BA 34%, #a38a79 78%, #6f5a4e 100%); }
  .hero-candle { grid-area: candle; margin: 0 0 .05em .6em; font-size: .082em; }
  .hero-eyebrow { font-size: .75rem; }
  .shelf-track { --stage-h: 340px; grid-auto-columns: 78vw; }
  .card-candle { font-size: 15px; }
  .shelf-arrows .round-btn { width: 44px; height: 44px; }
}

/* ---------- Reduced motion: still, but everything works ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-flame, .c-glow { animation: none !important; }
  .is-out .hero .c-smoke { animation: none; opacity: 0; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}