/*
  SREF — Meridian: the system layer.

  The parent theme has no type scale — every size is a fixed rem stepped
  down through 13 ad-hoc max-width breakpoints, and clamp() appears zero
  times in base.css. This file introduces the scale, the spacing rhythm and
  the grid the section components build on, and re-expresses the shared
  primitives (.btn, .eyebrow, headings) in those terms.

  Loaded AFTER the parent's base.css, so these win on the elements they
  name and base.css keeps handling everything not redesigned yet.
*/

:root{
  /* ---------- Fluid type scale ----------
     Ratio ~1.25 at the small end opening to ~1.4 at the large end, so body
     copy stays readable on a phone while display type gets genuinely big on
     a desktop. Every step is clamped at both ends: no headline can grow
     until it breaks the layout, and none collapses into the body text. */
  --t-mono:.7rem;
  --t-eyebrow:.74rem;
  --t-sm:.88rem;
  --t-body:clamp(1rem, .97rem + .12vw, 1.0625rem);
  --t-lead:clamp(1.06rem, .99rem + .32vw, 1.24rem);
  --t-h4:clamp(1.02rem, .97rem + .22vw, 1.2rem);
  --t-h3:clamp(1.22rem, 1.1rem + .58vw, 1.75rem);
  /* Minimums pulled down from 1.95/2.6/3/2.4rem. On a 390px phone those
     produced 31px/42px headings inside a 342px measure, which forced
     three- to five-line folds like "Building / self-reliance / through /
     education and / mentorship." A heading that breaks after every second
     word stops reading as a sentence. */
  --t-h2:clamp(1.6rem, 1.25rem + 1.9vw, 3.45rem);
  --t-h1:clamp(2rem, 1.35rem + 3.3vw, 5.3rem);
  --t-display:clamp(2.3rem, 1.4rem + 4.6vw, 7rem);
  --t-stat:clamp(2rem, 1.35rem + 3.1vw, 4.6rem);

  /* ---------- Spacing ----------
     A single 4px-rooted scale. Sections use --section-y so vertical rhythm
     is set in one place rather than per-component like the parent's. */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:24px;
  --s-6:32px; --s-7:44px;  --s-8:60px;  --s-9:80px;  --s-10:112px;
  --section-y:clamp(64px, 7.5vw, 132px);
  --section-y-tight:clamp(44px, 5vw, 80px);
  /* NO max-width cap, matching the reference.

     Measured on colabs.com.au with Playwright: at a 1500px viewport its
     content runs x=40 to x=1446, and at 1744px it runs x=52 to x=1692 —
     the container is always the full viewport minus a margin that grows
     with it, never a fixed maximum. A 1600px cap left roughly 160px of
     dead margin either side on a 1920 screen that the reference does not
     have.

     This gutter reproduces those measurements closely:
       1500px viewport -> 45px gutter  (reference ~40)
       1744px viewport -> 52px gutter  (reference ~52)
        390px viewport -> 20px gutter

     Long-form prose is unaffected — it is capped separately by
     --maxw-text and .m-article, so line length never runs away on an
     ultrawide display. */
  --gutter:clamp(20px, 3vw, 64px);
  --maxw:100%;
  --maxw-narrow:1080px;
  --maxw-text:68ch;
}

/* ---------- Sticky / pinning fix ----------
   base.css sets overflow-x:hidden on BOTH html and body. That makes the
   root a scroll container, which silently breaks position:sticky and every
   GSAP ScrollTrigger pin — exactly what this theme's horizontal rail and
   sticky story sections depend on. overflow:clip contains the same
   horizontal overflow WITHOUT establishing a scroll container, which is
   the actual fix rather than deleting the containment and reintroducing
   the sideways-scroll bug it was added for. */
html.theme-meridian-root, body.theme-meridian{overflow-x:clip;}
@supports not (overflow: clip){
  html.theme-meridian-root, body.theme-meridian{overflow-x:hidden;}
}

body.theme-meridian{
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
}

/* ---------- Element resets ----------
   Browsers apply `margin: 1em 40px` to <figure> and `margin: 1em 40px` to
   <blockquote> by default. Several components here are semantically
   figures (testimonial cards, hero frames, history photos, the donation QR)
   and were silently losing 80px of width to that UA margin — which on a
   390px phone left a testimonial's text just 180px wide, wrapping every
   three words. Reset once, centrally, rather than per component. */
.theme-meridian figure,
.theme-meridian blockquote,
.theme-meridian dl,
.theme-meridian dd{margin:0;}

/* ---------- Containers ----------
   .m-wrap is wider than the parent's 1180px .wrap, because this direction
   needs the horizontal room for asymmetric two-column compositions. The
   parent's .wrap is left alone so inherited pages keep their measure. */
.m-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.m-wrap-narrow{max-width:var(--maxw-narrow);}
.m-bleed{width:100%;padding-inline:var(--gutter);}

.m-section{padding-block:var(--section-y);position:relative;}
.m-section-tight{padding-block:var(--section-y-tight);}
.m-section-flush-top{padding-top:0;}

/* ---------- Headings ---------- */
.theme-meridian h1,
.theme-meridian h2,
.theme-meridian h3,
.theme-meridian h4{
  font-family:var(--font-display);
  font-weight:600;
  /* Deliberately no `color` here. base.css colours headings contextually
     (.page-header h1, .gap-section h2, .pillar-head h3, .impact-section h2,
     .donate-panel h3, .laptop-card.request h3, .gp-hero h1 — eight dark
     panels in all) at specificity 0,1,1. This rule is also 0,1,1 and loads
     later, so setting a colour here silently won every one of those and
     rendered ink-on-ink. Base's own element-level h1,h2,h3{color:var(--ink)}
     already supplies the default, so leaving colour out is what keeps both
     the light and dark cases correct. */
  letter-spacing:var(--heading-tracking);
  text-transform:none;
  text-wrap:balance;
  margin:0;
}
.theme-meridian h1{font-size:var(--t-h1);line-height:.98;}
.theme-meridian h2{font-size:var(--t-h2);line-height:1.04;}
.theme-meridian h3{font-size:var(--t-h3);line-height:1.14;letter-spacing:-0.012em;}
.theme-meridian h4{font-size:var(--t-h4);line-height:1.25;letter-spacing:-0.008em;}

.m-display{font-size:var(--t-display);line-height:.94;letter-spacing:-0.03em;}

/* ---------- Headline wrapping ----------
   `balance` distributes a heading evenly across its lines, which is right
   for two or three lines but actively causes the ragged short-line folds
   when the measure is narrow. Below the tablet breakpoint headings switch
   to `pretty` (which only protects against orphans) and drop any ch-based
   max-width, so they use the full column before wrapping. */
@media (max-width:820px){
  .theme-meridian h1,
  .theme-meridian h2,
  .theme-meridian h3,
  .theme-meridian h4{
    text-wrap:pretty;
    max-width:none;
    hyphens:none;
    /* A long unbroken word (a URL, "Entrepreneurship") must break rather
       than push the page sideways. */
    overflow-wrap:break-word;
  }
}

/* Optical italic accent on a single phrase inside a headline — Fraunces
   has a true italic, so this is a real cut, not a synthesised slant. */
.m-em{font-style:italic;font-weight:400;color:var(--accent);}

/* ---------- Text ---------- */
.m-lead{
  font-size:var(--t-lead);line-height:1.62;color:var(--ink-soft);
  max-width:var(--maxw-text);margin:0;text-wrap:pretty;
}
.m-body{color:var(--ink-soft);max-width:var(--maxw-text);margin:0;text-wrap:pretty;}
.m-measure{max-width:var(--maxw-text);}

/* ---------- Eyebrow / labels ----------
   Mono, not the parent's bold sans with a rule before it — the mono label
   is this direction's recurring small-type signature, and it ties to the
   tabular numerals used for every statistic. */
.m-label{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2-deep);
  margin:0;
}
.m-label::before{
  content:"";width:var(--s-6);height:1px;background:currentColor;
  opacity:.5;flex:none;
}
.m-label-plain::before{display:none;}
.m-label-light{color:var(--accent-2);}
.m-index{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.1em;color:var(--ink-faint);font-variant-numeric:tabular-nums;
}

/* ---------- Buttons ----------
   Same .btn contract as the parent (so inherited templates keep working)
   restated on this theme's scale, plus the circular icon affordance this
   direction uses on cards. */
.theme-meridian .btn{
  font-family:var(--font-body);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.005em;padding:var(--s-4) var(--s-7);
  border-radius:var(--btn-radius);border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.theme-meridian .btn-primary{background:var(--accent);color:#fff;}
.theme-meridian .btn-primary:hover{background:var(--accent-dark);filter:none;transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.theme-meridian .btn-dark{background:var(--accent-dark);color:var(--panel-dark-text);}
.theme-meridian .btn-dark:hover{background:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.theme-meridian .btn-ghost{border-color:var(--accent-line);color:var(--accent);background:transparent;}
.theme-meridian .btn-ghost:hover{background:var(--accent-wash);border-color:var(--accent);transform:translateY(-2px);}
.theme-meridian .btn-gold{background:var(--accent-2);color:var(--accent-dark);}
.theme-meridian .btn-gold:hover{background:var(--accent-2-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.theme-meridian .btn-outline{border-color:rgba(236,239,230,.4);color:var(--panel-dark-text);background:transparent;}
.theme-meridian .btn-outline:hover{background:rgba(236,239,230,.12);border-color:rgba(236,239,230,.7);transform:translateY(-2px);}

/* Circular arrow affordance — the recurring "this card is a link" cue. */
.m-arrow{
  --arrow-size:46px;
  width:var(--arrow-size);height:var(--arrow-size);border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent-line);color:var(--accent);background:transparent;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.m-arrow svg{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease-out);}
.m-arrow-light{border-color:rgba(236,239,230,.3);color:var(--panel-dark-text);}

/* ---------- Section headers ----------
   Deliberately asymmetric: the label and heading sit left on a 7-column
   field with the supporting paragraph offset right, rather than the
   centred heading-and-paragraph stack the parent repeats on every page. */
.m-head{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s-6) var(--s-9);align-items:end;margin-bottom:var(--s-9);
}
.m-head-title{display:flex;flex-direction:column;gap:var(--s-5);}
.m-head-aside{display:flex;flex-direction:column;gap:var(--s-5);padding-bottom:var(--s-2);}
.m-head-center{grid-template-columns:1fr;justify-items:center;text-align:center;}
.m-head-center .m-head-aside{align-items:center;}
@media (max-width:860px){
  .m-head{grid-template-columns:1fr;gap:var(--s-5);margin-bottom:var(--s-7);}
  .m-head-aside{padding-bottom:0;}
}

/* ---------- Rules ---------- */
.m-rule{height:1px;background:var(--line);border:0;margin:0;}
.m-rule-light{background:rgba(236,239,230,.16);}

/* ---------- Media primitives ----------
   Every photograph in this theme sits in a fixed-ratio rounded container
   with the image absolutely filling it, so a portrait client photo and a
   landscape one crop to the same shape instead of changing the layout.
   Zoom happens on the IMAGE inside the clip, never on the container —
   transform on a clipped child is GPU-cheap and can't reflow the grid. */
.m-media{
  position:relative;overflow:hidden;border-radius:var(--card-radius);
  background:var(--surface-2);
}
.m-media > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Real event photography: faces sit in the upper third with headroom
     above, so a centred crop lands on torsos. Same 20% bias the parent
     theme arrived at by measuring its own photos. */
  object-position:center 22%;
  transition:transform var(--dur-slow) var(--ease-out);
}
.m-media-4x5{aspect-ratio:4/5;}
.m-media-3x4{aspect-ratio:3/4;}
.m-media-1x1{aspect-ratio:1/1;}
.m-media-3x2{aspect-ratio:3/2;}
.m-media-16x9{aspect-ratio:16/9;}
.m-media-scrim::after{
  content:"";position:absolute;inset:0;background:var(--scrim);pointer-events:none;
}
.m-zoom:hover .m-media > img,
a:hover > .m-media > img{transform:scale(1.05);}

/* ---------- Focus ----------
   One visible focus ring for the whole theme, on the brand green. */
.theme-meridian :focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

/* ---------- Reveal ----------
   Paired with assets/js/reveal.js. Two opt-in behaviours, both driven by a
   single class flip so they keep working if GSAP never loads:

     [data-split]   headline words rise from behind a mask
     [data-stagger] a group's children fade and rise in sequence

   Nothing is hidden until the script has confirmed it can reveal it again:
   the hidden state lives on .is-split / .is-staggered, which JS adds. A
   visitor with JS disabled therefore sees ordinary, fully visible text
   rather than a blank page. */
.m-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;}
.m-word-i{
  display:inline-block;
  transform:translateY(105%);
  opacity:0;
  transition:transform .82s var(--ease-out), opacity .62s var(--ease-out);
  will-change:transform;
}
.is-revealed .m-word-i{transform:translateY(0);opacity:1;}

.m-stagger-item{
  opacity:0;transform:translateY(22px);
  transition:opacity .72s var(--ease-out), transform .72s var(--ease-out);
  will-change:transform,opacity;
}
.is-revealed .m-stagger-item{opacity:1;transform:none;}

/* Once a reveal has finished there is nothing left to composite — dropping
   will-change returns the layer memory rather than holding it for the life
   of the page. */
.is-revealed .m-word-i,
.is-revealed .m-stagger-item{will-change:auto;}

@media (prefers-reduced-motion: reduce){
  .m-word-i,
  .m-stagger-item{transform:none !important;opacity:1 !important;transition:none !important;}
}

/* ---------- Reduced motion ----------
   Component files each handle their own specifics; this is the blanket
   guarantee that nothing in the system layer moves. */
@media (prefers-reduced-motion: reduce){
  .theme-meridian *,
  .theme-meridian *::before,
  .theme-meridian *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .m-media > img{transform:none !important;}
}