/* ============================================================
   HSCScience — marketing & tutoring visual identity
   ------------------------------------------------------------
   Linked ONLY by the revenue-facing root pages (tutoring, the
   SEO landing pages, the high-yield/editorial pages, the study
   pack). Nothing under subjects/ loads this, so every selector
   here is automatically scoped to the marketing estate by
   linkage rather than by specificity.

   WHY THIS FILE EXISTS — measured, not assumed (2026-08-31).
   The 19 revenue-facing pages were NOT 19 bespoke designs. They
   were TWO coherent systems that shared nothing:

     "Acrylic Sunset"  14 pages  wc-design.css + tutoring-pages.css
                                 Outfit display, cream #f9efe1,
                                 rose/plum/gold, gradient hero.
     "Editorial"        5 pages  no external stylesheet at all;
                                 the SAME palette hand-copied into
                                 five inline <style> blocks.
                                 Fraunces display, paper #efece4,
                                 neutral greys, subject accents.

   The two shared exactly one thing: the DM Sans body face. Two
   good designs that do not look like the same company is a
   worse identity problem than one mediocre design applied
   consistently, and a visitor crosses between them on the
   internal links these pages already carry.

   THE APPROACH: one system, two registers. The sales pages stay
   warm and the data/credibility pages stay editorial — that
   difference is doing real work — but both now derive from a
   single token ramp, wear the same brand mark, and use the same
   eyebrow, rule and link treatments.

   Deliberately CSS-only. These pages rank; every rule here was
   written so that no copy, heading, or URL had to move.
   ============================================================ */

/* ── 1. The single source of truth ───────────────────────────
   Brand ramp lifted verbatim from wc-design.css's Acrylic
   Sunset so the two files cannot drift apart. Those tokens live
   on .wc-scope there, which is why the editorial pages — having
   no .wc-scope wrapper — inherited none of them. Restating the
   ramp on :root is what lets both registers reach it. */
:root {
  --ms-rose: #c47b8a;
  --ms-rose-deep: #9c5c6e;
  --ms-rose-soft: #f4d8de;
  --ms-plum: #6d5b8a;
  --ms-plum-deep: #4e4068;
  --ms-coral: #e89b8b;
  --ms-coral-deep: #c47165;
  --ms-gold: #d6a85f;
  --ms-gold-deep: #a87f3f;

  /* Canonical subject accents for the marketing estate. There
     was no shared definition before this: index.html used
     #059669 for Biology and the editorial pages used #2f7d54,
     and chemistry-year12-high-yield.html shipped the Biology
     green as its own accent (fixed on that page in this pass). */
  --ms-bio: #2f7d54;
  --ms-chem: #2b5c9c;
  --ms-phy: #b85a1e;
  --ms-maths: #6d5b8a;

  /* One eyebrow spec for both registers. They had independently
     converged on nearly the same treatment (11px vs 11.5px,
     .14em vs .16em tracking); this makes that agreement real. */
  --ms-eyebrow-size: 11.5px;
  --ms-eyebrow-track: 0.15em;
  --ms-eyebrow-weight: 700;

  --ms-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --ms-serif: 'Fraunces', Georgia, serif;
  --ms-body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ── 2. The shared brand mark ────────────────────────────────
   The one element on every page in the estate, and the fastest
   possible unification: the Acrylic Sunset pages already show a
   rose-to-plum gradient tile reading "HS" beside the wordmark
   (.wc-brand-logo). The five editorial pages showed the
   wordmark alone, under four different class names for the same
   element — .cr-mark, .ty-mark, .fp-mark and a bare .mark.

   Drawn as a ::before so not one line of markup has to change
   on an indexed page. */
.cr-mark,
.ty-mark,
.fp-mark,
.top .mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.cr-mark::before,
.ty-mark::before,
.fp-mark::before,
.top .mark::before {
  content: 'HS';
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ms-rose), var(--ms-plum));
  color: #fff;
  font-family: var(--ms-display);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

/* ── 3. The editorial register, re-derived from the ramp ─────
   These five pages each carried an identical hand-copied :root
   block. Those blocks are removed from the pages in this pass
   and replaced by this one definition, so the palette now has a
   single place to change.

   The values are warmed toward the Acrylic Sunset cream so the
   two registers read as one company. The editorial pages stay
   quieter and cooler than the sales pages on purpose — they are
   carrying statistics and a "no sales pitch" byline, and that
   restraint is the point of the register. */
:root {
  --paper: #f2ece1;
  --sheet: #ffffff;
  --ink: #23201c;
  --ink-2: #45403a;
  --ink-3: #6d675f;
  --ink-4: #948d84;
  --rule: #e6ddce;
  --rule-2: #d5cab7;
  --accent: #7a341e;
  --accent-soft: #f6efe6;

  --bio: var(--ms-bio);
  --chem: var(--ms-chem);
  --phy: var(--ms-phy);
}

/* The paper sheet picks up the same soft lift the Acrylic
   Sunset cards use, instead of a neutral grey drop shadow. */
.sheet {
  box-shadow: 0 1px 0 var(--rule), 0 22px 54px -32px rgba(78, 64, 104, 0.34);
}

/* One eyebrow across both registers. */
.cr-eyebrow,
.ty-eyebrow,
.fp-eyebrow,
.cap {
  font-size: var(--ms-eyebrow-size);
  font-weight: var(--ms-eyebrow-weight);
  letter-spacing: var(--ms-eyebrow-track);
  text-transform: uppercase;
}

/* ── 4. Link treatment ───────────────────────────────────────
   Measured before this pass: 22 links across 5 of the 19 pages
   rendered as browser-default #0000EE — 10 of them on
   tutoring.html and 8 on hsc-tutors-central-coast.html, i.e.
   the subject-navigation cards on the two hub pages, which are
   the most-clicked links in the estate.

   The cause was structural rather than an oversight per page:
   wc-design.css sets no link colour inside .wc-scope at all, so
   any anchor that was not given a component class fell through
   to the UA stylesheet. A single default rule closes the class
   rather than the instances. */
.wc-scope a {
  color: var(--ms-rose-deep);
}

/* Components that set their own colour must keep it — they are
   listed rather than relying on source order because several
   are defined in wc-design.css, which loads first. */
.wc-scope .wc-topbar-link,
.wc-scope .wc-brand-crumb a,
.wc-scope .tut-footer a,
.wc-scope .wc-cta,
.wc-scope .wc-cta-gold,
.wc-scope .wc-cta-ghost,
.wc-scope .wc-cta-white,
.wc-scope .wc-cta-ink,
.wc-scope .wc-cta-plum,
.wc-scope .wc-cta-rose,
.wc-scope .wc-cta-soft {
  color: inherit;
}

.wc-scope .wc-topbar-link {
  color: var(--adv-ink-soft);
}

/* Prose links were the visible half of the same gap:
   tutoring-pages.css styles .tut-prose p and .tut-prose strong
   but never .tut-prose a. */
.wc-scope .tut-prose a {
  color: var(--ms-rose-deep);
  font-weight: 600;
}

/* Cards used as links must not inherit an accent text colour —
   their own children set type colour, and a rose card title on
   a hub page reads as an error rather than a link. */
.wc-scope a.wc-card,
.wc-scope a.wc-card * {
  color: inherit;
}

/* ── 5. CTA prominence ───────────────────────────────────────
   The brief for this pass required CTAs to end up at least as
   prominent as they started. Nothing here moves, resizes or
   re-ranks a call to action: tutoring-pages.css already makes a
   deliberate ranking (.tut-book-btn is intentionally larger
   than the hero CTA, and the enquiry form is intentionally
   demoted to .tut-secondary), and that ranking is left exactly
   as it was.

   The one change is the underline. Every hero CTA rendered
   underlined because it is an <a> with no text-decoration rule,
   which reads as a link inside a filled button and costs it
   weight. Removing it makes the button look more like a button,
   not less. */
.wc-scope .wc-cta,
.wc-scope .wc-cta-gold,
.wc-scope .wc-cta-ghost,
.wc-scope .wc-cta-white,
.wc-scope .wc-cta-ink,
.wc-scope .wc-cta-plum,
.wc-scope .wc-cta-rose,
.wc-scope .wc-cta-soft {
  text-decoration: none;
}

/* The editorial register's own primary action gets the same
   treatment its sales-page counterpart has: a solid, warm,
   unmissable control rather than ink-on-white. */
.cr-send,
.fp-send {
  background: linear-gradient(135deg, var(--ms-rose-deep), var(--ms-plum-deep));
}

.cr-send:hover,
.fp-send:hover {
  background: linear-gradient(135deg, var(--ms-plum-deep), var(--ms-rose-deep));
}

/* ── 6. Focus visibility ─────────────────────────────────────
   Neither register defined a focus ring on its links. On a
   conversion surface the keyboard path to the CTA has to be
   visible. */
.wc-scope a:focus-visible,
.sheet a:focus-visible,
.cr-top a:focus-visible,
.ty-top a:focus-visible,
.fp-top a:focus-visible,
.top a:focus-visible {
  outline: 2px solid var(--ms-plum);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── 7. Print ────────────────────────────────────────────────
   The study pack is a lead magnet people print. The gradient
   brand tile costs ink and prints as a grey box, so it reverts
   to the wordmark alone on paper. */
@media print {
  .cr-mark::before,
  .ty-mark::before,
  .fp-mark::before,
  .top .mark::before {
    display: none;
  }

  .cr-send,
  .fp-send {
    background: none;
    color: #000;
  }
}

/* ── 8. Subject accent, declared rather than hand-copied ─────
   The two high-yield pages set their own accent because they
   are single-subject pages. Before this pass they did it with a
   literal hex in a page-level :root, and
   chemistry-year12-high-yield.html carried #2f7d54 — the
   Biology green — as its accent, with the chemistry blue
   appearing nowhere on the page. The chemistry landing page was
   branded as Biology, and because the value was self-consistent
   within the file nothing could have caught it.

   Declaring the subject on <body> instead makes the accent
   derive from the canonical ramp above, so the same mistake
   cannot be made silently again. */
[data-ms-subject="bio"] {
  --accent: var(--ms-bio);
  --accent-soft: #eef5f0;
}

[data-ms-subject="chem"] {
  --accent: var(--ms-chem);
  --accent-soft: #eaf1f9;
}

[data-ms-subject="phy"] {
  --accent: var(--ms-phy);
  --accent-soft: #fbefe6;
}

/* The generated lesson links inside the high-yield data tables
   underlined themselves in a hardcoded teal, rgba(14,110,126,.35),
   which matches neither subject accent and survived because the
   text colour beside it also carried a dead #0e6e7e fallback.
   Tying the rule to the text colour makes it follow the subject. */
.ty-lessons a {
  border-bottom-color: color-mix(in srgb, currentColor 38%, transparent);
}