/* ============================================================
   Night Garden — a florist for flowers that open after dark
   Palette: deep indigo/plum night · moon-silver · bloom-white
            with a phosphor-green glow.
   Type: Prata (display, romantic didone) + Karla (humanist text).
   ============================================================ */

:root{
  /* night */
  --night-0:#080611;   /* deepest */
  --night-1:#100a20;
  --night-2:#180f30;
  --plum:#241645;
  --plum-lo:#38235f;

  /* light */
  --moon:#e9e6f4;      /* moon silver-white */
  --silver:#b9bdd6;
  --bloom:#f6f0fb;     /* bloom white */
  --lilac:#c6a4ec;
  --phosphor:#8ff2c9;  /* night-jasmine glow */
  --phosphor-lo:#5fd7a8;
  --pollen:#f4d98c;    /* firefly gold */

  --text:#e7e4f2;
  --text-soft:#a7a3c6;
  --text-dim:#7d7aa0;
  --line:rgba(180,170,220,.14);
  --line-2:rgba(180,170,220,.24);

  --shadow: 0 30px 70px -30px rgba(4,2,14,.85);
  --glow-phos: 0 0 44px -8px rgba(143,242,201,.5);
  --glow-moon: 0 0 90px -10px rgba(233,230,244,.45);

  --maxw:1220px;
  --pad:clamp(1.15rem, 4.5vw, 3.2rem);
  --r:22px;
  --r-sm:14px;

  --f-display:"Prata", Georgia, "Times New Roman", serif;
  --f-text:"Karla", ui-sans-serif, system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--f-text);
  color:var(--text);
  background:var(--night-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.04;margin:0;letter-spacing:.005em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
em{font-style:italic;color:var(--bloom)}
b{font-weight:700}

.skip{
  position:absolute;left:12px;top:-64px;z-index:300;
  background:var(--bloom);color:var(--night-1);padding:.6rem 1.1rem;border-radius:10px;
  transition:top .2s var(--ease);font-weight:700;
}
.skip:focus{top:12px}
:focus-visible{outline:2.5px solid var(--phosphor);outline-offset:3px;border-radius:6px}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--silver);margin:0 0 1.1rem;font-weight:700;
}
.eyebrow--phos{color:var(--phosphor)}

.btn{
  --b:transparent;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:100px;font-weight:700;font-size:.94rem;
  letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
  font-family:var(--f-text);
}
.btn--bloom{
  background:linear-gradient(120deg, var(--bloom), var(--lilac) 70%, var(--phosphor));
  color:#1a0f2e;box-shadow:var(--glow-phos);
}
.btn--bloom:hover{transform:translateY(-2px);box-shadow:0 0 60px -6px rgba(143,242,201,.65)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--phosphor);color:var(--bloom);transform:translateY(-2px)}

.section-head{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--pad);
  background:linear-gradient(180deg, rgba(8,6,17,.9), rgba(8,6,17,.55) 70%, rgba(8,6,17,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--moon);font-weight:700}
.brand__mark{display:inline-flex;filter:drop-shadow(0 0 10px rgba(233,230,244,.35))}
.brand__word{font-family:var(--f-display);font-size:1.18rem;letter-spacing:.02em;color:var(--bloom)}
.nav__links{display:flex;gap:1.5rem}
.nav__links a{color:var(--text-soft);font-size:.92rem;font-weight:500;transition:color .25s var(--ease);position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--phosphor);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--bloom)}
.nav__links a:hover::after{width:100%}
.nav__cta{
  padding:.55rem 1.1rem;border-radius:100px;border:1px solid var(--line-2);
  color:var(--bloom);font-size:.88rem;font-weight:700;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-out);
}
.nav__cta:hover{border-color:var(--phosphor);box-shadow:var(--glow-phos);transform:translateY(-1px)}

/* ============ HERO ============ */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4rem,12vh,9rem) var(--pad) 4rem;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 78% 6%, rgba(56,35,95,.55) 0%, rgba(24,15,48,0) 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(143,242,201,.10) 0%, rgba(8,6,17,0) 46%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 78%);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size:3px 3px;
}
.hero__sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.moon{
  position:absolute;top:clamp(4rem,9vw,7rem);right:clamp(1.5rem,7vw,7rem);
  width:clamp(120px,18vw,220px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%, #fbf9ff 0%, #e3e0f0 42%, #b7bad4 78%, #8f92b4 100%);
  box-shadow:var(--glow-moon), inset -18px -14px 40px rgba(90,86,130,.5);
}
.moon::after{
  content:"";position:absolute;inset:0;border-radius:50%;opacity:.4;
  background:
    radial-gradient(circle at 60% 55%, transparent 60%, rgba(120,116,160,.5) 61%, transparent 66%),
    radial-gradient(circle at 40% 68%, transparent 70%, rgba(120,116,160,.35) 71%, transparent 75%);
}
.flower-mount--hero{
  position:absolute;
  left:clamp(-40px,4vw,60px);bottom:-8%;
  width:clamp(300px,42vw,560px);aspect-ratio:1;opacity:.92;
  filter:drop-shadow(0 0 50px rgba(143,242,201,.22));
}
.hero__inner{position:relative;max-width:min(760px,92vw);margin-top:auto;margin-bottom:auto}
.hero__title{
  font-size:clamp(3.6rem,15vw,10rem);line-height:.86;color:var(--bloom);
  letter-spacing:-.01em;margin:.2rem 0 1.4rem;
  text-shadow:0 0 60px rgba(198,164,236,.3);
}
.hero__title span{
  background:linear-gradient(100deg, var(--bloom) 10%, var(--lilac) 55%, var(--phosphor) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{font-size:clamp(1.02rem,1.7vw,1.28rem);color:var(--text-soft);max-width:46ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__cue{
  position:absolute;left:var(--pad);bottom:1.6rem;z-index:2;
  display:flex;align-items:center;gap:.8rem;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim);
}
.hero__cue-line{width:54px;height:1px;background:linear-gradient(90deg,var(--text-dim),transparent);position:relative;overflow:hidden}
.hero__cue-line::after{content:"";position:absolute;inset:0;width:40%;background:var(--phosphor);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-120%)}60%,100%{transform:translateX(280%)}}

/* ============ DUSK STRIP ============ */
.dusk{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--night-1), var(--night-0));
  overflow:hidden;padding:.9rem 0;
}
.dusk__track{
  display:inline-flex;align-items:center;gap:2rem;white-space:nowrap;
  font-family:var(--f-display);font-size:clamp(1.1rem,2.4vw,1.7rem);color:var(--silver);
  padding-left:2rem;
  animation:marquee 26s linear infinite;
}
.dusk__track .dot{color:var(--phosphor);font-size:.7em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ THE BLOOMS ============ */
.blooms{padding:clamp(4.5rem,10vh,8rem) 0}
.section-head h2{font-size:clamp(2.1rem,5.5vw,4rem);color:var(--bloom);margin:.2rem 0 1.1rem}
.section-lede{color:var(--text-soft);max-width:52ch;font-size:1.05rem}

.bloom-list{max-width:var(--maxw);margin:clamp(2.5rem,6vw,5rem) auto 0;padding:0 var(--pad);display:flex;flex-direction:column;gap:clamp(3rem,9vw,7rem)}
.bloom{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,5vw,4rem);
}
.bloom--b .bloom-figure{order:2}
.bloom-figure{
  position:relative;width:100%;aspect-ratio:1;max-width:520px;margin-inline:auto;
  display:grid;place-items:center;
}
.bloom-figure svg{width:100%;height:100%}

.bloom-latin{font-style:italic;color:var(--phosphor);font-size:.95rem;letter-spacing:.02em;margin-bottom:.4rem}
.bloom-name{font-size:clamp(1.9rem,4.5vw,3rem);color:var(--bloom);margin-bottom:1rem}
.bloom-desc{color:var(--text-soft);font-size:1.04rem;max-width:44ch;margin-bottom:1.6rem}
.bloom-facts{display:flex;flex-wrap:wrap;gap:.4rem 2rem;border-top:1px solid var(--line);padding-top:1.2rem}
.bloom-facts div{min-width:0}
.bloom-facts dt{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.15rem}
.bloom-facts dd{margin:0;color:var(--moon);font-family:var(--f-display);font-size:1.02rem}

/* ============ ARRANGEMENTS ============ */
.arr{
  padding:clamp(4.5rem,10vh,8rem) var(--pad);
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(56,35,95,.4), transparent 60%),
    linear-gradient(180deg, var(--night-0), var(--night-1) 60%, var(--night-0));
  border-top:1px solid var(--line);
}
.arr__head{max-width:var(--maxw);margin:0 auto 2.5rem}
.arr__head h2{font-size:clamp(2.1rem,5.5vw,4rem);color:var(--bloom);margin-top:.2rem}
.arr__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.2rem,2.5vw,1.8rem);align-items:stretch;
}
.arr-feature{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(1.8rem,4vw,3rem);border-radius:var(--r);
  border:1px solid var(--line-2);
  background:linear-gradient(160deg, rgba(36,22,69,.85), rgba(16,10,32,.9));
  display:flex;flex-direction:column;
}
.arr-feature__glow{
  position:absolute;z-index:-1;width:60%;aspect-ratio:1;right:-12%;top:-18%;border-radius:50%;
  background:radial-gradient(circle, rgba(143,242,201,.28), transparent 66%);
  filter:blur(6px);
}
.arr-tag,.bloom-latin{font-weight:600}
.arr-tag{
  align-self:flex-start;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--night-1);background:var(--phosphor);padding:.3rem .7rem;border-radius:100px;margin-bottom:1.4rem;
}
.arr-feature h3{font-size:clamp(2rem,4vw,2.9rem);color:var(--bloom);margin-bottom:.9rem}
.arr-desc{color:var(--text-soft);margin-bottom:1.4rem}
.arr-notes{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.arr-notes li{position:relative;padding-left:1.4rem;color:var(--silver);font-size:.95rem}
.arr-notes li::before{content:"✦";position:absolute;left:0;color:var(--phosphor);font-size:.8em;top:.15em}
.arr-price{margin-top:auto;font-family:var(--f-display);color:var(--moon);font-size:1.1rem}
.arr-price b{color:var(--bloom);font-size:1.3rem}

.arr-col{display:flex;flex-direction:column;gap:clamp(1.2rem,2.5vw,1.8rem)}
.arr-card{
  padding:clamp(1.3rem,2.6vw,1.8rem);border-radius:var(--r-sm);border:1px solid var(--line);
  background:rgba(24,15,48,.55);flex:1;
  transition:border-color .3s var(--ease), transform .4s var(--ease-out), background .3s var(--ease);
}
.arr-card:hover{border-color:var(--line-2);transform:translateY(-3px);background:rgba(36,22,69,.6)}
.arr-card h3{font-size:1.5rem;color:var(--bloom);margin-bottom:.5rem}
.arr-card .arr-desc{margin-bottom:.9rem;font-size:.96rem}
.arr-card--dark{
  background:linear-gradient(150deg, rgba(20,8,34,.9), rgba(10,4,20,.95));
  border-color:rgba(198,164,236,.22);
}
.arr-card--dark h3{background:linear-gradient(100deg,var(--lilac),var(--bloom));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ THE RITUAL ============ */
.ritual{
  padding:clamp(4.5rem,10vh,8rem) var(--pad);
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:start;
}
.ritual__text h2{font-size:clamp(1.9rem,4.2vw,3.1rem);color:var(--bloom);margin:.2rem 0 1.4rem;max-width:16ch}
.ritual__text p{color:var(--text-soft);margin-bottom:1.2rem;font-size:1.06rem;max-width:56ch}
.ritual__sig{font-family:var(--f-display);font-style:italic;color:var(--silver)!important;font-size:1.1rem}
.scent{
  position:sticky;top:96px;
  padding:clamp(1.6rem,3vw,2.2rem);border-radius:var(--r);
  border:1px solid var(--line-2);
  background:linear-gradient(160deg, rgba(24,15,48,.8), rgba(8,6,17,.85));
  box-shadow:var(--shadow);
}
.scent h3{font-size:1.5rem;color:var(--bloom);margin-bottom:1.4rem}
.scent__pyramid{list-style:none;margin:0;padding:0;counter-reset:none;display:flex;flex-direction:column;gap:1.1rem}
.scent__row{display:grid;gap:.15rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.scent__row:last-child{border-bottom:0;padding-bottom:0}
.scent__stage{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--phosphor);font-weight:700}
.scent__note{font-family:var(--f-display);font-size:1.15rem;color:var(--bloom)}
.scent__time{font-size:.88rem;color:var(--text-dim);font-style:italic}

/* ============ VISIT / ORDER ============ */
.visit{
  padding:clamp(4.5rem,10vh,8rem) var(--pad);
  border-top:1px solid var(--line);
  background:
    radial-gradient(80% 60% at 15% 100%, rgba(143,242,201,.10), transparent 60%),
    linear-gradient(180deg, var(--night-0), var(--night-1));
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start;
  max-width:var(--maxw);margin:0 auto;
}
.visit__hours h2{font-size:clamp(2.6rem,7vw,5rem);color:var(--bloom);margin:.2rem 0 1.2rem;line-height:.92}
.visit__lede{color:var(--text-soft);max-width:40ch;margin-bottom:2rem}
.hours{display:flex;flex-direction:column;gap:.1rem;margin:0 0 2rem}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.hours dt{color:var(--silver);font-weight:600}
.hours dd{margin:0;color:var(--moon);font-family:var(--f-display)}
.hours__closed dt,.hours__closed dd{color:var(--text-dim);font-style:italic}
.visit__addr{font-style:normal;color:var(--text-soft);line-height:1.8;font-size:.98rem}
.visit__addr a{color:var(--phosphor);border-bottom:1px solid transparent;transition:border-color .25s}
.visit__addr a:hover{border-color:var(--phosphor)}

.order{
  padding:clamp(1.6rem,3.5vw,2.6rem);border-radius:var(--r);
  border:1px solid var(--line-2);
  background:linear-gradient(160deg, rgba(36,22,69,.55), rgba(8,6,17,.75));
  box-shadow:var(--shadow);
}
.order h3{font-size:1.7rem;color:var(--bloom);margin-bottom:.4rem}
.order__intro{color:var(--text-soft);font-size:.96rem;margin-bottom:1.4rem}
.field{margin-bottom:1rem;display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:.75rem .9rem;border-radius:12px;
  background:rgba(8,6,17,.6);border:1px solid var(--line-2);color:var(--text);
  font-family:var(--f-text);font-size:.98rem;transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{resize:vertical;min-height:70px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--phosphor);box-shadow:0 0 0 3px rgba(143,242,201,.16);
}
.order .btn{width:100%;justify-content:center;margin-top:.4rem}
.order__note{margin-top:1rem;font-size:.94rem;min-height:1.2em;color:var(--phosphor)}

/* ============ FOOTER ============ */
.foot{
  border-top:1px solid var(--line);
  padding:clamp(3rem,7vw,5rem) var(--pad) 2rem;
  background:linear-gradient(180deg, var(--night-1), var(--night-0));
}
.foot__top{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem 2rem;align-items:center;
}
.brand--foot .brand__word{font-size:1.05rem}
.foot__line{color:var(--text-dim);font-size:.92rem;line-height:1.7}
.foot__nav{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:flex-end}
.foot__nav a{color:var(--text-soft);font-size:.9rem;transition:color .25s}
.foot__nav a:hover{color:var(--phosphor)}
.foot__base{
  max-width:var(--maxw);margin:2.4rem auto 0;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--text-dim);font-size:.82rem;
}
.foot__moon{color:var(--silver)}

/* ============ SVG FLOWERS (built in main.js) ============ */
.bloom-figure{--open:0}            /* closed until scroll opens it */
.flower-mount--hero{--open:.82}
.flower{width:100%;height:100%;overflow:visible;display:block}
@media (prefers-reduced-motion:no-preference){
  .flower-mount--hero .flower{animation:sway 15s ease-in-out infinite;transform-origin:50% 62%}
}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.fl-halo{
  transform-box:view-box;transform-origin:100px 100px;
  transform:scale(calc(.45 + .55 * var(--open,1)));
  opacity:calc(.06 + .5 * var(--open,1));
  transition:transform .2s linear, opacity .2s linear;
}
.petal{
  transform-box:view-box;transform-origin:100px 100px;
  transform:
    rotate(var(--ang,0deg))
    rotate(calc((1 - var(--open,1)) * var(--twist,26deg)))
    scale(calc(.26 + .74 * var(--open,1)))
    scaleX(var(--pw,1));
  opacity:calc(.4 + .6 * var(--open,1));
  transition:transform .18s linear, opacity .18s linear;
  will-change:transform;
}
.petal--inner{--twist:-18deg}
.fl-core{
  transform-box:view-box;transform-origin:100px 100px;
  transform:scale(calc(.28 + .72 * var(--open,1)));
  opacity:calc(.25 + .75 * var(--open,1));
  transition:transform .18s linear, opacity .18s linear;
}
.fl-stamen{opacity:calc(-.35 + 1.35 * var(--open,1));transition:opacity .2s linear}

/* ============ GUIDE ============ */
.guide-hero{
  max-width:860px;margin:0 auto;padding:clamp(3rem,9vw,6rem) var(--pad) 2rem;
}
.guide-back{color:var(--phosphor);font-size:.86rem;font-weight:600;display:inline-block;margin-bottom:1.4rem}
.guide-back:hover{text-decoration:underline}
.guide-hero h1{font-size:clamp(2.4rem,7vw,4.4rem);color:var(--bloom);margin-bottom:1.2rem;line-height:.98}
.guide-hero > p{color:var(--text-soft);font-size:1.1rem;max-width:60ch}
.guide-toc{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.guide-toc a{
  padding:.4rem .9rem;border-radius:100px;border:1px solid var(--line-2);
  font-size:.84rem;color:var(--text-soft);transition:border-color .25s,color .25s;
}
.guide-toc a:hover{border-color:var(--phosphor);color:var(--bloom)}
.guide{max-width:820px;margin:0 auto;padding:2rem var(--pad) 5rem}
.guide section{padding:2.4rem 0;border-top:1px solid var(--line)}
.guide h2{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--bloom);margin-bottom:1rem}
.guide h3{font-size:1.25rem;color:var(--moon);margin:1.6rem 0 .6rem}
.guide p{color:var(--text-soft);margin-bottom:1rem;font-size:1.04rem}
.guide ul,.guide ol{color:var(--text-soft);margin:0 0 1rem;padding-left:1.2rem;font-size:1.02rem}
.guide li{margin-bottom:.5rem}
.guide strong{color:var(--bloom);font-weight:700}
.guide em{color:var(--phosphor);font-style:italic}
.guide pre{
  background:linear-gradient(160deg,rgba(24,15,48,.7),rgba(8,6,17,.85));
  border:1px solid var(--line-2);border-radius:14px;
  padding:1.1rem 1.2rem;overflow-x:auto;margin:0 0 1.4rem;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.82rem;line-height:1.65;color:#d7d3ee;
}
.guide pre .c{color:var(--text-dim)}
.guide pre .k{color:var(--phosphor)}
.guide pre .s{color:var(--lilac)}
.guide-callout{
  background:rgba(143,242,201,.07);border-left:2px solid var(--phosphor);
  padding:1rem 1.2rem;border-radius:0 12px 12px 0;margin:0 0 1.4rem;
}
.guide-callout p{margin:0;color:var(--silver)}
.score-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.96rem}
.score-table td{padding:.55rem .4rem;border-bottom:1px solid var(--line)}
.score-table td:last-child{text-align:right;font-family:var(--f-display);color:var(--phosphor)}
.score-table tr:last-child td{border-bottom:0;color:var(--bloom);font-weight:700}
.pass{margin-bottom:1.6rem}
.pass b{color:var(--bloom)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .nav__links{display:none}
  .bloom{grid-template-columns:1fr;gap:1.5rem}
  .bloom--b .bloom-figure{order:0}
  .bloom-figure{max-width:380px}
  .arr__grid{grid-template-columns:1fr}
  .ritual{grid-template-columns:1fr}
  .scent{position:static}
  .visit{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr;text-align:left}
  .foot__nav{justify-content:flex-start}
}
@media (max-width:560px){
  .nav__cta{display:none}
  .hero__cue{display:none}
  .bloom-facts{gap:.4rem 1.2rem}
  .foot__base{flex-direction:column;gap:.5rem}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .dusk__track{animation:none}
  .hero__cue-line::after{animation:none;transform:translateX(0)}
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto}
}