/* DV79 SMOKE REVEAL · Ashwood hero · stage 2 of 3: the smoke canvas over the headline (the CSS smoke stays as the no-WebGL fallback).
   Dark only (never follows the OS). Every word is DOM.
   Stacking inside .hero: copy text (1) < smoke canvas / CSS smoke (2) < incense, buttons (3) < nav, footer (4) < ring (5).
   .copy creates no stacking context, so its children interleave with the canvas. */
:root {
  --page: #070605; --ink: #efe9df; --head: #f7efe3; --eyebrow: #b7a58c; --muted: #a39b90; --cap: #8d857b; --cap-b: #d9d1c5;
  --btn: #f2ebe0; --btn-ink: #14110e; --line: rgba(239, 233, 223, .32); --focus: #e9c08a;
  --s: 1; --oy: calc((100svh - 1000px * var(--s)) / 2);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--page); color: var(--ink); }
body { font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 12px 18px; min-height: 44px; border-radius: 99px; background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 340px; overflow: hidden; isolation: isolate; outline: none;
  background:
    radial-gradient(60% 55% at 50% 46%, rgba(110, 70, 38, .30), rgba(50, 30, 18, .12) 50%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%),
    var(--page);
  touch-action: pinch-zoom;
}

/* ---------- canvas + CSS smoke ---------- */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; opacity: 1; transition: opacity .35s ease; }
.pre .fx { opacity: 0; }
.smoke-css { display: none; }
.no-fx .fx { display: none; }
.no-fx .smoke-css {
  display: block; position: absolute; inset: -10% -10% 0; z-index: 2; pointer-events: none;
  --mx: -999px; --my: -999px; --hole: 150px;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent calc(var(--hole) * .45), #000 var(--hole));
          mask-image: radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent calc(var(--hole) * .45), #000 var(--hole));
}
.smoke-css i { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .9; animation: drift 22s ease-in-out infinite alternate; }
.smoke-css .c1 { left: 8%; top: 4%; width: 62%; height: 40%; background: radial-gradient(closest-side, rgba(150, 138, 124, .75), rgba(110, 100, 90, .35) 60%, transparent); }
.smoke-css .c2 { left: 36%; top: 2%; width: 64%; height: 44%; background: radial-gradient(closest-side, rgba(165, 152, 136, .7), rgba(110, 100, 90, .3) 60%, transparent); animation-duration: 27s; }
.smoke-css .c3 { left: 41%; top: 22%; width: 22%; height: 46%; background: radial-gradient(closest-side, rgba(205, 192, 175, .55), rgba(140, 128, 114, .22) 65%, transparent); animation-duration: 18s; }
.smoke-css .c4 { left: 44%; top: 52%; width: 14%; height: 26%; background: radial-gradient(closest-side, rgba(215, 200, 182, .5), transparent); animation-duration: 15s; }
.smoke-css .c5 { left: 20%; top: 18%; width: 30%; height: 22%; background: radial-gradient(closest-side, rgba(130, 120, 108, .45), transparent); animation-duration: 31s; }
@keyframes drift { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.08); } }

/* ---------- copy (under the smoke) ---------- */
.copy { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.copy > * { position: relative; z-index: 1; }
.eyebrow { color: var(--eyebrow); font-weight: 600; text-transform: uppercase; line-height: 1.2; }
.headline { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; color: var(--head); letter-spacing: 0; line-height: .95;
  text-shadow: 0 0 calc(50px * var(--hs, 1)) rgba(255, 214, 170, .45); }
.headline em { font-style: italic; }
.headline span, .headline em { display: inline-block; }
.lede { color: var(--muted); font-weight: 400; line-height: 1.35; }
.ctas { z-index: 3 !important; display: flex; gap: 14px; justify-content: center; }
.pre .copy > :not(.ctas) { opacity: 0; }
.copy > * { transition: opacity .35s ease; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; font-weight: 600; white-space: nowrap;
  transition: transform .18s ease, background-color .2s ease, box-shadow .25s ease, border-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.btn.primary { background: var(--btn); color: var(--btn-ink); box-shadow: 0 0 40px rgba(255, 214, 170, .18), 0 10px 30px -12px rgba(0, 0, 0, .8); }
.btn.ghost { border: 1px solid rgba(239, 233, 223, .3); background: rgba(12, 9, 7, .62); color: var(--ink); }
@media (hover: hover) {
  .btn.primary:hover { background: #fff6ea; transform: translateY(-1px); box-shadow: 0 0 64px rgba(255, 214, 170, .36), 0 14px 34px -12px rgba(0, 0, 0, .8); }
  .btn.ghost:hover { border-color: rgba(239, 233, 223, .72); background: rgba(24, 19, 14, .6); }
  .links a:hover, .logo:hover { color: var(--ink); }
  .bag:hover { border-color: rgba(239, 233, 223, .7); background: rgba(30, 24, 18, .6); }
}
.btn:active { transform: translateY(1px) scale(.98); transition-duration: .06s; }
.btn.primary:active { background: #e6dccd; }
.btn[aria-disabled="true"], .bag[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

/* ---------- incense ---------- */
.incense { position: absolute; z-index: 3; pointer-events: none; }
.incense svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.glow { position: absolute; width: 18.75%; height: 18.75%; margin: -9.375% 0 0 -9.375%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .95), rgba(255, 110, 30, .62) 22%, rgba(255, 70, 10, .18) 60%, rgba(255, 60, 0, 0));
  will-change: opacity, transform; animation: ember 2.6s ease-in-out infinite; }
.g1 { left: 39.2%; top: 24.6%; animation-delay: -.7s; } .g2 { left: 50%; top: 15.9%; animation-duration: 3.1s; } .g3 { left: 59.9%; top: 25.75%; animation-delay: -1.6s; animation-duration: 2.3s; }
@keyframes ember { 0%, 100% { opacity: .82; transform: scale(1); } 30% { opacity: 1; transform: scale(1.06); } 55% { opacity: .74; transform: scale(.96); } 80% { opacity: .95; transform: scale(1.03); } }
.src { position: absolute; width: 0; height: 0; }
.s1 { left: 38.97%; top: 22.97%; } .s2 { left: 50%; top: 14.4%; } .s3 { left: 60.16%; top: 24.06%; }

/* ---------- nav ---------- */
.nav { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: space-between; }
.logo { text-shadow: 0 1px 14px rgba(7, 6, 5, .8); font-family: 'Instrument Serif', Georgia, serif; color: var(--ink); letter-spacing: .02em; display: inline-flex; align-items: center; min-height: 44px; transition: color .2s; }
.links { display: flex; color: var(--muted); text-shadow: 0 1px 14px rgba(7, 6, 5, .9), 0 0 3px rgba(7, 6, 5, .6); }
.links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; transition: color .2s ease; position: relative; }
.links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
@media (hover: hover) { .links a:hover::after { transform: scaleX(1); } }
.bag { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 99px; border: 1px solid rgba(239, 233, 223, .35);
  background: rgba(10, 8, 6, .35); color: var(--ink); font: 500 14px Manrope, system-ui, sans-serif; transition: border-color .2s, background-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.bag { padding: 0 18px; }
.bag:active { transform: scale(.96); }

/* ---------- footer: caption + pause ---------- */
.foot { position: absolute; z-index: 4; left: 0; right: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.foot > * { pointer-events: auto; }
.cap { color: var(--cap); text-align: center; line-height: 1.45; }
.cap b { color: var(--cap-b); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-right: 8px; }
.coarse { display: none; }
@media (pointer: coarse) { .fine { display: none; } .coarse { display: inline; } }

/* =================== WIDE (landscape, the concept's 1600×1000 frame scaled by --s) =================== */
.wide .nav { left: max(20px, calc(72px * var(--s))); right: max(20px, calc(72px * var(--s))); top: max(6px, calc(var(--oy) + 60px * var(--s) - 22px)); height: 44px; }
.wide .logo { font-size: max(22px, calc(28px * var(--s))); }
.wide .links { position: absolute; gap: calc(40px * var(--s)); font-size: max(13px, calc(14px * var(--s))); letter-spacing: .02em;
  left: calc((100vw - 1600px * var(--s)) / 2 + 639px * var(--s) - max(20px, calc(72px * var(--s)))); }
.wide .copy { top: calc(var(--oy) + 243px * var(--s)); }
.wide .eyebrow { font-size: max(10px, calc(12px * var(--s))); letter-spacing: max(2.5px, calc(4px * var(--s))); }
.wide .headline { font-size: calc(200px * var(--s)); margin-top: calc(29px * var(--s)); --hs: var(--s); }
.wide .lede { font-size: max(13px, calc(19px * var(--s))); margin-top: calc(39px * var(--s)); }
.wide .ctas { margin-top: calc(33px * var(--s)); }
.wide .btn { height: max(44px, calc(56px * var(--s))); padding: 0 max(18px, calc(30px * var(--s))); font-size: max(13px, calc(15px * var(--s))); }
.wide .incense { width: calc(320px * var(--s)); height: calc(320px * var(--s)); left: calc(50% - 160px * var(--s)); bottom: calc(var(--oy) + 50px * var(--s)); }
.wide .foot { bottom: calc(var(--oy) + 39px * var(--s) - 22px); min-height: 44px; padding: 0 140px; }
.wide .foot .cap { font-size: max(11px, calc(13px * var(--s))); }
@media (max-width: 1099px) { .wide .links { display: none; } }
/* short landscapes (phones turned sideways): keep text legible, move the incense to the side of the buttons */
@media (max-height: 560px) {
  .wide .copy { top: calc(var(--oy) + 150px * var(--s)); }
  .wide .headline { margin-top: 6px; }
  .wide .ctas { margin-top: 14px; }
  .wide .incense { width: calc(240px * var(--s)); height: calc(240px * var(--s)); left: auto; right: calc(50% + 330px * var(--s)); bottom: 46px; }
  .wide .foot { bottom: 0; padding: 0 120px 0 20px; justify-content: flex-start; }
  .wide .cap .cap-text { display: none; }
}

/* =================== TALL (phones, portrait tablets) =================== */
html:not(.wide) {
  --fs: min(21.5vw, 10svh, 150px);
}
html:not(.wide) .nav { left: 22px; right: 22px; top: max(10px, calc(26px + env(safe-area-inset-top))); height: 44px; }
html:not(.wide) .logo { font-size: 28px; }
html:not(.wide) .links { display: none; }
html:not(.wide) .copy { top: calc(23.6svh); padding: 0 20px; }
html:not(.wide) .eyebrow { font-size: 10px; letter-spacing: 4px; }
html:not(.wide) .headline { font-size: var(--fs); margin-top: calc(var(--fs) * .49); line-height: .87; }
html:not(.wide) .headline span, html:not(.wide) .headline em { display: block; }
html:not(.wide) .lede { font-size: 14px; margin-top: calc(var(--fs) * .42); max-width: 34ch; }
html:not(.wide) .long { display: none; }
html:not(.wide) .ctas { margin-top: calc(var(--fs) * .19); }
html:not(.wide) .btn { height: 50px; padding: 0 20px; font-size: 14px; }
html:not(.wide) .btn.ghost { display: none; }
html:not(.wide) .incense { width: min(27svh, 72vw); height: min(27svh, 72vw); left: 50%; transform: translateX(-50%); bottom: calc(10svh - min(27svh, 72vw) * .0625); }
html:not(.wide) .foot { bottom: max(14px, calc(10px + env(safe-area-inset-bottom))); padding: 0 66px; min-height: 44px; }
html:not(.wide) .cap { font-size: 11px; }
html:not(.wide) .cap b { display: inline-block; margin-right: 6px; }
/* portrait tablets: a little more room */
@media (min-width: 700px) {
  html:not(.wide) .nav { left: 40px; right: 40px; top: 34px; }
  html:not(.wide) .links { display: flex; position: absolute; left: 50%; transform: translateX(-50%); gap: 32px; font-size: 14px; }
  html:not(.wide) .eyebrow { font-size: 12px; }
  html:not(.wide) .lede { font-size: 18px; max-width: none; }
  html:not(.wide) .long { display: inline; }
  html:not(.wide) .btn { height: 56px; padding: 0 30px; font-size: 15px; }
  html:not(.wide) .btn.ghost { display: inline-flex; }
  html:not(.wide) .cap { font-size: 13px; }
  html:not(.wide) .foot { padding: 0 190px; }
}

/* =================== reduced motion =================== */
@media (prefers-reduced-motion: reduce) {
  .glow, .smoke-css i { animation: none; }
  .fx, .copy > * { transition: none; }
  .btn, .bag, .links a::after { transition: none; }
}

/* short / narrow phones (320×568 class): keep the eyebrow on one line and the incense clear of the button */
@media (max-width: 360px) { html:not(.wide) .eyebrow { letter-spacing: 2.6px; font-size: 9.5px; } }
@media (max-height: 660px) {
  html:not(.wide) .copy { top: 19svh; }
  html:not(.wide) .lede { font-size: 13px; }
  html:not(.wide) .cap .cap-text { display: none; }
  html:not(.wide) .incense { width: min(22svh, 60vw); height: min(22svh, 60vw); bottom: calc(11svh - min(22svh, 60vw) * .0625); }
}