:root{
  /* Creamy light theme — --ink is now the cream page background,
     --linen the dark text, --sand muted brown, --bark elevated cream,
     --grain the warm border tan, --ember a deeper amber for contrast. */
  /* Contrast-checked against WCAG AA rather than picked by eye. The old values
     put secondary text at 4.30:1 on panels (a fail) and small amber labels at
     3.03:1 (a clear fail), which is why copy read as washed out.
       --sand        5E4D31  7.5:1 on cream, 6.7:1 on panels
       --ember-text  8E5616  5.6:1 / 5.0:1   — for small labels and links
       --ember       A9681F  4.5:1 for WHITE text on the filled button
     --ember-glow keeps the old brighter amber for glows and the dark journey,
     where it sits on near-black and contrast is never the issue. */
  --ink:#FAF6EC; --bark:#F1E8D9; --grain:#DDCCAE; --sand:#5E4D31;
  --linen:#2E2519; --ember:#A9681F; --ember-text:#8E5616; --emberdim:#7D4C11;
  --ember-glow:#C07A28;
  --ember-rgb:169,104,31;
  /* Type: Cormorant Garamond for display — a high-contrast French garamond that
     suits the name and reads as expensive at large sizes. Jost for UI/body — a
     geometric European sans that stays quiet next to it. Mono kept for specs. */
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Jost','Outfit',sans-serif;
  --font-spec:'JetBrains Mono',monospace;
  /* dark palette used by the film journey, where the page goes black */
  --night:#0d0805; --night-ink:#f3e9d8; --night-dim:#a58e6f; --night-ember:#e0913a;
}

/* ---------- brand mark ---------- */
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  grid-column:1; justify-self:start;}
.li-mark{display:block; flex:none; transition:transform .3s ease, filter .3s ease;}
.brand:hover .li-mark{transform:scale(1.06); filter:drop-shadow(0 0 10px rgba(224,145,58,.5));}
.li-mark .li-glow{filter:blur(2.5px);}
.li-word{display:flex; flex-direction:column; line-height:.98;}
.li-w1{font-family:var(--font-display); font-weight:500; font-size:1.32em; letter-spacing:.005em;}
.li-w2{font-family:var(--font-body); font-weight:400; font-size:.62em;
       letter-spacing:.34em; text-transform:uppercase; color:var(--sand); margin-left:.1em;}
.brand-footer .li-w1{font-size:1.5em;}
header.site .brand{font-size:31px; gap:14px;}
.brand-footer{font-size:27px; gap:14px;}
@media(max-width:900px){ header.site .brand{font-size:24px; gap:11px;} }
@media(max-width:600px){ header.site .brand{font-size:19px; gap:9px;} }
@media(max-width:600px){ header.site .brand .li-mark{width:42px; height:28px;} }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--linen); font-family:var(--font-body);
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--ember-rgb),0.08), transparent);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;   /* stop iOS auto-inflating text in landscape */
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
.wrap{max-width:1152px; margin:0 auto; padding:0 24px;}
.wood-grain{background-image:repeating-linear-gradient(92deg, rgba(255,255,255,0.015) 0px, rgba(0,0,0,0.03) 3px, rgba(255,255,255,0.01) 7px, rgba(0,0,0,0.02) 11px);}
.label{margin-bottom:6px; display:block; font-family:var(--font-spec); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--ember-text);}
.card{border-radius:16px; border:1px solid rgba(192,122,40,0.16); background:rgba(255,253,247,0.75); backdrop-filter:blur(4px); box-shadow:0 1px 2px rgba(46,37,25,0.04), 0 16px 36px -16px rgba(46,37,25,0.22); transition:transform .25s ease, box-shadow .25s ease;}
.btn-ember{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--ember); padding:12px 28px; font-weight:500; color:#fff; box-shadow:0 10px 24px -8px rgba(var(--ember-rgb),0.55); transition:filter .2s, box-shadow .2s, transform .2s;}
.btn-ember:hover{filter:brightness(1.08); box-shadow:0 0 60px 10px rgba(192,122,40,0.3); transform:translateY(-2px);}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--grain); padding:12px 28px; color:var(--linen); transition:border-color .2s, color .2s;}
.btn-ghost:hover{border-color:var(--ember); color:var(--ember);}
.input, textarea.input, select.input{
  width:100%; border-radius:8px; border:1px solid var(--grain); background:rgba(255,253,247,0.6);
  padding:12px 16px; color:var(--linen); font-family:inherit; font-size:15px;
}
.input::placeholder{color:rgba(124,101,71,0.4);}
.input:focus{outline:none; border-color:var(--ember); box-shadow:0 0 0 1px rgba(var(--ember-rgb),0.5);}
/* Cormorant is lighter and optically smaller than the old face, so it carries
   a touch more weight and a tighter track to hold presence at display sizes. */
h1,h2,h3{font-family:var(--font-display); font-weight:500; margin:0; letter-spacing:-0.012em;}
h1{font-size:clamp(38px,5.2vw,68px); line-height:1.06;}
h2{font-size:clamp(30px,3.6vw,46px); line-height:1.1;}
h3{font-size:22px; line-height:1.2;}
p{margin:0; line-height:1.6;}

/* Navbar */
header.site{position:fixed; inset:0 0 auto 0; z-index:40; border-bottom:1px solid rgba(220,203,173,0.4); background:rgba(255,253,247,0.7); backdrop-filter:blur(10px);}
/* Three columns, with the nav in the middle one. space-between only centres
   the links when the brand and the button happen to be the same width, which
   they never are — a 1fr/auto/1fr grid centres them against the BAR. */
header.site nav{max-width:1560px; margin:0 auto; display:grid; align-items:center;
  grid-template-columns:1fr auto 1fr; padding:16px clamp(20px,3.4vw,48px); gap:20px;}
.nav-links{display:none; align-items:center; justify-content:center;
  gap:clamp(30px,4vw,64px); grid-column:2;}
.nav-actions{display:flex; align-items:center; justify-content:flex-end; gap:22px; grid-column:3;}
/* a quiet secondary link balances the weight of the brand on the left */
.nav-quiet{display:none; font-size:13px; letter-spacing:.04em; color:var(--sand); opacity:.85;}
.nav-quiet:hover{color:var(--ember); opacity:1;}
@media(min-width:1180px){ .nav-quiet{display:inline-block;} }
/* Uppercase with wide tracking: it reads as considered rather than utilitarian,
   and it physically occupies more of the bar, which is what stops the middle
   looking empty. */
.nav-links a{font-size:13.5px; font-weight:400; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sand); transition:color .2s; position:relative; padding:9px 2px; white-space:nowrap;}
/* a hairline growing from the middle on hover: quiet, but it stops the bar
   from reading as inert text */
.nav-links a::after{content:""; position:absolute; left:50%; right:50%; bottom:2px; height:1px;
  background:currentColor; opacity:.55; transition:left .26s ease, right .26s ease;}
.nav-links a:hover::after, .nav-links a.active::after{left:0; right:0;}
.nav-links a:hover, .nav-links a.active{color:var(--ember);}
.nav-cta{display:none; padding:11px 26px; font-size:13.5px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:500;}
.menu-btn{display:flex; flex-direction:column; justify-content:center; gap:6px; padding:10px; margin:-10px; min-width:44px; min-height:44px;}
.menu-btn span{display:block; height:2px; width:24px; background:var(--linen);}
.mobile-menu{display:none; flex-direction:column; gap:16px; border-top:1px solid rgba(220,203,173,0.4); padding:16px 24px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{color:var(--sand);}
.mobile-menu a.active{color:var(--ember);}
@media(min-width:768px){
  .nav-links{display:flex;} .nav-cta{display:inline-flex;} .menu-btn{display:none;}
}

main{padding-top:0;}

/* ---------- dark chrome on the home page ----------
   The journey pins a near-black film under the fixed header for the whole
   page, so the cream nav would be invisible. Home gets dark glass instead. */
body[data-page="home"] header.site{
  background:linear-gradient(to bottom, rgba(13,8,5,.82), rgba(13,8,5,.35) 70%, transparent);
  border-bottom-color:rgba(243,233,216,.14); backdrop-filter:blur(10px);
}
body[data-page="home"] header.site .brand{color:#f7efe2;}
body[data-page="home"] header.site .li-w2{color:var(--night-dim);}
body[data-page="home"] .nav-links a{color:rgba(243,233,216,.86);}
body[data-page="home"] .nav-quiet{color:rgba(243,233,216,.66);}
body[data-page="home"] .nav-quiet:hover{color:var(--night-ember);}
body[data-page="home"] .nav-links a:hover,
body[data-page="home"] .nav-links a.active{color:var(--night-ember);}
body[data-page="home"] .menu-btn span{background:#f7efe2;}
body[data-page="home"] .mobile-menu{background:rgba(13,8,5,.94); border-top-color:rgba(243,233,216,.14);}
body[data-page="home"] .mobile-menu a{color:rgba(243,233,216,.85);}
body[data-page="home"] .mobile-menu a.active{color:var(--night-ember);}

/* Hero film — scroll-scrubbed WebP sequence (js/scrub-hero.js).
   The pin is sized in svh because iOS collapses the address bar mid-scroll
   and vh would resize the pin under the reader. Nothing between .scrub-hero
   and .scrub-sticky may be transformed — position:sticky dies silently
   inside a transformed ancestor. */
/* The journey is the home page, so the pin is long: eight scenes need room to
   breathe. ~110svh of scroll per scene. */
.scrub-hero{position:relative; height:820svh; background:#0d0805; color:#f3e9d8;}
@media(max-width:768px){ .scrub-hero{height:640svh;} }
.scrub-sticky{position:sticky; top:0; height:100svh; overflow:hidden; background:#0d0805;}
.scrub-sticky canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* keeps the cream fixed header and the captions legible over bright frames */
.scrub-sticky::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(13,8,5,.55) 0%, transparent 22%, transparent 55%, rgba(13,8,5,.72) 100%);}

/* ---------- scenes: the page content, revealed along the film ----------
   Each .scrub-scene declares its own scroll window with data-from/data-to,
   so the story lives in the HTML rather than in a JS array. The runtime
   fades them and adds .is-live, which is what re-enables pointer events —
   invisible scenes must not swallow clicks. */
.scrub-scene{position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; z-index:2; pointer-events:none; padding:96px 6vw 12vh;}
.scrub-scene.is-live{pointer-events:auto;}
.scrub-scene > .inner{width:100%; max-width:1180px; margin:0 auto;}
.scrub-scene.align-left  > .inner{text-align:left;}
.scrub-scene.align-right > .inner{text-align:right; margin-left:auto;}
.scrub-scene.align-center > .inner{text-align:center;}
.scrub-scene.narrow > .inner{max-width:640px;}

/* The eyebrow sits over bark and lit wood, where a mid-amber disappears.
   Pale gold plus its own shadow keeps it readable on every beat. */
.scrub-scene .eyebrow{font-family:var(--font-spec); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:#f5cf92; margin:0 0 14px;
  text-shadow:0 1px 14px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.7);}
.scrub-hint{text-shadow:0 1px 16px rgba(0,0,0,.9);}
.scrub-scene h1, .scrub-scene h2{color:#fbf5ea;
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 2px 44px rgba(0,0,0,.95), 0 0 90px rgba(0,0,0,.7);}
.scrub-scene h1{font-size:clamp(40px,6.4vw,86px);}
.scrub-scene h2{font-size:clamp(30px,4.4vw,58px);}
.scrub-scene p.said{margin:18px 0 0; font-size:clamp(15px,1.3vw,18px); color:#e0cfb2;
  max-width:52ch; text-shadow:0 1px 8px rgba(0,0,0,.9), 0 1px 26px rgba(0,0,0,.9);}
.scrub-scene.align-center p.said{margin-left:auto; margin-right:auto;}
.scrub-scene.align-right p.said{margin-left:auto;}
.scrub-scene .hero-cta{margin-top:30px;}
.scrub-scene.align-center .hero-cta{justify-content:center;}
.scrub-scene.align-right .hero-cta{justify-content:flex-end;}
/* Legibility. The film runs from near-black bark to a brightly lit bar, so a
   soft radial scrim alone was not enough — copy disappeared over the bright
   beats. Three layers now: a full-scene wash, a tighter pool behind the words,
   and a text-shadow on the type itself. */
/* Legibility without hiding the film. The previous scrim was an opaque box that
   was still dark at the edge of its own element, which drew a visible horizontal
   seam across the picture. Both layers now reach zero well inside their bounds,
   so there is no boundary to see — and both are far lighter, because the type
   carries its own shadow. */
.scrub-scene::before{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(13,8,5,.34) 0%, rgba(13,8,5,.06) 34%,
    rgba(13,8,5,.10) 64%, rgba(13,8,5,.44) 100%);}
.scrub-scene > .inner::before{content:""; position:absolute; inset:-55% -45%; z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at center,
    rgba(13,8,5,.60) 0%, rgba(13,8,5,.32) 38%, rgba(13,8,5,.09) 60%, rgba(13,8,5,0) 75%);}
.scrub-scene > .inner{position:relative;}

/* buttons need inverting: the site's ghost button is dark-on-cream */
.scrub-scene .btn-ghost{color:#f7efe2; border-color:rgba(247,239,226,.55);}
.scrub-scene .btn-ghost:hover{color:var(--night-ember); border-color:var(--night-ember);}
.scrub-hero.ignited .scene-payoff h1{color:#f0b967; text-shadow:0 0 80px rgba(224,145,58,.85);}

/* dark cards used by the collection / rooms / reviews scenes */
.night-grid{display:grid; gap:14px; margin-top:26px; grid-template-columns:1fr;}
@media(min-width:700px){ .night-grid.cols-2{grid-template-columns:1fr 1fr;} }
@media(min-width:860px){ .night-grid.cols-3{grid-template-columns:repeat(3,1fr);} }
@media(min-width:860px){ .night-grid.cols-4{grid-template-columns:repeat(4,1fr);} }
/* The strips travel across the film, so a solid dark card drags a moving black
   band over the picture. Lighter fill plus heavier blur reads as glass instead:
   the film still shows through and the text still holds. */
.night-card{border:1px solid rgba(243,233,216,.15); border-radius:12px; padding:16px 18px;
  background:rgba(13,8,5,.24); backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.12); text-align:left;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;}
.night-card:hover{background:rgba(13,8,5,.44);}
a.night-card{display:block; text-decoration:none;}
a.night-card:hover{border-color:var(--night-ember); transform:translateY(-3px);}
.night-card h3{color:#f7efe2; font-size:19px; margin:0;}
.night-card p{margin:7px 0 0; font-size:13.5px; color:var(--night-dim); line-height:1.55;}
.night-card .price{margin-top:10px; font-family:var(--font-spec); font-size:12.5px; color:var(--night-ember);}
.night-card .stars{color:var(--night-ember); font-size:13px; letter-spacing:.1em;}
.night-card .who{margin-top:10px; font-size:12.5px; color:#f7efe2;}

/* progress rail + scroll hint */
.scrub-rail{position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:rgba(243,233,216,.14);}
.scrub-rail span{display:block; height:100%; width:0;
  background:linear-gradient(to right, var(--emberdim), var(--night-ember), #fff1d2);}
.scrub-chapters{position:absolute; right:clamp(12px,2.4vw,28px); top:50%; transform:translateY(-50%);
  z-index:3; display:none; flex-direction:column; gap:11px;}
@media(min-width:900px){ .scrub-chapters{display:flex;} }
.scrub-chapters button{width:9px; height:9px; padding:0; border-radius:50%;
  border:1px solid rgba(243,233,216,.5); background:transparent; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;}
.scrub-chapters button:hover{transform:scale(1.35); border-color:var(--night-ember);}
.scrub-chapters button.on{background:var(--night-ember); border-color:var(--night-ember);}

.scrub-hint{position:absolute; left:50%; bottom:5%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-spec); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,233,216,.62); transition:opacity .4s ease;}
.scrub-hero.ignited .scrub-hint{opacity:0;}

/* Fallback (reduced motion / slow link / decode probe fail): one still
   frame + the copy, no sequence download. Reads as a deliberate hero. */
.scrub-fallback-wrap{display:none;}
.scrub-hero.scrub-fallback{height:100svh;}
.scrub-hero.scrub-fallback canvas, .scrub-hero.scrub-fallback .scrub-hint{display:none;}
.scrub-hero.scrub-fallback .scrub-fallback-wrap{display:block; position:absolute; inset:0;}
.scrub-fallback-img{width:100%; height:100%; object-fit:cover;}
/* Fallback: the film can't play, so the journey collapses into a normal page —
   one still frame behind the payoff scene, and every other scene stacked below
   it in document order as ordinary content. Nothing is lost, it just doesn't move. */
.scrub-hero.scrub-fallback{height:auto;}
.scrub-hero.scrub-fallback .scrub-sticky{position:static; height:auto; min-height:100svh;}
.scrub-hero.scrub-fallback .scrub-rail,
.scrub-hero.scrub-fallback .scrub-chapters{display:none;}
.scrub-hero.scrub-fallback .scrub-scene{opacity:1 !important; position:static; inset:auto;
  pointer-events:auto; padding:12vh 6vw; min-height:auto;}
.scrub-hero.scrub-fallback .scrub-scene > .inner::before{display:none;}
.scrub-hero.scrub-fallback .scrub-scene:first-of-type{min-height:86svh;}

/* Hero */
.hero{position:relative; display:flex; min-height:100vh; min-height:100dvh; align-items:center; overflow:hidden; padding-top:80px;}
.hero-grid{display:grid; gap:32px; align-items:center; width:100%;}
@media(min-width:1024px){ .hero-grid{grid-template-columns:1fr 1fr;} }
.hero h1, .hero .hero-title{font-size:56px; line-height:1.05;}
@media(min-width:768px){ .hero h1, .hero .hero-title{font-size:80px;} }
.text-glow{text-shadow:0 0 40px rgba(192,122,40,0.45); color:var(--ember-text);}
.hero p.lead{margin-top:24px; max-width:480px; color:var(--sand);}
.hero-cta{margin-top:32px; display:flex; flex-wrap:wrap; gap:16px;}
@keyframes spin{ from{transform:translateX(-50%) rotateY(0deg);} to{transform:translateX(-50%) rotateY(360deg);} }

/* Scroll story */
.story{
  padding:96px 0; border-top:1px solid rgba(220,203,173,0.6); border-bottom:1px solid rgba(220,203,173,0.6);
  background:
    radial-gradient(900px 300px at 15% 0%, rgba(var(--ember-rgb),0.06), transparent 70%),
    var(--bark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
}
.story-grid{display:grid; gap:32px;}
@media(min-width:768px){ .story-grid{grid-template-columns:repeat(4,1fr);} }
.story-stage{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.story-stage.in{opacity:1; transform:translateY(0);}
.story-stage h3{font-size:26px; margin-top:8px;}
.story-stage p{margin-top:12px; color:var(--sand); font-size:15px;}

/* Featured / testimonials / cta reused grids */
.section{padding:96px 0;}
.section h2{font-size:36px;}
@media(min-width:768px){ .section h2{font-size:48px;} }
.projects-grid{margin-top:48px; display:grid; gap:24px;}
@media(min-width:640px){ .projects-grid{grid-template-columns:1fr 1fr;} }
.project-card{position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(220,203,173,0.6); box-shadow:0 1px 2px rgba(46,37,25,0.04), 0 20px 40px -20px rgba(46,37,25,0.28); transition:transform .35s ease, box-shadow .35s ease;}
.project-card:hover{transform:translateY(-4px); box-shadow:0 1px 2px rgba(46,37,25,0.05), 0 28px 48px -20px rgba(46,37,25,0.34);}
.project-card img{aspect-ratio:4/3; width:100%; object-fit:cover; background:linear-gradient(160deg, var(--bark), var(--grain)); transition:transform .7s, filter .7s;}
.project-card:hover img{transform:scale(1.05); filter:brightness(1.1);}
.project-caption{position:absolute; inset:auto 0 0 0; background:linear-gradient(to top, var(--ink), rgba(255,253,247,0.7), transparent); padding:64px 24px 24px;}
.project-caption .detail{margin-top:4px; font-family:var(--font-spec); font-size:12px; color:var(--ember); opacity:0; transition:opacity .2s;}
.project-card:hover .detail{opacity:1;}

.testimonials{
  border-top:1px solid rgba(220,203,173,0.6); border-bottom:1px solid rgba(220,203,173,0.6); padding:96px 0; text-align:center;
  background:
    radial-gradient(900px 300px at 85% 100%, rgba(var(--ember-rgb),0.06), transparent 70%),
    var(--bark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
}
.testimonials h2{margin-top:8px; font-size:36px;}
@media(min-width:768px){ .testimonials h2{font-size:44px;} }
.reviews-grid{margin-top:48px; display:grid; gap:24px; text-align:left;}
@media(min-width:640px){ .reviews-grid{grid-template-columns:1fr 1fr;} }
.review-card{padding:32px; display:flex; flex-direction:column;}
.review-card .stars{color:var(--ember);}
.review-card .stars .dim{color:var(--grain);}
.review-card .review-text{margin-top:16px; font-family:var(--font-display); font-size:21px; line-height:1.4; flex:1;}
.review-card footer{margin-top:20px; font-size:14px; color:var(--sand);}
.review-card .review-name{color:var(--linen); font-weight:500;}

.cta-final{text-align:center; padding:96px 24px;}
.cta-final h2{font-size:36px;}
.cta-final p{margin:16px auto 0; max-width:480px; color:var(--sand);}
.cta-final .hero-cta{justify-content:center;}

/* Products grid */
.products-grid{margin-top:48px; display:grid; gap:24px;}
@media(min-width:640px){ .products-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .products-grid{grid-template-columns:repeat(3,1fr);} }
.product-card{overflow:hidden; text-align:left; transition:transform .3s ease, box-shadow .3s ease;}
.product-card:hover{transform:translateY(-4px); box-shadow:0 1px 2px rgba(46,37,25,0.05), 0 28px 48px -20px rgba(46,37,25,0.3);}
.product-card img{aspect-ratio:3/4; width:100%; object-fit:cover; background:linear-gradient(160deg, var(--bark), var(--grain)); transition:transform .5s;}
.product-card:hover img{transform:scale(1.04);}
.product-card .body{padding:18px;}
.product-card .wood-tag{font-family:var(--font-spec); font-size:11px; text-transform:uppercase; color:var(--ember); letter-spacing:.08em;}
.product-card h3{font-size:20px; margin-top:6px;}
.product-card .price{margin-top:6px; font-family:var(--font-spec); font-size:14px; color:var(--sand);}
.product-card .short{margin-top:8px; font-size:13px; color:var(--sand);}
.grid-empty{padding:32px 16px; text-align:center; color:var(--sand); font-size:14px;}

/* Product detail */
.pd-grid{display:grid; gap:40px; padding-top:96px;}
@media(min-width:1024px){ .pd-grid{grid-template-columns:1fr 1fr; padding-top:112px;} }
.pd-info{padding-top:16px;}
@media(min-width:1024px){ .pd-info{padding-top:0;} }
.pd-gallery-main{aspect-ratio:3/4; overflow:hidden; position:relative;}
.pd-gallery-main img{position:absolute; inset:0; height:100%; width:100%; object-fit:cover;}
.pd-thumbs{margin-top:12px; display:flex; gap:12px;}
.pd-thumbs button{height:80px; width:64px; overflow:hidden; border-radius:8px; border:2px solid var(--grain);}
.pd-thumbs button.active{border-color:var(--ember);}
.pd-thumbs img{height:100%; width:100%; object-fit:cover;}
.specs-table{margin-top:24px; width:100%; border-collapse:collapse;}
.specs-table tr{border-top:1px solid rgba(220,203,173,0.5);}
.specs-table td{padding:10px 0; font-size:14px;}
.specs-table td:first-child{color:var(--sand); width:40%;}
.pd-actions{margin-top:32px; display:flex; flex-wrap:wrap; gap:16px;}
.back-link{display:inline-block; margin-bottom:16px; font-size:13px; color:var(--sand);}
.back-link:hover{color:var(--ember);}
.pd-gallery-main model-viewer{position:absolute; inset:0; width:100%; height:100%; background:radial-gradient(ellipse at 50% 40%, rgba(var(--ember-rgb),0.10), transparent 70%), var(--bark); --poster-color:transparent;}
.pd-thumbs .thumb-mode{display:flex; align-items:center; justify-content:center; font-family:var(--font-spec); font-size:11px; color:var(--sand); background:var(--bark);}
.pd-thumbs .thumb-mode.active{color:var(--ember);}
.pd-3d-note{margin-top:12px; font-size:13px; color:var(--sand);}
.pd-3d-note a{color:var(--ember);}
.pd-3d-note a:hover{text-decoration:underline;}

/* Forms */
.form-grid{display:grid; gap:20px;}
@media(min-width:640px){ .form-grid.two{grid-template-columns:1fr 1fr;} }
.form-field label{display:block; font-size:13px; margin-bottom:6px; color:var(--sand);}
.form-success{display:none; border-radius:16px; border:1px solid var(--ember); background:rgba(var(--ember-rgb),0.08); padding:24px; margin-top:24px;}
.form-success.show{display:block;}

/* About */
.values-grid, .team-grid{display:grid; gap:24px; margin-top:32px;}
@media(min-width:768px){ .values-grid{grid-template-columns:repeat(3,1fr);} .team-grid{grid-template-columns:repeat(3,1fr);} }
.team-grid{text-align:center;}
.about-media{margin-top:56px; display:grid; gap:16px;}
@media(min-width:640px){ .about-media{grid-template-columns:repeat(3,1fr);} }
.about-media video, .about-media img, .media-placeholder{aspect-ratio:3/4; width:100%; object-fit:cover; border-radius:16px; border:1px solid rgba(220,203,173,0.6);}
.media-placeholder{
  position:relative; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center;
  background:radial-gradient(120% 140% at 50% 20%, rgba(var(--ember-rgb),0.10), transparent 60%), linear-gradient(160deg, var(--bark), var(--grain));
  color:var(--sand); font-family:var(--font-spec); font-size:12px; text-align:center; padding:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -20px 40px -20px rgba(46,37,25,0.15);
}
.media-placeholder::before{
  content:""; width:44px; height:44px; border-radius:50%;
  background:rgba(var(--ember-rgb),0.14); border:1px solid rgba(var(--ember-rgb),0.3);
}
.product-card .media-placeholder, .pd-gallery-main .media-placeholder{aspect-ratio:auto; height:100%; width:100%; border-radius:0; border:none;}

footer.site{border-top:1px solid rgba(220,203,173,0.4); background:var(--bark);}
.footer-grid{display:grid; gap:40px; padding:56px 24px;}
@media(min-width:768px){ .footer-grid{grid-template-columns:repeat(3,1fr);} }
.footer-grid a{display:block; color:var(--sand); padding:4px 0;}
.footer-grid a:hover{color:var(--ember);}
.footer-bottom{border-top:1px solid rgba(220,203,173,0.4); padding:20px; text-align:center; font-family:var(--font-spec); font-size:12px; color:rgba(124,101,71,0.5);}

.not-found{padding:180px 24px 96px; text-align:center;}

/* Legal pages (terms.html, privacy.html) */
.legal{max-width:820px; padding-top:128px; padding-bottom:96px;}
.legal h1{font-size:clamp(34px,6vw,44px);}
.legal .updated{margin-top:12px; font-family:var(--font-spec); font-size:12px; color:var(--sand);}
.legal .lead{margin-top:20px; color:var(--sand); max-width:640px;}
.legal section{margin-top:40px;}
.legal h2{font-size:24px; margin-bottom:12px;}
.legal h3{font-size:17px; margin:20px 0 8px;}
.legal p{color:var(--sand); margin-bottom:12px;}
.legal ul{margin:0 0 12px; padding-left:20px; color:var(--sand);}
.legal li{margin-bottom:6px; line-height:1.6;}
.legal a{color:var(--ember);}
.legal a:hover{text-decoration:underline;}
.legal .toc{margin-top:24px; padding:20px 24px; border-radius:12px; border:1px solid var(--grain); background:rgba(255,253,247,0.6);}
.legal .toc a{display:inline-block; margin:4px 14px 4px 0; font-size:14px;}

/* Toast (used by core.js's toast() on every page, including admin) */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px);
  background:var(--bark); border:1px solid rgba(var(--ember-rgb),0.4); color:var(--linen);
  padding:12px 22px; border-radius:999px; font-size:13px; z-index:3000;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ============================================================
   PAGE HEROES + HALO TRANSITIONS
   Inner pages had no imagery at all, which is why they read as
   hollow next to the film. Each now opens on a full-bleed
   atmospheric plate with the copy sitting in its dark side.
   ============================================================ */
.page-hero{position:relative; min-height:clamp(360px,52vh,560px); display:flex; align-items:flex-end;
  padding:140px clamp(20px,4vw,48px) clamp(38px,5vh,64px); overflow:hidden;
  background:#0d0805; isolation:isolate;}
.page-hero__bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  /* a slow drift keeps the plate from feeling like a dead JPEG */
  animation:heroDrift 26s ease-in-out infinite alternate;}
@keyframes heroDrift{ from{transform:scale(1.04) translate3d(0,0,0);} to{transform:scale(1.11) translate3d(-1.4%,-1%,0);} }
@media(prefers-reduced-motion:reduce){ .page-hero__bg{animation:none; transform:scale(1.04);} }
/* scrim: dark where the words are, clear where the picture is worth seeing */
.page-hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, rgba(13,8,5,.94) 0%, rgba(13,8,5,.72) 38%, rgba(13,8,5,.24) 70%, rgba(13,8,5,.5) 100%),
             linear-gradient(to bottom, rgba(13,8,5,.8) 0%, transparent 26%, transparent 62%, rgba(13,8,5,.55) 100%);}
.page-hero__inner{position:relative; width:100%; max-width:1240px; margin:0 auto;}
.page-hero .label{color:#f5cf92; text-shadow:0 1px 14px rgba(0,0,0,.9);}
.page-hero h1{color:#f7efe2; text-shadow:0 2px 44px rgba(0,0,0,.9); max-width:16ch;}
.page-hero .lead{margin-top:18px; max-width:56ch; color:#e0cfb2; font-size:clamp(15px,1.25vw,18px);
  text-shadow:0 1px 20px rgba(0,0,0,.85);}
.page-hero .hero-cta{margin-top:28px;}
.page-hero .btn-ghost{color:#f7efe2; border-color:rgba(247,239,226,.55);}
.page-hero .btn-ghost:hover{color:var(--night-ember); border-color:var(--night-ember);}

/* ---------- halo transition between categories ----------
   Navigating used to be a hard white flash. A warm halo blooms from the
   middle and clears as the next page paints, so moving between Collection,
   Workshop and Contact feels lit rather than reloaded. */
.halo{position:fixed; inset:0; z-index:120; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 46%, rgba(240,185,103,.42) 0%,
    rgba(224,145,58,.24) 26%, rgba(13,8,5,.92) 64%, #0d0805 100%);
  transition:opacity .34s ease;}
.halo.on{opacity:1;}
.halo__ring{position:absolute; left:50%; top:46%; width:120px; height:80px; margin:-40px 0 0 -60px;
  opacity:0; transform:scale(.7);}
.halo.on .halo__ring{opacity:1; transform:scale(1); transition:opacity .3s ease .05s, transform .5s cubic-bezier(.2,.8,.3,1) .05s;}
@media(prefers-reduced-motion:reduce){ .halo, .halo__ring{transition:none;} }

/* pages fade up on arrival, so the halo hands over to real content */
.page-enter{animation:pageEnter .5s cubic-bezier(.22,.85,.3,1) both;}
@keyframes pageEnter{ from{opacity:0; transform:translate3d(0,14px,0);} to{opacity:1; transform:none;} }
@media(prefers-reduced-motion:reduce){ .page-enter{animation:none;} }

/* about page media strip — real photographs, captioned */
.about-media figure{margin:0;}
.about-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  border:1px solid rgba(192,122,40,.18); box-shadow:0 18px 40px -22px rgba(46,37,25,.5);}
.about-media figcaption{margin-top:10px; font-family:var(--font-spec); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sand);}
/* contact reuses the shared hero; its old rules centred everything */
.page-hero .breadcrumb{justify-content:flex-start; color:var(--night-dim);}
.page-hero .breadcrumb a{color:#f5cf92;}

/* ---------- looping strips in the journey ----------
   The product and review rows now scroll forever instead of sitting still.
   The track holds the cards twice and slides exactly one copy-width, so the
   seam lands on an identical frame and the loop is invisible. Edge masks fade
   the ends rather than letting cards collide with the frame. */
.night-loop{position:relative; margin-top:26px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);}
.night-loop__track{display:flex; gap:14px; width:max-content;
  animation:loopTrack var(--loop-dur,46s) linear infinite;}
.night-loop:hover .night-loop__track{animation-play-state:paused;}
@keyframes loopTrack{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} }
.night-loop .night-card{width:clamp(220px,22vw,290px); flex:none;}
/* a paused strip is still readable, so reduced motion just stops it */
@media(prefers-reduced-motion:reduce){ .night-loop__track{animation:none;} }
/* the film is pinned, so a hidden scene must not animate off-screen forever */
.scrub-scene:not(.is-live) .night-loop__track{animation-play-state:paused;}
/* product cards in the strip carry their photo */
.night-card--product img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px;
  margin-bottom:12px; background:#1a1109;}

/* ---------- leave-a-review ---------- */
.review-section{padding:clamp(56px,8vh,96px) clamp(20px,4vw,48px); background:var(--bark);
  border-top:1px solid rgba(192,122,40,.16);}
.review-inner{max-width:820px; margin:0 auto;}
.review-intro{margin-top:14px; color:var(--sand); max-width:56ch;}
.review-form{display:grid; gap:18px; margin-top:30px; padding:clamp(22px,4vw,38px);}
.review-row{display:grid; gap:18px; grid-template-columns:1fr;}
@media(min-width:640px){ .review-row{grid-template-columns:1fr 1fr;} }
.review-form .form-field{display:grid; gap:7px;}
.review-form label{font-family:var(--font-spec); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sand);}
/* star picker: real radios underneath, so it is keyboard and screen-reader usable */
.star-pick{display:flex; gap:6px;}
.star-pick button{font-size:30px; line-height:1; color:var(--grain); background:none; border:none;
  padding:2px; cursor:pointer; transition:color .15s ease, transform .15s ease;}
.star-pick button:hover{transform:scale(1.12);}
.star-pick button.on{color:var(--ember);}
.star-pick button:focus-visible{outline:2px solid var(--ember); outline-offset:3px; border-radius:4px;}
#reviewSuccess{display:none;}
#reviewSuccess.show{display:block; margin-top:30px;}

/* the active chapter dot fills and haloes while the film is held at a keypoint,
   so the pause reads as intentional rather than as the page having stalled */
.scrub-chapters.holding button.on{transform:scale(1.5);
  box-shadow:0 0 0 3px rgba(224,145,58,.22), 0 0 14px rgba(224,145,58,.75);}
.scrub-chapters button{transition:transform .35s cubic-bezier(.2,.8,.3,1),
  box-shadow .35s ease, background .25s ease, border-color .25s ease;}

/* ---------- keyboard focus ----------
   There was one :focus-visible rule in the whole sheet, so keyboard users had
   almost no visible focus on a site that is mostly navigation and forms.
   :focus-visible (not :focus) means mouse users never see a ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--ember); outline-offset:3px; border-radius:6px;
}
/* on the dark film and page heroes the amber needs to be the brighter one */
.scrub-hero :where(a, button):focus-visible,
.page-hero :where(a, button):focus-visible,
body[data-page="home"] header.site :where(a, button):focus-visible{
  outline-color:var(--ember-glow); outline-offset:4px;
}
.scrub-chapters button:focus-visible{outline:2px solid var(--ember-glow); outline-offset:4px;}
/* skip link: the journey is ~8 screens of pinned scroll, so a keyboard user
   must be able to jump past it to the footer navigation */
.skip-link{position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ember); color:#fff; padding:12px 20px; border-radius:0 0 10px 10px;
  font-size:14px; transition:top .18s ease;}
.skip-link:focus{top:0;}
/* Headings that are visually the page's title but must not be a second <h1>:
   products.html serves the collection and the product detail from one URL. */
.as-h1{font-size:clamp(30px,3.4vw,40px); line-height:1.08;}