/* ==========================================================================
   NURTURE YOUR JOY — stylesheet
   ========================================================================== */

:root{
  color-scheme: light;
  --cream:      #F8F4EA;
  --cream-2:    #F1EAD9;
  --paper:      #FFFDF8;
  --ink:        #38301F;
  --ink-soft:   #6B6350;
  --forest:     #4B5A3C;
  --forest-dk:  #333F29;
  --rust:       #AD5A34;
  --rust-dk:    #8E4728;
  --gold:       #AE8A4E;
  --line:       rgba(56,48,31,0.14);
  --shadow:     0 24px 60px -30px rgba(45,38,24,0.45);
  --radius:     2px;
  --maxw:       1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', -apple-system, sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  margin:0 0 .4em;
  color:var(--ink);
  letter-spacing:.01em;
}
p{ margin:0 0 1em; }
.script{
  font-family:'Alex Brush', cursive;
  font-weight:400;
  color:var(--rust);
  line-height:1;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Jost',sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--forest);
  margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); }
.section{ padding:110px 0; position:relative; }
.section--tight{ padding:80px 0; }
.section--alt{ background:var(--cream-2); }
.section--dark{ background:var(--forest-dk); color:#EFE9D8; }
.section--dark h2, .section--dark h3{ color:#F6F1E3; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
h2.section-title{ font-size:clamp(2.1rem,3.6vw,3rem); line-height:1.08; }
.lede{ font-size:1.1rem; color:var(--ink-soft); max-width:56ch; }
.section--dark .lede{ color:#CFC8B4; }

/* ---------- buttons ---------- */
.btn{
  --btn-fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-family:'Jost',sans-serif; font-size:13.5px;
  font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:transform .35s ease, box-shadow .35s ease, background-color .35s ease, color .35s ease;
  background:var(--rust); color:var(--btn-fg);
  white-space:nowrap;
}
.btn:hover{ background:var(--rust-dk); transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(142,71,40,.55); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:var(--cream); box-shadow:none; }
.section--dark .btn-ghost{ color:#F6F1E3; border-color:#F6F1E3; }
.section--dark .btn-ghost:hover{ background:#F6F1E3; color:var(--forest-dk); }
.btn-line{
  background:none; padding:6px 0; color:var(--forest); border:none;
  border-bottom:1px solid var(--forest); border-radius:0; letter-spacing:.1em;
}
.btn-line:hover{ color:var(--rust); border-color:var(--rust); transform:none; box-shadow:none; }
.btn-small{ padding:11px 20px; font-size:12px; }
.btn[disabled]{ opacity:.55; cursor:default; pointer-events:none; }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background-color .4s ease, padding .4s ease, box-shadow .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(248,244,234,.94); backdrop-filter:blur(10px);
  padding:14px 0; border-color:var(--line);
  box-shadow:0 12px 30px -24px rgba(45,38,24,.5);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:48px; width:auto; transition:height .4s ease; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.is-scrolled .brand img{ height:38px; }
.brand-word{ font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:#fff; transition:color .4s ease; }
.is-scrolled .brand-word{ color:var(--ink); }
.brand-word span{ display:block; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.is-scrolled .brand-word span{ color:var(--ink-soft); }

.main-nav{ display:flex; align-items:center; gap:30px; }
.main-nav a{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  transition:color .3s ease; position:relative; padding:4px 0;
}
.is-scrolled .main-nav a{ color:var(--ink); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:currentColor; transition:right .3s ease;
}
.main-nav a:hover::after{ right:0; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; margin:5px 0; background:#fff; transition:background-color .3s ease; }
.is-scrolled .nav-toggle span{ background:var(--ink); }

/* ---------- hero ---------- */
.hero{
  position:relative; height:100dvh; min-height:560px; overflow:hidden;
  display:flex; align-items:flex-end; color:#fff;
}
.hero video, .hero-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,26,16,.15) 0%, rgba(24,21,13,.2) 45%, rgba(20,17,10,.86) 100%);
}
.hero-inner{ position:relative; z-index:2; padding-bottom:9vh; width:100%; }
.hero-eyebrow{
  font-family:'Jost',sans-serif; font-size:12.5px; letter-spacing:.3em; text-transform:uppercase;
  color:#E7DFC7; margin-bottom:22px; opacity:0; transform:translateY(14px);
}
.hero h1{
  color:#fff; font-size:clamp(2.6rem,6vw,5rem); line-height:1.02; max-width:16ch;
  margin-bottom:22px; opacity:0; transform:translateY(18px);
}
.hero p{
  max-width:46ch; font-size:1.15rem; color:#EDE7D6; margin-bottom:34px;
  opacity:0; transform:translateY(14px);
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(14px); }
.hero.is-ready .hero-eyebrow,
.hero.is-ready h1,
.hero.is-ready p,
.hero.is-ready .hero-ctas{ opacity:1; transform:translateY(0); transition:opacity 1s ease, transform 1s ease; }
.hero.is-ready h1{ transition-delay:.12s; }
.hero.is-ready p{ transition-delay:.26s; }
.hero.is-ready .hero-ctas{ transition-delay:.4s; }
.scroll-cue{
  position:absolute; right:32px; bottom:36px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#EDE7D6; opacity:.85;
}
.scroll-cue .line{ width:1px; height:52px; background:linear-gradient(180deg, currentColor, transparent); animation:pulseLine 2.4s ease-in-out infinite; }
@keyframes pulseLine{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

/* ---------- story ---------- */
.story-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; }
.story-figure{ position:relative; }
.story-figure img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.story-mosaic{
  display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:1fr 1fr;
  gap:14px; height:560px;
}
.story-mosaic img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-mosaic .m-booth{ grid-column:1; grid-row:1 / span 2; }
.story-mosaic .m-paint{ grid-column:2; grid-row:1; }
.story-mosaic .m-wood{ grid-column:2; grid-row:2; }
.story-figure .tag{
  position:absolute; left:-26px; bottom:-26px; background:var(--paper);
  padding:20px 24px; box-shadow:var(--shadow); max-width:230px;
  border-left:3px solid var(--rust);
}
.story-figure .tag strong{ display:block; font-family:'Cormorant Garamond',serif; font-size:1.4rem; }
.story-figure .tag span{ font-size:12.5px; color:var(--ink-soft); }
.story-copy p{ color:var(--ink-soft); font-size:1.05rem; }
.story-copy .signoff{ margin-top:28px; }
.signoff .name{ font-family:'Alex Brush',cursive; font-size:2.1rem; color:var(--rust); display:block; }
.signoff .role{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- collections overview ---------- */
.coll-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ink); }
.coll-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--forest-dk);
}
.coll-card:nth-child(4), .coll-card:nth-child(5){ aspect-ratio:4/5; }
.coll-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.19,1,.22,1); }
.coll-card:hover img{ transform:scale(1.07); }
.coll-card .veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,10,.05) 30%, rgba(18,15,9,.88) 100%);
}
.coll-card .body{
  position:absolute; left:0; right:0; bottom:0; padding:28px; color:#fff; z-index:2;
}
.coll-card .body h3{ color:#fff; font-size:1.5rem; margin-bottom:6px; }
.coll-card .body p{ color:#DCD4BC; font-size:.92rem; margin-bottom:14px; max-width:32ch; }
.coll-card .body a{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:4px; }
.coll-card .body a:hover{ border-color:#fff; }
.coll-card.is-coming .body span.soon{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--forest-dk); background:#E7DFC7; padding:5px 10px; margin-bottom:10px; border-radius:2px;
}

/* ---------- collection detail sections ---------- */
.collection-section .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; max-width:none; flex-wrap:wrap; }
.collection-section .section-head .txt{ max-width:640px; }
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:28px;
}
.piece{
  background:var(--paper); box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
}
.piece .frame{ aspect-ratio:4/5; overflow:hidden; background:var(--cream-2); position:relative; }
.piece .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; cursor:zoom-in; }
.piece:hover .frame img{ transform:scale(1.05); }
.piece .thumbs{ display:flex; gap:8px; padding:12px 22px 0; }
.piece .thumb{
  width:46px; height:46px; padding:0; border:1px solid var(--line); background:var(--cream-2);
  overflow:hidden; cursor:pointer; opacity:.62; transition:opacity .25s ease, border-color .25s ease;
}
.piece .thumb img{ width:100%; height:100%; object-fit:cover; }
.piece .thumb:hover{ opacity:.85; }
.piece .thumb.is-active{ opacity:1; border-color:var(--rust); }
.piece .info{ padding:16px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.piece .info h4{ font-size:1.25rem; margin:0; }
.piece .price{ font-size:13px; letter-spacing:.05em; color:var(--ink-soft); }
.piece .price.tbd{ font-style:italic; }
.piece .ship-note{ font-size:12px; color:var(--forest); margin-top:-8px; }
.piece .actions{ margin-top:auto; display:flex; }
.piece .actions .btn{ width:100%; }

.coming-panel{
  border:1px dashed var(--gold); background:var(--paper);
  padding:56px 40px; text-align:center; max-width:640px; margin:0 auto;
}
.coming-panel h3{ font-size:1.6rem; }
.coming-panel p{ color:var(--ink-soft); }

/* ---------- craft show / custom orders ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); }
.split-panel{ background:var(--paper); padding:64px 56px; }
.split-panel.dark{ background:var(--forest-dk); color:#EFE9D8; }
.split-panel.dark h3{ color:#F6F1E3; }
.split-panel.dark p{ color:#CFC8B4; }
.split-panel ul{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:14px; }
.split-panel li{ display:flex; gap:14px; align-items:flex-start; font-size:.98rem; color:var(--ink-soft); }
.split-panel.dark li{ color:#CFC8B4; }
.split-panel li .num{ font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--rust); line-height:1; }

/* ---------- contact / footer ---------- */
.contact-block{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.contact-card{ background:var(--paper); box-shadow:var(--shadow); padding:44px; }
.contact-card .row{ display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); font-size:.98rem; }
.contact-card .row:last-child{ border-bottom:none; }
.contact-card .row span:first-child{ color:var(--ink-soft); }

.site-footer{ background:var(--ink); color:#D9D2BE; padding:64px 0 28px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand img{ height:46px; margin-bottom:14px; }
.footer-brand p{ max-width:34ch; color:#B7AF98; font-size:.92rem; }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h5{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#B7AF98; margin-bottom:16px; }
.footer-col a, .footer-col span{ display:block; font-size:.92rem; color:#D9D2BE; margin-bottom:10px; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:12px; color:#8B8368; flex-wrap:wrap; gap:10px; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(18,15,9,.92); padding:5vh 5vw;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-height:90vh; max-width:90vw; box-shadow:0 40px 80px rgba(0,0,0,.5); }
.lightbox .close{
  position:absolute; top:26px; right:32px; color:#fff; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; border:1px solid rgba(255,255,255,.5); padding:9px 16px;
}
.lightbox .close:hover{ border-color:#fff; }
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.5); color:#fff; font-size:26px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color .25s ease, border-color .25s ease;
}
.lightbox .lb-nav:hover{ background:rgba(255,255,255,.2); border-color:#fff; }
.lightbox .lb-prev{ left:24px; }
.lightbox .lb-next{ right:24px; }
.lightbox .lb-count{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#EDE7D6;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
@media (max-width:640px){
  .lightbox .lb-nav{ width:42px; height:42px; font-size:20px; }
  .lightbox .lb-prev{ left:8px; } .lightbox .lb-next{ right:8px; }
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); }
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .story-grid{ grid-template-columns:1fr; gap:44px; }
  .story-figure .tag{ left:16px; bottom:-20px; }
  .story-mosaic{ height:auto; grid-template-columns:1fr 1fr; grid-template-rows:180px 180px; }
  .coll-grid{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .contact-block{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .wrap{ padding:0 20px; }
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100dvh;
    background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:100px 32px 32px; gap:22px; transform:translateX(100%); transition:transform .4s ease;
    box-shadow:-20px 0 60px rgba(0,0,0,.25);
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ color:var(--ink) !important; font-size:15px; }
  .nav-toggle{ display:block; z-index:120; }
  .coll-grid{ grid-template-columns:1fr; }
  .section{ padding:76px 0; }
  .split-panel{ padding:44px 26px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hero-eyebrow,.hero h1,.hero p,.hero-ctas{ opacity:1 !important; transform:none !important; }
}