/* =============================================================
   Snap Zap Media — website design tokens
   "Dark Enchanted Night". Settled 2026-09-13.

   This file is the single source of truth for colour, type and
   spacing on the Snap Zap Media website. Every value below is
   approved. Do not substitute, re-derive or "improve" them.
   ============================================================= */

:root{

  /* ---------- COLOUR ----------
     A near-black ground with the purple spent sparingly as light.
     Roughly 60 / 30 / 10 — ground / surface and body text / accent.
     The accent is a glow, never a large background fill.          */

  --ground:      #170312;   /* page background — the dominant field */
  --surface:     #33032F;   /* panels, raised surfaces, table rows  */
  --surface-alt: #531253;   /* borders, dividers, secondary surface */

  --ink:         #F6F4F8;   /* headings — white without the glare,
                               carries a trace of purple so it reads
                               native to the ground, not pasted on   */
  --ink-muted:   #B3A8C4;   /* body copy — legible over long
                               paragraphs without competing          */
  --ink-faint:   #857A96;   /* small print, dates, secondary labels,
                               footers. The dark-mode "charcoal"     */

  --accent:      #E052E0;   /* glow, active state, links, the one
                               emphasised word in a heading          */
  --accent-fill: #531253;   /* button fill at rest                   */
  --accent-deep: #33032F;   /* inactive rules, hover borders         */

  --hairline:    rgba(246,244,248,.10);  /* standard 1px divider     */
  --hairline-2:  rgba(246,244,248,.18);  /* secondary button border  */

  /* ---------- TYPE ---------- */

  --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Schibsted Grotesk", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Headings use --display at 800 (H1) and 700 (H2/H3).
     Body uses --body at 400, with 500/600 for emphasis and buttons. */

  /* ---------- TYPE SCALE ----------
     Fluid via clamp() rather than fixed breakpoints, so type grows
     with the viewport instead of stepping.                         */

  --step--1:    clamp(.75rem, .72rem + .15vw, .82rem);   /* labels, small print */
  --step-0:     clamp(.95rem, .9rem + .25vw, 1.05rem);   /* body                */
  --step-1:     clamp(1.05rem, .98rem + .35vw, 1.2rem);  /* lead paragraph      */
  --step-2:     clamp(1.2rem, 1.05rem + .7vw, 1.5rem);   /* H2 / H3             */
  --step-hero:  clamp(2.2rem, 1.4rem + 3.2vw, 4rem);     /* H1                  */

  /* ---------- LAYOUT ---------- */

  --page: min(1240px, 92vw);   /* content container, centred         */
  --radius: 2px;               /* maximum. Corners are sharp         */
}

/* =============================================================
   COMPONENT RULES

   Surfaces are FLAT and BORDERED. No glassmorphism, no elevated
   cards, no drop shadows, no gradient fills behind content.
   Depth comes from a 1px hairline and a change of ground colour,
   never from a shadow.

   Motion is restrained and always has a job — it shows state or
   guides attention. Nothing moves for decoration.
   ============================================================= */

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1{
  font-family:var(--display); font-weight:800;
  font-size:var(--step-hero); line-height:.98;
  letter-spacing:-.03em; margin:0; text-wrap:balance;
}

/* One word per heading may carry the accent. Never more. */
h1 .lift{ color:var(--accent); }

h2,h3{
  font-family:var(--display); font-weight:700;
  font-size:var(--step-2); letter-spacing:-.025em;
}

p{ color:var(--ink-muted); max-width:70ch; text-wrap:pretty; }

.small,
.label{
  font-size:var(--step--1); color:var(--ink-faint);
  letter-spacing:.22em; text-transform:uppercase;
}

/* ---------- buttons ----------
   Primary is a filled block that brightens to the accent on hover.
   Secondary is a bordered ghost. Both are sharp-cornered.          */

.btn{
  font-family:var(--body); font-weight:600; font-size:var(--step-0);
  text-decoration:none; display:inline-block;
  padding:.95rem 1.6rem; border-radius:var(--radius);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{
  background:var(--accent-fill); color:#FFFFFF;
  border:1px solid var(--accent-fill);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:var(--accent); border-color:var(--accent);
}
.btn-secondary{
  background:transparent; color:var(--ink);
  border:1px solid var(--hairline-2);
}
.btn-secondary:hover,
.btn-secondary:focus-visible{
  border-color:var(--accent-deep); color:var(--accent);
}

:where(a,button):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---------- structure ---------- */

.wrap{ width:var(--page); margin-inline:auto; }

/* The masthead is STICKY — it stays at the top of the viewport for
   the whole page so a visitor can reach any parent page without
   scrolling back up. The booking CTA is NOT sticky and never is. */
.site-head{
  position:sticky; top:0; z-index:50;
  background:var(--ground);
  border-bottom:1px solid var(--hairline);
}

/* ---------- responsive ----------
   Fluid clamp()-based sizing throughout rather than fixed
   breakpoints. The single real breakpoint is 880px, where the
   navigation collapses.                                           */
@media (max-width:880px){
  .site-nav{ display:none; }
}