/* ============================================================================
   THE GLOW DESIGN SYSTEM — v1.0 · May 2026
   ----------------------------------------------------------------------------
   A token-based, component-led, accessibility-first stylesheet that codifies
   the visual language used across glow.com.au.

   Maintained by the editorial design board. Documentation:
       /standard/  → editorial methodology
       /brand/the-glow-brand-sheet.html  → visual identity

   Loaded sitewide AFTER reviews.css. Variables here override / supplement
   reviews.css tokens. Components here are additive.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   01. Tokens — Color
   ---------------------------------------------------------------------------- */
:root {
  /* Ink — primary text + chrome */
  --gl-ink:           #1A1613;   /* Primary text on cream */
  --gl-ink-body:      #2A2520;   /* Body copy on cream */
  --gl-ink-muted:     #5F6156;   /* Tertiary, captions, meta */
  --gl-ink-soft:      rgba(26,22,19,0.55);

  /* Surface */
  --gl-canvas:        #F7F2E8;   /* Default page background */
  --gl-paper:         #FBF8EE;   /* Slightly warmer surface for sections */
  --gl-cream:         #F6F3E8;   /* Module backgrounds (rails, callouts) */
  --gl-cream-deep:    #F1ECDD;   /* Gradient terminus */

  /* Editorial accent */
  --gl-rose:          #5A2A35;   /* Bordeaux — period, accents, links */
  --gl-rose-deep:     #4A1F2A;   /* Darker variant for hover */
  --gl-rose-soft:     rgba(90,42,53,0.06);

  /* Signal */
  --gl-lime:          #C9FB52;   /* Hot brand accent — sparingly */
  --gl-warn:          #B85427;   /* Caution */
  --gl-positive:      #3F6E4F;   /* Pass / verified */

  /* Lines & dividers */
  --gl-line:          rgba(26,22,19,0.12);
  --gl-line-soft:     rgba(26,22,19,0.06);
  --gl-line-strong:   rgba(26,22,19,0.22);

  /* Focus ring — accessible */
  --gl-focus:         #5A2A35;
  --gl-focus-bg:      rgba(90,42,53,0.12);
}

/* ----------------------------------------------------------------------------
   02. Tokens — Type
   ---------------------------------------------------------------------------- */
:root {
  --gl-ff-display:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --gl-ff-serif:      'Instrument Serif', Georgia, 'Times New Roman', serif;
  --gl-ff-sans:       'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --gl-ff-mono:       'SF Mono', 'JetBrains Mono', 'Monaco', monospace;

  /* Fluid type scale — minor third (1.2) at desktop */
  --gl-fs-hero:       clamp(2.6rem, 6.4vw, 5.6rem);
  --gl-fs-h1:         clamp(2.2rem, 4.6vw, 3.8rem);
  --gl-fs-h2:         clamp(1.85rem, 3.8vw, 2.85rem);
  --gl-fs-h3:         clamp(1.4rem, 2.4vw, 1.85rem);
  --gl-fs-lede:       clamp(1.18rem, 1.8vw, 1.42rem);
  --gl-fs-body:       1.04rem;
  --gl-fs-small:      0.92rem;
  --gl-fs-eyebrow:    0.72rem;

  /* Tracking */
  --gl-tr-tight:      -0.02em;
  --gl-tr-eyebrow:    0.22em;
  --gl-tr-meta:       0.16em;

  /* Leading */
  --gl-lh-display:    1.06;
  --gl-lh-h2:         1.1;
  --gl-lh-body:       1.7;
  --gl-lh-prose:      1.55;
}

/* ----------------------------------------------------------------------------
   03. Tokens — Space, radius, motion
   ---------------------------------------------------------------------------- */
:root {
  /* Spacing scale (modular, base 0.4rem) */
  --gl-sp-1:          0.4rem;
  --gl-sp-2:          0.8rem;
  --gl-sp-3:          1.2rem;
  --gl-sp-4:          1.6rem;
  --gl-sp-5:          2.4rem;
  --gl-sp-6:          3.2rem;
  --gl-sp-7:          4.8rem;
  --gl-sp-8:          6.4rem;

  /* Section padding (block) — fluid */
  --gl-section-y:     clamp(3rem, 6vw, 5.5rem);
  --gl-section-y-lg:  clamp(4.5rem, 8vw, 7.5rem);

  /* Radius — restrained, editorial, no big rounding */
  --gl-radius-xs:     2px;
  --gl-radius-sm:     4px;
  --gl-radius-md:     8px;

  /* Motion */
  --gl-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --gl-dur-fast:      120ms;
  --gl-dur:           200ms;
  --gl-dur-slow:      400ms;

  /* Layer */
  --gl-z-skip:        100;
  --gl-z-nav:         50;
  --gl-z-sticky:      30;
  --gl-z-overlay:     20;
}

/* ----------------------------------------------------------------------------
   04. Reset + baseline (additive — does not override reviews.css base)
   ---------------------------------------------------------------------------- */
.gl-system *, .gl-system *::before, .gl-system *::after { box-sizing: border-box; }
.gl-system img { max-width: 100%; height: auto; display: block; }

/* Accessible focus — applied globally via :focus-visible */
:focus-visible {
  outline: 2px solid var(--gl-focus);
  outline-offset: 3px;
  border-radius: var(--gl-radius-xs);
}
a:focus-visible, button:focus-visible {
  background: var(--gl-focus-bg);
}

/* Skip link — visually hidden until focused */
.gl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.8rem 1.2rem;
  background: var(--gl-ink);
  color: var(--gl-paper);
  z-index: var(--gl-z-skip);
  font-family: var(--gl-ff-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.gl-skip:focus { left: 1rem; top: 1rem; }

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   05. Component — Trust Block (the cornerstone trust UI)
   ----------------------------------------------------------------------------
   Used at the top of every review/best/compare page to surface verifiable
   signals: who tested it, when, against what method, with what conflicts.

   Markup:
     <aside class="gl-trust" aria-label="Editorial trust signals">
       <div class="gl-trust__row">
         <div class="gl-trust__cell"><span class="label">Tested</span><strong>Six weeks · Mar 2026</strong></div>
         <div class="gl-trust__cell"><span class="label">Editor</span><strong>Sasha Reid</strong></div>
         <div class="gl-trust__cell"><span class="label">Method</span><a href="/standard/">The Glow Standard, v4.2</a></div>
         <div class="gl-trust__cell"><span class="label">Conflicts</span><a href="/standard/#conflicts">None declared</a></div>
       </div>
       <p class="gl-trust__note">No paid placement. Product purchased at retail.</p>
     </aside>
   ---------------------------------------------------------------------------- */
.gl-trust {
  margin: 1.6rem 0 2.4rem;
  padding: 1.4rem 1.6rem;
  background: var(--gl-paper);
  border: 1px solid var(--gl-line);
  border-left: 3px solid var(--gl-rose);
  border-radius: var(--gl-radius-sm);
  font-family: var(--gl-ff-sans);
}
.gl-trust__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  align-items: start;
}
.gl-trust__cell { font-size: 0.88rem; line-height: 1.4; color: var(--gl-ink-body); }
.gl-trust__cell .label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: var(--gl-tr-meta);
  color: var(--gl-rose);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.gl-trust__cell strong { color: var(--gl-ink); font-weight: 600; }
.gl-trust__cell a { color: var(--gl-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gl-trust__cell a:hover { color: var(--gl-rose); }
.gl-trust__note {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--gl-line-soft);
  font-size: 0.8rem;
  color: var(--gl-ink-muted);
  font-style: italic;
  font-family: var(--gl-ff-serif);
}
@media (max-width: 720px) {
  .gl-trust__row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* ----------------------------------------------------------------------------
   06. Component — Reading Layer
   ----------------------------------------------------------------------------
   Premium long-form reading: drop cap, pull quotes, callouts, citations, ToC.
   Apply to article body via class="gl-prose" or wrap in <article class="gl-prose">.
   ---------------------------------------------------------------------------- */
.gl-prose {
  font-family: var(--gl-ff-sans);
  font-size: var(--gl-fs-body);
  line-height: var(--gl-lh-body);
  color: var(--gl-ink-body);
  max-width: 38rem;
}
.gl-prose > p:first-of-type::first-letter {
  font-family: var(--gl-ff-display);
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  margin: 0.06em 0.12em 0 -0.04em;
  color: var(--gl-rose);
  font-weight: 400;
}
.gl-prose p { margin: 0 0 1.4rem; }
.gl-prose h2 { font-family: var(--gl-ff-display); font-weight: 400; font-size: var(--gl-fs-h2); line-height: var(--gl-lh-h2); margin: 3rem 0 1.2rem; color: var(--gl-ink); letter-spacing: -0.015em; }
.gl-prose h2 em { font-style: italic; color: var(--gl-rose); }
.gl-prose h3 { font-family: var(--gl-ff-display); font-style: italic; font-weight: 400; font-size: var(--gl-fs-h3); line-height: 1.2; margin: 2.4rem 0 0.8rem; color: var(--gl-ink); }
.gl-prose h4 { font-family: var(--gl-ff-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gl-rose); margin: 2rem 0 0.6rem; font-weight: 600; }
.gl-prose a { color: var(--gl-rose); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--gl-dur) var(--gl-ease); }
.gl-prose a:hover { color: var(--gl-ink); }

/* Pull quote */
.gl-pullquote {
  margin: 2.4rem 0;
  padding: 0 0 0 1.6rem;
  border-left: 3px solid var(--gl-rose);
}
.gl-pullquote p {
  font-family: var(--gl-ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.3;
  color: var(--gl-ink);
  margin: 0;
  max-width: 38ch;
}
.gl-pullquote cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--gl-ff-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gl-ink-muted);
  font-style: normal;
}

/* Callout — neutral notes from the editor */
.gl-callout {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--gl-rose-soft);
  border-left: 3px solid var(--gl-rose);
  border-radius: var(--gl-radius-sm);
  font-family: var(--gl-ff-serif);
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--gl-ink-body);
}
.gl-callout strong { color: var(--gl-ink); font-weight: 600; }

/* Citation footnote */
.gl-cite {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  color: var(--gl-rose);
  text-decoration: none;
  font-family: var(--gl-ff-sans);
  font-weight: 600;
  margin-left: 1px;
}
.gl-cite::before { content: "["; }
.gl-cite::after { content: "]"; }

.gl-footnotes {
  margin: 4rem 0 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--gl-line);
  font-family: var(--gl-ff-sans);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--gl-ink-muted);
}
.gl-footnotes ol { padding-left: 1.4rem; }
.gl-footnotes li { margin-bottom: 0.6rem; }

/* Reading meta — time, byline, last-updated */
.gl-readmeta {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--gl-line);
  border-bottom: 1px solid var(--gl-line);
  font-family: var(--gl-ff-sans);
  font-size: 0.78rem;
  color: var(--gl-ink-muted);
}
.gl-readmeta strong { color: var(--gl-ink); font-weight: 600; }

/* Sticky table of contents — for long docs */
.gl-toc-sticky {
  position: sticky;
  top: 80px;
  font-family: var(--gl-ff-sans);
  font-size: 0.84rem;
  line-height: 1.6;
}
.gl-toc-sticky h6 {
  margin: 0 0 0.8rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: var(--gl-tr-eyebrow);
  color: var(--gl-rose);
  font-weight: 600;
}
.gl-toc-sticky a {
  display: block;
  padding: 0.5rem 0;
  color: var(--gl-ink-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.8rem;
  transition: all var(--gl-dur) var(--gl-ease);
}
.gl-toc-sticky a:hover, .gl-toc-sticky a.is-active {
  color: var(--gl-ink);
  border-left-color: var(--gl-rose);
}

/* ----------------------------------------------------------------------------
   07. Component — Score Badge (the Glow Score visual)
   ----------------------------------------------------------------------------
   Premium, defensible-feeling. Used inline with reviews and rankings.
   ---------------------------------------------------------------------------- */
.gl-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: var(--gl-paper);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-sm);
  font-family: var(--gl-ff-display);
}
.gl-score__num {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gl-rose);
  letter-spacing: -0.02em;
}
.gl-score__max {
  font-size: 0.85rem;
  color: var(--gl-ink-muted);
}
.gl-score__label {
  font-family: var(--gl-ff-sans);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gl-rose);
  font-weight: 600;
  margin-left: 0.5rem;
  border-left: 1px solid var(--gl-line);
  padding-left: 0.6rem;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* ----------------------------------------------------------------------------
   08. Component — Print stylesheet
   ----------------------------------------------------------------------------
   When a journalist, lawyer, or buyer prints a Glow page, it should print well.
   ---------------------------------------------------------------------------- */
@media print {
  .top-chrome, .review-nav, .masthead, .footer, .gl-skip,
  .gl-toc-sticky, .ref-desk, .related-guides, .related-compares,
  .weekly-edit, .glow-edit, .subscribe-form, [aria-hidden="true"] {
    display: none !important;
  }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  h1, h2, h3, h4, h5 { color: #000; page-break-after: avoid; }
  h1 em, h2 em { color: #5A2A35; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  a[href^="/"]::after { content: " (glow.com.au" attr(href) ")"; }
  a[href^="#"]::after, a[href^="mailto:"]::after { content: ""; }
  blockquote, .gl-pullquote { page-break-inside: avoid; }
  .gl-trust { background: none; border: 0.5pt solid #000; padding: 0.5cm; }
}

/* ----------------------------------------------------------------------------
   09. Utility helpers (use sparingly — components > utilities)
   ---------------------------------------------------------------------------- */
.gl-eyebrow { font-family: var(--gl-ff-sans); font-size: var(--gl-fs-eyebrow); text-transform: uppercase; letter-spacing: var(--gl-tr-eyebrow); color: var(--gl-rose); font-weight: 600; }
.gl-display { font-family: var(--gl-ff-display); font-weight: 400; letter-spacing: var(--gl-tr-tight); }
.gl-serif   { font-family: var(--gl-ff-serif); }
.gl-sans    { font-family: var(--gl-ff-sans); }
.gl-italic  { font-style: italic; color: var(--gl-rose); }

.gl-section { padding-block: var(--gl-section-y); }
.gl-section-lg { padding-block: var(--gl-section-y-lg); }
.gl-canvas { background: var(--gl-canvas); }
.gl-paper  { background: var(--gl-paper); }
.gl-cream  { background: var(--gl-cream); }
.gl-ink-bg { background: var(--gl-ink); color: var(--gl-paper); }

/* ----------------------------------------------------------------------------
   10. Component — The Network Strip
   ----------------------------------------------------------------------------
   The independent publication network (six sites). Renders above the colophon
   on every page. Design intent: editorial, dignified, no logos — set in type.

   Markup:
     <aside class="gl-network" aria-label="Independent editorial network">
       <div class="gl-network__head">
         <span class="gl-network__eyebrow">The independent network</span>
         <h4 class="gl-network__title">Six publications. <em>One editorial standard.</em></h4>
       </div>
       <div class="gl-network__grid">
         <a href="/" class="gl-network__site is-self">
           <span class="gl-network__brand">The Glow</span>
           <span class="gl-network__desc">Beauty reviews & rankings, AU</span>
         </a>
         ... 6 more ...
       </div>
       <p class="gl-network__note">Each separately edited. ...</p>
     </aside>
   ---------------------------------------------------------------------------- */
.gl-network {
  margin: 3rem 0 1.5rem;
  padding: 2.4rem 0;
  border-top: 1px solid var(--gl-line);
  border-bottom: 1px solid var(--gl-line);
}
.gl-network__head {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--gl-line-soft);
}
.gl-network__eyebrow {
  font-family: var(--gl-ff-sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--gl-tr-eyebrow);
  color: var(--gl-rose);
  font-weight: 600;
}
.gl-network__title {
  margin: 0;
  font-family: var(--gl-ff-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  color: var(--gl-ink);
  letter-spacing: -0.01em;
}
.gl-network__title em {
  font-style: italic;
  color: var(--gl-rose);
}
.gl-network__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-top: 1px solid var(--gl-line);
}
.gl-network__site {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 1.2rem 1rem 1.2rem 0;
  border-right: 1px solid var(--gl-line);
  text-decoration: none;
  color: var(--gl-ink);
  transition: background-color var(--gl-dur) var(--gl-ease), padding-left var(--gl-dur) var(--gl-ease);
  min-height: 88px;
}
.gl-network__site:last-child { border-right: none; }
.gl-network__site:hover {
  background: var(--gl-rose-soft);
  padding-left: 0.6rem;
}
.gl-network__site.is-self {
  background: rgba(26,22,19,0.04);
  cursor: default;
}
.gl-network__site.is-self:hover {
  padding-left: 0;
  background: rgba(26,22,19,0.04);
}
.gl-network__brand {
  font-family: var(--gl-ff-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--gl-ink);
  letter-spacing: -0.005em;
}
.gl-network__site.is-self .gl-network__brand::after {
  content: " ·";
  color: var(--gl-rose);
  font-style: italic;
}
.gl-network__desc {
  font-family: var(--gl-ff-sans);
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--gl-ink-muted);
  letter-spacing: 0.005em;
}
.gl-network__note {
  margin: 1.4rem 0 0;
  font-family: var(--gl-ff-serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--gl-ink-muted);
}
.gl-network__note a {
  color: var(--gl-rose);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.gl-network__note a:hover { color: var(--gl-ink); }

/* Tablet — 4-up */
@media (max-width: 1080px) {
  .gl-network__grid { grid-template-columns: repeat(4, 1fr); }
  .gl-network__site:nth-child(4n) { border-right: none; }
  .gl-network__site:nth-child(n+5) { border-top: 1px solid var(--gl-line); }
}

/* Mobile — 2-up, no fancy padding shifts */
@media (max-width: 640px) {
  .gl-network { margin: 2rem 0 1rem; padding: 1.6rem 0; }
  .gl-network__head { flex-direction: column; gap: 0.4rem; align-items: flex-start; }
  .gl-network__grid { grid-template-columns: repeat(2, 1fr); }
  .gl-network__site:nth-child(2n) { border-right: none; }
  .gl-network__site:nth-child(n+3) { border-top: 1px solid var(--gl-line); }
  .gl-network__site:nth-child(4n) { border-right: 1px solid var(--gl-line); } /* reset 4-up override */
  .gl-network__site { min-height: 72px; padding: 1rem 0.8rem 1rem 0.4rem; }
  .gl-network__site:hover { padding-left: 0.4rem; } /* less aggressive on mobile */
}

/* ============================================================================
   END — The Glow Design System v1.0
   ============================================================================ */