/* Merged from fonts.css, colors.css, typography.css, space.css, shape.css, motion.css, texture.css, base.css, ui.css */
/* Google Fonts are loaded via <link> in index.html <head> instead of a nested @import, so they load in parallel, not after this file. */

/* ---------------------------------------------------------------------------
   Type stack, and why each face is here.

   BIG SHOULDERS DISPLAY — headlines, stats, poster type.
     Commissioned for the City of Chicago and drawn by a Chicago studio. For a
     Chicago house DJ that provenance is the point: it is a condensed, sign-
     painted grotesque with real character, not a neutral geometric sans.
   ARCHIVO — body copy, and lead/bio paragraphs at weight 600.
     Ron approved a heavier body treatment; Archivo 600 carries that weight and
     still reads at 20px across a long paragraph, which a condensed face cannot.
   SPACE MONO — labels, dates, meta, stat captions.
     Deliberately idiosyncratic: slab-ish terminals and a wide ink trap. Tracked
     out in uppercase it reads like a flight case stencil.

   All three are Google Fonts substitutions — no licensed brand faces were
   supplied. Arimo and Tinos binaries live in the font files/ but are Arial and
   Times metric clones that wkhtmltopdf picked when exporting the EPK, so they
   are archived for document fidelity rather than wired in here.
   --------------------------------------------------------------------------- */

:root{
  /* ---- base ink: stage blackout ---- */
  --black-stage:#000000;      /* true black. the default ground for everything */
  --black-raised:#0A0A0B;     /* raised panel */
  --black-card:#121214;       /* card / sheet */
  --black-sunk:#06060700;     /* transparent sink, used with blur */
  --line-1:#1C1C1F;           /* hairline */
  --line-2:#2A2A2E;           /* hairline, strong */

  /* ---- reds: four, on purpose ---- */
  --red-signal:#F80818;   /* sampled from the DJ Ron Tinsley lockup. primary */
  --red-flare:#FF3347;    /* hotter, for pop / hover / small accents */
  --red-blood:#C40714;    /* pressed states, deep fills, print-safe */
  --red-oxide:#8E0410;    /* darkest red. rules, underlays, gradient ends */
  --red-wash:#1A0508;     /* near-black red tint for surfaces over black */

  /* ---- paper & type whites ---- */
  --white-hot:#FFFFFF;
  --white-paper:#FAFAF7;  /* slightly warm near-white. default body ink */
  --white-quiet:#D6D6D8;
  --grey-mute:#8A8A90;
  --grey-dead:#55555C;

  /* ---- legacy ---- */
  --gold-legacy:#B59C4B;  /* the hairline rule in EPK v1.5. archive only */

  /* ---- semantic aliases ---- */
  --bg-page:var(--black-stage);
  --bg-raised:var(--black-raised);
  --surface-card:var(--black-card);
  --surface-accent:var(--red-wash);
  --text-body:var(--white-paper);
  --text-heading:var(--white-hot);
  --text-quiet:var(--white-quiet);
  --text-muted:var(--grey-mute);
  --text-accent:var(--red-signal);
  --text-on-red:var(--white-hot);
  --border-hair:var(--line-1);
  --border-strong:var(--line-2);
  --border-accent:var(--red-signal);
  --action-bg:var(--red-signal);
  --action-bg-hover:var(--red-flare);
  --action-bg-press:var(--red-blood);
  --focus-ring:var(--red-flare);
  --status-live:var(--red-flare);
  --status-ok:#3ED598;
  --status-warn:var(--gold-legacy);
  --link:var(--red-signal);
  --link-hover:var(--red-flare);
}

:root{
  --font-display:"Big Shoulders Display","Archivo",system-ui,sans-serif;
  --font-lead:"Archivo",system-ui,sans-serif;
  --font-text:"Archivo",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;

  --wt-thin:200; /* @kind font */
  --wt-book:400; /* @kind font */
  --wt-med:500; /* @kind font */
  --wt-bold:700; /* @kind font */
  --wt-black:800; /* @kind font */
  --wt-heavy:900; /* @kind font */

  /* display scale — condensed, so it can run large without eating the line */
  --fs-mega:clamp(64px,10.5vw,176px); /* @kind font */
  --fs-hero:clamp(48px,7.4vw,116px); /* @kind font */
  --fs-h1:clamp(36px,4.8vw,68px); /* @kind font */
  --fs-h2:40px; /* @kind font */
  --fs-h3:27px; /* @kind font */
  --fs-h4:21px; /* @kind font */
  /* text scale */
  --fs-lead:20px; /* @kind font */
  --fs-body:16px; /* @kind font */
  --fs-small:14px; /* @kind font */
  --fs-micro:12px; /* @kind font */
  /* label scale (mono, tracked out) */
  --fs-label:12px; /* @kind font */
  --fs-label-sm:10px; /* @kind font */

  --lh-tight:0.88; /* @kind font */
  --lh-head:0.96; /* @kind font */
  --lh-snug:1.28; /* @kind font */
  --lh-body:1.62; /* @kind font */
  --lh-loose:1.75; /* @kind font */

  /* Big Shoulders is already condensed — it needs far less negative tracking
     than a normal-width grotesque, or the counters close up. */
  --tr-mega:-0.012em; /* @kind font */
  --tr-head:-0.006em; /* @kind font */
  --tr-body:0em; /* @kind font */
  --tr-lead:-0.011em; /* @kind font */
  --tr-label:0.16em; /* @kind font */
  --tr-label-wide:0.34em; /* @kind font */

  --type-display:var(--wt-heavy) var(--fs-hero)/var(--lh-head) var(--font-display); /* @kind font */
  --type-h2:var(--wt-black) var(--fs-h2)/var(--lh-head) var(--font-display); /* @kind font */
  --type-body:var(--wt-book) var(--fs-body)/var(--lh-body) var(--font-text); /* @kind font */
  --type-lead:var(--wt-bold) var(--fs-lead)/1.5 var(--font-lead); /* @kind font */
  --type-label:var(--wt-book) var(--fs-label)/1 var(--font-mono); /* @kind font */
}

:root{
  /* 4px base, but the brand uses odd steps on purpose (13, 27) so nothing looks snapped */
  --s-1:4px;--s-2:8px;--s-3:13px;--s-4:16px;--s-5:20px;--s-6:27px;
  --s-7:34px;--s-8:44px;--s-9:56px;--s-10:72px;--s-11:96px;--s-12:128px;
  --gutter:var(--s-6);
  --pad-card:var(--s-6);
  --pad-section:clamp(40px,7vw,var(--s-11));
  --w-text:62ch; /* @kind spacing */
  --w-page:1240px; /* @kind spacing */
  --w-narrow:820px; /* @kind spacing */
}

:root{
  /* near-square. the only round things in this brand are the record and the dot */
  --r-0:0px;
  --r-1:2px;
  --r-2:4px;
  --r-3:8px;
  --r-pill:999px;
  --r-card:var(--r-2);

  --bw-hair:1px; /* @kind other */
  --bw-cut:2px; /* @kind other */
  --bw-sticker:3px; /* @kind other */

  /* the lockup motif: white face, black knockout, red keyline */
  --sticker-shadow:0 0 0 var(--bw-cut) var(--black-stage),0 0 0 5px var(--red-signal);
  --sticker-shadow-tight:0 0 0 1px var(--black-stage),0 0 0 3px var(--red-signal);

  --shadow-lift:0 1px 0 var(--line-2),0 18px 40px -24px #000;
  --shadow-press:inset 0 2px 0 #00000066;
  --shadow-glow-red:0 0 0 1px var(--red-oxide),0 8px 30px -10px #f8081855;
  --hairline-red:linear-gradient(90deg,var(--red-signal) 0%,var(--red-oxide) 55%,transparent 100%); /* @kind other */
  --hairline-gold:linear-gradient(90deg,var(--gold-legacy) 0%,#000 100%); /* @kind other */
}

:root{
  --ease-cut:cubic-bezier(.2,.9,.1,1); /* @kind other */      /* fast out, hard stop — default */
  --ease-drop:cubic-bezier(.16,1,.3,1); /* @kind other */     /* entrances */
  --ease-linear:linear; /* @kind other */                      /* marquees, vinyl spin */
  --dur-tap:90ms; /* @kind other */
  --dur-fast:150ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
  --dur-marquee:28s; /* @kind other */
  --dur-spin:3.4s; /* @kind other */
  --t-hover:background-color var(--dur-fast) var(--ease-cut),color var(--dur-fast) var(--ease-cut),box-shadow var(--dur-fast) var(--ease-cut),transform var(--dur-tap) var(--ease-cut); /* @kind other */
}

:root{
  /* handmade grain: one repeating SVG noise tile, inlined as a data URI.
     Relative paths cannot be used here — a url() inside a custom property resolves
     against the CONSUMING document, not this stylesheet. */
  --grain-url:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); /* @kind other */
  --grain-opacity:.03; /* @kind other */
  --halftone-url:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='2' cy='2' r='1.15' fill='%23000'/><circle cx='6' cy='6' r='1.15' fill='%23000'/></svg>"); /* @kind other */
  --halftone-opacity:.16; /* @kind other */
  --scanline:repeating-linear-gradient(180deg,#ffffff08 0 1px,transparent 1px 3px); /* @kind other */
  --tape-red:repeating-linear-gradient(135deg,var(--red-signal) 0 10px,var(--red-oxide) 10px 20px); /* @kind other */
  --blur-panel:saturate(140%) blur(14px); /* @kind other */
}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg-page);color:var(--text-body);font:var(--type-body);text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--wt-heavy);color:var(--text-heading);letter-spacing:var(--tr-head);line-height:var(--lh-head);margin:0}
h3,h4{font-weight:var(--wt-black)}
.rt-lead{font:var(--type-lead);letter-spacing:var(--tr-lead);color:var(--text-body)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.rt-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red-signal);color:#fff;padding:13px 20px;font:var(--type-label);letter-spacing:var(--tr-label);text-transform:uppercase}
.rt-skip:focus{left:0}
a{color:var(--link);text-decoration:none;border-bottom:1px solid #f8081855;transition:var(--t-hover)}
a:hover{color:var(--link-hover);border-bottom-color:var(--red-flare)}
::selection{background:var(--red-signal);color:#fff}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.rt-label{font:var(--type-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
.rt-grain::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain-url);opacity:var(--grain-opacity);mix-blend-mode:screen}

/* Component surface styles. Values are literal on purpose; edit here, not in JSX. */
.rt-btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--font-display);font-weight:var(--wt-black);font-size:17px;letter-spacing:0.005em;text-transform:uppercase;line-height:1;padding:13px 22px;border:var(--bw-hair) solid transparent;border-radius:var(--r-1);cursor:pointer;transition:var(--t-hover);text-decoration:none;position:relative}
.rt-btn--primary{background:var(--action-bg);color:var(--text-on-red);box-shadow:var(--shadow-glow-red)}
.rt-btn--primary:hover{background:var(--action-bg-hover)}
.rt-btn--primary:active{background:var(--action-bg-press);transform:translateY(1px)}
.rt-btn--outline{background:transparent;color:var(--white-paper);border-color:var(--line-2)}
.rt-btn--outline:hover{border-color:var(--red-signal);color:var(--red-flare)}
.rt-btn--outline:active{transform:translateY(1px)}
.rt-btn--ghost{background:transparent;color:var(--white-quiet);padding-left:6px;padding-right:6px}
.rt-btn--ghost:hover{color:var(--red-flare)}
.rt-btn--sticker{background:var(--white-paper);color:var(--black-stage);box-shadow:var(--sticker-shadow-tight)}
.rt-btn--sticker:hover{background:#fff;box-shadow:0 0 0 1px var(--black-stage),0 0 0 4px var(--red-flare)}
.rt-btn--sm{font-size:14px;padding:9px 15px}
.rt-btn--lg{font-size:21px;padding:16px 30px}
.rt-btn[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}
.rt-iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;background:transparent;border:var(--bw-hair) solid var(--line-2);border-radius:var(--r-1);color:var(--white-quiet);cursor:pointer;transition:var(--t-hover)}
.rt-iconbtn:hover{border-color:var(--red-signal);color:var(--red-flare)}
.rt-iconbtn--solid{background:var(--red-signal);border-color:var(--red-signal);color:#fff}
.rt-iconbtn--solid:hover{background:var(--red-flare);border-color:var(--red-flare);color:#fff}
.rt-iconbtn--sm{width:31px;height:31px}
.rt-badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:var(--type-label);letter-spacing:var(--tr-label);text-transform:uppercase;padding:5px 9px 4px;border-radius:var(--r-1)}
.rt-badge--red{background:var(--red-signal);color:#fff}
.rt-badge--outline{border:1px solid var(--line-2);color:var(--white-quiet)}
.rt-badge--live{background:var(--red-wash);color:var(--red-flare);border:1px solid #8e041066}
.rt-badge--paper{background:var(--white-paper);color:#000}
.rt-tag{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--white-quiet);border:1px solid var(--line-2);padding:5px 10px 4px;border-radius:var(--r-pill);transition:var(--t-hover)}
.rt-tag:hover{border-color:var(--red-oxide);color:var(--white-hot)}
.rt-card{position:relative;background:var(--surface-card);border:var(--bw-hair) solid var(--border-hair);border-radius:var(--r-card);padding:var(--pad-card);overflow:hidden}
.rt-card--cut{border-left:var(--bw-sticker) solid var(--red-signal)}
.rt-card--lift{box-shadow:var(--shadow-lift)}
.rt-card--flat{background:transparent;border-color:var(--line-1)}
.rt-card__grain{position:absolute;inset:0;pointer-events:none;background-image:var(--grain-url);opacity:var(--grain-opacity);mix-blend-mode:screen}
.rt-field{display:flex;flex-direction:column;gap:7px}
.rt-field__label{font:var(--type-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
.rt-input{background:#0b0b0c;border:var(--bw-hair) solid var(--line-2);border-radius:var(--r-1);color:var(--white-paper);font-family:var(--font-text);font-size:15px;padding:12px 13px;transition:var(--t-hover);width:100%;box-sizing:border-box}
.rt-input::placeholder{color:var(--grey-dead)}
.rt-input:hover{border-color:#3a3a40}
.rt-input:focus{outline:none;border-color:var(--red-signal);box-shadow:0 0 0 3px #f8081826}
.rt-input--invalid{border-color:var(--red-flare)}
.rt-select{appearance:none;background:#0b0b0c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23F80818' stroke-width='2'/></svg>") no-repeat right 13px center}
.rt-check{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-size:15px;color:var(--white-paper)}
.rt-check__box{width:19px;height:19px;border:var(--bw-cut) solid var(--line-2);border-radius:var(--r-1);display:grid;place-items:center;transition:var(--t-hover);flex:none}
.rt-check input:checked+.rt-check__box{background:var(--red-signal);border-color:var(--red-signal)}
.rt-check__box--radio{border-radius:var(--r-pill)}
.rt-switch{width:44px;height:24px;border-radius:var(--r-pill);background:#1c1c1f;border:1px solid var(--line-2);position:relative;cursor:pointer;transition:var(--t-hover);flex:none}
.rt-switch[data-on="true"]{background:var(--red-signal);border-color:var(--red-signal)}
.rt-switch__knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--r-pill);background:var(--white-paper);transition:left var(--dur-fast) var(--ease-cut)}
.rt-switch[data-on="true"] .rt-switch__knob{left:23px}
.rt-tabs{display:flex;gap:0;border-bottom:1px solid var(--line-1)}
.rt-tab{font-family:var(--font-mono);font-size:12px;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted);background:none;border:0;border-bottom:var(--bw-cut) solid transparent;padding:13px 16px;cursor:pointer;transition:var(--t-hover)}
.rt-tab:hover{color:var(--white-paper)}
.rt-tab[aria-selected="true"]{color:var(--white-hot);border-bottom-color:var(--red-signal)}
.rt-rule{height:1px;border:0;background:var(--hairline-red);margin:0}
.rt-rule--gold{background:var(--hairline-gold)}
.rt-rule--flat{background:var(--line-1)}
.rt-sticker{font-family:var(--font-display);font-weight:var(--wt-heavy);color:var(--white-hot);letter-spacing:var(--tr-head);line-height:var(--lh-tight);-webkit-text-stroke:0;text-shadow:1px 1px 0 var(--black-stage),3px 3px 0 var(--red-signal)}
.rt-sticker--red{color:var(--red-signal);text-shadow:2px 2px 0 var(--black-stage),4px 4px 0 var(--white-paper)}
.rt-sticker--outline{color:transparent;-webkit-text-stroke:1.5px var(--white-paper);text-shadow:none}
.rt-marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1);padding:11px 0}
.rt-marquee__track{display:inline-flex;gap:44px;animation:rt-slide var(--dur-marquee) var(--ease-linear) infinite;font-family:var(--font-mono);font-size:12px;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--white-quiet)}
@keyframes rt-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rt-marquee__track{animation:none}.rt-marquee{overflow-x:auto}}
.rt-linkout{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:19px 0;border-bottom:1px solid var(--line-1);color:var(--white-paper);text-decoration:none;transition:var(--t-hover)}
.rt-linkout:hover{color:var(--red-flare);border-bottom-color:var(--red-oxide)}
.rt-linkout__name{text-wrap:balance;font-family:var(--font-display);font-weight:var(--wt-black);font-size:26px;letter-spacing:var(--tr-head)}
.rt-linkout__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
.rt-linkout:hover .rt-linkout__meta{color:var(--red-signal)}
.rt-stat__value{font-family:var(--font-display);font-weight:var(--wt-heavy);font-size:52px;line-height:1;letter-spacing:var(--tr-mega);color:var(--white-hot)}
.rt-stat__label{font:var(--type-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted);margin-top:9px;display:block}
.rt-dialog__scrim{position:fixed;inset:0;background:#000000cc;backdrop-filter:var(--blur-panel);display:grid;place-items:center;z-index:60;animation:rt-fade var(--dur-base) var(--ease-drop)}
.rt-dialog{width:min(520px,92vw);background:var(--surface-card);border:1px solid var(--line-2);border-top:var(--bw-sticker) solid var(--red-signal);border-radius:var(--r-2);padding:var(--s-7);animation:rt-rise var(--dur-base) var(--ease-drop)}
@keyframes rt-fade{from{opacity:0}to{opacity:1}}
@keyframes rt-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rt-toast{display:flex;align-items:center;gap:13px;background:var(--black-raised);border:1px solid var(--line-2);border-left:var(--bw-sticker) solid var(--red-signal);border-radius:var(--r-1);padding:13px 17px;font-size:14px;color:var(--white-paper);box-shadow:var(--shadow-lift)}
.rt-tooltip{position:relative;display:inline-flex}
.rt-tooltip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--white-paper);color:#000;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:var(--r-1);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-cut)}
.rt-tooltip:hover .rt-tooltip__bubble{opacity:1}
.rt-logo{display:inline-flex;align-items:center;gap:13px}
.rt-logo img{display:block;height:auto}
.rt-logo__wordmark{font-family:var(--font-display);font-weight:var(--wt-heavy);letter-spacing:var(--tr-head);color:var(--white-hot);text-transform:uppercase}