/* ============================================================================
   The site's visual layer: surfaces, depth, typography rhythm and spacing.

   Applies to every page. It sits on top of tokens.css (the palette) and beside
   theme.css and blog.css (components), and holds the decisions that are about
   HOW a surface reads rather than what colour it is.

   Written as a prototype on three pages, then applied across the site once the
   operator had seen it. The reasoning behind each block is kept inline, because
   most of these rules exist to undo a specific measured problem rather than to
   express a preference.
   ============================================================================ */
:root {
  /* --- Glass ----------------------------------------------------------------
     Two weights. §12: lighter material for interactive elements, heavier for
     structure, and never a light translucent surface stacked on another. */
  /* SOLID, not see-through. Translucency looked good standing still and bad in
     motion: a card's interior showed whatever scrolled behind it, and because the
     page alternates cream and off-white bands, the card's own colour changed as it
     crossed a band boundary. That shimmer is the "background that moves". Surfaces
     are now opaque and only the depth is soft. */
  --surface: #FFFFFF;
  --surface-2: #FCFBF7;
  --glass-blur: none;

  /* The sheen is a whisper, not a gradient block: white catching the top-left
     edge, gone by a third of the way down. This is what makes it read as a
     material rather than a flat translucent rectangle. */
  --sheen: none;

  /* A bright top edge is light landing on the lip of the glass. */
  --lip: inset 0 1px 0 rgba(255, 255, 255, .75);

  /* --- Soft depth -----------------------------------------------------------
     Forest-tinted and wide rather than dark and tight, so it reads as calm.
     No hard ring: on glass, the shadow is the edge. */
  --lift-1: 0 1px 2px rgba(20, 49, 9, .03), 0 10px 30px -14px rgba(20, 49, 9, .16);
  --lift-2: 0 2px 6px rgba(20, 49, 9, .04), 0 22px 48px -18px rgba(20, 49, 9, .22);
  --lift-3: 0 4px 10px rgba(20, 49, 9, .05), 0 34px 70px -22px rgba(20, 49, 9, .26);

  --r-soft: 22px;

  /* --- Type (15) ----------------------------------------------------------- */
  --track-display: -.022em;
  --track-h2: -.015em;
  --track-h3: -.008em;
  --track-body: 0em;
  --track-label: .1em;
  --lead-display: 1.05;
  --lead-h2: 1.16;
  --lead-h3: 1.3;
  --lead-body: 1.65;
}

/* --- 15. Typography --------------------------------------------------------- */
.hero h1, .post-head h1, h1 { letter-spacing: var(--track-display); line-height: var(--lead-display); }
h2, .band h2, .post-body h2 { letter-spacing: var(--track-h2); line-height: var(--lead-h2); }
h3, .post-body h3, .hook h3, .vcard h3 { letter-spacing: var(--track-h3); line-height: var(--lead-h3); }
.post-body p, .lead, p.lead { letter-spacing: var(--track-body); line-height: var(--lead-body); }
.eyebrow, .grp, .origin-chip, .pill { letter-spacing: var(--track-label); }

/* --- Frosted surfaces -------------------------------------------------------
   The card is glass over the page, not a white box on it. background-image
   carries the sheen and background-color the glass, so the two compose without
   a second element. */
.hook,
.cat,
.vcard,
.privacy,
.post-card {
  background-color: var(--surface);
  background-image: none;
  border: 0;
  border-radius: var(--r-soft);
  box-shadow: var(--lift-1), var(--lip);
  transition: box-shadow .26s cubic-bezier(.32, .72, 0, 1),
              transform .26s cubic-bezier(.32, .72, 0, 1),
              background-color .26s ease;
}
.hook:hover,
.cat:hover,
.post-card:hover {
  background-color: var(--surface);
  box-shadow: var(--lift-2), var(--lip);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .hook, .cat, .vcard, .privacy, .post-card { transition: box-shadow .2s ease; }
  .hook:hover, .cat:hover, .post-card:hover { transform: none; }
}

/* Floating chrome is the heaviest glass, because it sits above everything. */
.ddmenu {
  border: 0;
  border-radius: 18px;
  /* Near-opaque on purpose. A menu floats over arbitrary content, so anything
     see-through makes its own labels compete with whatever is behind them. */
  background-color: #FFFFFF;
  background-image: none;
  box-shadow: var(--lift-3), var(--lip);
}

/* --- The button, with the white arrow ---------------------------------------
   Sage pill, white label, and a white disc holding the arrow. The disc is a
   pseudo-element rather than markup so no page has to change, and the arrow is
   a character rather than an SVG so there is no data URI for the CSP to weigh.
   Only the full-size sage button takes it: on a small button the disc would be
   most of the control. */
.btn.sage:not(.sm) {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--sage);
  color: #fff;
  box-shadow: 0 1px 2px rgba(20, 49, 9, .10), 0 10px 22px -12px rgba(20, 49, 9, .38);
  transition: box-shadow .24s cubic-bezier(.32,.72,0,1), transform .24s cubic-bezier(.32,.72,0,1);
}
.btn.sage:not(.sm)::after {
  content: "\2192";               /* → */
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--forest);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  transition: transform .24s cubic-bezier(.32,.72,0,1);
}
.btn.sage:not(.sm):hover {
  opacity: 1;
  box-shadow: 0 2px 4px rgba(20, 49, 9, .12), 0 16px 30px -12px rgba(20, 49, 9, .45);
  transform: translateY(-1px);
}
.btn.sage:not(.sm):hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .btn.sage:not(.sm), .btn.sage:not(.sm)::after { transition: none; }
  .btn.sage:not(.sm):hover { transform: none; }
  .btn.sage:not(.sm):hover::after { transform: none; }
}

/* The quiet button beside it becomes glass, so the pair reads as one system. */
.btn.ghost {
  background-color: var(--surface);
  background-image: none;
  border: 0;
  box-shadow: var(--lift-1), var(--lip);
  color: var(--forest);
}

/* --- Outlined number circles ------------------------------------------------
   A filled sage disc is a blob with a number in it. An outlined ring reads as a
   step marker and lets the ground through, which is the reference's treatment. */
.step .n {
  background: transparent;
  border: 1.5px solid var(--sage);
  color: var(--forest);
  font-weight: 600;
}

/* --- Scroll edge, not a divider (12) ---------------------------------------- */
header {
  border-bottom: 0;
  background: rgba(var(--bg-rgb, 245, 243, 236), .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--bg-rgb, 245, 243, 236), .5),
    rgba(var(--bg-rgb, 245, 243, 236), 0));
}

/* --- One ground, full stop --------------------------------------------------
   The page alternated two near-identical off-whites: #F6F5F1 on the body and
   #F5F1E8 on every .band.cream and the footer. Close enough to look like a
   rendering fault rather than a decision, and the seam between them is the
   stripe that kept catching the eye. Both collapse to the body's colour, so the
   page is one continuous ground and the only things on it are the surfaces that
   are meant to be seen. The rules top and bottom go with them; a band no longer
   needs an edge because it is no longer a band. */
.band, .band.cream, .ctaband {
  background: var(--bg);
  border-top: 0;
  border-bottom: 0;
}

/* --- Chips sit flat, so they never compete with the glass -------------------- */
.hook .icon, .vcard .icon {
  box-shadow: none;
  background: rgba(20, 49, 9, .05);
}

/* --- The footer stays dark -------------------------------------------------
   This block used to lighten the footer to the cream ground, on the reasoning
   that the page should not end on a near-black wall. Reverted: the dark band is
   doing real work. It is the one hard edge that says the page is over, and at
   #10210a against #cfd6bf it carries 11.9:1, which is the highest contrast
   anywhere on the site and the reason the legal and COPPA lines down there are
   readable at 12.5px.

   It is also not the thing that was complained about. The objection was to
   "giant solid dark blocks" in the middle of a page, where a slab interrupts
   content; a footer is a terminator, and one dark band at the very bottom reads
   as deliberate rather than heavy. So the site keeps exactly one, and the
   colours below stay as index.html ships them. */

/* --- One primary button, not two ---------------------------------------------
   The hero used .btn.sage and the closing band a plain forest .btn, so the page
   offered two different primary buttons. The band takes the same sage pill and
   white arrow, which also removes the last small dark slab on the page. */
.ctaband .btn:not(.cta-quiet) {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--sage);
  color: #fff;
  box-shadow: 0 1px 2px rgba(20, 49, 9, .10), 0 10px 22px -12px rgba(20, 49, 9, .38);
}
.ctaband .btn:not(.cta-quiet)::after {
  content: "\2192";
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--forest);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  transition: transform .24s cubic-bezier(.32,.72,0,1);
}
.ctaband .btn:not(.cta-quiet):hover { opacity: 1; }
.ctaband .btn:not(.cta-quiet):hover::after { transform: translateX(3px); }

/* --- Forms ------------------------------------------------------------------ */
.field input, .field select {
  border: 0;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(20, 49, 9, .10);
}
.field input:focus, .field select:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--sage), 0 0 0 4px rgba(155, 160, 106, .18);
}

/* Reduced transparency: frost becomes solid rather than disappearing. */
@media (prefers-reduced-transparency: reduce) {
  header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  header::after { display: none; }
}


/* The button takes the deeper green so a white label is legible.
   Each new token carries a literal fallback: this stylesheet loads on all 83
   pages, and two of them (programs, guides) keep their own :root and never
   linked tokens.css, so a bare var() there resolves to nothing and the rule is
   discarded. The token test caught exactly that. */
.btn.sage:not(.sm),
.ctaband .btn:not(.cta-quiet) { background: var(--sage-deep, #717744); }
.btn.sage:not(.sm)::after,
.ctaband .btn:not(.cta-quiet)::after { color: var(--sage-deep, #717744); }

/* --- The leaf on the i ------------------------------------------------------
   The tittle of the final i becomes a leaf.

   Placed from MEASURED font metrics, not by eye. Young Serif's i was rendered to
   a canvas and its ink scanned by row: the tittle occupies 0.595em to 0.740em
   above the baseline and is 0.15em tall, and the glyph advance is 0.33em. So the
   dot's centre sits 0.6675em above the baseline, and everything below is derived
   from that rather than nudged until it looked right.

   Built as an inline-block on vertical-align rather than an absolutely positioned
   pseudo-element, because absolute positioning resolves against the span's line
   box, whose bottom is NOT the baseline -- which is exactly why the first attempt
   floated the leaf above the word. vertical-align is measured from the baseline,
   which is the thing the metrics above are relative to.

   THE GLYPH IS A DOTLESS i (U+0131), so there is no tittle to hide. Young Serif
   was assumed not to have one and the leaf was first sized to COVER the dot,
   which worked at 18px and fell apart the moment the leaf was lifted for
   clearance: at 84px the real dot reappeared underneath it. Testing settled it.
   document.fonts.check reports U+0131 unsupported, but rendered to a canvas the
   dotless glyph has ink from x 62 to 109 and an advance of 52.0, identical to
   Young Serif's own i, where the Georgia fallback is 63 to 100 at a different
   advance. It is the real glyph; fonts.check is just unreliable per-codepoint.

   The wordmark is aria-hidden and the link carries the full name, so a screen
   reader still hears "learningwithsruthi" rather than a dotless spelling.

   Everything is in em, so the leaf tracks the wordmark at any size. */
.logo .wm { white-space: nowrap; }
.logo .leaf-i {
  position: relative;
  /* Optically thinner. Measured, the dotless stem is IDENTICAL to the normal i:
     both run from x 62 to 109 in the canvas test. It only reads heavier because
     without a tittle above it there is nothing to draw the eye off the stem. So
     this is an optical correction, not a metric one: a hairline stroke in the
     page colour eats about .4px off the glyph's edges. Young Serif ships one
     weight, so there is no lighter cut to switch to. */
  -webkit-text-stroke: .4px var(--bg);
}
.logo .leaf-i::after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  /* Back over the stem, but not flush against the preceding h: -.375em put the
     leaf's left edge exactly where the h ends. */
  margin-left: -.33em;
  /* Clearance above the stem. Centring the leaf on the dot's centre (.4575em)
     put its bottom at .4575em while the stem top is at .535em, so the leaf
     OVERLAPPED the stem by 1.4px at 18px -- that is the squashed look. The real
     tittle clears the stem by 1.1px. .64em gave the leaf 1.9px, which read as
     floating, so it comes back down to the clearance the typeface itself uses:
     The walk: .64em floated at 1.89px, .59em sat at 0.99px, .54em dropped to
     0.09px and read as attached to the stem. .56em is 0.45px -- half the
     typeface's own 1.08px tittle gap, so the leaf reads as a separate mark
     without the float. */
  vertical-align: .56em;
  background: url("/img/leaf.svg") center / contain no-repeat;
  pointer-events: none;
}

/* ============================================================================
   SPACING RHYTHM

   Three blocks on the home page use the same pattern -- a small label, a
   heading, a line of text, then the actions -- and all three spaced it
   differently. Measured: the hero ran 14 / 16 / 24, the story band 8 / 6 / 22,
   and the closing CTA 0 / 0, with its buttons flush against the paragraph,
   which is the squashed feeling. One pattern should have one rhythm.

   The CTA was also badly lopsided: 58px padding above and 6px below, plus 54px
   margin above and 10px below. 112px of air over it and 16px under. That is
   why it sat too low.
   ============================================================================ */
:root {
  --stack-label: 10px;    /* small label to the heading it introduces */
  --stack-lede: 14px;     /* heading to its line of text */
  --stack-action: 28px;   /* text to the buttons: the one that was zero */
  --section-y: 56px;      /* the breathing room around a section */
}

/* The label sits close to the heading, because it belongs to it. */
.hero .eyebrow, .band .sec-eyebrow, .ctaband .eyebrow { margin-bottom: var(--stack-label); }

/* Heading to text. */
.hero h1, .band .sec-h, .ctaband h2 { margin-bottom: var(--stack-lede); }

/* Text to the actions. This is the gap that was missing entirely. */
.hero p.lead, .band .about-lead, .ctaband p { margin-bottom: var(--stack-action); }

/* The actions themselves, and whatever follows them. */
.hero .hero-cta, .ctaband .cta-actions { margin-bottom: 0; }
.hero .noacct { margin-top: var(--stack-lede); }
.band .about-more { margin-top: 0; }

/* The closing band, balanced and pulled up. 8 + 56 = 64px above instead of 112,
   and the same 56 below instead of 16. */
.ctaband {
  padding: var(--section-y) 0;
  margin: 8px 0 0;
}

/* --- Never trap the reader ---------------------------------------------------
   Six of the eight /auth/ pages had ZERO links leaving /auth/. Someone who
   followed a password-reset mail and changed their mind had no way back to the
   site at all. These pages deliberately carry no navigation -- they are a single
   focused task -- but "focused" and "trapped" are different things.

   So two ways out, both quiet: the logo at the top is now a link, which is where
   a reader looks first, and this sits at the foot for anyone who does not try
   the logo. */
.auth-wayout {
  max-width: 480px;
  margin: 26px auto 44px;
  text-align: center;
  font-family: var(--fp);
  font-size: 14px;
}
.auth-wayout a {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.auth-wayout a:hover { color: var(--forest); border-bottom-color: var(--sage); }

/* --- .btn-primary carries white on sage --------------------------------------
   The Claude onboarding design (public/theme.css and depth.css, used by
   /login.html) sets .btn-primary to `background: var(--sage); color: #fff`.
   That was fine against the old #9BA06A; against the warmed #A3A776 it lands at
   2.52, the same failure the marketing button had. It is the page's single
   primary action, so it cannot be the least readable thing on it.

   Same answer as elsewhere: the deeper tone of the same green, where white
   reads 4.75. The light sage keeps its job on rings, chips and borders. */
.btn-primary,
button.btn-primary,
.btn.btn-primary {
  background: var(--sage-deep, #717744);
  color: #fff;
}
.btn-primary:hover,
button.btn-primary:hover { background: #656a3d; }