/* Etherix Audio — "Night Bill" design system, flattened from the Claude Design kit
   (tokens/*.css + the React primitives in _ds_bundle.js) into plain CSS. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ---------- tokens/colors.css ---------- */
:root{
--violet-950:#1a0730;--violet-900:#240b40;--violet-800:#301256;--violet-700:#3c1469;
--magenta-600:#c8004f;--magenta-500:#eb0260;--magenta-400:#ff3d86;--magenta-100:#ffe0ea;
--gold-500:#f59a2e;--gold-300:#ffc977;--gold-100:#fff0d6;
--sky-500:#2f96cf;--sky-400:#4fb3e8;--sky-100:#dcf1fb;
--cream-100:#f4efe6;--cream-200:#e8dfd0;--cream-300:#d6c9b5;
--lilac-300:#cdb8e0;--lilac-500:#9a86b0;
--black:#000000;--white:#ffffff;
--success-500:#2fbf71;--danger-500:#ff4d6d;

--surface-page:var(--violet-900);--surface-input:rgba(244,239,230,.06);
--text-body:var(--cream-100);--text-muted:var(--lilac-300);--text-faint:var(--lilac-500);
--border-default:rgba(244,239,230,.35);
--link:var(--gold-300);--link-hover:var(--white);
--focus-ring:0 0 0 3px var(--gold-300);
}

/* ---------- tokens/typography.css ---------- */
:root{
--font-display:"Archivo","Arial Black",Impact,sans-serif;
--font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--display-weight:800;--display-stretch:112.5%;--display-tracking:0.01em;--lh-display:1;
--fs-mega:clamp(72px,11vw,176px);--fs-hero:clamp(56px,7.5vw,120px);
--fs-h1:clamp(44px,5.4vw,84px);--fs-h2:clamp(36px,4vw,60px);--fs-h3:28px;
--fs-lead:21px;--fs-body:17px;--fs-small:15px;--fs-label:13px;
--lh-body:1.6;--tracking-label:0.12em;--tracking-button:0.08em;
--type-body:400 var(--fs-body)/var(--lh-body) var(--font-body);
--type-lead:400 var(--fs-lead)/1.5 var(--font-body);
--type-small:400 var(--fs-small)/1.55 var(--font-body);
}

/* ---------- tokens/spacing.css ---------- */
:root{
--space-6:32px;--space-8:64px;--space-9:96px;
--section-y:var(--space-9);--gutter:clamp(20px,3.4vw,48px);
--container:1344px;--nav-h:76px;
--radius-pill:999px;--rule-thin:1px;--rule:2px;--rule-heavy:3px;
--ease-snap:cubic-bezier(.2,.9,.3,1);--dur-fast:120ms;--dur-base:200ms;--dur-ticker:40s;
}

/* ---------- tokens/base.css ---------- */
html{background:var(--surface-page);color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease-snap)}
::selection{background:var(--magenta-500);color:#fff}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@keyframes etx-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* ---------- Panel + tones (core/Panel.jsx, core/tones.js) ---------- */
.panel{padding:var(--section-y) var(--gutter);box-sizing:border-box;background:var(--p-bg);color:var(--p-fg);scroll-margin-top:72px}
.panel--tall{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.container{max-width:var(--container);margin:0 auto}
.tone-violet{--p-bg:var(--violet-900);--p-fg:var(--cream-100);--panel-muted:var(--lilac-300);--panel-accent:var(--magenta-400);--panel-line:rgba(244,239,230,.3)}
.tone-magenta{--p-bg:var(--magenta-500);--p-fg:var(--white);--panel-muted:var(--magenta-100);--panel-accent:var(--violet-900);--panel-line:rgba(255,255,255,.45)}
.tone-gold{--p-bg:var(--gold-300);--p-fg:var(--violet-900);--panel-muted:#5a3a50;--panel-accent:var(--magenta-600);--panel-line:rgba(36,11,64,.35)}
.tone-cream{--p-bg:var(--cream-100);--p-fg:var(--violet-900);--panel-muted:#5a4a64;--panel-accent:var(--magenta-600);--panel-line:rgba(36,11,64,.25)}
.tone-black{--p-bg:var(--black);--p-fg:var(--white);--panel-muted:var(--lilac-300);--panel-accent:var(--magenta-400);--panel-line:rgba(255,255,255,.3)}

/* ---------- Display + Label ---------- */
.display{margin:0;font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:var(--display-tracking);line-height:var(--lh-display);text-transform:uppercase;text-wrap:balance}
.display--mega{font-size:var(--fs-mega)}
.display--hero{font-size:var(--fs-hero)}
.display--h1{font-size:var(--fs-h1)}
.display--h3{font-size:var(--fs-h3)}
.label{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.3;color:var(--panel-accent,var(--magenta-400))}
.label::before{content:"";width:32px;height:var(--rule);background:currentColor;flex:none}
.lead{margin:0;font:var(--type-lead);text-wrap:pretty}
.stack{display:flex;flex-direction:column;gap:28px}

/* ---------- Icon (core/Icon.jsx) — CSS mask, inherits currentColor ---------- */
.icon{display:inline-block;flex:none;width:var(--i,18px);height:var(--i,18px);background-color:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-arrow{--m:url("https://unpkg.com/lucide-static@0.460.0/icons/arrow-right.svg")}
.i-check{--m:url("https://unpkg.com/lucide-static@0.460.0/icons/check.svg")}

/* ---------- Button (core/Button.jsx) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;height:50px;padding:0 26px;border-radius:var(--radius-pill);border:var(--rule) solid transparent;background:var(--b-bg);color:var(--b-fg);font-family:var(--font-body);font-weight:700;font-stretch:105%;font-size:14px;letter-spacing:var(--tracking-button);text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background var(--dur-fast) var(--ease-snap),transform var(--dur-fast);--i:18px}
.btn:hover{background:var(--b-hbg);color:var(--b-fg)}
.btn:active{transform:translateY(1px)}
.btn .icon{transition:transform var(--dur-base) var(--ease-snap)}
.btn:hover .icon{transform:translateX(4px)}
.btn--sm{height:38px;padding:0 18px;font-size:12px;--i:16px}
.btn--lg{height:62px;padding:0 34px;font-size:16px;--i:20px}
.btn--block{display:flex;width:100%}
.btn--primary{--b-bg:var(--magenta-500);--b-fg:var(--white);--b-hbg:var(--magenta-400)}
.btn--dark{--b-bg:var(--violet-900);--b-fg:var(--cream-100);--b-hbg:var(--violet-700)}
.btn--outline{--b-bg:transparent;--b-fg:currentColor;--b-hbg:color-mix(in srgb,currentColor 14%,transparent);border-color:currentColor}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- SiteHeader ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--nav-h);padding:0 var(--gutter);box-sizing:border-box;background:var(--p-bg);color:var(--p-fg)}
.site-header .container{height:100%;display:flex;align-items:center;gap:48px}
.site-header .logo{display:flex;margin-right:auto}
.site-header .logo img{height:28px;display:block}
.site-nav{display:flex;align-items:center;gap:36px}
.site-nav a{font-weight:600;font-size:15px;padding:6px 0;text-decoration-thickness:2px;text-underline-offset:6px}
.site-nav a:hover{text-decoration:underline}
@media (max-width:720px){.site-nav{display:none}.site-header .container{gap:16px}}

/* ---------- Hero ---------- */
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.hero-foot .lead{max-width:560px;color:var(--violet-900)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Photo (content/Photo.jsx) ---------- */
.photo{margin:0;display:block}
.photo__frame{position:relative;aspect-ratio:var(--ratio,3/2);width:100%;overflow:hidden;background:var(--violet-800);isolation:isolate}
.photo__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);display:block;filter:saturate(1.05) contrast(1.03)}
@media (max-width:720px){.photo--bleed .photo__frame{aspect-ratio:4/3}}

/* ---------- Ticker ---------- */
.ticker{background:var(--p-bg);color:var(--p-fg);overflow:hidden;padding:20px 0}
.ticker__track{display:flex;width:max-content;font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:var(--display-tracking);line-height:1;text-transform:uppercase;font-size:clamp(22px,2.4vw,34px);white-space:nowrap;animation:etx-ticker var(--dur-ticker) linear infinite}
.ticker__run{display:flex;gap:40px;padding-right:40px;flex:none}
.ticker__sep{color:var(--panel-accent)}

/* ---------- Layout grids ---------- */
.grid{display:grid;gap:64px;align-items:start}
.grid--420{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid--400{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.grid--240{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:40px}
.gap-hero{gap:var(--space-8)}

/* ---------- About lists ---------- */
.kicker{font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding-bottom:16px}
.bill{list-style:none;margin:0;padding:0;border-top:3px solid var(--cream-100)}
.bill li{padding:18px 0;border-bottom:1px solid rgba(244,239,230,.35);font-size:20px}
.bill--not li{font-weight:500;color:var(--lilac-300);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--magenta-400)}
.bill--us li{font-weight:600;color:var(--cream-100)}

/* ---------- Roster steps ---------- */
.steps{list-style:none;margin:0;padding:0;border-top:3px solid var(--violet-900);color:var(--violet-900)}
.steps li{display:grid;grid-template-columns:84px 1fr;align-items:baseline;padding:22px 0;border-bottom:2px solid var(--violet-900);font-size:20px;font-weight:500;line-height:1.4}
.steps .n{font-family:var(--font-display);font-weight:800;font-stretch:112.5%;font-size:40px;line-height:1}

/* ---------- Apply card + form (forms/*.jsx) ---------- */
.card{background:var(--cream-100);color:var(--violet-900);padding:clamp(28px,4vw,48px);--panel-muted:#5a4a64;--panel-line:rgba(36,11,64,.35)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}
.span-all{grid-column:1 / -1}
.field{display:block}
.field__label{display:block;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-muted);margin-bottom:8px}
.field input,.field textarea{width:100%;box-sizing:border-box;background:var(--surface-input);color:inherit;border:var(--rule) solid var(--panel-line);border-radius:0;padding:14px 16px;font:var(--type-body);outline:none;transition:border-color var(--dur-fast)}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{border-color:var(--gold-300);box-shadow:none}
.field input::placeholder,.field textarea::placeholder{color:#8a7a94}
.field.is-error input{border-color:var(--danger-500)}
.field__hint{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-top:6px;color:var(--panel-muted)}
.field__hint:empty{display:none}
.field.is-error .field__err{color:#c4183c}
.field__count{font-family:var(--font-mono);margin-left:auto}
fieldset.checks{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
fieldset.checks legend{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#5a4a64;margin-bottom:12px;padding:0}
.check{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font:var(--type-body)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{width:22px;height:22px;flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;color:#fff;border:var(--rule) solid currentColor;transition:background var(--dur-fast);--i:15px}
.check__box .icon{visibility:hidden;color:#fff}
.check input:checked + .check__box{background:var(--magenta-500);border-color:var(--magenta-500)}
.check input:checked + .check__box .icon{visibility:visible}
.check input:focus-visible + .check__box{box-shadow:var(--focus-ring)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{color:#c4183c;font-size:15px;margin:0}
.sent{display:flex;flex-direction:column;gap:20px;padding:48px 0}
.sent p{margin:0;font-size:18px;line-height:1.6}
[hidden]{display:none!important}

/* ---------- SiteFooter ---------- */
.site-footer{background:var(--violet-950);color:var(--cream-100);padding:var(--space-8) var(--gutter) var(--space-6)}
.site-footer .top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.site-footer .brand{display:flex;flex-direction:column;gap:16px;max-width:380px}
.site-footer .brand img{height:32px;align-self:flex-start}
.site-footer .brand p{margin:0;font:var(--type-small);color:var(--lilac-300)}
.site-footer nav{display:flex;gap:28px;flex-wrap:wrap}
.site-footer nav a{font-weight:600;font-size:15px}
.site-footer nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.site-footer .legal{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.3;margin-top:48px;padding-top:20px;border-top:var(--rule-thin) solid rgba(244,239,230,.2);color:var(--lilac-500)}
.sent:focus{box-shadow:none}