/*
  Design tokens — Graphite & Bone (DESIGN-CHECKPOINT.md §7, Tone 2) with the
  approved Ember accent (VISUAL-DIRECTION-SELECTION.md). Typefaces are an open
  question (DESIGN-CHECKPOINT.md §10.1) — system stacks are neutral
  placeholders, not a proposal.
*/

:root {
  /* Graphite & Bone base */
  --ground: #0C0D0F;
  --surface: #15171A;
  --rule: rgba(255, 255, 255, 0.09);
  --rule-strong: rgba(255, 255, 255, 0.16);
  --text: #EDE9E0;
  --text-muted: #7C7E82;
  --interactive: #FFFFFF; /* active nav / focus rings only */

  /* Reserved signal hue — approved: Ember */
  /*
    ---- The second tone ----

    The system is ONE deep tone used more than once, and ember used exactly
    once. An accent that appears twice stops being an accent, so ember stays
    the single bright room (03 Artist Work) and this carries the sheets that
    need weight without noise.

    Ranked by Rafik from explorations/sheet-tones/, which shows each
    candidate on the Event Curation sheet AND on a type-only tail sheet —
    the second being the real test, since rescuing the tail is half the job.

    Swap the value below to try another; they are all measured and safe:

      #101C2E  deep ink blue    bone 14.1:1   <- in use
      #1A1B2E  slate violet     bone 14.0:1
      #2A1E12  deep bronze      bone 13.4:1   reads as dimmed ember, careful
      #241A2E  deep aubergine   bone 13.7:1   takes its hue from the OMR photo;
                                              Rafik wants to judge it live
      #0D2422  deep teal        bone 13.4:1

    EMBER MEASURES ~4:1 ON ALL OF THEM. That is a link or a short label, not
    running copy. Body text is bone, secondary is --text-muted.
  */
  --tone-deep: #101C2E;

  --accent: #D8542A;
  --accent-ink: #1A0D08;

  /* Type — grotesque display + monospace metadata, families undecided (placeholder stacks) */
  --font-display: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;

  /* Type scale */
  --step-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --step-lede: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  --step-h2: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  --step-h1: clamp(3rem, 2rem + 6vw, 7.5rem);
  --step-meta: 0.6875rem;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  /* Layout */
  --content-max: 1280px;
  --edge: clamp(1.25rem, 1rem + 3vw, 4rem);
  --radius: 0; /* Cue Sheet: no rounded cards, per CLAUDE.md design direction */

  /* Motion — minimal, controlled, purposeful */
  --motion-fast: 180ms;
  --motion-medium: 320ms;
  --motion-wipe: 900ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Header */
  --header-h: 60px;
  /*
    One screenful below the header. The distance a REVEALED sheet is pulled
    up by, and the travel room it is given back — the same quantity by
    construction, which is why the reveal costs no document height.
    Declared once so the two cannot drift apart. See #contact in
    css/sections.css.
  */
  --reveal-h: calc(100vh - var(--header-h));
  --header-h-condensed: 44px;

  /* Folder-tab height (css/sections.css: .tab). Sections stick at
     header-h + tab-h, not just header-h, so the tab has room to sit below
     the header instead of poking up into it and getting painted over. */
  --tab-h: 34px;

  /* Hero fills the full space below the header. Sections are pin-and-cover
     (css/sections.css) now, not a negative-margin overlap, so there is no
     overlap amount left to compensate for here. */
  --hero-h: calc(100vh - var(--header-h));

  /*
    ---- Signature mark geometry, and the frost derived from it ----

    The sharp mark in the hero (css/hero.css) and the frosted copy painted
    behind the sheets (css/sections.css) MUST sit in exactly the same place,
    or the hero->sheet handoff jumps. Those were previously two independent
    sets of hand-computed numbers in two files, which had already drifted
    apart once (the frost had no mobile rule at all while the mark did).

    So the frost is now DERIVED, not transcribed. Move the mark by editing
    the three --mark-* values and the frost follows automatically.

      rafik-mark.svg       viewBox  0    0    1024 1024
      rafik-mark-blur.svg  viewBox -140 -140  1304 1304

    The blurred copy carries a 140-unit margin so its soft edges are not
    clipped. It is therefore 1304/1024 = 1.27344x larger than the sharp
    mark, and the mark begins 140/1304 = 10.7362% into the image.
  */
  --mark-w: 180vw;
  --mark-x: -55vw;  /* from the hero's left edge */
  --mark-y: -40vw;  /* from the hero's top edge  */

  /*
    How strongly the mark prints, in the hero.

    0.05 was tried and REJECTED as a resting value: it lifts the backdrop
    by about 9 levels out of 255 — under 4% of the range — which measures
    as respectable Weber contrast against a dark ground but is not reliably
    visible on an ordinary display in an ordinary room. Rafik could not see
    the mark at all at that value, twice.

    The lesson is worth keeping: contrast ratios computed against a very
    dark backdrop flatter tiny absolute differences. For a large, soft,
    low-frequency shape like this one, the honest test is whether a person
    looking at the screen can see it — not the arithmetic.

    This value still depends on --photo-brightness holding the photograph
    at 0.56; the two work as a pair (docs/hero-motion.md §2).

    THE MARK MUST NEVER DISAPPEAR AT REST. Any future tuning of ink or
    brightness has to keep it perceptible.
  */
  --mark-ink: 0.15;

  /*
    The frosted copy's strength, derived from the hero's — so the two can no
    longer drift apart. Both used to be painted by unrelated mechanisms (a
    near-black `screen` blend in the hero, a bone fill baked at 42% in the
    SVG), which produced a visible STEP in strength across the seam: the
    same logo, same place, same size, suddenly much bolder the moment a
    sheet covered it.

    Two effects pull in opposite directions:

      - the frost sits on near-black --ground while the hero mark sits on a
        photograph, which argues for LESS ink;
      - but the blur was re-baked from stdDeviation 7 to 2, and thin sharp
        strokes cover far less area than fat merged bands did, which argues
        for MORE.

    Dialled to 0.6 (ink 0.09) on the rig. It was 1.5 and pulled focus from
    the content behind every sheet; it is atmosphere, not a logo placement.

    NOTE: the frost is now opt-in per sheet, not global — see
    css/sections.css. It appears ONLY on the grey sheet, because on solid
    black it never looked good at any setting and was abandoned there.
  */
  --frost-ratio: 0.6;
  --frost-ink: calc(var(--mark-ink) * var(--frost-ratio));

  /*
    Which blurred copy to paint. The baked stdDeviation scales WITH the mark
    (it lives in the SVG's own units), so at the current oversized geometry
    the original stdDeviation="7" resolves to ~15px of blur — wider than the
    mark's thin strokes, which therefore dissolve while neighbouring strokes
    merge into bands. The frost stops being a blurred version of the mark
    and becomes a different, fatter shape.

    Variants, and their on-screen blur at --mark-w 180vw on a 1240px
    viewport: -s2 ~4px, -s35 ~8px, the original ~15px, -s14 ~31px,
    -s22 ~48px.

    -s22 is the choice, dialled on the rig at ink 0.6 x --mark-ink. -s2 was picked earlier so the frost's strokes would
    match the SHAPE of the sharp hero mark at the seam — the "one
    continuous logo" idea. That idea is now retired deliberately: at a blur
    this heavy and an ink this low the frost reads as a soft field rather
    than as the same drawing, which is what it should be doing behind
    content. The structural match was buying seamlessness at the price of
    prominence, and prominence was the actual problem.
  */
  --frost-img: url("../assets/logo/rafik-mark-blur-s22.svg");

  /*
    ---- The intro's opening frame for the mark ----

    The sequence starts with the mark large and legible, then transforms it
    onto its resting geometry (--mark-w/x/y above). The opening frame is
    expressed as a transform OF that resting box rather than as its own set
    of --mark-* values, because animating --mark-* would recompute the
    frosted copy's background on every panel (see css/hero.css §7 rule 5).

    With transform-origin at the top-left, a point p maps to T + s·p, so:

      s  = openW / --mark-w
      Tx = openX − --mark-x
      Ty = openY − --mark-y

    Desktop: 100vw at (0, −10vw) from 180vw at (−55, −40vw).
    These MUST be recomputed if --mark-* changes.
  */
  --intro-mark-s: 0.5556;
  --intro-mark-tx: 55vw;
  --intro-mark-ty: 30vw;

  /*
    ...and the frame BEFORE that, which the mark grows out of as it
    materialises with the fade. 70vw, sharing the legible frame's centre so
    the growth reads as one continuous approach rather than a reposition.

    Starting below the legible size is not decoration: something travelling
    toward the viewer grows continuously and accelerates, so passing THROUGH
    the legible size is more truthful than starting at it — and it makes the
    legible moment a peak rather than a starting position.
  */
  --intro-mark-s0: 0.3889;
  --intro-mark-tx0: 70vw;
  --intro-mark-ty0: 45vw;

  --frost-size: calc(var(--mark-w) * 1.27344);
  --frost-x: calc(var(--mark-x) - var(--frost-size) * 0.107362);
  /* + --header-h because the frost is painted against the viewport
     (background-attachment: fixed) while --mark-y is measured from the top
     of the hero, which pins at --header-h. */
  --frost-y: calc(var(--header-h) + var(--mark-y) - var(--frost-size) * 0.107362);
}

@media (max-width: 900px) {
  :root {
    --mark-w: 290vw;
    --mark-x: -90vw;
    --mark-y: -65vw;

    /*
      The phone gets its own opening frame, not the desktop's numbers.
      Applying the desktop transform to the mobile resting box produced
      160vw at (−35, −35vw) — a framing nobody chose, and not the legible
      signature the whole sequence is built around.

      Mobile opens at 140vw, horizontally centred (a 140vw square in a
      100vw viewport needs −20vw) and sitting a little above centre in the
      taller frame. From 290vw at (−90, −65vw):

        s  = 140/290        = 0.4828
        Tx = −20 − (−90)    = 70vw
        Ty =  12 − (−65)    = 77vw
    */
    --intro-mark-s: 0.4828;
    --intro-mark-tx: 70vw;
    --intro-mark-ty: 77vw;

    /* 98vw — the same 70% of the legible frame as desktop, centre-matched. */
    --intro-mark-s0: 0.3379;
    --intro-mark-tx0: 91vw;
    --intro-mark-ty0: 98vw;
  }
}

/*
  ---- WIDE AND ULTRAWIDE FRAMES ----

  Everything above is sized in vw — a fraction of window WIDTH — but the two
  things that actually break on a wide monitor are governed by the hero's
  HEIGHT. On a 3440x1440 the hero is 2.49:1, and at the default settings:

    - the crop showed source y 0.430-0.862, putting Rafik's face (0.17-0.40)
      entirely above the frame;
    - the mark's "legible" opening frame is a 100vw SQUARE, while the hero is
      only 40vw tall there, so it could never be legible — it rose from the
      bottom edge permanently part-cropped.

  Media queries can key off the window's SHAPE, not just its width, which is
  the tool for this. Two bands, because the trade-off changes with the ratio.

  NOTE ON THE BREAKPOINTS. What actually matters is the HERO's ratio, but a
  media query can only see the VIEWPORT's — and the hero is shorter by
  --header-h, so its ratio is always the larger of the two, by a margin that
  grows as the window gets shorter. The first band therefore triggers at
  12/7 (1.714) rather than the 16/9 the hero shape would suggest.

  Without that compensation a 1440x820 laptop (hero 1.89) fell into the
  default band while a 1920x1080 screen (hero 1.88) got band A — two
  identically-shaped heroes cropped differently, at y 0.316-0.885 versus
  0.219-0.802.

  On the crop: a 2.49:1 frame can only show ~50% of the source height, while
  face-to-hands spans ~0.71 of it. Both genuinely cannot fit, so the
  ultrawide band commits to eyes-down-to-hands rather than half-cutting a
  head. The 16:9 band still fits everything, just needs re-centring.

  On the mark: each band's opening frame is sized to fit inside the hero's
  height at that ratio, and centred in it, so the legible moment survives.
*/
@media (min-aspect-ratio: 12/7) {
  :root {
    --photo-y: 53%;
    --intro-mark-s: 0.2556;  /* 46vw legible, fits a ~53vw-tall hero */
    --intro-mark-tx: 82vw;
    --intro-mark-ty: 43.5vw;
    --intro-mark-s0: 0.1789; /* 32vw, same centre */
    --intro-mark-tx0: 88.9vw;
    --intro-mark-ty0: 50.4vw;
  }
  .hero-1__photo img {
    --photo-zoom: 1.13;
    --photo-shift-y: -5%;    /* the overhang is smaller here; more would gap */
  }
}

@media (min-aspect-ratio: 2/1) {
  :root {
    --photo-y: 53%;
    --intro-mark-s: 0.1889;  /* 34vw legible, fits a ~40vw-tall hero */
    --intro-mark-tx: 88vw;
    --intro-mark-ty: 43vw;
    --intro-mark-s0: 0.1322; /* 24vw, same centre */
    --intro-mark-tx0: 93.1vw;
    --intro-mark-ty0: 48.1vw;
  }
  .hero-1__photo img {
    --photo-zoom: 1.06;
    --photo-shift-y: -2%;
  }
}