@charset "utf-8";
/* ===========================================================================
   NEWSPORTVISION — design tokens
   ---------------------------------------------------------------------------
   Everything below is derived from measurements taken off the supplied logo
   file (decoded at 512x512). The measurements:

     cap height ............ 64px          -> the unit u = cap/16 = 4px
     letterspacing ......... 11.4px  ~ 3u
     inter-line gap ........ 12px      = 3u
     white rule thickness .. 11px    ~ 3u     <- all three are the same value
     line advance .......... 76px      = 19u
     type measure .......... 316px     = 79u
     "NEW" + tuck .......... 210px     = 66.4% of measure   -> 2/3
     white rule ............ 111px     = 35.1% of measure   -> 1/3
     rule tucks under W by .. 5px               (they overlap, never butt)

   Two numbers do most of the work:
     19/16  ->  display line-height        (0.867 at Archivo's 0.73 cap/em)
     2/3    ->  the primary asymmetric split, and 3:2 as the type-scale ratio
   =========================================================================== */

:root {
  /* `only` is the part that matters. Plain `light` merely says the page
     renders light, which is exactly the page Chrome for Android's Auto
     Dark Theme (and WebView's algorithmic darkening, and Samsung
     Internet's dark mode) offers to invert for the user. `only light`
     forbids that override. The palette here is sampled ink on sampled
     paper; inverted it is neither. */
  color-scheme: only light;

  /* --- Ink / paper / signal -------------------------------------------- */
  /* Sampled from the logo PNG: #FAC51C is 84% of its pixels, #1D1D1B is 5.5%. */
  --nsv-yellow:      #FAC51C;
  --nsv-yellow-deep: #E0AC06;   /* pressed / hover state of yellow fields    */
  --nsv-ink:         #1D1D1B;
  --nsv-ink-soft:    #33332F;
  --nsv-white:       #FFFFFF;
  --nsv-paper:       #F2EFE7;   /* warm gallery paper, never sterile white   */
  --nsv-paper-deep:  #E7E3D8;
  --nsv-steel:       #9A9A96;   /* exhibition architecture / sports hardware */
  --nsv-steel-line:  #C9C7C0;
  /* --- The axis inks ----------------------------------------------------
     Three supporting colours, and they are not decoration: they are the inks
     NewSportVision already prints with. Sampled from their own photographs —
     the orange of the printed Guidelines reads #EB7733 (9/255 from the value
     below, i.e. the same ink), the blue guide #034190, the court green
     #219D5F.

     Each is bound to one term of the axis the company says it exists to
     create — "The mission is to create an axis: culture - sport - art." —
     so a colour on this site always means something:

        CULTURE   blue     what is published, taught, convened
        SPORT     green    what is played, trained, practised
        ART       orange   what is made, designed, expressed

     Legibility is not symmetrical, so each ink has a stated value (for fields
     and painted marks) and a variant that is legible as TEXT on the opposite
     ground. Green and blue carry text on paper; orange carries text on ink.
     Nothing but ink is ever set on yellow. */
  --nsv-culture:      #2158A8;   /* 6.0:1 on paper — text-safe          */
  --nsv-sport:        #0F6433;   /* 6.3:1 on paper — text-safe          */
  --nsv-art:          #F37331;   /* 5.9:1 on ink   — text-safe on dark  */
  --nsv-culture-lift: #6E9FDF;   /* for text on ink                     */
  --nsv-sport-lift:   #45AE76;   /* for text on ink                     */
  --nsv-art-deep:     #B4480D;   /* for text on paper                   */

  /* The instrument colour. Interaction and focus, everywhere, always blue —
     so a focus ring can never be mistaken for a brand field. */
  --nsv-blue:        var(--nsv-culture);
  --nsv-blue-soft:   #E3E8F5;

  /* Semantic surfaces --------------------------------------------------- */
  --bg:        var(--nsv-paper);
  --fg:        var(--nsv-ink);
  --fg-quiet:  #63635D;   /* 5.2:1 on paper */
  --rule-color: var(--nsv-ink);
  --selection-bg: var(--nsv-ink);
  --selection-fg: var(--nsv-yellow);

  /* --- The unit --------------------------------------------------------- */
  /* 3u is the logo's atom: stem, tracking, leading gap and rule are all 3u. */
  --u: 4px;
  --atom: calc(var(--u) * 3);

  /* --- Grid ------------------------------------------------------------- */
  /* 12 columns so the measured 2/3 : 1/3 split lands exactly on 8 : 4.
     Gutter follows the logo's gap:advance ratio (3:19), which resolves to
     content-width / 75. */
  --cols: 12;
  /* The width of the page itself — the viewport less any scrollbar and any
     lane reserved for one. Browsers disagree about whether 100vw includes
     that lane (current Chrome leaves it out once scrollbar-gutter is set;
     others count it), so the head script measures the real value before first
     paint and writes it here in pixels. 100vw is only the no-script
     fallback, and the body clips whatever it overshoots by. */
  --vw: 100vw;
  --bleed-x: calc((var(--vw) - var(--content)) / 2);
  --page-x: clamp(18px, 4.2vw, 76px);
  --content: min(calc(var(--vw) - var(--page-x) * 2), 1680px);
  --gutter: calc(var(--content) / 75);
  --col: calc((var(--content) - var(--gutter) * 11) / 12);
  /* span(n) = n columns + the gutters between them */
  --span-1:  calc(var(--col) * 1);
  --span-2:  calc(var(--col) * 2  + var(--gutter) * 1);
  --span-3:  calc(var(--col) * 3  + var(--gutter) * 2);
  --span-4:  calc(var(--col) * 4  + var(--gutter) * 3);
  --span-5:  calc(var(--col) * 5  + var(--gutter) * 4);
  --span-6:  calc(var(--col) * 6  + var(--gutter) * 5);
  --span-7:  calc(var(--col) * 7  + var(--gutter) * 6);
  --span-8:  calc(var(--col) * 8  + var(--gutter) * 7);
  --span-9:  calc(var(--col) * 9  + var(--gutter) * 8);
  --span-10: calc(var(--col) * 10 + var(--gutter) * 9);
  --span-11: calc(var(--col) * 11 + var(--gutter) * 10);
  --span-12: var(--content);

  /* --- Rules ------------------------------------------------------------ */
  /* --- Paint -------------------------------------------------------------
     A white line on a court is painted; so is a brushstroke. The site's rule
     is the same object either way — drawn, or made by hand. */
  --paint-1: url("/assets/img/brush-1.svg");
  --paint-2: url("/assets/img/brush-2.svg");
  --paint-3: url("/assets/img/brush-3.svg");
  --paint-tab-1: url("/assets/img/tab-1.svg");
  --paint-tab-2: url("/assets/img/tab-2.svg");
  --paint-tab-3: url("/assets/img/tab-3.svg");
  --paint-edge-1: url("/assets/img/edge-1.svg");
  --paint-edge-2: url("/assets/img/edge-2.svg");

  --rule-hair:  1px;
  --rule-thin:  2px;
  --rule-bar:   clamp(9px, 0.95vw, 17px);   /* the logo bar, at page scale  */
  --radius: 0;                              /* the site is printed, not app */

  /* --- Vertical rhythm -------------------------------------------------- */
  --space-1: calc(var(--atom) * 1);    /* 12  */
  --space-2: calc(var(--atom) * 2);    /* 24  */
  --space-3: calc(var(--atom) * 3);    /* 36  */
  --space-4: calc(var(--atom) * 5);    /* 60  */
  --space-5: calc(var(--atom) * 8);    /* 96  */
  --space-6: calc(var(--atom) * 13);   /* 156 */
  --space-7: calc(var(--atom) * 21);   /* 252 */
  --act: clamp(96px, 13vh, 190px);     /* breathing between acts           */

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Newsreader", "Newsreader Fallback", Iowan Old Style, "Palatino Linotype", Palatino,
               Georgia, "Times New Roman", serif;
  --font-meta: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* 3:2 ladder — the ratio is the logo's own measure-to-"NEW" proportion. */
  --fs-meta:    clamp(10.5px, 0.62vw + 8px,  13px);
  --fs-small:   clamp(13px,   0.35vw + 12px, 16px);
  --fs-body:    clamp(16px,   0.42vw + 14.5px, 20px);
  --fs-lead:    clamp(21px,   0.85vw + 17px, 31px);
  --fs-h3:      clamp(28px,   1.5vw + 20px,  47px);
  --fs-h2:      clamp(38px,   3.2vw + 20px,  74px);
  --fs-h1:      clamp(52px,   5.6vw + 18px, 110px);
  --fs-display: clamp(66px,   9.4vw + 6px,  168px);
  --fs-mega:    clamp(76px,  14.2vw - 6px,  250px);

  /* Leading, straight from the logo: 19u advance over a 16u cap. */
  --lh-display: 0.867;
  --lh-tight:   1.02;
  --lh-text:    1.58;
  --lh-meta:    1.28;

  /* Tracking. The lockup's own tracking is 3u on a 21.9u em = 0.137em; large
     display sizes tighten optically, meta text opens up. */
  --track-lockup:  0.137em;
  --track-display: -0.022em;
  --track-h:       -0.014em;
  --track-body:    0;
  --track-meta:    0.16em;

  /* Variable-font axes. Archivo carries a real width axis (62–125), which is
     what lets a display line justify to the measure without wrecking colour. */
  --wdth-normal: 100;
  --wdth-wide:   112;
  --wdth-narrow: 88;
  --wght-display: 700;
  --wght-black:   740;   /* the logo measures 0.219 stem/cap — Bold, not Black */

  /* --- Motion ----------------------------------------------------------- */
  --t-micro:     170ms;   /* hover, focus, cursor                           */
  --t-ui:        340ms;   /* menus, toggles, state                          */
  --t-editorial: 760ms;   /* a composition resolving                        */
  --t-cine:     1150ms;   /* first paint, big reveals                       */

  --ease-editorial: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-enter:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-exit:      cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-rule:      cubic-bezier(0.83, 0, 0.17, 1);  /* mechanical, print-like */

  /* --- Layers ----------------------------------------------------------- */
  --z-canvas: 0;
  --z-raised: 10;
  --z-header: 100;
  --z-menu:   200;
  --z-cursor: 300;
  --z-skip:   400;
}

/* Tablet: the 2/3 split is preserved but the ladder compresses. */
@media (max-width: 1023px) {
  :root {
    --page-x: clamp(18px, 4vw, 40px);
    --track-display: -0.018em;
  }
}

/* Phone: 6 columns. The split becomes 4 : 2 — still 2/3 : 1/3. */
@media (max-width: 767px) {
  :root {
    --cols: 6;
    --page-x: 18px;
    --gutter: calc(var(--content) / 38);
    --col: calc((var(--content) - var(--gutter) * 5) / 6);
    --span-1:  calc(var(--col) * 1);
    --span-2:  calc(var(--col) * 2 + var(--gutter) * 1);
    --span-3:  calc(var(--col) * 3 + var(--gutter) * 2);
    --span-4:  calc(var(--col) * 4 + var(--gutter) * 3);
    --span-5:  calc(var(--col) * 5 + var(--gutter) * 4);
    --span-6:  var(--content);
    --span-7:  var(--content);
    --span-8:  var(--content);
    --span-9:  var(--content);
    --span-10: var(--content);
    --span-11: var(--content);
    --span-12: var(--content);
    --rule-bar: 8px;
    --act: 76px;
    --fs-h1: clamp(38px, 10vw, 62px);
    --fs-h2: clamp(30px, 8vw, 52px);
  }
}

/* Inverted field: ink ground. Used for whole sections, not for cards. */
.on-ink {
  --bg: var(--nsv-ink);
  --fg: var(--nsv-paper);
  --fg-quiet: #8A8A83;
  --rule-color: var(--nsv-paper);
  --selection-bg: var(--nsv-yellow);
  --selection-fg: var(--nsv-ink);
  background: var(--bg);
  color: var(--fg);
}

/* Signal field: yellow ground. Rationed — three moments on the homepage. */
.on-yellow {
  --bg: var(--nsv-yellow);
  --fg: var(--nsv-ink);
  --fg-quiet: #5E4C05;    /* 5.2:1 on yellow */
  --rule-color: var(--nsv-ink);
  --selection-bg: var(--nsv-ink);
  --selection-fg: var(--nsv-yellow);
  background: var(--bg);
  color: var(--fg);
}

.on-paper {
  --bg: var(--nsv-paper);
  --fg: var(--nsv-ink);
  --fg-quiet: #63635D;
  --rule-color: var(--nsv-ink);
  background: var(--bg);
  color: var(--fg);
}

/* ---------------------------------------------------------------------------
   Axis scopes. An element tagged with its term resolves --axis to the right
   ink for the ground it is standing on, so nothing downstream has to know
   which colour it is dealing with.
   --------------------------------------------------------------------------- */
/* Three values per term, because a colour has three different jobs:
     --axis        text            must clear 4.5:1 on its ground
     --axis-mark   a painted mark  only has to read clearly, so it can stay saturated
     --axis-field  a filled field  always the true ink                                */
[data-axis="culture"] { --axis: var(--nsv-culture); --axis-mark: #2158A8; }
[data-axis="sport"]   { --axis: var(--nsv-sport);   --axis-mark: #0F6433; }
[data-axis="art"]     { --axis: var(--nsv-art-deep); --axis-mark: #E2610F; }

.on-ink [data-axis="culture"], .on-ink[data-axis="culture"] { --axis: var(--nsv-culture-lift); --axis-mark: #3B7FD4; }
.on-ink [data-axis="sport"],   .on-ink[data-axis="sport"]   { --axis: var(--nsv-sport-lift);   --axis-mark: #2E9A5E; }
.on-ink [data-axis="art"],     .on-ink[data-axis="art"]     { --axis: var(--nsv-art);          --axis-mark: #F37331; }

/* On a field, the true ink is always used — legibility limits apply to text,
   not to a painted mark. --axis-on is what stays readable ON that field:
   paper over the two dark inks, ink over orange. */
[data-axis="culture"] { --axis-field: var(--nsv-culture); --axis-on: var(--nsv-paper); }
[data-axis="sport"]   { --axis-field: var(--nsv-sport);   --axis-on: var(--nsv-paper); }
[data-axis="art"]     { --axis-field: var(--nsv-art);     --axis-on: var(--nsv-ink); }