/*
Theme Name: Heartsong Studio
Theme URI: https://darlingdesignpresence.com
Author: Darling Design Presence
Description: Custom theme for Heartsong Studio — The Ground: one deep-green ground from beginning to end, gold connective tissue, the lemniscate seam.
Version: 1.0.0
Text Domain: heartsong-studios
*/

/* Everything below is Design/ground_site/ground.css, carried verbatim.
   The concept is the spec; palette tokens locked 2026-07-29 (DESIGN_TOKENS §14). */

/* =====================================================================
   KRISTIN HUGHES — THE GROUND
   Site-wide stylesheet for the full page set.

   SCHEME CHOSEN BY KRISTIN, 2026-07-29:
     "I would choose between the first and the third, I'm not really drawn
      to the middle one... I just like how it's all the same from beginning
      to end."
   The reason she gave IS the constraint: The Ground does not change
   grounds. There is no linen zone anywhere in this site. Rhythm comes from
   band alternation (--canvas / --canvas-alt), forest plates, full-bleed
   photography and the lemniscate seam — never from a second ground.

   TOKENS are carried unchanged from ClientDelivery/mockup_01_ground.html,
   which is the file she was looking at when she chose. Green stop locked
   at --canvas #1C2A21 (DESIGN_TOKENS.md §14).

   THREE TOKENS ADDED for a multi-page site (the single-page mockup did not
   need lane wayfinding). All three measured against every ground below:
     --lane-teachers  #93A983  5.88 canvas / 6.51 alt / 5.16 surface
     --lane-families  #C89A78  5.95 canvas / 6.59 alt / 5.23 surface
     --lane-women     #C69AA4  6.10 canvas / 6.76 alt / 5.36 surface
   The women's value is DELIBERATELY NOT the token file's #B57F8B. That
   value is 3.99:1 on --surface and DESIGN_TOKENS §5 records it as a card
   failure ("never place green-side mauve on a card ground"). #C69AA4 is the
   same hue lifted until it clears AA on cards, which a multi-page site
   needs because lane accents land on cards constantly.

   CONTRAST FLOORS OBSERVED
     --ink-muted #98948C is 4.35:1 on --surface — under the 4.5 floor.
     It is therefore never used on a card. Card eyebrows take --moss,
     --accent, or a lane token.
     On --forest #3A5A3A only --ink clears AA (5.90:1). Nothing else goes
     on that plate as text. Inherited from the mockup's audit block.
   ===================================================================== */

:root{
  /* ground family — locked 2026-07-29 */
  --canvas:#1C2A21;
  --canvas-alt:#16211A;
  --surface:#243428;
  --surface-light:#2C3E31;
  --line:#31463A;

  /* carried unchanged */
  --ink:#E4E0D8;
  --ink-dim:#A8A49A;
  --ink-muted:#98948C;
  --accent:#B8A07A;
  --accent-warm:#C4956A;
  --accent-deep:#8B6914;
  --forest:#3A5A3A;
  --forest-light:#4A6A4A;
  --moss:#93A983;
  --bark:#5C4A3A;
  --ember:#C4784A;

  /* lane accents — added for the multi-page set, measured above */
  --lane-teachers:#93A983;
  --lane-families:#C89A78;
  --lane-women:#C69AA4;

  --wrap:1120px;
  --wrap-narrow:760px;
  --wrap-mid:920px;
}

*{box-sizing:border-box;}
figure{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:'Sora',sans-serif;
  font-size:15px;
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4,.display{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  letter-spacing:0.01em;
  line-height:1.2;
  margin:0;
}
em,.ital{font-style:italic;}
.gold{color:var(--accent);font-style:italic;font-weight:500;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:28px;padding-right:28px;}
.mid{max-width:var(--wrap-mid);margin-left:auto;margin-right:auto;}
.narrow{max-width:var(--wrap-narrow);margin-left:auto;margin-right:auto;}

.eyebrow,.kicker,.section-label,.microlabel{
  font-family:'Sora',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:11px;
  font-weight:600;
  color:var(--ink-muted);
}
.eyebrow{display:block;margin-bottom:14px;}
.lane-t{color:var(--lane-teachers);}
.lane-f{color:var(--lane-families);}
.lane-w{color:var(--lane-women);}

/* ---------- concept banner (review scaffolding, deleted at /sitebuild) --- */
.concept-banner{
  position:sticky;top:0;z-index:50;
  background:#0F120F;color:var(--ink-dim);
  text-align:center;font-size:11.5px;letter-spacing:0.05em;line-height:1.5;
  padding:7px 18px;border-bottom:1px solid var(--line);
}

/* ---------- header ---------- */
.site-header{
  text-align:center;
  padding:44px 20px 26px;
  border-bottom:1px solid var(--line);
  background:var(--canvas);
}
.wordmark-block{display:inline-flex;flex-direction:column;align-items:center;gap:4px;}
.wordmark{
  font-family:'Cormorant Garamond',serif;
  font-size:38px;font-weight:500;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink);
}
.sample-tag{
  font-size:9px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--moss);font-weight:600;
}
.mainnav{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;}
.mainnav a{
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-muted);padding:4px 2px;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;font-weight:400;
}
.mainnav a:hover,.mainnav a:focus-visible{color:var(--accent);border-bottom-color:var(--forest-light);}
.mainnav a.is-current{color:var(--accent);border-bottom-color:var(--forest-light);}

/* Offerings dropdown — hover + focus-within so it is keyboard reachable */
.has-sub{position:relative;display:inline-flex;align-items:center;}
.subnav{
  position:absolute;left:50%;transform:translateX(-50%);
  top:100%;margin-top:10px;min-width:212px;
  background:var(--surface);border:1px solid var(--line);
  padding:10px 0;z-index:60;
  opacity:0;visibility:hidden;transition:opacity .18s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;}
/* The 10px offset above is a dead zone: the pointer leaves .has-sub before it
   reaches the panel, so the menu closed on the way down and could not be clicked.
   This bridges the gap — it is part of .subnav, so hovering it keeps .has-sub:hover
   true, and it is only hit-testable while the panel is visible. */
.subnav::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.subnav a{
  display:block;text-align:left;padding:7px 20px;
  border-bottom:none;letter-spacing:0.12em;font-size:11px;
}
.subnav a.sub-child{padding-left:36px;color:var(--ink-dim);text-transform:none;letter-spacing:0.04em;font-size:12px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:'Sora',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
  text-align:center;padding:16px 32px;
  border:1px solid var(--accent);color:var(--ink);background:transparent;
  cursor:pointer;transition:all .25s ease;
}
.btn:hover{background:var(--accent);color:var(--canvas);}
.btn-accent{background:var(--forest);border-color:var(--forest);color:var(--ink);}
/* hover re-declares colour — a prior audit caught a fill swap that dropped
   the label to 2.46:1. Every hover in this file re-declares colour. */
.btn-accent:hover{background:var(--forest-light);border-color:var(--forest-light);color:var(--ink);}
.btn-light{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-light:hover{background:var(--ink);color:var(--canvas);}
.btn-outline{border-color:var(--ink-muted);color:var(--ink-dim);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:transparent;}
.btn-sm{padding:12px 22px;font-size:10px;}
.btn-note{
  display:block;margin-top:10px;font-size:11px;color:var(--ink-muted);
  letter-spacing:0.04em;text-transform:none;font-weight:300;
}
.textlink{
  font-size:12px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--accent);font-weight:400;
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.textlink:hover{border-bottom-color:var(--accent);}
.cta-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

/* =====================================================================
   THE LEMNISCATE — her figure eight
   The only design element in this engagement that originated with the
   client: "maybe even in the website, I'm just thinking, maybe the
   in-betweens are like little figure eights. I just thought of that."
   (2026-07-23). CLIENT_KristinHughes.md §6 carries a standing instruction
   to build it so she sees her own idea on the page. It is the site's seam
   glyph and it sits in the in-betweens, exactly as she described.
   Confirm the WORD "lemniscate" with her before it is ever spoken aloud
   in copy — the transcript renders it "lemon skate".
   ===================================================================== */
.seam{
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:0;max-width:var(--wrap);margin:0 auto;
}
.seam::before,.seam::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(to right,transparent,var(--line),transparent);
}
.seam svg{width:44px;height:22px;flex:0 0 auto;overflow:visible;}
.seam path{fill:none;stroke:var(--accent);stroke-width:1.1;opacity:.75;}
.seam-lg svg{width:64px;height:32px;}
.seam-lg path{stroke-width:1;opacity:.9;}
/* a bare glyph, no rules, for use inside a text column */
.glyph{display:block;margin:0 auto;width:36px;height:18px;overflow:visible;}
.glyph path{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.7;}

/* ---------- bands ---------- */
.band{padding:72px 0;}
.band-tight{padding:52px 0;}
.band-alt{
  background:var(--canvas-alt);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.band-head{text-align:center;margin-bottom:48px;}
.band-head .section-label{display:block;margin-bottom:14px;color:var(--moss);}
.band-head h2{font-size:clamp(28px,4vw,42px);margin-bottom:16px;}
.band-head p{max-width:620px;margin:0 auto;color:var(--ink-dim);font-size:15px;}
.band-head.left{text-align:left;}
.band-head.left p{margin-left:0;}

/* ---------- home hero (centred, the fold she approved) ---------- */
.hero{padding:80px 28px 60px;text-align:center;}
.hero .kicker{font-size:11px;color:var(--moss);margin-bottom:24px;display:block;}
.hero h1{font-size:clamp(32px,5vw,52px);max-width:820px;margin:0 auto 12px;color:var(--ink);}
.hero .tagline{
  font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink-dim);
  margin:0 auto 36px;max-width:600px;line-height:1.5;
}

/* ---------- page hero (inner pages, centred, quieter than home) ------- */
.page-hero{padding:72px 28px 44px;text-align:center;}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);max-width:820px;margin:0 auto 14px;}
.page-hero .deck{
  font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--ink-dim);
  max-width:620px;margin:0 auto;line-height:1.5;
}

/* ---------- split hero (service pages: photo one side, green the other) --
   Anne's service-page hero. On The Ground the "colour panel" half is just
   the page ground, so the split reads as photograph against open green
   rather than as two competing fields. ------------------------------- */
.split-hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:520px;}
.split-hero.flip .split-media{order:2;}
.split-media{overflow:hidden;background:var(--surface);}
.split-media img{width:100%;height:100%;object-fit:cover;min-height:420px;}
/* a placeholder in a split-media slot has no intrinsic height, so it must be
   given the same floor as the photograph it stands in for — otherwise the
   slot collapses once the grid goes single-column. */
.split-media .img-ph,.about-figure .img-ph{min-height:420px;}
.split-body{display:flex;flex-direction:column;justify-content:center;padding:64px 56px;}
.split-body h1{font-size:clamp(30px,3.8vw,46px);margin-bottom:16px;}
.split-body .deck{
  font-family:'Cormorant Garamond',serif;font-size:21px;line-height:1.5;
  color:var(--ink-dim);margin:0 0 30px;max-width:460px;
}
.split-body .cta-row{justify-content:flex-start;}

/* ---------- full-bleed image band ---------- */
.figure-full{width:100%;overflow:hidden;}
.figure-full img{width:100%;height:100%;object-fit:cover;}
.ratio-21x9{aspect-ratio:21/9;}
.ratio-16x9{aspect-ratio:16/9;}
.ratio-3x1{aspect-ratio:3/1;}
.hero-image{width:100%;max-width:var(--wrap);margin:0 auto;aspect-ratio:21/9;overflow:hidden;}
.hero-image img{width:100%;height:100%;object-fit:cover;}

/* ---------- two-column feature cards ---------- */
.feature-two{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.feature-card{background:var(--surface);border:1px solid var(--line);overflow:hidden;}
.feature-card-thumb{aspect-ratio:16/10;overflow:hidden;}
.feature-card-thumb img{width:100%;height:100%;object-fit:cover;}
.feature-card-body{padding:32px 28px;}
.feature-card-body .section-label{display:block;margin-bottom:10px;color:var(--moss);font-size:10px;}
.feature-card-body h3{font-size:26px;margin-bottom:12px;}
.feature-card-body p{color:var(--ink-dim);font-size:14px;margin:0 0 20px;}

/* ---------- offer grid ---------- */
.offer-grid{display:grid;gap:20px;}
.offer-grid.five{grid-template-columns:repeat(5,1fr);}
.offer-grid.four{grid-template-columns:repeat(4,1fr);}
.offer-grid.three{grid-template-columns:repeat(3,1fr);}
.offer-grid.two{grid-template-columns:repeat(2,1fr);}
.offer{background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;}
.offer-thumb{aspect-ratio:4/3;overflow:hidden;}
.offer-thumb img{width:100%;height:100%;object-fit:cover;}
.offer-body{padding:20px 18px 24px;display:flex;flex-direction:column;flex:1;}
.offer-body .section-label{display:block;margin-bottom:8px;color:var(--moss);font-size:10px;}
.offer-body h3{font-size:20px;margin-bottom:8px;}
.offer-body p{font-size:13px;color:var(--ink-dim);margin:0 0 14px;line-height:1.6;}
.offer-body .textlink{margin-top:auto;align-self:flex-start;}

/* ---------- porch grid (small square thumb + text) ---------- */
/* Three tracks and two cards left them hugging the left edge with a third of
   the band empty beside them. "center these cards" — David, 18 Sep. auto-fit
   rather than repeat(2,...) so the row keeps the width a third of the band gave
   it, collapses the track it is not using, and still lays three across if a
   third card is ever written. The 48px is the two gaps. */
.porch-grid{display:grid;grid-template-columns:repeat(auto-fit,calc((100% - 48px)/3));gap:24px;justify-content:center;}
.porch-item{display:flex;gap:20px;background:var(--surface);border:1px solid var(--line);padding:24px;align-items:flex-start;}
.porch-thumb{flex-shrink:0;width:90px;height:90px;overflow:hidden;}
.porch-thumb img{width:100%;height:100%;object-fit:cover;}
.porch-text h3{font-size:20px;margin-bottom:8px;}
.porch-text p{font-size:13px;color:var(--ink-dim);margin:0 0 12px;line-height:1.6;}

/* =====================================================================
   Q&A SPINE
   Anne's non-negotiable service-page pattern, named on both calls:
   "we structure pages with the questions that people would ask and then
   blurbs about the answers." H2 is the query, the answer runs beneath.
   ===================================================================== */
.qa{max-width:var(--wrap-mid);margin:0 auto;}
.qa-item{padding:34px 0;border-bottom:1px solid var(--line);}
.qa-item:first-child{padding-top:0;}
.qa-item:last-child{border-bottom:none;padding-bottom:0;}
.qa-item h2,.qa-item h3{font-size:clamp(23px,2.7vw,30px);margin-bottom:6px;}
.qa-rule{width:52px;height:1px;background:var(--accent);opacity:.65;margin:0 0 18px;}
.qa-item p{color:var(--ink-dim);margin:0 0 16px;max-width:70ch;}
.qa-item p:last-child{margin-bottom:0;}
.qa-item p em{color:var(--ink);font-style:italic;}
.qa-hold{
  border:1px dashed rgba(230,225,215,.5);
  background:rgba(255,255,255,.035);
  padding:18px 20px;color:rgba(230,225,215,.7);
  font-size:.78rem;letter-spacing:.03em;line-height:1.6;
}

/* =====================================================================
   STEPS — the numbered ladder
   Used where a service has a real sequence. Built for Teacher Mentorship,
   whose five steps are all hers (curiosity call → goals → monthly call →
   classroom visits → the resource you take away).
   ===================================================================== */
.steps{display:grid;gap:0;max-width:var(--wrap-mid);margin:0 auto;}
.step{display:grid;grid-template-columns:96px 1fr;gap:28px;padding:30px 0;border-top:1px solid var(--line);align-items:start;}
.step:last-child{border-bottom:1px solid var(--line);}
.step-num{
  font-family:'Cormorant Garamond',serif;font-size:40px;line-height:1;
  color:var(--accent);opacity:.85;font-weight:400;
}
.step-body h3{font-size:24px;margin-bottom:8px;}
.step-body p{color:var(--ink-dim);margin:0;max-width:64ch;}
.step-meta{
  display:block;margin-top:8px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--moss);font-weight:600;
}

/* =====================================================================
   QUOTE PLATE — ONE pattern, ONE name
   The cohesion audit found this block coined four separate times under
   four names (full-width-quote-plate / pull-quote-plate /
   threshold-quote-plate / quote-band-hairline-framed). It is one thing.
   Typographic only — no photograph ever goes on this plate.
   ===================================================================== */
.quote-plate{
  background:var(--canvas-alt);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:76px 28px;text-align:center;
}
.quote-plate blockquote{
  margin:0 auto;max-width:860px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(26px,3.6vw,40px);line-height:1.3;color:var(--ink);
}
.quote-plate .attrib{
  display:block;margin-top:22px;max-width:640px;margin-left:auto;margin-right:auto;
  font-family:'Sora',sans-serif;font-size:14px;font-weight:300;
  line-height:1.7;color:var(--ink-dim);
}
.quote-plate .glyph{margin-bottom:28px;}
/* the surface variant, for when a quote sits mid-band rather than as its own plate */
.quote-inset{
  border-left:1px solid var(--accent);padding:6px 0 6px 26px;margin:30px 0;
  font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.35;color:var(--ink);
}

/* =====================================================================
   PILLARS — ONE pattern, ONE name
   Also found under three names and three shapes by the cohesion audit.
   The LABEL travels across pages; the full sentence does not.
   ===================================================================== */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.pillars.three{grid-template-columns:repeat(3,1fr);}
.pillar{padding:32px 26px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.pillar:last-child{border-right:none;}
.pillar h3{font-size:21px;margin-bottom:10px;}
.pillar p{font-size:13.5px;color:var(--ink-dim);margin:0;line-height:1.65;}
.pillar .section-label{display:block;margin-bottom:12px;color:var(--accent);font-size:10px;}

/* =====================================================================
   SPREAD — alternating full-width offering blocks
   Anne on the 23 July call, Kristin agreeing: "I particularly like it
   better on service pages... it's kind of similar to maybe how we would
   lay out what your offerings are." So spreads live on lane and service
   pages, never on home.
   ===================================================================== */
.spread{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;}
.spread + .spread{border-top:1px solid var(--line);}
.spread.flip .spread-media{order:2;}
.spread-media{overflow:hidden;align-self:stretch;}
.spread-media img{width:100%;height:100%;object-fit:cover;min-height:420px;}
.spread-body{padding:60px 56px;}
.spread-body h3{font-size:clamp(26px,3.2vw,36px);margin-bottom:14px;}
.spread-body p{color:var(--ink-dim);margin:0 0 18px;max-width:52ch;}
.spread-body .section-label{display:block;margin-bottom:14px;}

/* ---------- letter blocks (About) ---------- */
.letter{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.letter.flip .letter-media{order:2;}
.letter-media{display:grid;gap:16px;}
.letter-media img{width:100%;object-fit:cover;}
.letter-media .tall{aspect-ratio:3/4;}
.letter-media .wide{aspect-ratio:4/3;}
.letter-body h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:16px;}
.letter-body p{color:var(--ink-dim);margin:0 0 20px;line-height:1.8;}
.letter-body p:last-child{margin-bottom:0;}

/* ---------- about grid (home) ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.about-figure{aspect-ratio:3/4;overflow:hidden;}
.about-figure img{width:100%;height:100%;object-fit:cover;}
.about-body h2{font-size:clamp(28px,3.5vw,38px);margin-bottom:18px;}
.about-body p{color:var(--ink-dim);margin:0 0 24px;line-height:1.8;}

/* =====================================================================
   PRODUCTS — the investment block
   Built with the price slot EMPTY on purpose. Pricing is a RED gate and
   every number spoken on the 29 July call was Anne's, offered as an
   example and never agreed. See Copy/PAGE_TeacherMentorship.md §10.
   ===================================================================== */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.product{
  background:var(--surface);border:1px solid var(--line);
  padding:36px 32px;display:flex;flex-direction:column;
}
.product .section-label{display:block;margin-bottom:14px;color:var(--accent);font-size:10px;}
.product h3{font-size:26px;margin-bottom:10px;}
.product > p{color:var(--ink-dim);font-size:14px;margin:0 0 22px;}
.product ul{list-style:none;margin:0 0 26px;padding:0;}
.product li{
  position:relative;padding-left:22px;margin-bottom:11px;
  color:var(--ink-dim);font-size:14px;line-height:1.6;
}
.product li::before{
  content:"";position:absolute;left:0;top:11px;
  width:9px;height:1px;background:var(--accent);
}
.price-slot{
  margin-top:auto;border-top:1px solid var(--line);padding-top:20px;
}
.price-hold{
  display:block;border:1px dashed rgba(230,225,215,.5);
  background:rgba(255,255,255,.035);padding:14px 16px;
  color:rgba(230,225,215,.7);font-size:.72rem;letter-spacing:.04em;line-height:1.5;
}

/* ---------- status band (seasonal offerings) ---------- */
.status-band{
  background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:40px 0;
}
.status-band .wrap{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;}
.status-mark{
  flex:0 0 auto;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--lane-families);padding-top:4px;
}
.status-copy{flex:1;min-width:280px;}
.status-copy h2{font-size:26px;margin-bottom:10px;}
.status-copy p{color:var(--ink-dim);margin:0;max-width:64ch;}

/* ---------- still-life strip ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.strip figure img{aspect-ratio:4/5;width:100%;object-fit:cover;}
.strip figcaption{
  margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-muted);font-weight:600;
}

/* ---------- lane bridge ---------- */
.bridge{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;}
.bridge img{aspect-ratio:1/1;width:100%;object-fit:cover;}
.bridge h3{font-size:26px;margin-bottom:12px;}
.bridge p{color:var(--ink-dim);margin:0 0 16px;max-width:56ch;}

/* ---------- article index ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.post{background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;}
.post-thumb{aspect-ratio:16/10;overflow:hidden;}
.post-thumb img{width:100%;height:100%;object-fit:cover;}
.post-body{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1;}
/* --ink-muted (the .section-label default) is 4.35:1 on --surface and fails
   the 4.5 floor, so every card-borne label is re-coloured. .offer-body,
   .feature-card-body and .product already do this; .post-body must too. */
.post-body .section-label{display:block;margin-bottom:10px;font-size:10px;color:var(--moss);}
.post-body h3{font-size:22px;margin-bottom:10px;}
.post-body p{font-size:13.5px;color:var(--ink-dim);margin:0 0 16px;line-height:1.6;}
.post-body .textlink{margin-top:auto;align-self:flex-start;}
.filter-rail{
  display:flex;gap:28px;flex-wrap:wrap;justify-content:center;
  padding:0 0 34px;border-bottom:1px solid var(--line);margin-bottom:40px;
}
.filter-rail a{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink-muted);padding-bottom:6px;border-bottom:1px solid transparent;
}
.filter-rail a:hover{color:var(--accent);}
.filter-rail a.is-current{color:var(--ink);border-bottom-color:var(--accent);}

/* ---------- signup (forest plate) ---------- */
/* AUDIT, carried from the mockup: --forest #3A5A3A is a mid-value plate and
   ONLY --ink clears AA on it (5.90:1). --accent was 3.09 and --ink-dim 3.12.
   Every text node on this plate is --ink. Gold reads through the button fill. */
.signup{
  padding:72px 28px;text-align:center;background:var(--forest);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.signup .microlabel{display:block;color:var(--ink);margin-bottom:16px;}
.signup h2{font-size:clamp(28px,4vw,40px);margin-bottom:14px;color:var(--ink);}
.signup p{max-width:540px;margin:0 auto 32px;color:var(--ink);}
/* Two fields since 2026-09-13, so a signup arrives as a person and not an address.
   The name takes a little less room than the email, which is the longer thing to type. */
.signup-form{display:flex;justify-content:center;gap:0;max-width:640px;margin:0 auto;}
.signup-form input[type="email"],
.signup-form input[type="text"]{
  flex:1.3;min-width:0;padding:14px 18px;
  font-family:'Sora',sans-serif;font-size:14px;font-weight:300;
  border:1px solid var(--ink-dim);border-right:none;
  background:var(--canvas);color:var(--ink);outline:none;
  transition:border-color .2s ease;
}
.signup-form input[type="text"]{flex:1;}
.signup-form input::placeholder{color:var(--ink-muted);}
.signup-form input:focus{border-color:var(--ink);position:relative;z-index:1;}
.signup-form .btn{white-space:nowrap;border-color:var(--accent);background:var(--accent);color:var(--canvas);}
.signup-form .btn:hover{background:var(--accent-warm);border-color:var(--accent-warm);color:var(--canvas);}

/* ---------- contact form ---------- */
.form-card{
  background:var(--surface);border:1px solid var(--line);padding:40px 36px;
}
.form-card h2{font-size:28px;margin-bottom:8px;}
.form-card > p{color:var(--ink-dim);margin:0 0 26px;font-size:14px;}
.field{margin-bottom:20px;}
.field label{
  display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink-dim);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;
  font-family:'Sora',sans-serif;font-size:14px;font-weight:300;
  background:var(--canvas);color:var(--ink);
  border:1px solid var(--ink-dim);outline:none;transition:border-color .2s ease;
}
.field textarea{min-height:132px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);}
.field select{appearance:none;cursor:pointer;}

/* ---------- NAP ---------- */
.nap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);}
.nap div{padding:28px 26px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.nap div:last-child{border-right:none;}
.nap h3{font-size:13px;font-family:'Sora',sans-serif;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--moss);margin-bottom:12px;}
.nap p{color:var(--ink-dim);margin:0;font-size:14px;}

/* ---------- footer ---------- */
.site-footer{
  text-align:center;padding:56px 28px 44px;
  border-top:1px solid var(--line);background:var(--canvas-alt);
}
.footer-wordmark{
  font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--ink);margin-bottom:2px;
}
.footer-sample{
  font-size:9px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--moss);font-weight:600;margin-bottom:22px;
}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-bottom:24px;}
.footer-nav a{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);
  border-bottom:1px solid transparent;transition:color .2s ease;
}
.footer-nav a:hover{color:var(--accent);}
.footer-line{font-size:13px;color:var(--ink-muted);margin:4px 0;line-height:1.5;}
.footer-sep{border:none;border-top:1px solid var(--line);margin:24px 0;}
.footer-credit{font-size:11px;color:var(--ink-muted);margin:0;letter-spacing:0.04em;}

/* ---------- placeholder ---------- */
/* AUDIT, carried: caption alpha .7 (4.91 worst stop), dash alpha .5 (3.31). */
.img-ph{
  width:100%;height:100%;min-height:190px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;box-sizing:border-box;
  background:rgba(255,255,255,.035);border:1px dashed rgba(230,225,215,.5);
  color:rgba(230,225,215,.7);font-family:'Sora',sans-serif;
  font-size:.72rem;letter-spacing:.04em;line-height:1.5;
}
.note-hold{
  border:1px dashed rgba(230,225,215,.5);background:rgba(255,255,255,.035);
  padding:20px 22px;color:rgba(230,225,215,.7);
  font-size:.78rem;letter-spacing:.03em;line-height:1.65;
}
.note-hold strong{color:rgba(230,225,215,.92);font-weight:600;}

/* ---------- utility ---------- */
.stack-sm > * + *{margin-top:14px;}
.center{text-align:center;}
.mt-0{margin-top:0;}
.mb-32{margin-bottom:32px;}
.mb-48{margin-bottom:48px;}
.lede{font-size:17px;color:var(--ink-dim);line-height:1.8;}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .split-hero,.spread,.letter{grid-template-columns:1fr;}
  .split-hero.flip .split-media,.spread.flip .spread-media,.letter.flip .letter-media{order:0;}
  .split-body,.spread-body{padding:44px 28px;}
  .split-media img,.spread-media img{min-height:300px;}
  .split-media .img-ph,.about-figure .img-ph{min-height:300px;}
  .pillars,.pillars.three{grid-template-columns:repeat(2,1fr);}
  .pillar:nth-child(2n){border-right:none;}
  .post-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .feature-two{grid-template-columns:1fr;}
  .offer-grid.five,.offer-grid.four{grid-template-columns:repeat(2,1fr);}
  .porch-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr;}
  .nap{grid-template-columns:1fr;}
  .nap div{border-right:none;}
  .bridge{grid-template-columns:1fr;gap:26px;}
  .bridge img{max-width:280px;}
}
@media(max-width:600px){
  .offer-grid.five,.offer-grid.four,.offer-grid.three,.offer-grid.two{grid-template-columns:1fr;}
  .post-grid,.strip{grid-template-columns:1fr;}
  .pillars,.pillars.three{grid-template-columns:1fr;}
  .pillar{border-right:none;}
  .porch-item{flex-direction:column;}
  .porch-thumb{width:100%;height:140px;}
  .hero,.page-hero{padding:56px 20px 40px;}
  .signup-form{flex-direction:column;gap:12px;}
  .signup-form input[type="email"],
  .signup-form input[type="text"]{border-right:1px solid var(--ink-dim);}
  /* Three amounts across a phone leaves two on one line and one orphaned beneath.
     Stack them, the way the signup strip above already stacks at this width. */
  .donation-amounts{flex-direction:column;}
  .step{grid-template-columns:1fr;gap:10px;}
  .step-num{font-size:32px;}
  .letter{gap:32px;}
  .form-card{padding:30px 22px;}
}
@media print{.concept-banner{display:none;}}

/* ---------- brand lockup (Heartsong Studio, tagline from Kristin 2026-08-13) ---------- */
.brand-tagline{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:16px;color:var(--ink-dim);letter-spacing:0.02em;
}
.footer-tagline{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:var(--ink-dim);margin-bottom:22px;
}

/* ---------- home hero: the pictures ARE the hero (13 Aug, second pass) ----------
   Triptych directly under the header — no word block between nav and images.
   Each lane's identifier sits ABOVE its card as the wayfinding header; the
   caption bar keeps offering name + line. The identity sentence follows the
   band as one quiet H1 in search language. Seasonal Rhythm composition,
   Ground tokens only. */
.hero-band{padding:0;}
.lane-band{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--canvas-alt);
  border-bottom:1px solid var(--line);
}
.lane-head{
  display:block;text-align:center;padding:24px 12px 20px;
  font-family:'Sora',sans-serif;text-transform:uppercase;
  letter-spacing:0.24em;font-size:12px;font-weight:600;
  background:var(--canvas);
}
.hero-line{padding:52px 28px 10px;text-align:center;}
.hero-line h1{
  font-size:clamp(21px,2.4vw,28px);font-weight:400;
  max-width:820px;margin:0 auto;color:var(--ink);line-height:1.45;
}
.lane-cell{display:flex;flex-direction:column;min-width:0;background:var(--canvas);text-align:left;}
.lane-cap{flex:1;}
.lane-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;}
.lane-media .img-ph{aspect-ratio:4/5;height:auto;min-height:0;}
.lane-cap{padding:20px 22px 28px;background:var(--surface);}
.lane-cap strong{
  display:block;font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:500;
  color:var(--ink);margin:8px 0 6px;transition:color .2s ease;
}
.lane-cap .lane-line{display:block;font-size:13.5px;color:var(--ink-dim);line-height:1.55;}
.lane-cell:hover .lane-cap strong,.lane-cell:focus-visible .lane-cap strong{color:var(--accent);}
@media(max-width:900px){
  .lane-band{grid-template-columns:1fr;}
  .lane-media img{aspect-ratio:3/2;}
  .lane-media .img-ph{aspect-ratio:3/2;}
}

/* ---------- season facts plate (the fall 2026 offerings) ----------
   Day, time, dates, ages, where — the operational facts a parent scans for
   before anything else. Ground tokens only. */
.season{
  border:1px solid var(--line);
  background:var(--surface);
  padding:30px 32px;
}
.season-label{
  display:block;font-family:'Sora',sans-serif;text-transform:uppercase;
  letter-spacing:.22em;font-size:11px;font-weight:600;color:var(--accent);
  margin-bottom:22px;
}
.season-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:22px 30px;margin:0;
}
.season-term{
  display:block;font-family:'Sora',sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:10px;font-weight:600;color:var(--moss);
  margin-bottom:6px;
}
.season-def{
  display:block;font-family:'Cormorant Garamond',serif;font-size:19px;
  color:var(--ink);line-height:1.35;
}
.season-def .sub{
  display:block;font-family:'Sora',sans-serif;font-size:12.5px;
  color:var(--ink-dim);margin-top:5px;line-height:1.5;
}
.season-foot{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-dim);line-height:1.6;
}
@media(max-width:600px){ .season{padding:24px 22px;} }

/* ---------------------------------------------------------------------
   Anne's notes on the review site, 26 August. Photographic plates behind
   two bands and a centred/gold treatment on the three-areas pillars. The
   overlay is what keeps body copy legible over a photograph, so it is
   part of the rule rather than something to add later.
   ------------------------------------------------------------------ */
.quote-plate--photo{position:relative;isolation:isolate;border:0;overflow:hidden;}
.quote-plate--photo::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("img/annie-spratt-T8lOSHgtEoc.jpg") center/cover no-repeat;
}
.quote-plate--photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(28,42,33,.82),rgba(28,42,33,.82));
}

.band--photo{position:relative;isolation:isolate;overflow:hidden;}
.band--photo::before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;}
.band--photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(28,42,33,.86),rgba(28,42,33,.86));}
.band--photo-evie::before{background-image:url("img/evie-s-FYmptPt4P4E.jpg");}

/* centred, gold-headed variant of the pillar grid */
.pillars--feature .pillar{text-align:center;}
.pillars--feature .pillar h3{color:var(--accent);font-weight:600;}
.pillars--feature .pillar .section-label{margin-left:auto;margin-right:auto;}

/* ---------------------------------------------------------------------
   Price. Entered by Anne on the review site 26 August and confirmed by
   David the same day; the slot was held empty before that, deliberately.
   The travel note is fine print, not part of the figure, so it is a
   separate element rather than a run-on of the price line.
   ------------------------------------------------------------------ */
.price{display:block;font-family:'Cormorant Garamond',serif;font-size:34px;
  line-height:1.1;color:var(--ink);}
.price-per{font-size:18px;color:var(--ink-dim);}
.price-term{display:block;margin-top:4px;font-size:13px;color:var(--ink-dim);}
.price-note{display:block;margin-top:12px;font-size:12px;line-height:1.55;
  color:var(--ink-muted);}

/* One offering left after the Group mentorship block came out (26 Aug), so the
   two-column grid was leaving half a row of empty canvas beside it. */
.product-grid--one{grid-template-columns:minmax(0,560px);justify-content:center;}

/* =====================================================================
   Anne's Canva markup, 26 August. Six notes the on-page editor could not
   express, because they are layout rather than copy.
   ================================================================== */

/* 1 · the identity line sits on a photographic plate now, and the box is
       wider so the sentence does not leave "do." alone on its own line. */
.hero-line--photo{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:300px;padding:56px 28px;
}
.hero-line--photo::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("img/annie-spratt-T8lOSHgtEoc.jpg") center/cover no-repeat;
}
.hero-line--photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(28,42,33,.84),rgba(28,42,33,.84));
}
.hero-line--photo h1{max-width:980px;}

/* 2 · a shorter picture band. The lane images were 4:5 portraits, which
       made the fold tall enough to push the identity line off screen. */
.lane-band--short .lane-media img,
.lane-band--short .lane-media .img-ph{aspect-ratio:4/3;}

/* 4 · the mentorship split hero was running past a screen. Shorter floor,
       and the photograph crops rather than dictating the height. */
.split-hero--short{min-height:0;}
.split-hero--short .split-media img{min-height:0;height:100%;}
.split-hero--short .split-body{padding:52px 48px;}
@media (min-width:861px){
  .split-hero--short{min-height:400px;max-height:460px;}
  .split-hero--short .split-media{max-height:460px;}
}

/* 5 · the About banner: her portrait on the plate its own background came
       from, with the line beside it. Built as elements rather than a
       flattened PNG so the words stay real text at every width. */
.about-banner{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,300px) 1fr;
  align-items:center;gap:38px;
  padding:34px 40px;min-height:320px;
}
.about-banner::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("img/about-banner-plate.jpg") center/cover no-repeat;
}
.about-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(28,42,33,.55),rgba(28,42,33,.78));
}
.about-banner__portrait{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border:1px solid rgba(230,225,215,.35);
}
/* This line is the about page's h1. It was a <p> until 2026-09-11, when the
   page turned out to have no h1 at all and its headings started at h2. The
   words and the look are unchanged; only the element is. font-weight and
   letter-spacing are pinned because the shared h1,h2,h3,h4 rule above would
   otherwise move this from 300/normal to 400/.01em. */
.about-banner__text h1{
  margin:0;font-family:'Cormorant Garamond',serif;
  font-size:clamp(24px,3vw,38px);line-height:1.32;color:var(--ink);
  font-weight:300;letter-spacing:normal;
}
@media (max-width:720px){
  .about-banner{grid-template-columns:1fr;gap:22px;text-align:center;padding:28px 22px;}
  .about-banner__portrait{max-width:240px;margin:0 auto;}
}

/* Anne lengthened the second button in round one ("See what a year OF
   MENTORSHIP looks like"), which pushed the pair onto two rows once the
   hero got shorter. Her mockup has them inline, so the buttons tighten in
   this hero only — and still wrap on a narrow screen rather than overflow. */
@media (min-width:861px){
  .split-hero--short .cta-row{flex-wrap:wrap;gap:12px;}
  .split-hero--short .cta-row .btn{padding-left:20px;padding-right:20px;font-size:10.5px;}
}

/* The Offerings dropdown had no narrow-screen rule, so it kept its desktop
   geometry on a phone: 212px wide, centred on a nav item sitting near the right
   edge. `visibility:hidden` hides a panel but still counts toward scrollWidth,
   so every page scrolled sideways by 18px on a 390px screen whether or not the
   menu was ever opened. Anchor it to the item's right edge and cap it to the
   viewport, so it grows inward instead of off the page. */
@media (max-width:860px){
  .subnav{
    left:auto;right:0;transform:none;
    min-width:0;width:max-content;max-width:calc(100vw - 24px);
  }
}

/* Anne: "center this square card in the block". The card already sits dead
   centre of its grid — 252px of canvas either side — so what reads as
   off-centre is its contents, left-aligned inside a section whose heading and
   eyebrow are centred. Centre the contents; the list keeps its left edge so the
   dashes still line up as a list. */
.product-grid--one .product{text-align:center;}
.product-grid--one .product ul{display:inline-block;text-align:left;}
.product-grid--one .product .price-slot{text-align:center;}

/* The women's circle asks for a donation rather than a price, so its card carries a
   button per amount instead of one Enroll. They wrap rather than shrink on a phone. */
.donation-amounts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;
}

/* =====================================================================
   Anne's Canva markup + on-page notes, 27 August. Same shape as the 26th:
   layout the editor had no way to express, so it arrived as pictures and as
   sentences addressed to us inside copy fields.
   ================================================================== */

/* Photographic plates reach three more bands. The overlay is part of the
   rule, not a finish — body copy over a photograph is unreadable without it,
   and every one of these carries real prose rather than a single line. */
.band--photo-annie::before{background-image:url("img/annie-spratt-T8lOSHgtEoc.jpg");}
.band--photo-louise::before{background-image:url("img/louise-vildmark-RMC-Xqh0lXw.jpg");}

/* The Resources hero, on a plate of its own. Anne asked for the padding
   below to come down by a fifth: 44px is the shared .page-hero floor, so
   this one sits at 35px and nothing else moves. */
.page-hero--photo{position:relative;isolation:isolate;overflow:hidden;padding-bottom:35px;}
.page-hero--photo::before{content:"";position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;}
.page-hero--photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(28,42,33,.86),rgba(28,42,33,.86));}
.page-hero--photo-evie::before{background-image:url("img/evie-s-FYmptPt4P4E.jpg");}

/* Three sliding-scale tiers, side by side and reordered supported → base →
   supporting. The shared .product-grid is two columns, which left the third
   card alone on a second row looking like an afterthought rather than the
   third rung of a scale. Below 860px they stack, which is the existing rule. */
@media (min-width:861px){
  .product-grid--three{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* "widen the cards each 20% so that they are not so long" — David, 18 Sep,
   looking at the three parent coaching prices. Inside the 920px mid measure
   those cards were 272px wide and ran 806px tall, which is a column of text
   with a price at the bottom of it. 20% takes them to 326px and 676px, and the
   whole section then fits one screen.

   The GRID breaks out of the measure; the measure is not widened. Everything
   else in those bands — the eyebrow, the heading, the note under the cards —
   keeps the line length it was set to, which is the reason .mid exists. 81.6px
   each side is exactly the 20%. Below 1160px the break-out would start eating
   the window margin, so it stops and the cards go back to the measure. */
@media (min-width:1160px){
  .product-grid--wide{margin-left:-81.6px;margin-right:-81.6px;}
}

/* "Please place additional padding below the pricing and before the button.
   They are too close together" — same note. .price-slot ends at its own
   padding, so the button sat flush against the figure. */
.product-grid--wide .price-slot{margin-bottom:20px;}

/* "no second row - widen so that everything is on the same row." Six terms
   at the shared minmax(170px) wrapped 4 + 2 inside .wrap mid. The section
   goes full-width and the columns are declared rather than auto-fit, so the
   row is exact instead of a coincidence of container width. Under 1100px it
   falls back to the shared auto-fit rule rather than crushing six columns
   into a phone. */
@media (min-width:1100px){
  /* Six EQUAL columns came out at 146px against the shared 170px minimum, so
     "widen" would have made every cell narrower than it started. The fields
     are wildly uneven -- "Women only" against a tuition line carrying two
     prices and a sentence -- so the track weights follow the content instead
     of pretending the six are the same size. */
  .season--row .season-list{
    grid-template-columns:0.95fr 0.95fr 1.5fr 1.25fr 0.75fr 1.1fr;
    gap:22px 26px;
  }
  .season--row .season-def{font-size:17px;}
  .season--row .season-def .sub{font-size:12px;}
}

/* The photographs Anne named on 27 August, which only reached this machine on
   the 28th. Two are plates behind existing bands, so they override the image
   on the shared modifier and inherit its overlay and stacking. */
.quote-plate--micheile::before{background-image:url("img/micheile-henderson-bLCQXpLPmXY.jpg");}
.band--photo-micheile-close::before{background-image:url("img/micheile-henderson-nNqBDh_l3oE.jpg");}

/* ---------------------------------------------------------------------
   Long-form article body. Her writing is stanza-like — many short lines
   broken with <br> inside a single paragraph rather than prose blocks — so
   line-height and paragraph spacing carry more of the reading than usual,
   and the measure stays narrow enough that a broken line still scans.
   ------------------------------------------------------------------ */
.article-body{font-size:16.5px;line-height:1.85;color:var(--ink);}
.article-body p{margin:0 0 26px;}
.article-body h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(24px,3vw,30px);line-height:1.25;
  margin:48px 0 18px;color:var(--ink);
}
.article-body h2:first-child{margin-top:0;}
.article-body strong{font-weight:600;color:var(--ink);}
.article-body em{font-style:italic;}
.article-body a{color:var(--accent);}
.article-body img,.article-body .wide{max-width:100%;height:auto;}
@media(max-width:600px){ .article-body{font-size:16px;line-height:1.8;} }

/* Anne, 28 Aug: "add a search bar and make it so that the articles are
   searchable from the search bar." Scoped to posts, so it searches her writing
   rather than the whole site. */
.article-search{display:flex;gap:0;max-width:520px;margin:0 auto 40px;}
.article-search input[type="search"]{
  flex:1;min-width:0;padding:13px 16px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-right:none;
  font-family:'Sora',sans-serif;font-size:14px;
}
.article-search input[type="search"]::placeholder{color:var(--ink-muted);}
.article-search input[type="search"]:focus{outline:2px solid var(--accent);outline-offset:-2px;}
.article-search .btn{border-radius:0;white-space:nowrap;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.band--photo-anna::before{background-image:url("img/anna-sullivan-J7yf-hkDPno.jpg");}
.band--photo-araf::before{background-image:url("img/araf-ibne-alam-G3SoL0sED3o.jpg");}
.quote-plate--anna::before{background-image:url("img/anna-sullivan-J7yf-hkDPno.jpg");}

/* Forms that actually submit (2026-09-07). The honeypot is positioned away rather than
   display:none, which the bots worth catching already know to skip. */
.hs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-notice{
  margin:0 0 20px;padding:12px 16px;font-size:14px;line-height:1.5;
  border-left:3px solid var(--accent);background:rgba(0,0,0,.04);color:var(--ink);
}
.form-notice-no{border-left-color:var(--ink-dim);}
.signup .form-notice{max-width:520px;margin-left:auto;margin-right:auto;text-align:left;}

/* Songs Across the Veil and Mama to Mama (18 October). The event's own copy
   sits above its facts box, so the two need a gap between them. */
.gathering-copy{margin-bottom:40px;}
.gathering-copy .lede + .lede{margin-top:18px;}
.page-mama-to-mama .band-alt .lede + .lede{margin-top:18px;}

/* Four fixed gifts as cards that are the buttons. Four across on a desktop,
   two by two on a phone, so $125 never sits alone on a row. */
.gift-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px;}
.gift{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:28px 16px;text-align:center;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;transition:border-color .2s;}
.gift:hover{border-color:var(--accent);}
.gift .price{font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--accent);line-height:1;}
.gift .price-term{font-size:13px;color:var(--ink-dim);line-height:1.4;}
@media (max-width:700px){.gift-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.gift-own{max-width:420px;margin:36px auto 0;text-align:center;}
.gift-own label{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink-dim);margin-bottom:14px;}
.gift-own-row{display:flex;align-items:center;justify-content:center;gap:10px;}
.gift-own-currency{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--accent);}
.gift-own input{width:140px;padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);}