/* =========================================================================
   sf-helen.css — StoryFawn × Helen the Cat visual-language override
   Load LAST, after StoryFawn's own stylesheet(s). No structural HTML
   changes required — this only redefines tokens and adds utility classes.

   CONTRAST AUDIT (WCAG 2.1, computed against the tokens defined below):
     --sf-cream (#f5ecdf) on --sf-ground (#1a1420)        ≈ 15.4 : 1  (AAA)
     --sf-gold-text (#f0d49a) on --sf-ground (#1a1420)    ≈ 12.5 : 1  (AAA)
     --sf-gold-text (#f0d49a) on --sf-chip-bg-effective   ≈  9.6 : 1  (AAA)
       (chip bg = rgba(218,178,107,0.14) flattened over --sf-ground)
     --sf-ground (#1a1420) on --sf-gold (#dab26b) [CTA]   ≈  9.1 : 1  (AAA)
   All body-text pairs clear the 4.5:1 AA floor with large margin; the
   two "text on gold" pairs also clear 7:1 AAA.
   ========================================================================= */

:root {
  /* --- Ground / surface: warm dark, NOT pure black (keeps StoryFawn's
     "warm children's brand" identity rather than Helen's cold luxury black).
     Sits between StoryFawn's #15122b and Helen's rgb(20,12,8). --- */
  --sf-ground: #1a1420;
  --sf-ground-raised: #221a2c;   /* cards, panels, one step up from ground */
  --sf-ground-sunken: #140f1a;   /* footers, deepest recess */

  /* --- Gold system, taken directly from Helen's measured tokens --- */
  --sf-gold: #dab26b;                     /* solid gold, rgb(218,178,107) */
  --sf-gold-text: #f0d49a;                /* gold text, rgb(240,212,154) */
  --sf-gold-rgb: 218, 178, 107;           /* for rgba() translucency */
  --sf-chip-bg: rgba(var(--sf-gold-rgb), 0.14);
  --sf-chip-bg-hover: rgba(var(--sf-gold-rgb), 0.20);
  --sf-chip-border: rgba(var(--sf-gold-rgb), 0.35);

  /* --- Text --- */
  --sf-cream: #f5ecdf;                    /* body copy, rgb(245,236,223) */
  --sf-cream-muted: #cfc4d6;              /* secondary body / captions,
                                              muted purple-grey kept from
                                              StoryFawn's existing palette */
  --sf-text-on-gold: var(--sf-ground);    /* near-black text on solid gold */

  /* --- Borders / hairlines --- */
  --sf-hairline: rgba(var(--sf-gold-rgb), 0.28);

  /* --- Radii: Helen's system is mostly square; keep one soft radius
     token alive for anything StoryFawn still needs rounded (e.g. avatars) --- */
  --sf-radius-square: 0px;
  --sf-radius-soft: 6px;

  /* --- Type --- */
  --sf-font-display: "Fraunces", Georgia, serif;
  --sf-display-weight: 480;
  --sf-eyebrow-tracking: 0.14em;

  /* --- Rhythm: generous vertical spacing per Helen's negative-space cue --- */
  --sf-space-section: clamp(4rem, 8vw, 7rem);
  --sf-measure: 62ch; /* left-aligned reading measure */
}

/* =========================================================================
   Base surface + type — repaint without touching markup
   ========================================================================= */

body {
  background-color: var(--sf-ground);
  color: var(--sf-cream);
}

h1, h2, .sf-display {
  font-family: var(--sf-font-display);
  font-weight: var(--sf-display-weight); /* 480 — explicitly not bold */
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.75rem, 6vw, 5rem); }
h2 { font-size: clamp(1.875rem, 3.4vw, 3rem); }

/* Helen's headings end in a full stop as editorial voice, not CSS — this
   utility just gives that convention a hook for a trailing glyph so copy
   authors don't have to type a literal "." after inline elements (e.g. a
   <span> that already ends the sentence visually). Optional; safe no-op
   if unused. */
.sf-full-stop::after {
  content: ".";
}

p, li, .sf-body {
  color: var(--sf-cream-muted);
}

/* =========================================================================
   Eyebrow — tiny letterspaced uppercase gold label
   ========================================================================= */

.sf-eyebrow {
  display: inline-block;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--sf-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--sf-gold-text);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.sf-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 600;
  padding: 11px 18px;
  background-color: var(--sf-gold);
  color: var(--sf-text-on-gold);
  border: 1px solid var(--sf-gold);
  /* Overriding StoryFawn's default pill CTA (border-radius: 14-20px) —
     Helen's primary CTA is square, this is the one deliberate shape
     inversion the brief calls for. */
  border-radius: var(--sf-radius-square) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.sf-btn-primary:hover {
  background-color: var(--sf-gold-text);
}

.sf-btn-primary:focus-visible {
  outline: 2px solid var(--sf-gold-text);
  outline-offset: 3px;
}

/* Pill nav / filter chip — translucent gold, kept round per Helen's nav */
.sf-chip {
  display: inline-flex;
  align-items: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 5px 10px;
  background-color: var(--sf-chip-bg);
  color: var(--sf-gold-text);
  border: 1px solid var(--sf-chip-border);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.sf-chip:hover {
  background-color: var(--sf-chip-bg-hover);
}

.sf-chip:focus-visible {
  outline: 2px solid var(--sf-gold-text);
  outline-offset: 2px;
}

/* =========================================================================
   Cards — product / story cards
   ========================================================================= */

.sf-card {
  background-color: var(--sf-ground-raised);
  /* Overriding StoryFawn's 14-20px card radius — Helen's cards are square
     with a hairline border instead of a shadow-based elevation cue. */
  border-radius: var(--sf-radius-square) !important;
  border: 1px solid var(--sf-hairline);
  box-shadow: none;
  overflow: hidden;
}

.sf-card img {
  display: block;
  width: 100%;
  border-radius: 0;
}

.sf-card .sf-card-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--sf-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--sf-gold-text);
}

.sf-card .sf-card-title {
  font-family: var(--sf-font-display);
  font-weight: var(--sf-display-weight);
  color: var(--sf-cream);
}

.sf-card .sf-card-body {
  color: var(--sf-cream-muted);
}

.sf-card .sf-card-price {
  color: var(--sf-gold-text);
  font-weight: 600;
}

/* =========================================================================
   Layout — left-aligned override for centered blocks
   ========================================================================= */

.sf-left {
  /* Overriding a centered block (text-align: center / margin: 0 auto) —
     Helen's layout is hard-left off a fixed margin, never centered. */
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: var(--sf-measure);
}

/* =========================================================================
   Motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .sf-btn-primary,
  .sf-chip {
    transition: none;
  }
}

/* ---- CONSOLIDATION ALIASES (2026-08-17) -------------------------------
   /create and /gift were written against --sf-ink / --sf-muted / --sf-hair /
   --sf-chip, which this sheet never defined -- so both pages duplicated the
   whole token block inline. Two vocabularies for one design system is the
   actual drift risk. These aliases let either name resolve to the same value
   so there is ONE source of truth. Prefer the canonical names in new work. */
:root{
  --sf-ink:   var(--sf-cream);
  --sf-muted: var(--sf-cream-muted);
  --sf-hair:  var(--sf-hairline);
  --sf-chip:  var(--sf-chip-bg);
}

/* ============================================================
   Section system — Helen standard (added 2026-08-17)
   Left-aligned off a hard margin, gold letterspaced eyebrow,
   Fraunces at display weight (never bold).
   Specificity is deliberately raised with `body` because the
   page's inline <style> block loads AFTER this file.
   Scoped to the homepage section ids only — /create, /gift and
   the landers must not be touched.
   ============================================================ */

body .section-label{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold2,#f0d49a);
  text-align:left;
  margin:0 0 14px;
  display:block;
}

body .section-title{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(2rem,4.4vw,3.1rem);
  font-weight:450;
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--cream,#f5ecdf);
  text-align:left;
  margin:0 0 16px;
}

body .section-sub{
  font-size:16.5px;
  line-height:1.62;
  color:var(--muted,#b9aec4);
  text-align:left;
  max-width:46ch;
  margin:0 0 44px;
}

/* --- Exceptions: centring is doing emotional work here.
       The reveal and the photo grids stay centred. --- */
body #reveal .section-label,
body #see-the-magic .section-label,
body #gallery-peek .section-label,
body #gallery-printed .section-label,
body #reveal .section-title,
body #see-the-magic .section-title,
body #gallery-peek .section-title,
body #gallery-printed .section-title,
body #reveal .section-sub,
body #see-the-magic .section-sub,
body #gallery-peek .section-sub,
body #gallery-printed .section-sub{
  text-align:center;
}
body #reveal .section-sub,
body #see-the-magic .section-sub,
body #gallery-peek .section-sub,
body #gallery-printed .section-sub{
  margin-left:auto;
  margin-right:auto;
}

/* --- Cards: square corners, hairline border --- */
body #how-it-works .step-card,
body #worlds .world-tile,
body #about .promise-card,
body #buying-confidence .proof-card{
  border-radius:0;
  border:1px solid var(--sf-hair,rgba(218,178,107,.22));
  background:rgba(255,255,255,.02);
  text-align:left;
}

body #how-it-works .step-num{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold2,#f0d49a);
  background:none;
  width:auto;height:auto;
  border-radius:0;
  display:block;
  margin-bottom:10px;
}

/* --- Primary CTA: square gold, against the pill nav. Scoped so
       the /create and /gift purchase buttons are untouched. --- */
body #last-minute-band .btn-primary,
body #gift .btn-primary,
body #cta-band .btn-primary,
body #pricing .btn-primary{
  border-radius:0;
}

@media (max-width:760px){
  body .section-sub{max-width:none;}
}

/* ---- Grid corrections (2026-08-17) --------------------------------
   Found by measuring, not by eye:
   - .worlds-grid carried max-width:580px + margin:0 80px INSIDE the
     780px .wrap, so it self-shrank and left a dead right gutter.
   - .promise-grid put 4 cards in 3 columns -> orphaned 4th.
   - .pricing-grid put 3 cards in 2 columns -> orphaned 3rd. That third
     card is the $29 printed ADD-ON, not a tier, so it spans full width
     instead of being forced into an equal third.
   Desktop-only; existing mobile rules still govern below 900px.
   ------------------------------------------------------------------ */
@media (min-width:900px){

  body #worlds .worlds-grid{
    max-width:none;
    margin-left:0;
    margin-right:0;
  }

  body #about .promise-grid{
    grid-template-columns:repeat(2,1fr);
  }

  body #pricing .pricing-grid > .price-card:nth-child(3){
    grid-column:1 / -1;
  }
}

/* The worlds CTA sat centred under left-aligned content. */
body #worlds .worlds-cta,
body #worlds .btn-primary{
  border-radius:0;
}

/* ---- Component polish (2026-08-17) --------------------------------
   Square corners per the standard: the tension between square CTA and
   pill nav is deliberate. The worlds CTA's parent carries an INLINE
   text-align:center, so !important is the only way to reach it without
   editing markup — used here narrowly and nowhere else.
   ------------------------------------------------------------------ */
body #worlds .worlds-cta-wrap,
body #worlds .wrap > div[style*="text-align:center"]{
  text-align:left !important;
}

body #pricing .price-card{
  border-radius:0;
}
body #pricing .pc-cta,
body #pricing .pc-cta-ghost{
  border-radius:0;
}