/* ============================================================
   SAYO — Botanical Watercolour · shared design system
   Type:   Cormorant Garamond (display) · Jost (humanist sans)
   Palette: parchment / wet-paper cream / soft sage / dusty blush
            / warm ochre / deep botanical green · charcoal text
   ============================================================ */

:root{
  --parchment:   #F8F4EC;
  --cream:       #F1E8D8;
  --cream-deep:  #EADFCC;
  --sage:        #A9B89B;
  --sage-deep:   #889878;
  --blush:       #E0C3B9;
  --blush-deep:  #D2A99C;
  --ochre:       #CFA15B;
  --green:       #3E4B37;
  --green-deep:  #303B2C;
  --charcoal:    #3B3833;
  --muted:       #726B5F;
  --hairline:    rgba(59,56,51,0.14);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1240px;
  --gut:  clamp(1.4rem, 5vw, 5rem);
  --sec:  clamp(5rem, 11vw, 10rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--parchment);
  color:var(--charcoal);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* Task 6: page-load fade-in */
  animation: pageFadeIn 300ms ease forwards;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Task 6: base hover transition for bare links */
a, button{ transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; }

/* Task 6: page load fade-in */
@keyframes pageFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Paper grain over everything */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9000;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:0.05;
  mix-blend-mode:multiply;
}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--sans); font-weight:400; font-size:0.72rem;
  letter-spacing:0.34em; text-transform:uppercase; color:var(--muted);
  margin:0 0 1.4rem;
}
h1,h2,h3{ font-family:var(--serif); font-weight:300; margin:0; line-height:1.08; letter-spacing:0.01em; }
.display{ font-size:clamp(2.6rem,7vw,5rem); }
h2{ font-size:clamp(2.1rem,5vw,3.5rem); }
h3{ font-size:clamp(1.5rem,3vw,2rem); }
p{ margin:0 0 1.2rem; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted); font-weight:300; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.narrow{ max-width:780px; }

/* text-link CTA */
.tlink{
  display:inline-flex; align-items:center; gap:0.55em; white-space:nowrap;
  font-family:var(--sans); font-weight:400; font-size:0.92rem;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--charcoal);
  position:relative; padding-bottom:0.35rem; cursor:pointer;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0.32); transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.7,.2,1); opacity:.6;
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arw{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.tlink:hover .arw{ transform:translateX(5px); }
.tlink--sm{ font-size:0.8rem; }

/* ============================================================
   WATERCOLOUR WASH ENGINE
   ============================================================ */
.bloom{
  position:absolute; border-radius:50%;
  filter:url(#wc) blur(14px);
  opacity:.5; pointer-events:none; mix-blend-mode:multiply;
  will-change:transform;
}
.b-sage  { background:radial-gradient(circle at 40% 40%, var(--sage)  0%, transparent 68%); }
.b-blush { background:radial-gradient(circle at 40% 40%, var(--blush) 0%, transparent 68%); }
.b-ochre { background:radial-gradient(circle at 40% 40%, var(--ochre) 0%, transparent 70%); }
.b-green { background:radial-gradient(circle at 40% 40%, var(--green) 0%, transparent 72%); }

/* soft wash divider between sections */
.divider{ position:relative; height:120px; }
.divider .bloom{ opacity:.42; }

@keyframes breathe{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(0,-2%,0) scale(1.07); }
}

/* ============================================================
   PLACEHOLDERS (labelled — real photography drops in later)
   ============================================================ */
.ph{
  position:relative; overflow:hidden; border-radius:2px;
  background-color:var(--cream);
  background-image:repeating-linear-gradient(135deg, transparent 0 16px, rgba(59,56,51,0.022) 16px 17px);
}
.ph::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 30% 20%, rgba(169,184,155,.42), transparent 60%),
             radial-gradient(120% 120% at 80% 90%, rgba(224,195,185,.40), transparent 60%);
  mix-blend-mode:multiply;
}
.ph[data-tone="sage"]::before { background:radial-gradient(130% 130% at 30% 25%, rgba(136,152,120,.5), transparent 62%); }
.ph[data-tone="blush"]::before{ background:radial-gradient(130% 130% at 35% 30%, rgba(210,169,156,.55), transparent 62%); }
.ph[data-tone="ochre"]::before{ background:radial-gradient(130% 130% at 30% 30%, rgba(207,161,91,.5), transparent 64%); }
.ph[data-tone="green"]::before{ background:radial-gradient(130% 130% at 30% 30%, rgba(62,75,55,.45), transparent 66%); }
.ph .tag{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  padding:0 1.6rem; margin:0; text-align:center;
  font-family:"SFMono-Regular", ui-monospace, "Menlo", monospace;
  font-size:0.66rem; line-height:1.6; letter-spacing:0.06em;
  text-transform:uppercase; color:rgba(59,56,51,.4);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:1.1rem var(--gut);
  background:rgba(248,244,236,0); transition:background .6s ease, box-shadow .6s ease, padding .6s ease;
}
.nav.scrolled{
  background:rgba(248,244,236,.82); backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 1px 0 var(--hairline); padding-block:0.85rem;
}
/* opaque variant for inner pages that start at top of content */
.nav.solid{ background:rgba(248,244,236,.9); backdrop-filter:blur(10px) saturate(1.1); }
.nav-links{ display:flex; gap:2.1rem; align-items:center; }
.nav-links.right{ justify-content:flex-end; }
.nav-link{
  font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; white-space:nowrap;
  color:var(--charcoal); font-weight:400; position:relative; padding:0.3rem 0;
  transition:color .4s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--sage-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover{ color:var(--sage-deep); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-link.is-active{ color:var(--sage-deep); }
.nav-link.is-active::after{ transform:scaleX(1); }
.wordmark{
  font-family:var(--serif); font-weight:300; text-align:center; white-space:nowrap;
  font-size:1.35rem; letter-spacing:0.62em; padding-left:0.62em; color:var(--charcoal);
  transition:color .4s ease;
}
.wordmark:hover{ color:var(--sage-deep); }
.menu-btn{
  display:none; background:none; border:0; cursor:pointer; padding:0.4rem;
  flex-direction:column; gap:5px; width:30px;
}
.menu-btn span{ height:1px; width:24px; background:var(--charcoal); transition:transform .4s ease, opacity .4s ease; }

/* Task 6: drawer smooth slide-in */
.drawer{ position:fixed; inset:0; z-index:2000; visibility:hidden; }
.drawer .scrim{
  position:absolute; inset:0; background:rgba(48,59,44,.28); opacity:0;
  transition:opacity .5s ease; backdrop-filter:blur(2px);
}
.drawer .panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,420px);
  background:var(--parchment); transform:translateX(100%);
  transition:transform .48s cubic-bezier(.4,.0,.2,1);
  display:flex; flex-direction:column; padding:2rem var(--gut) 3rem;
  box-shadow:-20px 0 60px rgba(48,59,44,.12); overflow:hidden;
}
.drawer .panel .bloom{ opacity:.3; }
.drawer.open{ visibility:visible; }
.drawer.open .scrim{ opacity:1; }
.drawer.open .panel{ transform:translateX(0); }
.drawer .close{ align-self:flex-end; background:none; border:0; font-family:var(--serif); font-size:2rem; line-height:1; color:var(--muted); cursor:pointer; transition:color 150ms ease; }
.drawer .close:hover{ color:var(--charcoal); }
.drawer nav{ display:flex; flex-direction:column; gap:0.4rem; margin-top:2.4rem; position:relative; z-index:2; }
.drawer nav a{
  font-family:var(--serif); font-size:2rem; font-weight:300; color:var(--charcoal);
  letter-spacing:0.02em; padding:0.45rem 0; border-bottom:1px solid var(--hairline);
  transition:color .3s ease, padding-left .3s ease;
}
.drawer nav a:hover{ color:var(--sage-deep); padding-left:0.5rem; }
.drawer .d-foot{ margin-top:auto; position:relative; z-index:2; color:var(--muted); font-size:0.82rem; letter-spacing:0.04em; }

/* ============================================================
   HERO (home) + PAGE HERO (inner pages)
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:7rem var(--gut) 4rem;
}
.hero .ph{ position:absolute; inset:0; border-radius:0; }
.hero .ph::before{
  background:
    radial-gradient(80% 60% at 50% 18%, rgba(241,232,216,.5), transparent 70%),
    radial-gradient(70% 60% at 20% 80%, rgba(169,184,155,.55), transparent 65%),
    radial-gradient(70% 60% at 85% 75%, rgba(224,195,185,.5), transparent 65%),
    radial-gradient(60% 50% at 70% 25%, rgba(207,161,91,.32), transparent 70%);
}
.hero .hero-bloom{ position:absolute; inset:0; overflow:hidden; }
.hero .overlay{ position:absolute; inset:0; background:rgba(248,244,236,.30); }
.hero .ph .tag{ top:auto; bottom:1.5rem; right:1.5rem; left:auto; text-align:right; transform:none; max-width:60%; margin-left:auto; }
.hero-inner{ position:relative; z-index:5; max-width:860px; }
.hero h1{
  font-size:clamp(2.4rem, 12vw, 7rem); font-weight:300; white-space:nowrap;
  letter-spacing:0.3em; padding-left:0.3em; color:var(--charcoal);
}
.hero .sub{
  margin:1.8rem auto 2.6rem; max-width:34ch;
  font-size:clamp(0.98rem,1.5vw,1.15rem); color:var(--charcoal); font-weight:300;
  letter-spacing:0.02em; line-height:1.7;
}
.hero-ctas{ display:flex; gap:2rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.hero-ctas .dot{ width:4px; height:4px; border-radius:50%; background:var(--sage-deep); opacity:.6; }
.scroll-cue{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:5;
  font-family:var(--sans); font-size:0.64rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:0.6rem;
}
.scroll-cue .line{ width:1px; height:42px; background:linear-gradient(var(--muted),transparent); animation:cue 2.6s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }

/* page hero — shorter atmospheric header for inner pages */
.phero{
  position:relative; min-height:74svh; display:flex; align-items:flex-end;
  overflow:hidden; padding:9rem var(--gut) clamp(3rem,6vw,5rem);
}
.phero .ph{ position:absolute; inset:0; border-radius:0; }
.phero .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(248,244,236,.2) 0%, rgba(248,244,236,.15) 55%, rgba(248,244,236,.5) 100%); }
.phero-inner{ position:relative; z-index:5; max-width:var(--maxw); margin:0 auto; width:100%; padding-inline:0; }
.phero h1{ font-size:clamp(2.8rem,8vw,6rem); font-weight:300; max-width:16ch; }
.phero .sub{ margin-top:1.4rem; max-width:46ch; font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--charcoal); }
.phero .ph .tag{ top:38%; bottom:auto; left:0; right:0; text-align:center; transform:none; max-width:70%; margin:0 auto; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{ position:relative; }
.sec{ padding-block:var(--sec); }
.sec--tight{ padding-block:clamp(3rem,7vw,6rem); }
.sec-head{ max-width:640px; }
.center{ text-align:center; margin-inline:auto; }
.on-cream{ background:var(--cream); }

/* ---- home: two ways ---- */
.two{ display:grid; grid-template-columns:1fr; gap:clamp(3rem,6vw,5rem); }
.two .col .ph{ aspect-ratio:4/5; margin-bottom:1.8rem; }
.two .col h3{ margin-bottom:0.7rem; }
.two .col p{ color:var(--muted); max-width:42ch; }

/* ---- home: featured rail ---- */
.rail-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.rail{
  display:flex; gap:clamp(1.2rem,3vw,2.4rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0.5rem var(--gut) 2rem; margin-inline:calc(-1 * var(--gut)); scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.work{ scroll-snap-align:start; flex:0 0 auto; width:min(74vw,360px); }
.work .ph{ width:100%; margin-bottom:1.1rem; }
.work .ttl{ font-family:var(--serif); font-size:1.4rem; line-height:1.2; margin-bottom:0.2rem; }
.work .reg{ font-size:0.82rem; letter-spacing:0.06em; color:var(--muted); }
.work:nth-child(1) .ph{ aspect-ratio:3/4; }
.work:nth-child(2) .ph{ aspect-ratio:4/5; margin-top:2.4rem; }
.work:nth-child(3) .ph{ aspect-ratio:1/1; }
.work:nth-child(4) .ph{ aspect-ratio:3/4; margin-top:1.4rem; }
.rail-end{ flex:0 0 auto; width:min(60vw,240px); display:flex; align-items:center; }

/* ---- workshop teaser / split feature ---- */
.workshop{ background:var(--cream); position:relative; overflow:hidden; }
.feature .grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.feature .ph{ aspect-ratio:16/11; }
.meta{ display:flex; gap:2.4rem; flex-wrap:wrap; margin:1.8rem 0 2.6rem; }
.meta .k{ font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:0.35rem; }
.meta .v{ font-family:var(--serif); font-size:1.35rem; white-space:nowrap; }

/* ---- print hook ---- */
.prints .row{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem); align-items:center; }
.prints .thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.prints .thumbs .ph{ aspect-ratio:3/4; }
.prints .copy .big{ font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.25; margin-bottom:1.6rem; }

/* ---- partner strip (dark) ---- */
.partner{ background:var(--green); color:var(--cream); position:relative; overflow:hidden; text-align:center; }
.partner .bloom{ opacity:.32; mix-blend-mode:screen; }
.partner h2{ color:var(--cream); }
.partner p{ color:rgba(241,232,216,.78); max-width:46ch; margin-inline:auto; }
.partner .tlink{ color:var(--cream); }
.partner .tlink::after{ background:var(--cream); }

/* ---- instagram ---- */
.ig-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(0.5rem,1.4vw,1rem); }
.ig-grid .ph{ aspect-ratio:1/1; cursor:pointer; }
.ig-grid .ph::after{ content:""; position:absolute; inset:0; background:rgba(62,75,55,0); transition:background .6s ease; }
.ig-grid .ph:hover::after{ background:rgba(62,75,55,.16); }
.ig-head{ text-align:center; margin-bottom:2.6rem; }
.ig-handle{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem); color:var(--charcoal); display:inline-flex; gap:0.4rem; align-items:center; transition:color .4s ease; }
.ig-handle:hover{ color:var(--sage-deep); }
.ig-mark{ display:inline-block; width:0.92em; height:0.92em; flex:0 0 auto; border:1.5px solid currentColor; border-radius:28%; position:relative; }
.ig-mark::before{ content:""; position:absolute; inset:26%; border:1.5px solid currentColor; border-radius:50%; box-sizing:border-box; }
.ig-mark::after{ content:""; position:absolute; top:15%; right:15%; width:2.5px; height:2.5px; border-radius:50%; background:currentColor; }

/* ============================================================
   FORMS
   ============================================================ */
.form{ display:grid; gap:1.6rem; }
.form .row2{ display:grid; grid-template-columns:1fr; gap:1.6rem; }
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field label{ font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-weight:300; font-size:1rem; color:var(--charcoal);
  background:transparent; border:0; border-bottom:1px solid var(--hairline);
  padding:0.6rem 0.1rem; transition:border-color .4s ease;
}
.field textarea{ resize:vertical; min-height:90px; line-height:1.6; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(114,107,95,.5); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--sage-deep); }
.field select{ appearance:none; cursor:pointer; }
.btn{
  justify-self:start; font-family:var(--sans); font-weight:400; font-size:0.82rem; white-space:nowrap;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--parchment);
  background:var(--green); border:0; border-radius:999px; padding:1rem 2.4rem;
  cursor:pointer; transition:background .3s ease, transform .3s ease; text-align:center;
}
.btn:hover{ background:var(--green-deep); transform:translateY(-1px); }
.btn[disabled]{ opacity:.55; cursor:default; transform:none; }
.btn--ghost{ background:transparent; color:var(--charcoal); border:1px solid var(--hairline); }
.btn--ghost:hover{ background:rgba(59,56,51,.04); border-color:var(--sage-deep); }
.form-note{ font-size:0.84rem; color:var(--muted); }
.form-success{
  display:none; align-items:center; gap:0.8rem; padding:1.4rem 1.6rem;
  background:rgba(136,152,120,.14); border-left:2px solid var(--sage-deep);
  font-family:var(--serif); font-size:1.3rem; color:var(--charcoal); border-radius:2px;
}
.form.sent .form-fields{ display:none; }
.form.sent .form-success{ display:flex; }

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.acc{ border-top:1px solid var(--hairline); }
.acc-item{ border-bottom:1px solid var(--hairline); }
.acc-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:1.7rem 0; font-family:var(--serif); font-size:clamp(1.2rem,2.4vw,1.6rem);
  font-weight:300; color:var(--charcoal); line-height:1.2;
}
.acc-sign{ flex:0 0 auto; width:22px; height:22px; position:relative; }
.acc-sign::before, .acc-sign::after{
  content:""; position:absolute; background:var(--sage-deep); transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.acc-sign::before{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.acc-sign::after{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.acc-item.open .acc-sign::after{ transform:translateX(-50%) scaleY(0); }
.acc-body{ overflow:hidden; max-height:0; transition:max-height .55s cubic-bezier(.4,0,.2,1); }
.acc-body .acc-inner{ padding:0 0 1.8rem; color:var(--muted); max-width:62ch; }

/* ============================================================
   CARDS / GRIDS (gallery · shop · past batches · partners)
   ============================================================ */
.filters{ display:flex; flex-wrap:wrap; gap:0.7rem 1.6rem; justify-content:center; margin-bottom:clamp(2.5rem,5vw,4rem); }
.filter{
  font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
  background:none; border:0; cursor:pointer; padding:0.4rem 0; position:relative; transition:color .3s ease;
}
.filter::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--sage-deep); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.filter:hover{ color:var(--charcoal); }
.filter.active{ color:var(--charcoal); }
.filter.active::after{ transform:scaleX(1); }

/* masonry via CSS columns */
.masonry{ column-count:1; column-gap:clamp(1rem,2.4vw,1.8rem); }
.masonry .m-item{ break-inside:avoid; margin-bottom:clamp(1rem,2.4vw,1.8rem); position:relative; }
.m-item .ph{ width:100%; }
.m-item.r34 .ph{ aspect-ratio:3/4; }
.m-item.r45 .ph{ aspect-ratio:4/5; }
.m-item.r11 .ph{ aspect-ratio:1/1; }
.m-item.r57 .ph{ aspect-ratio:5/7; }
.m-cap{ position:absolute; inset:auto 0 0 0; padding:1.4rem 1.1rem 1rem;
  background:linear-gradient(transparent, rgba(48,59,44,.5)); color:var(--parchment);
  opacity:0; transition:opacity .5s ease; }
.m-item:hover .m-cap{ opacity:1; }
.m-cap .t{ font-family:var(--serif); font-size:1.25rem; line-height:1.15; }
.m-cap .r{ font-size:0.76rem; letter-spacing:0.05em; opacity:.85; }
.avail{ position:absolute; top:0.9rem; left:0.9rem; display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--parchment);
  background:rgba(48,59,44,.55); padding:0.4rem 0.7rem; border-radius:999px; backdrop-filter:blur(3px); }
.avail .d{ width:6px; height:6px; border-radius:50%; background:var(--sage); }

/* product / batch cards */
.cards{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3rem); }
.cards.c3{ grid-template-columns:1fr; }
.card .ph{ width:100%; aspect-ratio:3/4; margin-bottom:1.2rem; }
.card .ph.sq{ aspect-ratio:1/1; }
.card .ph.land{ aspect-ratio:4/3; }
.card .kicker{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:0.5rem; }
.card h3{ margin-bottom:0.4rem; }
.card .ttl{ font-family:var(--serif); font-size:1.5rem; line-height:1.2; margin-bottom:0.25rem; }
.card .sub{ color:var(--muted); font-size:0.92rem; margin-bottom:0.9rem; }
.card .price{ font-family:var(--serif); font-size:1.5rem; margin-bottom:1rem; }
.card .meta-line{ font-size:0.84rem; color:var(--muted); letter-spacing:0.05em; margin-bottom:1rem; }

/* steps strip */
.steps{ display:grid; grid-template-columns:1fr; gap:2rem; counter-reset:s; }
.step{ position:relative; padding-left:3.4rem; }
.step::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:-0.2rem;
  font-family:var(--serif); font-size:2rem; color:var(--sage-deep); line-height:1; }
.step h4{ font-family:var(--serif); font-weight:400; font-size:1.25rem; margin:0 0 0.3rem; }
.step p{ color:var(--muted); font-size:0.95rem; margin:0; }

/* icon-feature columns (partner) */
.feat3{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3rem); }
.feat3 .f .gly{ width:46px; height:46px; margin-bottom:1.1rem; position:relative; }
.feat3 .f h4{ font-family:var(--serif); font-weight:400; font-size:1.4rem; margin:0 0 0.5rem; }
.feat3 .f p{ color:var(--muted); font-size:0.95rem; margin:0; }

/* simple shape glyphs */
.gly{ color:var(--sage-deep); }
.gly.leaf{ border:1.5px solid currentColor; border-radius:0 50% 0 50%; }
.gly.brush{ border:1.5px solid currentColor; border-radius:50% 50% 8px 8px; }
.gly.circle{ border:1.5px solid currentColor; border-radius:50%; }
.gly.diamond{ border:1.5px solid currentColor; transform:rotate(45deg); border-radius:4px; width:36px; height:36px; }

/* checklist */
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; max-width:60ch; }
.checklist li{ position:relative; padding-left:1.8rem; color:var(--charcoal); }
.checklist li::before{ content:""; position:absolute; left:0; top:0.7em; width:7px; height:7px; border-radius:50%; background:var(--sage-deep); }

/* logo strip (collaborations) */
.logos{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem); align-items:stretch; }
.logo-item{ flex:1 1 220px; }
.logo-item .lbox{ height:74px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); border-radius:3px; margin-bottom:0.9rem;
  font-family:var(--serif); font-size:1.2rem; letter-spacing:0.08em; color:var(--muted); text-align:center; padding:0 1rem; }
.logo-item .role{ font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--sage-deep); }

/* pull quote */
.pull{ position:relative; text-align:center; overflow:hidden; }
.pull .bloom{ opacity:.34; }
.pull blockquote{ position:relative; z-index:2; margin:0 auto; max-width:18ch;
  font-family:var(--serif); font-weight:300; font-size:clamp(2rem,5.5vw,3.6rem); line-height:1.2; color:var(--charcoal); }
.pull cite{ position:relative; z-index:2; display:block; margin-top:2rem; font-style:normal;
  font-size:0.74rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); }

/* prose */
.prose p{ font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.85; color:var(--charcoal); max-width:60ch; }
.prose p + p{ margin-top:1.4rem; }
.lead-in::first-letter{ font-family:var(--serif); font-size:3.4em; line-height:0.8; float:left; padding:0.1em 0.12em 0 0; color:var(--sage-deep); }

/* note line */
.note{ font-size:0.86rem; color:var(--muted); }
.subtle-link{ color:var(--sage-deep); border-bottom:1px solid currentColor; padding-bottom:1px; transition:color 150ms ease; }
.subtle-link:hover{ color:var(--green); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding-block:clamp(4rem,8vw,6rem) 3rem; text-align:center; position:relative; }
.footer .wm{ font-family:var(--serif); font-weight:300; font-size:1.6rem; letter-spacing:0.6em; padding-left:0.6em; margin-bottom:2rem; }
.footer nav{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem; justify-content:center; margin-bottom:2.4rem; }
.footer nav a{ font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; transition:color .3s ease; }
.footer nav a:hover{ color:var(--charcoal); }
.footer .contact{ color:var(--muted); font-size:0.9rem; line-height:1.9; letter-spacing:0.02em; }
.footer .contact a:hover{ color:var(--charcoal); }
.footer .ig-row{ margin:1.6rem 0 2.2rem; }
.footer .ig-row a{ color:var(--charcoal); font-size:1.4rem; transition:color .3s ease; }
.footer .ig-row a:hover{ color:var(--sage-deep); }
.footer .copy{ font-size:0.72rem; letter-spacing:0.1em; color:var(--muted); margin-top:2.4rem; opacity:.8; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; filter:blur(12px); transform:translateY(22px) scale(.992); transition:opacity 1.25s ease, filter 1.4s ease, transform 1.25s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; filter:blur(0); transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; filter:none; transform:none; transition:none; }
  .bloom, .scroll-cue .line{ animation:none !important; }
  html{ scroll-behavior:auto; }
  body{ animation:none; }
}

/* ============================================================
   RESPONSIVE — scale up to desktop
   ============================================================ */
@media (min-width:680px){
  .form .row2{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .feat3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:760px){
  .two{ grid-template-columns:1fr 1fr; }
  .feature .grid{ grid-template-columns:1.05fr 0.95fr; }
  .feature .grid.flip > .ph{ order:2; }
  .prints .row{ grid-template-columns:1fr 1fr; }
  .cards.c2{ grid-template-columns:1fr 1fr; }
  .masonry{ column-count:2; }
}
@media (min-width:980px){
  .ig-grid{ grid-template-columns:repeat(6,1fr); }
  .cards.c3{ grid-template-columns:repeat(3,1fr); }
  .masonry{ column-count:3; }
}
@media (max-width:880px){
  .nav-links{ display:none; }
  .nav{ grid-template-columns:auto 1fr auto; }
  .menu-btn{ display:flex; }
  .nav .spacer{ display:block; }
}