/* ===========================================================
   TWO NODES THREE LEAVES — site stylesheet
   Every page links to this one file. Change a value here and
   it changes on every page at once.
   =========================================================== */

/* ============================================================
   1. TOKENS — from the Brand Guide, section 09.
   Change a value here and it changes everywhere on the site.
   ============================================================ */
:root{
  /* colour */
  --bg:#1E1913;          /* menu / hero — warm brown top of the ramp */
  --surface:#2A231C;     /* cards and raised sections (a step above blocks) */
  --black:#000000;       /* photo + hero showcase panels only */
  --text:#ECE6DF;        /* off-white — primary text */
  --muted:#A99E94;       /* secondary text, captions, meta */
  --pink:#D98A8B;        /* Hoya pink — accent TEXT and links */
  --pink-deep:#BE6A6E;   /* accent FILLS only, always dark label */
  --pink-soft:#F0CFCD;   /* subtle highlights, sparingly */
  --sage:#9DB08F;        /* optional botanical accent */
  --border:#332B22;      /* hairline dividers and outlines */
  --border-hover:var(--sage);
  /* Ramp 3 — warm brown (menu) stepping down to near-black (footer) */
  --block-1:#16110C; --block-2:#0F0B08; --block-3:#090705; --block-4:#050403;
  --footer-bg:#020101;

  /* type */
  --font-display:'Libre Caslon Text',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* radii */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;

  /* layout */
  --container:1180px;
  --read:720px;          /* comfortable reading column for blog posts */
  --measure:48ch;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* TEXT SIZE CONTROL — nearly every size in this stylesheet is written in
   rem, which means it is calculated from this one number. Raise it and the
   whole page grows together, in proportion. 100% = 16px, 106.25% = 17px,
   112.5% = 18px. */
html{font-size:106.25%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:1.06rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
::selection{background:var(--pink-deep);color:var(--bg)}

/* film grain — carried over from the current site */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px;border-radius:var(--r-sm);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .card:hover,.btn:hover{transform:none!important}
}

.container{max-width:var(--container);margin:0 auto;padding-left:var(--s5);padding-right:var(--s5)}
/* consistent breathing room below the sticky header on every page */
#main{padding-top:var(--s6)}
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--pink-deep);color:var(--bg);
  padding:var(--s3) var(--s5);font-weight:600;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ============================================================
   3. TYPE
   ============================================================ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--text)}
h1{font-size:clamp(2.6rem,6vw,4.5rem);line-height:1.05;letter-spacing:-.02em}
h1 em{font-style:italic;color:inherit}
/* accent words removed by request — .green now inherits heading colour */
.green{color:inherit}
h2{font-size:clamp(1.9rem,3.4vw,2.4rem);line-height:1.1;letter-spacing:-.015em}
h3{font-size:1.4rem;line-height:1.2;letter-spacing:-.01em}
p{max-width:var(--measure)}

.eyebrow{
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;color:var(--pink);
}
.muted{color:var(--muted)}

/* ============================================================
   4. BUTTONS — pill. Primary is a pink fill with a NEAR-BLACK
   label: off-white on pink only reaches 3.1:1 and fails AA,
   near-black on pink reaches 4.83:1 and passes.
   ============================================================ */
.btn{
  display:inline-block;font-family:var(--font-body);font-size:.95rem;font-weight:600;
  padding:.75em 1.6em;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn-primary{background:var(--pink-deep);color:var(--bg)}
.btn-primary:hover{background:var(--pink);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(236,230,223,.3);color:var(--text)}
.btn-ghost:hover{background:rgba(236,230,223,.06);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
/* hero pair sit in equal columns so both pills are exactly the same size */
.hero .btn-row{display:grid;grid-template-columns:repeat(2,1fr);max-width:420px}
.hero .btn{text-align:center}
@media(max-width:420px){.hero .btn-row{grid-template-columns:1fr}}

/* ============================================================
   5. HEADER + NAV
   ============================================================ */
.site-header{background:var(--bg);position:relative;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding-top:var(--s5);padding-bottom:var(--s5)}
.wordmark{font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.1;letter-spacing:-.01em}
.wordmark em{font-style:italic;color:var(--sage)}

/* direct child only — otherwise the dropdown panels inherit this
   flex row and lay their items out sideways */
.nav-desk > ul{display:flex;align-items:center;gap:var(--s7);flex-wrap:nowrap}
.dd-menu li{display:block}
.navlink,.dd-toggle{
  font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);white-space:nowrap;
  background:none;border:0;cursor:pointer;transition:color .2s;
}
.navlink:hover,.dd-toggle:hover{color:var(--pink)}
.navlink[aria-current="page"]{color:var(--pink)}
.dd{position:relative;display:inline-flex;align-items:center}
.dd-toggle::after{content:"";display:inline-block;margin-left:var(--s2);
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(3px)}
.dd-menu{
  position:absolute;top:calc(100% + var(--s3));left:50%;transform:translateX(-50%) translateY(4px);
  min-width:210px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s2);box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd[data-open="true"] .dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.dd-menu a{display:block;padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  font-size:.9rem;color:var(--text);white-space:nowrap;transition:background .15s,color .15s}
.dd-menu a:hover{background:#2A231D;color:var(--pink)}

.hamburger{display:none;background:none;border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:var(--s2) var(--s3);color:var(--text);cursor:pointer;font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-body)}
/* padding-top/bottom only — a `padding` shorthand here would zero out
   the left/right inset this element inherits from .container */
.nav-mobile{display:none;border-top:1px solid var(--border);padding-top:var(--s5);padding-bottom:var(--s6)}
.nav-mobile[data-open="true"]{display:block}
.nav-mobile ul{display:flex;flex-direction:column;gap:var(--s4)}
.nav-mobile .sub{padding-left:var(--s4);gap:var(--s3);margin-top:var(--s3);border-left:1px solid var(--border)}
.nav-mobile a{font-size:.95rem;letter-spacing:.06em;text-transform:none;font-weight:500}
.nav-mobile .group-label{font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}

@media(max-width:920px){
  .nav-desk{display:none}
  .hamburger{display:inline-flex}
}

/* ============================================================
   6. PHOTO PANELS — pure black per the guide. Placeholders now,
   real photographs later, no layout change when they land.
   ============================================================ */
.photo{
  background:var(--black);border:1px solid var(--border);border-radius:var(--r-lg);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.photo-4x5{aspect-ratio:4/5}
.photo-16x10{aspect-ratio:16/10;border-radius:var(--r-md)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-note{
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#4A423B;text-align:center;padding:var(--s5);line-height:1.9;
}
.photo-note span{display:block;color:#6B5F55}

/* ============================================================
   7. SECTIONS
   ============================================================ */
/* ---------- hero ----------
   A single panel, full width, matching every other block on the page. */
.hero-wrap{overflow:hidden}
.hero{position:relative;padding-top:var(--s8);padding-bottom:var(--s7)}
.hero-copy{position:relative;z-index:1}
.hero-copy .eyebrow{margin-bottom:var(--s4)}
.hero-copy h1{margin-bottom:var(--s5)}
.hero-copy p{color:var(--muted);font-size:1.05rem;max-width:62ch}

.section{padding-top:var(--s8);padding-bottom:var(--s8)}
.section-band{background:var(--block-3)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;/*noline*/
  gap:var(--s4);margin-bottom:var(--s7)}
.section-head .eyebrow{margin-bottom:var(--s3)}
.section-link{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink);transition:color .2s}
.section-link:hover{color:var(--pink-soft)}

.grid{display:grid;gap:var(--s5)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.grid-4,.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-4,.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;
  transition:transform .2s;
}
.card:hover{transform:translateY(-4px)}
.card .eyebrow{margin-bottom:var(--s3)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:var(--s5)}
.card-cta{margin-top:auto;font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--pink)}
.card:hover .card-cta{color:var(--pink-soft)}
.card-static:hover{border-color:var(--border);transform:none}

.tag{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);border:1px solid rgba(157,176,143,.4);
  border-radius:var(--r-pill);padding:var(--s1) var(--s3);margin-left:var(--s2);vertical-align:3px}

/* announcement — a contained card, inset from the page edges */
.announce{background:transparent;padding-top:var(--s5);padding-bottom:var(--s5)}
.announce-inner{display:flex;align-items:flex-start;gap:var(--s5);
  padding:var(--s5) var(--s6);
  background:rgba(30,25,19,.42);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(217,138,139,.28);
  border-radius:var(--r-lg);
  box-shadow:0 16px 44px rgba(0,0,0,.32)}
.announce-body{flex:1 1 auto;min-width:0}
.announce-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);margin-bottom:var(--s3)}
.announce-date{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage);white-space:nowrap}
/* pulsing accent dot before the date */
.announce-date::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--pink);margin-right:var(--s3);vertical-align:1px;
  animation:announce-pulse 2.2s ease-in-out infinite}
@keyframes announce-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.55);opacity:1}}
@media(prefers-reduced-motion:reduce){.announce-date::before{animation:none;opacity:.9}}
.announce h2{font-size:1.15rem;font-family:var(--font-body);font-weight:600;letter-spacing:0}
.announce-detail{color:var(--muted);font-size:.95rem;max-width:none;margin-bottom:var(--s2)}
.announce-link{display:inline-block;color:var(--pink);font-weight:600}
.announce-link:hover{color:var(--pink-soft)}
.announce-hide{flex:none;background:none;border:1px solid var(--border);border-radius:var(--r-pill);
  color:var(--muted);font-family:var(--font-body);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:var(--s2) var(--s4);cursor:pointer;transition:color .2s,border-color .2s}
.announce-hide:hover{color:var(--text);border-color:var(--muted)}

/* journal */
.journal{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:920px){.journal{grid-template-columns:1.4fr 1fr}}
/* equal rows, so two or three side cards divide the featured card's
   height between them and every card ends up the same size */
.journal-side{display:grid;gap:var(--s5);grid-auto-rows:1fr}
.post-lead{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.post-lead:hover{transform:translateY(-4px)}
.post-lead .photo{border:0;border-radius:0;flex:none}
.post-lead-body{padding:var(--s6) var(--s5) var(--s5);display:flex;flex-direction:column;flex:1 1 auto}
.post-lead h3{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-bottom:var(--s3)}
.meta{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s3)}
.meta .cat{color:var(--pink)}
.post-sm{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;min-height:0;
  transition:border-color .2s,transform .2s}
.post-sm:hover{transform:translateY(-4px)}
.post-sm h3{font-size:1.2rem;margin-bottom:var(--s3)}
.post-sm p{color:var(--muted);font-size:.93rem;margin-bottom:var(--s4)}

/* ---------- inner page header ---------- */
.page-head{padding-top:var(--s8);padding-bottom:var(--s6)}
.page-head--compact{padding-top:var(--s6);padding-bottom:var(--s5)}
.page-head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:var(--s5)}
.page-head .eyebrow{margin-bottom:var(--s4)}
.page-head p{color:var(--muted);font-size:1.05rem}

/* ---------- category filter chips ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s3);
  padding-bottom:var(--s6);margin-bottom:var(--s7);border-bottom:1px solid var(--border)}
.filter{font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:.55em 1.15em;
  transition:color .2s,border-color .2s,background .2s}
.filter:hover{color:var(--text);border-color:var(--muted)}
.filter[aria-current="page"]{background:var(--pink-deep);color:var(--bg);border-color:var(--pink-deep)}
.dd-menu a[aria-current="page"]{color:var(--pink)}

/* ---------- article grid ---------- */
.post-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s}
.post-card:hover{transform:translateY(-4px)}
.post-card .photo{border:0;border-radius:0;flex:none}
.post-card-body{padding:var(--s5);display:flex;flex-direction:column;flex:1 1 auto}
.post-card h3{font-size:1.25rem;margin-bottom:var(--s3)}
.post-card p{color:var(--muted);font-size:.95rem;margin-bottom:var(--s5)}
.post-card .card-cta{margin-top:auto}

/* ---------- empty category ---------- */
.empty{background:var(--surface);border:1px dashed var(--border);border-radius:var(--r-lg);
  padding:var(--s7) var(--s5);text-align:center;color:var(--muted)}
.empty p{margin:0;text-align:left}
.card-badge{margin:var(--s3) 0 var(--s4)}

/* ---------- stepped block backgrounds ---------- */
.blk-hero{background:var(--bg)}
.blk-2{background:var(--block-2)}
.blk-3{background:var(--block-3)}
.blk-4{background:var(--block-4)}
/* cards keep a lift above whatever block they sit on */
.card{background:var(--surface)}
.post-lead,.post-sm,.post-card{background:var(--surface)}

/* ---------- article / blog post ---------- */
.article-head{max-width:var(--read);margin:0 auto;padding-top:var(--s8);padding-bottom:var(--s6)}
.article-head .meta{margin-bottom:var(--s4)}
.article-head h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;margin-bottom:var(--s5);overflow-wrap:break-word}
.article-head .standfirst{color:var(--muted);font-size:1.2rem;line-height:1.6}
.article-figure{max-width:var(--read);margin:0 auto var(--s7)}
.article-figure .photo{border-radius:var(--r-lg)}
.article-figure figcaption{font-size:.85rem;color:var(--muted);margin-top:var(--s3);text-align:center}
.prose{max-width:var(--read);margin:0 auto;padding-bottom:var(--s8)}
/* inline post images sit within the text column and support the text, not dominate it */
.prose img{max-width:100%;height:auto}
.prose figure{margin:var(--s6) 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.prose figure figcaption{margin-top:var(--s2);font-size:.85rem;color:var(--muted);text-align:center}
.prose>*+*{margin-top:var(--s5)}
.prose p{color:var(--text);font-size:1.08rem;line-height:1.8}
.prose h2{font-size:1.6rem;margin-top:var(--s7)}
.prose h3{font-size:1.3rem;margin-top:var(--s6)}
.prose ul,.prose ol{padding-left:1.3em;color:var(--text)}
.prose li{margin-bottom:var(--s2);line-height:1.7}
.prose li::marker{color:var(--pink)}
.prose blockquote{border-left:3px solid var(--pink-deep);padding:var(--s2) 0 var(--s2) var(--s5);
  margin-left:0;font-family:var(--font-display);font-style:italic;font-size:1.3rem;
  line-height:1.5;color:var(--text)}
.prose a{color:var(--pink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--pink-soft)}
.draft-note{max-width:680px;margin:0 auto var(--s6);background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--pink-deep);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--s4) var(--s5);color:var(--muted);font-size:.95rem}
.post-tags{max-width:var(--read);margin:var(--s6) auto 0;display:flex;flex-wrap:wrap;gap:var(--s3)}
.post-tag{font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--pink);
  background:rgba(217,138,139,.1);border:1px solid rgba(217,138,139,.28);
  border-radius:var(--r-pill);padding:5px 14px}
/* end-of-post signup + related */
.post-cta{background:var(--block-3);margin-top:var(--s8)}
.post-cta-inner{max-width:680px;margin:0 auto;padding:var(--s8) var(--s5);text-align:center}
.post-cta h2{font-size:1.7rem;margin-bottom:var(--s3)}
.post-cta p{color:var(--muted);margin:0 auto var(--s5)}
.post-cta .mc-form{max-width:420px;margin:0 auto}
.related{padding:var(--s8) 0}
.related h2{font-size:1.4rem;margin-bottom:var(--s5)}

/* ---------- tools: dilution calculator ---------- */
.calc{max-width:900px;margin:0;display:grid;gap:var(--s6);
  grid-template-columns:1fr;padding-bottom:var(--s8)}
@media(min-width:800px){.calc{grid-template-columns:1.1fr .9fr;align-items:start}}
.calc-panel{background:#211B16;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s6)}
.calc-panel h2{font-size:1.15rem;margin-bottom:var(--s5)}
.calc-field{margin-bottom:var(--s5)}
.calc-field label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.calc-inline{display:flex;gap:var(--s3);align-items:stretch}
.calc input,.calc select{font-family:var(--font-body);font-size:1rem;color:var(--text);
  background:#16110C;border:1px solid var(--border);border-radius:var(--r-md);
  height:46px;padding:0 .9em;width:100%;box-sizing:border-box;line-height:normal}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--pink-deep)}
/* custom dropdown arrow with proper spacing from the edge */
.calc select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:2.4em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A99E94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95em center}
.calc-inline input{flex:1 1 42%}.calc-inline select{flex:1 1 58%}
/* segmented ml/oz/gal toggle */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;height:46px}
.seg button{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--muted);
  background:transparent;padding:0 1.2em;cursor:pointer;border:0;transition:background .15s,color .15s}
.seg button:hover{color:var(--text)}
.seg button+button{border-left:1px solid var(--border)}
/* preset chips */
.presets{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.preset{font-family:var(--font-body);font-size:.82rem;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.45em 1em;cursor:pointer;transition:border-color .2s,transform .2s}
.preset:hover{border-color:var(--pink-deep);transform:translateY(-1px)}
/* result */
.calc-result{background:#1A150F;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s6);position:sticky;top:var(--s5)}
.calc-result .result-label{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.result-main{display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
#calc-main-num{font-family:var(--font-display);font-size:3rem;line-height:1;color:var(--text)}
#calc-main-unit{font-size:1.3rem;color:var(--muted)}
#calc-secondary{font-size:1rem;color:var(--pink)}
#calc-water-line{color:var(--muted);font-size:.95rem;margin-top:var(--s4);line-height:1.6}
#calc-ratio-wrap{margin-top:var(--s4);align-items:center;gap:.5em;
  background:rgba(190,106,110,.12);border:1px solid rgba(190,106,110,.3);
  border-radius:var(--r-pill);padding:.4em 1em;font-size:.9rem;color:var(--pink)}
.calc-equiv{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border)}
.calc-equiv div{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  padding:.6em .8em;font-size:.9rem;color:var(--text);text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.calc-equiv div:hover{border-color:var(--pink-deep)}
.calc-equiv div[aria-pressed="true"]{background:var(--pink-deep);color:var(--bg);border-color:var(--pink-deep);font-weight:600}
.calc-equiv-label{margin-top:var(--s5);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.calc-steps{max-width:900px;margin:0 0 var(--s7);display:grid;gap:var(--s5);
  grid-template-columns:1fr}
@media(min-width:700px){.calc-steps{grid-template-columns:repeat(3,1fr)}}
.calc-step .num{font-family:var(--font-display);font-size:1.4rem;color:var(--pink-deep)}
.calc-step h3{font-size:1.05rem;margin:var(--s2) 0}
.calc-step p{color:var(--muted);font-size:.92rem;line-height:1.6}

/* tool pages: description + disclaimer match the 900px calculator width */
.tool-page .page-head p{max-width:900px}
.tool-disclaimer{max-width:900px}

/* ---------- back to top ---------- */
.to-top{
  position:fixed;right:var(--s5);bottom:var(--s5);z-index:60;
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--surface);color:var(--sage);
  border:1px solid var(--border);border-radius:var(--r-pill);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease,
             bottom .25s ease,
             background .2s ease,border-color .2s ease,color .2s ease;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{color:var(--bg);background:var(--pink-deep);border-color:var(--pink-deep)}
.to-top svg{width:19px;height:19px;transition:transform .2s ease}
.to-top:hover svg{transform:translateY(-3px)}
@media(max-width:560px){.to-top{right:var(--s4);bottom:var(--s4);width:44px;height:44px}}

/* ============================================================
   8. FOOTER
   ============================================================ */
.site-footer{background:var(--footer-bg)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;gap:var(--s7) var(--s6);
  padding-top:var(--s8);padding-bottom:var(--s7)}
@media(max-width:920px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s6)}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-logo{display:block;line-height:0;margin:var(--s5) 0 var(--s5);width:120px}
.footer-logo img{width:120px;height:120px}
@keyframes tnl-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* added by JS when the footer scrolls into view; runs once per page load */
.footer-logo.is-spun img{animation:tnl-spin 1.15s cubic-bezier(.33,0,.15,1) 1}
.footer-brand p{color:var(--muted);font-size:.93rem;margin:0;max-width:34ch}
/* social icons — brand pink, sage on hover, 40px tap targets.
   The negative margin optically lines the first icon up with the
   text above it, since each link carries its own padding. */
.social{display:flex;flex-wrap:wrap;gap:var(--s3)}
.social a{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;color:var(--sage);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  transition:color .2s,background .2s,border-color .2s,transform .2s}
.social a:hover{color:var(--bg);background:var(--pink-deep);border-color:var(--pink-deep);
  transform:translateY(-3px)}
.social svg{width:19px;height:19px;display:block;fill:currentColor}
.footer-col h2{font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s4)}
.footer-col li{margin-bottom:6px}
.footer-col a{font-size:.95rem;color:var(--text);transition:color .2s}
.footer-col a:hover{color:var(--pink)}
.mc-form{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.mc-form label{font-size:.93rem;color:var(--muted)}
.mc-form input{font-family:var(--font-body);font-size:.95rem;padding:var(--s3) var(--s4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);transition:border-color .2s}
.mc-form input::placeholder{color:#6B5F55}
.mc-form input:focus{border-color:var(--pink-deep);outline:none}
.mc-form input:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.mc-form button{border:0}
.mc-note{font-size:.8rem;color:var(--muted)}
.footer-bottom{border-top:1px solid var(--border);display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s3) var(--s5);padding-top:var(--s5);padding-bottom:var(--s7);
  font-size:.82rem;color:var(--muted)}
.footer-bottom a{transition:color .2s}
.footer-bottom a:hover{color:var(--pink)}
.footer-bottom .push{margin-left:auto}
@media(max-width:560px){.footer-bottom .push{margin-left:0}}

/* ============================================================
   FORECAST TOOL — scoped to .fc so it can't affect other pages.
   Ported from the original tool stylesheet, retuned to the new
   brand (Libre Caslon headings, Ramp-3 surfaces, 46px fields).
   ============================================================ */
.fc{max-width:900px;margin:0}
.fc .panel{background:#211B16;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s6);margin:var(--s5) 0}
.fc h2{font-size:1.25rem;margin:0 0 var(--s2)}
.fc .hint{color:var(--muted);margin:0 0 var(--s5);line-height:1.6;font-size:.95rem}
.fc label{display:grid;gap:6px;font-weight:600;color:var(--text);font-size:.9rem}
.fc input,.fc select{width:100%;box-sizing:border-box;border:1px solid var(--border);
  border-radius:var(--r-md);height:46px;padding:0 .9em;background:#16110C;
  font:inherit;color:var(--text)}
.fc input[type="file"]{height:auto;padding:11px 13px;max-width:440px;cursor:pointer}
.fc select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:2.4em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A99E94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95em center}
.fc input:focus,.fc select:focus{outline:none;border-color:var(--pink-deep)}
.fc .upload-box{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.fc .grid{display:grid;gap:var(--s4)}
.fc .two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fc .three{grid-template-columns:repeat(3,minmax(0,1fr))}
.fc button{border:0;border-radius:var(--r-pill);padding:.7em 1.4em;font-weight:600;
  cursor:pointer;font:inherit;transition:background .2s,transform .2s}
.fc button:disabled{opacity:.45;cursor:not-allowed}
.fc .primary{margin-top:var(--s5);background:var(--pink-deep);color:var(--bg)}
.fc .primary:hover:not(:disabled){background:var(--pink);transform:translateY(-2px)}
.fc .ghost{background:#2A231D;color:var(--text);border:1px solid var(--border)}
.fc .ghost:hover{transform:translateY(-2px)}
.fc .hidden{display:none}
.fc .status{border-radius:var(--r-md);padding:14px 16px;margin:var(--s4) 0;
  background:#2A231D;border:1px solid var(--border);color:var(--text);font-size:.95rem}
.fc .status.error{background:#3a1f1b;color:var(--pink-soft);border-color:var(--pink-deep)}
.fc .status.success{background:#1e2a1b;border-color:#4f6f43;color:#CFE3C7}
.fc .results-header{display:flex;justify-content:space-between;gap:var(--s4);
  align-items:start;flex-wrap:wrap}
.fc .actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.fc .summary{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.fc .pill{border-radius:var(--r-pill);padding:6px 12px;background:#2A231D;
  font-weight:600;color:var(--text);border:1px solid var(--border);font-size:.85rem}
.fc .table-wrap{width:100%;overflow:auto;border:1px solid var(--border);
  border-radius:var(--r-md);background:#16110C}
.fc table{border-collapse:collapse;width:100%;min-width:900px}
.fc th,.fc td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  padding:10px;text-align:left;vertical-align:top;font-size:.9rem}
.fc th{position:sticky;top:0;background:#211B16;z-index:1;color:var(--text)}
.fc .temp-line{display:block;white-space:nowrap}
.fc .too-cold{background:#1b3146;color:#b9ddff;font-weight:700}
.fc .too-hot{background:#3a1f1b;color:var(--pink-soft);font-weight:700}
.fc .ok{background:#182115}
.fc .status-hold{font-weight:700;color:var(--pink-soft)}
.fc .status-ok{font-weight:700;color:var(--sage)}
@media(max-width:760px){.fc .two,.fc .three{grid-template-columns:1fr}}
@media print{
  .fc .upload-box,.fc #mappingPanel,.fc .actions,.fc #runCheck,
  .site-header,.site-footer,.to-top{display:none!important}
  .fc .table-wrap{overflow:visible}.fc table{min-width:0;font-size:10px}
}

/* ---------- shops page ---------- */
.shop-grid{display:grid;gap:var(--s5);grid-template-columns:1fr;max-width:900px;margin:0}
@media(min-width:700px){.shop-grid{grid-template-columns:1fr 1fr}}
.shop-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .2s}
.shop-card:hover{transform:translateY(-4px)}
.shop-logo{aspect-ratio:16/7;background:#16110C;display:grid;place-items:center;
  border-bottom:1px solid var(--border)}
.shop-logo span{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#5c5148}
.shop-body{padding:var(--s5);display:flex;flex-direction:column;flex:1 1 auto}
.shop-tag{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);margin-bottom:var(--s2)}
.shop-body h2{font-size:1.4rem;margin-bottom:var(--s3)}
.shop-desc{color:var(--muted);font-size:.95rem;line-height:1.65;margin-bottom:var(--s5)}
.shop-cta{margin-top:auto;font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--pink)}
.shop-note{max-width:900px;margin:var(--s6) 0 0;color:var(--muted);font-size:.85rem;font-style:italic}

/* shop logos + wordmarks */
.shop-logo img{width:auto;height:88px;object-fit:contain}
.shop-wordmark{font-family:var(--font-display);font-size:2.4rem;color:var(--pink);letter-spacing:.01em}

/* ---------- resources: what we use ---------- */
.use-grid{display:grid;gap:var(--s5);grid-template-columns:1fr;max-width:900px;margin:0}
@media(min-width:640px){.use-grid{grid-template-columns:1fr 1fr}}
.use-item{display:flex;gap:var(--s4);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s4);transition:transform .2s}
.use-item:hover{transform:translateY(-4px)}
.use-item .photo{flex:0 0 84px;height:84px;border-radius:var(--r-md)}
.photo-1x1{aspect-ratio:1/1}
.use-body{display:flex;flex-direction:column;min-width:0}
.use-body h3{font-size:1.1rem;margin-bottom:6px}
.use-body p{color:var(--muted);font-size:.9rem;line-height:1.55;margin-bottom:var(--s3)}
.use-link{margin-top:auto;font-size:.82rem;font-weight:600;color:var(--pink)}

/* ---------- legal / policy pages ---------- */
.legal{max-width:720px;margin:0}
.legal .updated{color:var(--muted);font-size:.9rem;font-style:italic;margin-bottom:var(--s6)}
.legal h2{font-size:1.3rem;margin:var(--s7) 0 var(--s3)}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--text);line-height:1.75;margin-bottom:var(--s4)}
.legal a{color:var(--pink);text-decoration:underline;text-underline-offset:2px}
/* contact form */
.contact-email{max-width:620px}
.contact-email .contact-email-address{margin:var(--s4) 0}
.contact-email .contact-email-address a{font-size:1.5rem;font-weight:600;color:var(--pink);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.contact-email .contact-email-address a:hover{border-bottom-color:var(--pink)}
.contact-form{max-width:560px;margin:0;display:grid;gap:var(--s4)}
.contact-form label{display:grid;gap:6px;font-weight:600;font-size:.9rem;color:var(--text)}
.contact-form input,.contact-form textarea{width:100%;box-sizing:border-box;
  background:#16110C;border:1px solid var(--border);border-radius:var(--r-md);
  padding:.7em .9em;font:inherit;color:var(--text)}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--pink-deep)}
.contact-form button{justify-self:start;background:var(--pink-deep);color:var(--bg);
  border:0;border-radius:var(--r-pill);padding:.75em 1.6em;font-weight:600;cursor:pointer;
  transition:background .2s,transform .2s}
.contact-form button:hover{background:var(--pink);transform:translateY(-2px)}

/* ---------- about page ---------- */
.about-layout{display:grid;gap:var(--s7);grid-template-columns:1fr;max-width:960px;margin:0;align-items:start}
@media(min-width:820px){.about-layout{grid-template-columns:1.3fr .7fr}}
.about-photo .photo{border-radius:var(--r-lg)}

/* ---------- blog index: hero + 3 side cards ---------- */
.blog-featured{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:900px){.blog-featured{grid-template-columns:1.4fr 1fr;align-items:start}}
.post-hero{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .2s}
.post-hero:hover{transform:translateY(-4px)}
.post-hero .photo{border:0;border-radius:0}
.post-hero-body{padding:var(--s6);display:flex;flex-direction:column}
.post-hero-body h2{font-size:1.7rem;line-height:1.15;margin:var(--s3) 0}
.post-hero-body p{color:var(--muted);font-size:1rem;line-height:1.6;margin-bottom:var(--s5)}
.post-hero-body .card-cta{margin-top:auto}
.blog-side{display:grid;gap:var(--s4)}
.post-mini{display:flex;gap:var(--s4);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .2s}
.post-mini:hover{transform:translateY(-4px)}
.post-mini .photo{flex:0 0 96px;border:0;border-radius:0}
.post-mini-body{padding:var(--s4) var(--s4) var(--s4) 0;display:flex;flex-direction:column;justify-content:center;min-width:0}
.post-mini-body h3{font-size:1.05rem;line-height:1.25;margin-top:6px}

/* ---------- wishlist ---------- */
.wish-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-width:960px;margin:0}
.wish-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .2s}
.wish-card:hover{transform:translateY(-4px)}
.wish-card .photo{border:0;border-radius:0}
.wish-card-body{padding:var(--s4)}
.wish-card-body h2{font-size:1.15rem;margin-top:8px;line-height:1.2}
.wish-badge{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.wish-badge.is-wanted{color:var(--pink);background:rgba(217,138,139,.12);border:1px solid rgba(217,138,139,.3)}
.wish-badge.is-collected{color:var(--sage);background:rgba(157,176,143,.12);border:1px solid rgba(157,176,143,.35)}
.page-head .wish-badge{margin-top:var(--s3)}
.wish-detail{display:grid;gap:var(--s6);grid-template-columns:1fr;max-width:900px;margin:0;align-items:start}
@media(min-width:760px){.wish-detail{grid-template-columns:.9fr 1.1fr}}
.wish-detail .photo{border-radius:var(--r-lg)}
.wish-detail-body p{color:var(--text);line-height:1.75;margin-bottom:var(--s5);font-size:1.05rem}
.wish-detail-body .btn{margin-bottom:var(--s4)}
.wish-affiliate-note,.wish-nolink{color:var(--muted);font-size:.85rem;font-style:italic}


/* =============================================================================
   FROSTED GLASS MODE
   -----------------------------------------------------------------------------
   The whole site floats as misted panels over one fixed photograph, like
   looking through greenhouse glass.

   TO CHANGE THE BACKGROUND PHOTO:
   replace  assets/img/backdrop.jpg  with your own picture and keep the name.
   Best results: leaves filling the whole frame — no pot, no empty background.

   TO TURN THIS OFF: delete everything from this line to the end of the file.
   The site returns to the solid stepped-brown design.
   ========================================================================== */

/* ---- the fixed backdrop ---- */
body{
  background:#0c0a08 url("/assets/img/backdrop.jpg") center center / cover no-repeat fixed;
}
/* a dark veil over the photo so text stays readable */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:rgba(10,8,6,.52);
}
/* keep all real content above the veil */
main,.site-footer{position:relative;z-index:1}
.to-top{z-index:60}

/* ---- the frosted panel treatment ---- */
.card,.post-card,.post-hero,.post-mini,.post-lead,.post-sm,
.shop-card,.use-item,.wish-card,.calc-panel,.calc-result,
.empty,.draft-note,.calc-step,.fc .panel,.post-cta{
  background:rgba(30,25,19,.36);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
          backdrop-filter:blur(20px) saturate(1.2);
  border:0;
  box-shadow:0 16px 44px rgba(0,0,0,.32);
}

/* hero copy sits on its own pane; the plant still breaks out in front of it */
.hero-copy{
  background:rgba(30,25,19,.36);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
          backdrop-filter:blur(20px) saturate(1.2);
  border:0;
  border-radius:var(--r-lg);
  padding:var(--s6);
  box-shadow:0 16px 44px rgba(0,0,0,.32);
}

/* header and footer become frosted bars */
.site-header{
  background:rgba(30,25,19,.55);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:0;
  position:sticky;top:0;z-index:100;
}
.site-footer{
  background:rgba(20,16,12,.62);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:0;
}
.dd-menu,.nav-mobile{
  background:rgba(30,25,19,.88);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}

/* the stepped block colours step aside — the photo shows through instead */
.blk-hero,.blk-2,.blk-3,.blk-4,.section-band{background:transparent}
.blk-hero::after,.blk-2::after,.blk-3::after,.blk-4::after,
.announce::after,.section-band::after,.site-footer::after,.site-header::after{content:none}

/* ---- reading comfort ----
   Long prose needs more contrast than a decorative card, so article bodies
   get a denser pane rather than a light frost. */
.prose,.legal,.article-head{
  background:rgba(24,19,14,.74);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-radius:var(--r-lg);
  padding:var(--s6);
}
.article-head{margin-bottom:var(--s5)}

/* form fields need to stay legible against the blur */
.calc input,.calc select,.fc input,.fc select,.contact-form input,.contact-form textarea{
  background:rgba(10,8,6,.55);
}

/* ---- performance and support ----
   Blur is expensive to draw. Ease off on small screens, and fall back to a
   solid panel anywhere backdrop-filter is unsupported. */
@media(max-width:760px){
  .card,.post-card,.post-hero,.post-mini,.shop-card,.use-item,.wish-card,
  .calc-panel,.calc-result,.hero-copy,.prose,.legal,.article-head,
  .site-header,.site-footer,.fc .panel,.post-cta,.announce-inner{
    -webkit-backdrop-filter:none;backdrop-filter:none;   /* blur is expensive to redraw while scrolling */
    background:rgba(30,25,19,.92);                        /* solid panel instead of frost */
  }
  body{background-attachment:scroll}   /* fixed backdrops stutter on phones */
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.post-card,.post-hero,.post-mini,.shop-card,.use-item,.wish-card,
  .calc-panel,.calc-result,.hero-copy,.prose,.legal,.article-head,
  .site-header,.site-footer,.fc .panel,.post-cta,.announce-inner{
    background:rgba(26,21,16,.94);
  }
}


/* ---- no outlines on panels or dividers ----
   Interactive controls (inputs, chips, toggles, buttons) KEEP their outlines
   so it stays obvious what can be clicked or typed into. */
.post-card,.post-lead,.post-sm,.post-mini,.use-item,.wish-card,
.calc-panel,.calc-result,.fc .panel,.fc .table-wrap{border:0}

/* divider lines */
.filters{border-bottom:0}
.calc-equiv{border-top:0}
.footer-bottom{border-top:0}
.shop-logo{border-bottom:0}
.photo{border:0}
.article-figure figcaption{border:0}


/* ---- shops: two cards per row on desktop (grid rules above), no logos ---- */
.shop-card{display:block;padding:var(--s6)}
.shop-logo{display:none}
.shop-body{padding:0;display:block}
.shop-body h2{font-size:1.45rem;margin-bottom:var(--s3)}
.shop-desc{max-width:70ch;margin-bottom:var(--s4)}

/* ---- blog: side cards share the hero's height evenly ---- */
@media(min-width:900px){
  .blog-featured{align-items:stretch}
  .blog-side{grid-template-rows:repeat(3,1fr)}
  .post-mini{align-items:stretch}
  .post-mini .photo{height:auto}
  .post-mini-body{justify-content:center}
}

/* ---- blog: category menu sticks under the header, chips are frosted ---- */
.filters{
  position:sticky;top:60px;z-index:30;
  padding:var(--s4) 0;margin-bottom:var(--s6);
  background:rgba(20,16,12,.5);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.filter{
  background:rgba(30,25,19,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0;
}
.filter:hover{background:rgba(42,35,28,.7);color:var(--text)}
.filter[aria-current="page"]{background:var(--pink-deep);color:var(--bg)}
@media(max-width:760px){.filters{top:54px}}


/* =============================================================================
   UNIFIED CONTENT WIDTH
   Every page's content now spans the same width as the homepage (--container).
   The one exception is long-form reading — blog articles and legal text keep a
   narrower panel, because a 145-character line is tiring to read. Text still
   fills its panel edge to edge, so nothing stops short mid-block.
   ========================================================================== */

/* panels and grids: full container width */
.calc,.calc-steps,.fc,.shop-grid,.shop-note,.use-grid,.wish-grid,.wish-detail,
.about-layout,.related,.tool-page .page-head p,.tool-disclaimer{
  max-width:none;
}
.article-figure{padding:0}
.related{padding-left:0;padding-right:0}

/* long-form reading keeps a comfortable measure */
.legal{max-width:72ch;margin-left:0;margin-right:0}
.draft-note{max-width:72ch;margin-left:0;margin-right:0}
.post-cta-inner{max-width:640px}

/* text inside already-narrow panels fills its panel — no stopping short */
.use-body p,.card p,.post-hero-body p,.wish-detail-body p,.footer-brand p{max-width:none}
/* wide, full-bleed intros get a readable measure instead of running edge to edge */
.hero-copy p{max-width:62ch}
.page-head p{max-width:68ch}
.shop-desc{max-width:64ch}
.standfirst{max-width:68ch}

/* calculator steps needed padding once they became panels */
.calc-step{padding:var(--s5)}

/* category chips: no band behind them, just the frosted pills */
.filters{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:var(--s3) 0 var(--s5)}
.filter{box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* about: text and photo the same height, both frosted */
.about-layout{align-items:stretch}
@media(min-width:820px){.about-layout{grid-template-columns:1.35fr .65fr}}
.about-photo{display:flex}
.about-photo .photo{flex:1;min-height:100%;
  background:rgba(30,25,19,.36);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 16px 44px rgba(0,0,0,.32);
  display:grid;place-items:center}
.about-photo .photo::before{content:none}

/* the About text block is a panel, not a reading column */
.about-text{max-width:none;padding:var(--s6)}


/* ---- Kit signup form ----
   Kit's own stylesheet is deliberately not loaded. These rules make its
   markup behave inside the site's existing .mc-form layout. */
.formkit-fields{display:contents}
.formkit-alert{list-style:none;margin:0;padding:0}
.formkit-alert:empty{display:none}
.formkit-alert-error{background:rgba(190,106,110,.16);color:var(--pink-soft);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:.88rem}
.formkit-alert-error li{list-style:none}
.formkit-submit{position:relative}
.formkit-spinner{display:none}
/* Kit adds this attribute while a signup is in flight */
.formkit-submit[data-active]{opacity:.6;cursor:wait}

/* Kit attribution — required on the free plan. Kept quiet, not hidden. */
.formkit-powered-by-convertkit-container{margin-top:var(--s2)}
.formkit-powered-by-convertkit{font-size:.72rem;letter-spacing:.04em;color:var(--muted);
  opacity:.65;text-decoration:none;transition:opacity .2s,color .2s}
.formkit-powered-by-convertkit:hover{opacity:1;color:var(--pink)}