/* ---------------------------------------------------------------------------
 * GENERATED — do not edit by hand. Run tools/sync-tokens.py instead.
 *
 * THE FLIR design system token layer, vendored from
 *   github.com/msafder/theflir-design-system @ 7cf37f4
 * Sources: tokens/color.css, tokens/type.css, tokens/layout.css.
 *
 * The design system is the source of truth for every value below. If a colour
 * or size here looks wrong, fix it there and re-run this script — do not patch
 * it locally, or the two drift and the site stops being THE FLIR.
 *
 * The themes are scoped to [data-flir-theme="ink"|"chalk"], so the document
 * element must carry data-flir-theme. Ink is the default and ships unless
 * there is a reason not to.
 * ------------------------------------------------------------------------- */

/* ======== color.css ======== */
/* ============================================================
   THE FLIR — tokens/color.css
   Direction: "Thermal Register" (1c)
   The palette is a temperature scale. Grey is the instrument,
   red is heat. Red never decorates — it marks the hottest
   element on a surface, and there is only ever one per view.
   ============================================================ */

:root {
  /* ---- Raw ramp -------------------------------------------
     A measured 13-step grey. Steps are deliberately uneven at
     the ends so near-black and near-white both stay usable. */
  --flir-grey-00: #0A0A0A;  /* page black */
  --flir-grey-05: #111111;
  --flir-grey-10: #1A1A1A;
  --flir-grey-20: #232323;
  --flir-grey-30: #3F3F3F;
  --flir-grey-40: #585858;
  --flir-grey-50: #6E6E6E;  /* midpoint — legible on both ends */
  --flir-grey-60: #8A8A8A;
  --flir-grey-70: #9E9E9E;
  --flir-grey-80: #C8C8C8;
  --flir-grey-90: #D6D6D6;
  --flir-grey-95: #E8E8E6;  /* paper white, very slightly warm */
  --flir-grey-99: #F2F2F2;

  /* ---- Heat -----------------------------------------------
     --flir-red is the band colour and is fixed. The other two
     exist only for state and for large flat fills. */
  --flir-red:      #C00000;  /* brand red, locked */
  --flir-red-hot:  #E11414;  /* hover / press / small text on black */
  --flir-red-dim:  #7A0000;  /* large flat fills behind white text */
  --flir-red-wash: rgba(192, 0, 0, 0.12);

  /* ---- Archival -------------------------------------------
     Sampled from the suture8-01 cover (2002). These are a RECORD
     of what the band already printed, not additions to the
     palette. Use them only when reproducing or extending that
     artwork — a reissue, a suture8-01 merch run, an anniversary
     post. Never as a general accent: the brand red is #C00000
     and this oxide is a different, warmer, duller colour that
     will fight it if the two appear together. */
  --flir-red-oxide: #9E373C;  /* cover ground */
  --flir-red-oxide-deep: #703130;  /* torn edge frame */
  --flir-bone: #C9977A;  /* torn paper strip behind the title */

  --flir-white: #FFFFFF;
  --flir-black: #000000;

  /* ---- Instrument overlays --------------------------------
     Scanline + vignette. Applied at low opacity over photos
     and hero surfaces so screens read as a monitor feed. */
  --flir-scanline: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.028) 0 1px,
    transparent 1px 4px
  ); /* @kind other */
  --flir-vignette: radial-gradient(
    120% 100% at 50% 45%,
    transparent 40%,
    rgba(0, 0, 0, 0.55) 100%
  ); /* @kind other */
  /* Photo treatment. The band's live photography was shot under
     whatever colour the venue's lighting rig happened to be —
     green, magenta, red, sodium. Desaturating to the grey ramp is
     what makes a folder of unrelated shots read as one body of
     work, and it leaves #C00000 as the only colour in the frame. */
  --flir-photo-filter: grayscale(1) contrast(1.18) brightness(0.86); /* @kind other */
  /* Exception: shots already lit red (the cover figure, the live
     red-wash frames) keep their colour — they ARE the palette. */
  --flir-photo-filter-native: contrast(1.12) saturate(0.92) brightness(0.88); /* @kind other */
  /* Figure studies (GDL-06) push harder: the shadows must crush to
     true black so the form emerges with no visible edge. */
  --flir-photo-filter-figure: grayscale(1) contrast(1.28) brightness(0.82); /* @kind other */
  /* White-hot: the heat map read literally, as on Human Butterfly.
     Produced as a Photoshop gradient map — black → #C00000 → white.
     The CSS value is the screen approximation of that pass. */
  --flir-photo-filter-hot: grayscale(1) contrast(1.75) brightness(1.22); /* @kind other */
  --flir-heatmap-stops: #000000 0%, #7A0000 28%, #C00000 52%, #F2B3B3 78%, #FFFFFF 100%; /* @kind other */
  /* Corbijn pass. The band named Anton Corbijn's high-contrast grain and
     wide-angle framing as the reference. Distortion is a SHOOTING decision
     (see GDL-07) and cannot be faked in CSS; this token carries the render
     half only — blacks crushed, midtones pulled apart, highlights held just
     short of blowing. Heavier than --flir-photo-filter, softer than -figure. */
  --flir-photo-filter-corbijn: grayscale(1) contrast(1.42) brightness(0.9); /* @kind other */
  /* Interpolable twins of -corbijn and -native, for surfaces that TRANSITION
     between grey and colour rather than picking one and holding it.

     A filter transition interpolates only when both values carry the same
     functions in the same order. -corbijn leads with grayscale and -native
     with contrast, so animating between them does not fade — it snaps to the
     end value on the first frame. Measured, not assumed.

     saturate(1) and grayscale(0) are identity operations, so -rest renders
     exactly as -corbijn and -reveal exactly as -native. The extra functions
     buy nothing visually; they exist so the two lists have the same shape.

     KEEP THE FOUR FUNCTIONS AND THEIR ORDER IDENTICAL IN BOTH. Dropping one
     because it looks redundant is what breaks the transition, and it breaks
     silently — the colour still arrives, just instantly. */
  --flir-photo-filter-rest:   grayscale(1) contrast(1.42) saturate(1)    brightness(0.9); /* @kind other */
  --flir-photo-filter-reveal: grayscale(0) contrast(1.12) saturate(0.92) brightness(0.88); /* @kind other */

  /* ---- Grime ----------------------------------------------
     Reference: the Official Recoil site ("Shunt") — dark,
     textural, degraded photographic fields with a clean
     typographic layer sitting on top. Clean type, dirty image.
     The texture always lives UNDER the type layer, never over
     it, and never touches the mark. */
  --flir-grain: repeating-conic-gradient(
    rgba(255,255,255,0.035) 0% 25%,
    transparent 0% 50%
  ) 0 0 / 3px 3px; /* @kind other */
  /* Hard grain — 2px, roughly 3x the density. Pairs with
     --flir-photo-filter-corbijn on hero fields and print. At this weight the
     grain is a visible material, not a texture hint. Never over type. */
  --flir-grain-hard: repeating-conic-gradient(
    rgba(255,255,255,0.10) 0% 25%,
    rgba(0,0,0,0.10) 0% 50%
  ) 0 0 / 2px 2px; /* @kind other */
  --flir-grime: radial-gradient(
      140% 110% at 22% 12%, rgba(255,255,255,0.06), transparent 46%
    ),
    radial-gradient(
      120% 130% at 82% 88%, rgba(192,0,0,0.14), transparent 52%
    ); /* @kind other */
  --flir-crush: linear-gradient(
    0deg, rgba(0,0,0,0.72), rgba(0,0,0,0.30) 55%, rgba(0,0,0,0.78)
  ); /* @kind other */
}

/* ============================================================
   THEME: ink (dark) — the default. THE FLIR is a dark brand;
   ink is what ships unless there is a printing or platform
   reason to use chalk.
   ============================================================ */
:root,
[data-flir-theme="ink"] {
  --flir-bg:            var(--flir-grey-00);
  --flir-bg-sunken:     var(--flir-black);
  --flir-surface:       var(--flir-grey-05);
  --flir-surface-raised:var(--flir-grey-10);
  --flir-surface-inset: var(--flir-grey-20);

  --flir-fg:            var(--flir-grey-99);
  --flir-fg-muted:      var(--flir-grey-60);
  --flir-fg-faint:      var(--flir-grey-40);
  --flir-fg-inverse:    var(--flir-grey-00);

  --flir-line:          var(--flir-grey-20);
  --flir-line-strong:   var(--flir-grey-30);
  --flir-line-hair:     rgba(255, 255, 255, 0.06);

  --flir-accent:        var(--flir-red);
  --flir-accent-hover:  var(--flir-red-hot);
  --flir-accent-fg:     var(--flir-white);
  /* DEVIATION: on ink, red text under 16px uses --flir-red-hot,
     not --flir-red. #C00000 on #0A0A0A is ~2.4:1 and dissolves
     at micro sizes. Flat red *fills* still use --flir-red. */
  --flir-accent-text:   var(--flir-red-hot);

  --flir-focus:         var(--flir-red-hot);
  --flir-overlay:       rgba(10, 10, 10, 0.86);
}

/* ============================================================
   THEME: chalk (light) — the exception. Print inserts, CD
   jacket interiors, merch on light garments, and any surface
   that has to survive photocopying.
   ============================================================ */
[data-flir-theme="chalk"] {
  --flir-bg:            var(--flir-grey-95);
  --flir-bg-sunken:     var(--flir-grey-90);
  --flir-surface:       var(--flir-white);
  --flir-surface-raised:var(--flir-white);
  --flir-surface-inset: var(--flir-grey-90);

  --flir-fg:            var(--flir-grey-00);
  --flir-fg-muted:      var(--flir-grey-40);
  --flir-fg-faint:      var(--flir-grey-60);
  --flir-fg-inverse:    var(--flir-grey-99);

  --flir-line:          var(--flir-grey-80);
  --flir-line-strong:   var(--flir-grey-50);
  --flir-line-hair:     rgba(0, 0, 0, 0.08);

  --flir-accent:        var(--flir-red);
  --flir-accent-hover:  var(--flir-red-dim);
  --flir-accent-fg:     var(--flir-white);
  --flir-accent-text:   var(--flir-red);   /* 5.9:1 on chalk — fine at any size */

  --flir-focus:         var(--flir-red);
  --flir-overlay:       rgba(232, 232, 230, 0.9);
}

/* ======== type.css ======== */
/* ============================================================
   THE FLIR — tokens/type.css
   Two faces, no more.
   Archivo (variable width + weight) carries every headline and
   all body copy. IBM Plex Mono carries anything that reads as
   instrument output: track lists, timestamps, catalogue
   numbers, credits, micro-labels.
   ============================================================ */

/* Self-hosted, replacing this file's Google Fonts @import — the site's CSP is
   default-src 'self' and blocks it. Latin subsets only. Archivo is the
   variable face; its wdth axis is what --flir-wdth-wide/norm/cond drive. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibmplexmono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibmplexmono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibmplexmono-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* The band's own faces, taken from the existing artwork folder.
   The wordmark is typed as ONE word — THEFLIR — in two faces:
   THE in Placard Condensed, FLIR in Frankfurter Heavy at exactly
   twice the point size. Same baseline, no word space, no kerning
   adjustment. e.g. THE 75pt / FLIR 150pt. */
@font-face {
  font-family: 'Placard Condensed';
  src: url('/fonts/Placcond.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Frankfurter';
  src: url('/fonts/Frnkfh.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Families -------------------------------------------
     display   Placard Condensed — the band's own face. Wordmark,
               poster and cover-scale headlines only (48px and up).
     headline  Archivo wide 700 — UI-scale titles, where Placard
               is too condensed to stay legible.
     body      Archivo normal 400.
     data      IBM Plex Mono — instrument output.
     Frankfurter is in the folder and is NOT part of the system.
     It is loaded for reference only. */
  --flir-font-wordmark-the: 'Placard Condensed', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --flir-font-wordmark-flir:'Frankfurter', 'Haettenschweiler', 'Impact', sans-serif;
  --flir-font-display: 'Placard Condensed', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --flir-font-headline:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --flir-font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --flir-font-data:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Wordmark ratio — FLIR is exactly 2× THE. Locked. */
  --flir-wordmark-ratio: 0.5; /* @kind other */

  /* ---- Width axis (Archivo is variable) --------------------
     Wide is the house voice for headlines — it reads as a
     nameplate, not a poster shout. Condensed is reserved for
     the gig-poster master where vertical space is the
     constraint. */
  --flir-wdth-wide:  118; /* @kind other */
  --flir-wdth-norm:  100; /* @kind other */
  --flir-wdth-cond:  78; /* @kind other */

  /* ---- Weight --------------------------------------------- */
  --flir-fw-regular: 400; /* @kind other */
  --flir-fw-medium:  500; /* @kind other */
  --flir-fw-bold:    700; /* @kind other */
  --flir-fw-black:   900; /* @kind other */

  /* ---- Size scale — 1.4 ratio, rounded to whole px --------- */
  --flir-text-nano:    10px;  /* plate numbers, bleed marks */
  --flir-text-micro:   11px;  /* all-caps labels */
  --flir-text-small:   13px;  /* data rows, captions */
  --flir-text-body:    15px;
  --flir-text-lead:    18px;
  --flir-text-h3:      22px;
  --flir-text-h2:      32px;
  --flir-text-h1:      48px;
  --flir-text-display: 72px;
  --flir-text-mega:   120px;  /* poster + CD jacket only */

  /* ---- Line height ---------------------------------------- */
  --flir-lh-solid: 1; /* @kind other */
  --flir-lh-tight: 1.05; /* @kind other */
  --flir-lh-snug:  1.25; /* @kind other */
  --flir-lh-body:  1.6; /* @kind other */
  --flir-lh-data:  1.8; /* @kind other */   /* mono rows need air to scan */

  /* ---- Tracking -------------------------------------------
     Everything uppercase gets tracked. Nothing lowercase does. */
  --flir-ls-tight:  -0.02em; /* @kind other */
  --flir-ls-none:    0; /* @kind other */
  --flir-ls-wide:    0.08em; /* @kind other */
  --flir-ls-wider:   0.16em; /* @kind other */
  --flir-ls-widest:  0.32em; /* @kind other */  /* the wordmark lockup only */

  /* ---- Roles ----------------------------------------------
     Composite shorthands so components never assemble type
     by hand. Applied via the .flir-type-* classes below. */
  --flir-case-label: uppercase; /* @kind other */
  --flir-case-title: uppercase; /* @kind other */
  --flir-case-body:  none; /* @kind other */
}

/* Headline: Archivo Wide 700, uppercase, tight leading.
   Used for UI-scale titles, H3 to H2. */
.flir-type-title {
  font-family: var(--flir-font-headline);
  font-variation-settings: 'wdth' var(--flir-wdth-wide), 'wght' var(--flir-fw-bold);
  line-height: var(--flir-lh-tight);
  letter-spacing: var(--flir-ls-none);
  text-transform: var(--flir-case-title);
}

/* Body: Archivo Normal 400, sentence case, generous leading. */
.flir-type-body {
  font-family: var(--flir-font-body);
  font-variation-settings: 'wdth' var(--flir-wdth-norm), 'wght' var(--flir-fw-regular);
  font-size: var(--flir-text-body);
  line-height: var(--flir-lh-body);
  text-wrap: pretty;
}

/* Label: IBM Plex Mono 500, uppercase, widely tracked. */
.flir-type-label {
  font-family: var(--flir-font-data);
  font-weight: var(--flir-fw-medium);
  font-size: var(--flir-text-micro);
  line-height: var(--flir-lh-snug);
  letter-spacing: var(--flir-ls-wider);
  text-transform: var(--flir-case-label);
}

/* Data: IBM Plex Mono 400, tabular, for anything logged. */
.flir-type-data {
  font-family: var(--flir-font-data);
  font-weight: var(--flir-fw-regular);
  font-size: var(--flir-text-small);
  line-height: var(--flir-lh-data);
  font-variant-numeric: tabular-nums;
}

/* Display: Placard Condensed, the band's face. 48px and up only.
   Below that it closes up and stops reading. */
.flir-type-display {
  font-family: var(--flir-font-display);
  font-weight: var(--flir-fw-bold);
  line-height: var(--flir-lh-solid);
  letter-spacing: var(--flir-ls-none);
  text-transform: uppercase;
}

/* WORDMARK — the existing lockup, reproduced exactly.
   One word, two faces, one baseline:
     THE   Placard Condensed  at 0.5×
     FLIR  Frankfurter Heavy  at 1×
   Set font-size on the parent — that size IS the FLIR size, and
   THE follows from --flir-wordmark-ratio. No word space, no
   letter-spacing, no kerning tweak. Never re-type it by hand,
   never separate the words, never change the ratio. */
.flir-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: var(--flir-fw-bold);
  line-height: var(--flir-lh-solid);
  letter-spacing: var(--flir-ls-none);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--flir-fg);
}
.flir-wordmark .the {
  font-family: var(--flir-font-wordmark-the);
  font-size: var(--flir-wordmark-ratio);
  font-size: calc(1em * var(--flir-wordmark-ratio));
}
.flir-wordmark .flir {
  font-family: var(--flir-font-wordmark-flir);
  font-size: 1em;
}

/* ======== layout.css ======== */
/* ============================================================
   THE FLIR — tokens/layout.css
   Space, rules, radii, motion, and the fixed output sizes.
   Everything is on a 4px base. Nothing is rounded except the
   one documented exception.
   ============================================================ */

:root {
  /* ---- Space — 4px base ----------------------------------- */
  --flir-space-1:   4px;
  --flir-space-2:   8px;
  --flir-space-3:  12px;
  --flir-space-4:  16px;
  --flir-space-5:  24px;
  --flir-space-6:  32px;
  --flir-space-7:  48px;
  --flir-space-8:  64px;
  --flir-space-9:  96px;
  --flir-space-10:128px;

  /* ---- Radii -----------------------------------------------
     The system is square. A thermal instrument has no soft
     corners and neither does this brand.
     DEVIATION: --flir-radius-pill exists for one case only —
     the "NOW PLAYING" status chip on web, where a pill is the
     established platform signal for live state. Do not use it
     for buttons, cards, badges, or anything printed. */
  --flir-radius-none: 0;
  --flir-radius-hair: 2px;
  --flir-radius-pill: 999px;

  /* ---- Borders ---------------------------------------------
     Borders do the work shadows normally would. */
  --flir-border-hair:  1px; /* @kind other */
  --flir-border-mark:  2px; /* @kind other */   /* the boxed FLIR mark */
  --flir-border-heavy: 4px; /* @kind other */   /* poster frames, red rules */

  --flir-rule:        var(--flir-border-hair) solid var(--flir-line); /* @kind other */
  --flir-rule-strong: var(--flir-border-hair) solid var(--flir-line-strong); /* @kind other */
  --flir-rule-accent: var(--flir-border-mark) solid var(--flir-accent); /* @kind other */

  /* ---- Elevation -------------------------------------------
     There is none. Depth is expressed by surface value and
     rule weight, never by a drop shadow. --flir-shadow-none
     is a token so components can state the intent. */
  --flir-shadow-none: none; /* @kind other */

  /* ---- Grid ------------------------------------------------ */
  --flir-grid-cols:  12; /* @kind other */
  --flir-gutter:     var(--flir-space-5);
  --flir-page-max:   1200px;
  --flir-page-pad:   var(--flir-space-5);
  --flir-page-pad-lg:var(--flir-space-8);

  /* ---- Motion ----------------------------------------------
     Linear or ease-out. No bounce, no spring — the instrument
     does not overshoot. */
  --flir-motion-fast: 120ms; /* @kind other */
  --flir-motion-base: 200ms; /* @kind other */
  --flir-motion-slow: 400ms; /* @kind other */
  --flir-ease:        cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --flir-ease-linear: linear; /* @kind other */
  --flir-transition:  var(--flir-motion-base) var(--flir-ease); /* @kind other */

  /* ---- Fixed output sizes ----------------------------------
     Social masters are authored at 1:1 px and scaled for
     preview. Print masters are authored in inches. */
  --flir-ig-post-w:   1080px; /* @kind other */
  --flir-ig-post-h:   1080px; /* @kind other */
  --flir-ig-story-w:  1080px; /* @kind other */
  --flir-ig-story-h:  1920px; /* @kind other */
  --flir-ig-safe-top:   250px; /* @kind other */  /* clear of story UI chrome */
  --flir-ig-safe-bot:   320px; /* @kind other */
  --flir-reel-crop-h:  1440px; /* @kind other */  /* grid crop inside the 1920 cover */

  /* Kunaki CD jacket — verify against their current template
     PDF before upload; these are the working values. */
  --flir-cd-trim:   4.75in; /* @kind other */
  --flir-cd-bleed:  0.125in; /* @kind other */
  --flir-cd-safe:   0.25in; /* @kind other */
  --flir-cd-dpi:    300; /* @kind other */

  /* Gig poster — 18 x 24in at 150dpi */
  --flir-poster-w:  18in; /* @kind other */
  --flir-poster-h:  24in; /* @kind other */
  --flir-poster-margin: 0.75in; /* @kind other */
}

/* Utility: the instrument scanline overlay. */
.flir-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--flir-scanline);
  pointer-events: none;
}

/* Utility: page shell. */
.flir-page {
  max-width: var(--flir-page-max);
  margin-inline: auto;
  padding-inline: var(--flir-page-pad);
}