/* =========================================================
   STOUGHTON MEDIA — SHARED PAGE COMPONENTS
   Loads AFTER light-theme.css. styles.css, blog.css, pages.css
   and light-theme.css are untouched; everything here is additive.

   Scope:  every page.
     /  /web-design/  /local-seo/  /packages/  /add-ons/  /blog/

   The homepage was added in Run B so it uses the same section
   weights, the same CTA and the same FAQ as the inner pages. It is
   the one page with no jump nav — see .page-home in section 3.

   Contents
     1. Section weight variants  (.block--primary / --standard / --quiet)
     2. Answer-first one-liner   (.qa__oneline)
     3. Sticky jump navigation   (.jumpnav)
     4. Shared components        (CTA / FAQ / "Where to next" / inline links)
     4bis. Homepage-only components (.card__step / .pricecard)
     5. Gold-as-type cleanup (contrast fix)
     6. Responsive + motion
   ========================================================= */


/* ---------------------------------------------------------
   0. LOCAL TOKENS

   --jump-top is how far the sticky jump nav sits from the top
   of the viewport. The site header is `position: fixed` with
   `inset: 1rem ...` and runs ~62px tall, so its bottom edge is
   at ~78px. 86px clears it with a little air and keeps the two
   bars from fighting.
   --------------------------------------------------------- */
:root {
  --jump-top: 86px;
  --jump-h: 62px;
  /* Breathing room between the bar and the heading an anchor lands on.
     inner-pages.js reads this too, so the "which section am I in?" line
     and the anchor landing position can never drift apart. */
  --jump-gap: 14px;
}


/* =========================================================
   1. SECTION WEIGHT VARIANTS

   Before this file every content section shared `.block`
   (plus an alternating `.block--alt` stripe), so an 11-section
   page read as eleven identical slabs. These three variants
   replace the stripe with real hierarchy: weight comes from
   surface, padding and heading size rather than background
   alternation.

   The variants are written to stand alone so they also work on
   `.faq`, `.postlinks` and `.cta`, which never used `.block`.
   Each one neutralizes any inherited section background so the
   rhythm is decided here and nowhere else.
   ========================================================= */

.block--primary,
.block--standard,
.block--quiet {
  background: var(--ink);
  border-block: 0;
}


/* ---- PRIMARY -------------------------------------------
   The sections answering the core buying questions: what it
   costs, what you get for it, what happens during the work.
   Most visual weight — white card surface, subtle lift,
   the largest heading, the most vertical room.
   --------------------------------------------------------- */
.block--primary {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* The card is the container itself, so its inner text column
   keeps the exact same left edge as every other section. No
   markup change, no horizontal drift between variants. */
.block--primary > .container {
  background: var(--stone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding-block: clamp(2.6rem, 5.5vw, 4.4rem);
}

/* Default .section__title tops out at 3.4rem, so 4rem gives a step
   you can actually see rather than a 9% nudge. */
.block--primary .section__title {
  font-size: clamp(2.2rem, 5.2vw, 4rem);
}

/* Nested white surfaces would vanish against a white card, so
   the ones that sit inside a primary section get the warm
   off-white instead. Borders stay, so nothing loses its edge. */
.block--primary .tbl-wrap,
.block--primary .addon,
.block--primary .workcard {
  background: var(--stone-2);
}
.block--primary .tbl thead th,
.block--primary .tbl--tiers thead th:first-child {
  background: var(--stone-2);
}


/* ---- STANDARD ------------------------------------------
   Supporting detail. Deliberately the current default weight,
   so the page still has a baseline to read the other two
   variants against.
   --------------------------------------------------------- */
.block--standard {
  padding-block: clamp(4rem, 9vw, 7rem);
}


/* ---- QUIET ---------------------------------------------
   Short connective sections, interlink blocks and "where to
   next". Reduced padding, smaller heading, no card surface —
   these sit directly on the page background. A single hairline
   keeps them separated without adding weight.
   --------------------------------------------------------- */
.block--quiet {
  padding-block: clamp(2.4rem, 4.5vw, 3.6rem);
  border-top: 1px solid var(--line);
}

.block--quiet .section__title {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  letter-spacing: -0.01em;
}

/* Quiet sections carry their own self-contained card or grid
   (portfolio, the Ian block, the link cards), so the prose
   above them can tighten up without looking cramped. */
.block--quiet .section__eyebrow {
  margin-bottom: .8rem;
}
.block--quiet .handoff {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}


/* =========================================================
   2. ANSWER-FIRST ONE-LINER

   Every content section is headed by a question. The answer
   was there, but it opened a paragraph, so the reader had to
   read to find it. `.qa__oneline` sits between the heading and
   the existing `.answer` paragraph and states the answer in one
   sentence. It is always compressed from the paragraph directly
   below it — it never introduces a claim, number or promise
   that is not already on the page.

   Colour: full ink, not gold. light-theme.css already forces
   every <strong> and <em> to --gold-text, and `.answer` carries
   a gold rule, so a gold one-liner would land a third gold
   element in the same eight lines. Ink at a larger size and a
   heavier weight out-ranks the paragraph on size and weight —
   which is what the hierarchy needs — and reads at ~18:1
   instead of 4.79:1. The gold is kept as a short rule above it.
   ========================================================= */
.qa__oneline {
  margin-top: clamp(1rem, 2vw, 1.35rem);
  max-width: 48ch;
  font-family: var(--sans);
  font-size: clamp(1.18rem, 1.8vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.006em;
  color: var(--cream);
}

.qa__oneline::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: .85rem;
  background: var(--gold);
}

/* The paragraph that follows is now the second beat, not the
   first, so it starts a little closer. */
.qa__oneline + .answer {
  margin-top: 1.1rem;
}


/* =========================================================
   3. STICKY JUMP NAVIGATION

   Rendered by assets/js/inner-pages.js from the page's own
   sections and question headings. Pages with fewer than five
   sections never get one — the placeholder stays `hidden`.

   The site header is fixed at z-index 50; this sits below it at
   40 and sticks to --jump-top, so the two never overlap.
   ========================================================= */
/* styles.css sets `overflow-x: hidden` on html and body. That computes
   overflow-y to `auto`, which makes <body> a scroll container — and a
   position:sticky descendant then resolves against <body>, which never
   scrolls, so it never sticks. `clip` clips exactly the same way without
   creating a scroll container. Browsers too old for `clip` drop this
   declaration and keep the original `hidden`: they lose the sticking,
   not the layout. styles.css itself is untouched. */
html,
body {
  overflow-x: clip;
}

.jumpnav {
  position: sticky;
  top: var(--jump-top);
  z-index: 40;
  min-height: var(--jump-h);      /* reserved up front: no layout shift
                                     when the script fills it in */
  background: rgba(247, 243, 236, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}

.jumpnav[hidden] {
  display: none !important;
}

.jumpnav__scroller {
  display: flex;
  flex-wrap: nowrap;              /* never wraps to a second row */
  gap: .2rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: var(--container);
  margin-inline: auto;
  padding: .5rem clamp(1.25rem, 4vw, 2.5rem);
}
.jumpnav__scroller::-webkit-scrollbar {
  display: none;
}

.jumpnav__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* touch target */
  padding: .5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .012em;
  color: var(--muted);            /* #6E6357 on #F7F3EC — 5.4:1 */
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

.jumpnav__link:hover {
  color: var(--ink-true);
  background: var(--stone-2);
}

/* Active state is not colour alone: the pill also gains a
   filled background and a gold underline. */
.jumpnav__link.is-active {
  color: var(--ink-true);
  background: rgba(224, 168, 46, 0.20);
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* Anchors must clear both the fixed site header and this bar. */
main > section[id],
main > header[id] {
  scroll-margin-top: calc(var(--jump-top) + var(--jump-h) + var(--jump-gap));
}

/* The homepage loads this file for the component system but has no
   jump nav — it is meant to be read top to bottom and the sticky
   header already covers it. Without this it would reserve 62px for a
   bar that is not there and every anchor would land that far short of
   its heading. --jump-h is the only term dropped; the header
   clearance and the gap are the same as everywhere else. */
.page-home main > section[id],
.page-home main > header[id] {
  scroll-margin-top: calc(var(--jump-top) + var(--jump-gap));
}


/* =========================================================
   4. SHARED COMPONENTS

   The contact/CTA block, the FAQ accordion and the "where to
   next" interlink block are the same markup on every inner
   page and are already driven by one class set in styles.css /
   blog.css. What had drifted was the per-page inline styles
   layered on top of them. Those are pulled up here so the
   three components are defined once and only once.
   ========================================================= */

/* ---- 4a. "Where to next" interlink block ----------------
   All four pages carried an identical inline
   style="font-size:clamp(1.6rem,3vw,2.1rem)" on this heading.
   One rule replaces four copies.
   --------------------------------------------------------- */
.postlinks .section__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.postlinks .postlinks__head {
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

/* ---- 4b. FAQ accordion ---------------------------------
   The closing handoff line under every FAQ list carried an
   identical inline style="max-width:820px", matching the
   .faq__list column. Same rule, one place.
   --------------------------------------------------------- */
.faq .faq__list + .handoff {
  max-width: 820px;
}
/* The summary row is the hit target for the accordion. */
.faq__item summary {
  min-height: 56px;
}

/* ---- 4c. Contact / CTA block ---------------------------
   Identical structure on all four pages. Only the copy differs,
   which is intentional. These two rules stop the measure and
   the form heading from drifting between pages.
   --------------------------------------------------------- */
.cta .section__body {
  max-width: 54ch;
}
.cta__form-title {
  margin-bottom: 1.6rem;
}

/* ---- 4c-2. Blog listing heading ------------------------
   The post grid gained a heading of its own when the eleven
   card titles were demoted to <h3>. `.postgrid` carries no top
   padding (the pagehead above supplies it), so the spacing is
   set here rather than by adding padding to the section and
   moving the whole grid down. Sized to match `.postlinks`,
   which is the other "list of links" heading on the site.
   --------------------------------------------------------- */
.postgrid .section__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.postgrid__head {
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

/* ---- 4c-3. FAQ questions as real headings --------------
   pages.css already neutralizes the <h3> inside a <summary> so
   the accordion looks identical while the question is a real
   heading. The homepage now uses the same FAQ markup but does
   not load pages.css, so the rule is repeated here. Declarations
   are identical, so on the inner pages this is a harmless
   duplicate rather than an override.
   --------------------------------------------------------- */
.faq__item summary h3 {
  font: inherit; color: inherit; margin: 0; letter-spacing: inherit; line-height: inherit;
}

/* ---- 4d. Inline cross-links ----------------------------
   Every interlink paragraph repeated
   style="color:var(--gold);border-bottom:1px solid var(--line)"
   inline. The colour half was already dead — light-theme.css
   forces prose links to --gold-text with !important — so this
   class reproduces exactly what was rendering, from one place.
   --------------------------------------------------------- */
.inlink {
  border-bottom: 1px solid var(--line);
}


/* =========================================================
   4bis. HOMEPAGE-ONLY COMPONENTS

   The homepage now loads this file too, so the two sections
   added to it — the three-step "How it works" and the pricing
   pair — are defined here rather than in a file of their own.

   Both are built on markup that already exists: "How it works"
   reuses .card + .services__grid from styles.css and adds only a
   step label. The pricing cards need a shell of their own because
   .stackcard lives in pages.css, which the homepage does not load
   and which is too much surface to pull in for two cards.
   ========================================================= */

/* ---- 4bis-a. Step label on a .card ---------------------
   Sits between the icon and the card title. --gold-text, not
   --gold: this is type, and #E0A82E on white measures 1.9:1.
   --------------------------------------------------------- */
.card__step {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .5rem;
}

/* ---- 4bis-b. Pricing pair ------------------------------
   Two cards, side by side, stacking below 900px — the same
   breakpoint the site header collapses at, so the page changes
   shape once rather than twice.
   --------------------------------------------------------- */
/* `stretch`, not `start`: the two cards hold different numbers of
   bullets, and equal height is what lets `.pricecard .btn`'s
   margin-top:auto put both buttons on the same line. */
.pricegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  align-items: stretch;
}

.pricecard {
  display: flex;
  flex-direction: column;
  background: var(--stone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}

/* The pricing section is .block--primary, so its container is
   already a white card. White on white has no edge, so the cards
   inside take the warm off-white — the same move .tbl-wrap,
   .addon and .workcard make on the inner pages. */
.block--primary .pricecard {
  background: var(--stone-2);
}

/* The emphasized card. Gold border plus a deeper lift, not a
   colour fill: the surface has to stay light enough for
   --gold-text and --muted to keep clearing 4.5:1 on it. */
.pricecard--feat {
  border-color: var(--gold);
  box-shadow: 0 1px 2px rgba(12,10,9,.05), 0 14px 40px -12px rgba(224,168,46,.45);
}

.pricecard__label,
.pricecard__tag {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}

/* The plain label is type on the card surface. The featured tag is
   type on a gold fill, which needs the dark that stays dark.
   The label carries the tag's vertical padding with no fill, so the
   two cards' names and prices sit on the same line as each other
   instead of the pill pushing one card down by its own height. */
.pricecard__label {
  color: var(--gold-text);
  padding: .3rem 0;
}
.pricecard__tag {
  background: var(--gold);
  color: var(--ink-true);
  border-radius: 999px;
  padding: .3rem .7rem;
}

.pricecard__name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
}

.pricecard__price {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--gold-text);
  margin-top: .7rem;
}
.pricecard__price small {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.pricecard__sub {
  color: var(--muted);
  font-size: .95rem;
  margin-top: .4rem;
}

/* The post-Top-3 rate. Set apart with the same short gold rule
   .qa__oneline uses, so the page has one way of saying "this is
   the line that matters". */
.pricecard__drop {
  position: relative;
  margin-top: .9rem;
  padding-top: .9rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--cream);
}
.pricecard__drop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--gold);
}

.pricecard__for {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 1.2rem;
}

.pricecard__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.4rem 0 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.pricecard__list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .96rem;
  line-height: 1.45;
}
.pricecard__list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: .15rem;
  color: var(--gold-text);
}

/* Pins the button to the bottom edge so the two cards' buttons
   line up even though the lists are different lengths. */
.pricecard .btn {
  margin-top: auto;
}

.pricing__more {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--muted);
  font-size: 1rem;
}


/* =========================================================
   5. GOLD-AS-TYPE CLEANUP

   Not part of the restructure — flagged by the contrast pass and
   fixed here because it breaks a rule you set: gold used as type
   must be #8A6520 (--gold-text), never #E0A82E (--gold).

   light-theme.css already did this for the selectors that existed
   when it was written, but pages.css and blog.css set
   `color: var(--gold)` on a further ~15 selectors that were never
   remapped. On cream they measure 1.9:1 to 2.1:1 — the ratio that
   file's own comments call unreadable.

   Only TEXT is remapped. Icon strokes, borders, rules, glows and
   button fills stay #E0A82E, so nothing about the look changes
   except that gold words become legible.

   This block is self-contained: delete it to revert.
   ========================================================= */

/* Prices and numerals */
.ptier__price,
.addon__price,
.stackcard__price,
.math__row--save,
.mech__num,
.guarband__seal { color: var(--gold-text); }

/* Eyebrows, labels and small caps */
.workcard__eyebrow,
.linkcard__eyebrow,
.step__num,
.ian__name,
.guarband__label,
.stackcard__label,
.postcard__cat { color: var(--gold-text); }

/* The italic handoff line that closes almost every section */
.handoff { color: var(--gold-text); }

/* Status text */
.cta__form-note.is-success { color: var(--gold-text); }

/* Hover and open states. Hover text has to clear 4.5:1 too. */
.btn--ghost:hover,
.faq__item summary:hover,
.faq__item[open] summary,
.cta__phones a:hover,
.footer__contact a:hover,
.crumb a:hover,
.workcard:hover .workcard__cta,
.linkcard:hover .linkcard__cta,
.postcard:hover .postcard__title a,
.postcard:hover .postcard__more { color: var(--gold-text); }

/* Prose links inside a pull quote. light-theme.css remaps `p a` and
   `li a` to --gold-text, but a blockquote in a blog post holds its
   text directly, so the link there kept the raw #E0A82E: 1.94:1.
   Same treatment as every other prose link, including the underline,
   so the link is not signalled by colour alone. */
blockquote a:not(.btn) {
  color: var(--gold-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The breadcrumb separator was --line (#E4DBCB) on cream: 1.24:1,
   i.e. invisible. It is aria-hidden and purely decorative, so it
   only needs to be visible, not prominent. */
.crumb span[aria-hidden] { color: var(--muted-2); }

/* "· you're here" in the rank-card mockup is --gold-text on the
   highlighted row. --gold-text clears 4.5:1 on cream, but this row
   is tinted with --gold-glow at .16 alpha, which drags it to 4.33.
   Thinning the tint on this one row (nothing else uses it here)
   puts it back over the line without touching the gold itself. */
.rankcard__you { background: rgba(224, 168, 46, .09); }


/* =========================================================
   6. RESPONSIVE + MOTION
   ========================================================= */

/* The primary card IS the container, which is capped at 1180px. Above
   ~1240px there is a real gutter on both sides and it reads as a card.
   Below that the container runs edge to edge, and a rounded corner
   jammed against the viewport looks like a mistake — so it becomes a
   deliberate full-bleed band instead. The white surface, the shadow
   and the larger heading still carry the weight either way. */
@media (max-width: 1240px) {
  .block--primary > .container {
    border-radius: 0;
    border-inline: 0;
  }
}

@media (max-width: 900px) {
  /* The header pill is shorter once the links collapse. */
  :root {
    --jump-top: 78px;
  }

  /* Pricing stacks at the same width the header collapses at, so the
     page changes shape once instead of twice. Below this the two
     cards are full width and read in order: Release, then Maintain. */
  .pricegrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .jumpnav__scroller {
    padding-inline: 1rem;
  }
  .jumpnav__link {
    padding-inline: .8rem;
    font-size: .82rem;
  }
  .qa__oneline {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jumpnav__link {
    transition: none;
  }
}