/*
Theme Name: Thistle & Bloom
Author: Thistle & Bloom
Description: An independent flower studio theme — warm botanical editorial,
  seasonal bloom calendar, and a two-layer GPU ambient background (watercolor
  flow field + drifting petal particles).
Version: 1.0.0

DESIGN PLAN
-----------
Palette: warm cream paper, deep botanical ink-green, dusty-rose bloom accent,
  sage leaf accent, honey gold for CTAs. Distinct from every prior theme's
  palette in this project (no reused hue family).
Type: Cormorant Garamond (display, romantic thin serif) + Jost (clean
  geometric sans body, deliberate contrast against the ornate serif) +
  IBM Plex Mono (bloom-calendar data, prices).
Layout: NOT the hero->shelf->spotlight->grid->stats->quotes->notes->cta
  skeleton used repeatedly elsewhere in this project. Instead: hero ->
  "This Week's Bouquet" recipe-card feature -> horizontal Bloom Calendar
  (real month-by-month cut-flower availability data, scroll-snap strip) ->
  "The Cutting Garden" process story -> shop grid -> press/stats band ->
  testimonials -> journal -> cta -> footer.
Signature GPU layer: two passes in one canvas — (1) a slow domain-warped
  simplex flow field in blush/sage watercolor tones, (2) instanced drifting
  petal quads with soft procedural alpha falloff, swaying and rotating as
  they fall, respawning at top. Adds real motion/depth beyond a flat noise
  plane, per explicit direction to raise the visual bar past prior builds.
*/

/* ---------------------------------------------------------------------
   tokens
   ------------------------------------------------------------------ */
:root{
  --paper:#F8F1E6;
  --paper-2:#EFE3D0;
  --paper-3:#E4D5BC;
  --ink:#23301D;
  --ink-2:#54614C;
  --ink-3:#8B9382;
  --line:rgba(35,48,29,.12);
  --line-strong:rgba(35,48,29,.24);
  --bloom:#C4776E;
  --bloom-2:#E3A79D;
  --bloom-ink:#fff;
  --leaf:#3E5A40;
  --leaf-2:#7A9271;
  --gold:#B08A3E;
  --gold-2:#D4B570;

  --ff-display:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --ff-label:'Cormorant Garamond', Georgia, serif;
  --ff-body:'Jost', -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:'IBM Plex Mono', monospace;

  --sp-2:.5rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2.25rem;
  --sp-6:3.5rem; --sp-7:5.5rem; --sp-8:8rem;
  --r:3px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--sp-5)}
@media (max-width:640px){.wrap{padding:0 var(--sp-4)}}

.kicker{font-family:var(--ff-label);font-style:italic;font-size:1.05rem;color:var(--bloom);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:26px;height:1px;background:var(--bloom)}
.eyebrow{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:46ch;line-height:1.6}

#thistle-glow{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---------------------------------------------------------------------
   buttons
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-body);font-weight:500;font-size:.86rem;letter-spacing:.03em;
  padding:14px 28px;border-radius:var(--r);white-space:nowrap;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
  cursor:pointer;border:1px solid transparent;
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--leaf)}
.btn--bloom{background:var(--bloom);color:#fff}
.btn--bloom:hover{background:#B2645B}
.btn--line{border-color:var(--line-strong);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.magnetic{will-change:transform}

/* ---------------------------------------------------------------------
   responsive grid utilities — classes, never inline grid-template-columns
   (a page-wide horizontal-overflow bug on the previous build traced back
   exactly to that pattern: unshrinkable inline column tracks force the
   whole document wider than the viewport on mobile, which then knocks
   position:fixed layers and the nav toggle out of place too)
   ------------------------------------------------------------------ */
.grid-2{display:grid;grid-template-columns:1fr 1fr}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr)}
.split-even{display:grid;grid-template-columns:1fr 1fr}
.split-craft{display:grid;grid-template-columns:1fr .8fr}
.split-piece{display:grid;grid-template-columns:1.1fr .9fr}
@media (max-width:760px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .grid-4{grid-template-columns:1fr}
}
@media (max-width:900px){
  .split-even,.split-craft,.split-piece{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------
   header / nav
   ------------------------------------------------------------------ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .4s var(--ease),border-color .4s var(--ease);
  background:linear-gradient(180deg,rgba(248,241,230,.72) 0%,rgba(248,241,230,.34) 65%,rgba(248,241,230,0) 100%)}
.site-header.is-scrolled{background:rgba(248,241,230,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:88px}
.brand{font-family:var(--ff-display);font-size:1.5rem;font-weight:600;color:var(--ink);display:flex;align-items:baseline;gap:6px;text-shadow:0 1px 12px rgba(248,241,230,.5)}
.brand em{font-style:italic;color:var(--bloom)}

.nav{display:flex;align-items:center;gap:var(--sp-6)}
.nav a{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:color .3s;font-weight:500;text-shadow:0 1px 12px rgba(248,241,230,.5)}
.nav a:hover,.nav a.is-active{color:var(--bloom)}
.nav-cta{display:flex;align-items:center;gap:var(--sp-4)}
.navtoggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:50%}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{content:"";display:block;width:14px;height:1px;background:var(--ink);position:relative;transition:transform .25s}
.navtoggle span::before{position:absolute;top:-4px}
.navtoggle span::after{position:absolute;top:4px}

[data-mnav]{display:none}
@media (max-width:900px){
  .nav{display:none}
  .nav-cta .btn--line{display:none}
  .navtoggle{display:flex}
  [data-mnav]{
    display:flex;flex-direction:column;justify-content:center;
    position:fixed;inset:0;background:var(--paper);z-index:39;
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;
    padding:0 var(--sp-5);
  }
  [data-mnav].open{opacity:1;transform:translateY(0);pointer-events:auto}
  [data-mnav] a:not(.mnav-cta){display:block;padding:14px 0;font-family:var(--ff-display);font-size:2rem;border-bottom:1px solid var(--line)}
  .mnav-cta{margin-top:var(--sp-5)}
}

/* ---------------------------------------------------------------------
   sections
   ------------------------------------------------------------------ */
.sec{position:relative;padding:var(--sp-8) 0}
.sec--panel{background:var(--paper-2)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--ink p{color:rgba(248,241,230,.72)}
.sec--ink .kicker{color:var(--gold-2)}
.sec--bloom{background:radial-gradient(120% 140% at 50% 0%,var(--bloom-2),var(--bloom) 65%,#9C544C 100%);color:#fff}
.sec--bloom p{color:rgba(255,255,255,.86)}

/* ---------------------------------------------------------------------
   hero — asymmetric: photo fills right 60%, text column pinned left,
   distinct from a full-bleed hero-image-with-overlay pattern
   ------------------------------------------------------------------ */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch}
@media (max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}}
.hero-text{display:flex;flex-direction:column;justify-content:center;padding:140px var(--sp-6) var(--sp-6)}
@media (max-width:900px){.hero-text{padding:140px var(--sp-4) var(--sp-6)}}
.hero-text h1{font-size:clamp(2.6rem,5vw,4.4rem);margin-top:var(--sp-3)}
.hero-text h1 em{font-style:italic;color:var(--bloom)}
.hero-actions{margin-top:var(--sp-5);display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero-media{position:relative;overflow:hidden;min-height:420px}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(35,48,29,.16),transparent 40%)}
@media (max-width:900px){.hero-media{min-height:52vh}}

/* ---------------------------------------------------------------------
   "This Week's Bouquet" — recipe-card feature
   ------------------------------------------------------------------ */
.bouquet{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-7);align-items:center}
@media (max-width:900px){.bouquet{grid-template-columns:1fr}}
.bouquet-photo{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.bouquet-photo img{width:100%;height:100%;object-fit:cover}
.bouquet-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:var(--sp-5)}
.bouquet-stems{margin-top:var(--sp-4);border-top:1px solid var(--line)}
.bouquet-stem{display:flex;justify-content:space-between;gap:var(--sp-3);padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--ff-mono);font-size:.85rem}
.bouquet-stem b{font-family:var(--ff-body);font-weight:500;font-size:.95rem;color:var(--ink)}
.bouquet-stem span{color:var(--ink-3)}

/* ---------------------------------------------------------------------
   Bloom Calendar — horizontal scroll-snap strip, real month-by-month
   availability data per stem (functional realism, not decorative)
   ------------------------------------------------------------------ */
.calendar-scroll{display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--sp-3);margin:0 calc(var(--sp-5) * -1);padding-left:var(--sp-5);padding-right:var(--sp-5)}
.calendar-scroll::-webkit-scrollbar{height:6px}
.calendar-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.cal-card{flex:0 0 260px;scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cal-photo{aspect-ratio:1/1;overflow:hidden}
.cal-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cal-card:hover .cal-photo img{transform:scale(1.05)}
.cal-body{padding:var(--sp-4)}
.cal-months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:var(--sp-3)}
.cal-month{aspect-ratio:1;border-radius:2px;background:var(--paper-3)}
.cal-month.on{background:var(--leaf)}
.cal-legend{margin-top:10px;font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-3);display:flex;justify-content:space-between}

/* ---------------------------------------------------------------------
   The Cutting Garden — process story split
   ------------------------------------------------------------------ */
.garden-photo{position:relative;overflow:hidden;border-radius:var(--r)}
.garden-photo img{width:100%;height:100%;object-fit:cover}
.garden-badge{position:absolute;left:var(--sp-4);bottom:var(--sp-4);background:rgba(35,48,29,.86);backdrop-filter:blur(6px);color:var(--paper);padding:18px 22px;border-radius:4px}
.garden-badge b{display:block;font-family:var(--ff-display);font-size:2rem;color:var(--gold-2)}
.garden-badge span{font-size:.78rem;letter-spacing:.04em;color:rgba(248,241,230,.75)}

/* ---------------------------------------------------------------------
   shop grid (pieces / bouquets)
   ------------------------------------------------------------------ */
.shop-card figure{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3);border-radius:var(--r)}
.shop-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.shop-card:hover img{transform:scale(1.04)}
.shop-cap{padding-top:var(--sp-3);display:flex;justify-content:space-between;gap:var(--sp-3)}
.shop-cap h3{font-size:1.15rem}
.shop-price{font-family:var(--ff-mono);color:var(--bloom);white-space:nowrap}

/* ---------------------------------------------------------------------
   stats / press band
   ------------------------------------------------------------------ */
.stat b{display:block;font-family:var(--ff-display);font-size:3rem;color:var(--gold-2);font-weight:600}
.sec--ink .stat span,.stat span{display:block;margin-top:6px;font-size:.85rem;color:var(--ink-2)}
.sec--ink .stat span{color:rgba(248,241,230,.65)}

/* ---------------------------------------------------------------------
   testimonials / journal
   ------------------------------------------------------------------ */
.quote p{font-family:var(--ff-display);font-size:1.2rem;line-height:1.55;font-style:italic}
.quote .eyebrow{margin-top:var(--sp-3)}
.jr-card h3{margin-top:var(--sp-2);font-size:1.15rem}
.jr-card p{margin-top:var(--sp-2);color:var(--ink-2)}

/* ---------------------------------------------------------------------
   footer
   ------------------------------------------------------------------ */
.site-footer{background:var(--ink);color:var(--paper);padding:var(--sp-7) 0 var(--sp-5)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-5)}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-family:var(--ff-label);font-style:italic;color:var(--gold-2);font-size:1.05rem;font-weight:400;margin-bottom:var(--sp-3)}
.foot-grid a,.foot-grid .foot-line{display:block;color:rgba(248,241,230,.72);font-size:.9rem;padding:5px 0}
.foot-bottom{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid rgba(248,241,230,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);font-size:.8rem;color:rgba(248,241,230,.45)}

/* ---------------------------------------------------------------------
   scroll reveals
   ------------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}

/* ---------------------------------------------------------------------
   fine cursor
   ------------------------------------------------------------------ */
.fine-cursor{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--bloom);pointer-events:none;z-index:200;transform:translate(-50%,-50%);mix-blend-mode:multiply}
.fine-cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(196,119,110,.5);pointer-events:none;z-index:199;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  #thistle-glow{display:none}
}