/* ==========================================================================
   MALKO — production stylesheet
   Tokens are the Nocturne design system, carried over verbatim from
   _ds/nocturne-.../styles.css so the site stays on-system.
   ========================================================================== */

:root{
  --color-bg:#161826;
  --color-surface:#232532;
  --color-text:#e9e9ed;
  --color-accent:#9184d9;
  --color-accent-2:#a7a1db;
  --color-divider:color-mix(in srgb,#e9e9ed 16%,transparent);

  --color-neutral-100:#f3f5fe;
  --color-neutral-200:#e4e7f5;
  --color-neutral-300:#cfd3e5;
  --color-neutral-400:#b2b6ca;
  --color-neutral-500:#9397ab;
  --color-neutral-600:#75798c;
  --color-neutral-700:#595d6c;
  --color-neutral-800:#3f424d;
  --color-neutral-900:#292b31;

  --color-accent-100:#f5f4ff;
  --color-accent-200:#e7e5fe;
  --color-accent-300:#d2cefd;
  --color-accent-400:#b5abfc;
  --color-accent-500:#968ae0;
  --color-accent-600:#796cbf;
  --color-accent-700:#5d5294;
  --color-accent-800:#423a6a;
  --color-accent-900:#2b2741;

  --color-section:#262a60;
  --color-section-glow:#353b80;
  --color-section-ghost:#4c5397;

  --font-body:"Inter",system-ui,sans-serif;

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;

  --shadow-sm:0 0 0 1px #3f424d;
  --shadow-md:0 0 0 1px #595d6c,0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 0 0 1px #9397ab,0 16px 40px rgba(0,0,0,.65);

  /* Tells the browser to render native UI — date picker, select dropdown,
     scrollbars, form controls — in dark. Without it the calendar icon paints
     near-black on a near-black field. */
  color-scheme:dark;

  --pad:clamp(18px,4vw,56px);
  --maxw:1560px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* Light theme — warm editorial sand rather than cold blue-grey. The hero
   photograph is warm tan, so a warm ground sits under it naturally; the old
   #f4f5fb fought the image. Neutrals are warm-shifted and every text tier is
   re-checked for AA against the new ground. */
html[data-theme="light"]{
  color-scheme:light;
  --color-bg:#ece4d8;
  --color-surface:#ded3c2;
  --color-text:#1e1811;
  --color-neutral-100:#1e1811;
  --color-neutral-300:#3a3128;
  --color-neutral-400:#4e4438;
  --color-neutral-500:#5d5244;
  --color-neutral-600:#695d4e;
  --color-neutral-700:#756857;
  --color-neutral-800:#cabda8;  /* borders only, not text */
  --color-neutral-900:#e0d6c6;
  --color-accent:#5a4aa0;
  --color-accent-200:#332a5f;
  --color-accent-300:#413676;
  --color-accent-400:#4d4090;
  --color-accent-600:#7c6dc4;
  --color-divider:color-mix(in srgb,#1e1811 18%,transparent);
  --shadow-sm:0 0 0 1px rgba(30,24,17,.12);
  --shadow-md:0 0 0 1px rgba(30,24,17,.10),0 14px 34px rgba(30,24,17,.10);
  --shadow-lg:0 0 0 1px rgba(30,24,17,.12),0 22px 52px rgba(30,24,17,.14);
}
html[data-theme="light"] .lighten{mix-blend-mode:multiply;}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c3b49c;}
html[data-theme="light"] ::-webkit-scrollbar-track{background:var(--color-bg);}

/* accessibility flags */
html[data-a11y-contrast="1"]{--color-text:#fff;--color-neutral-300:#f0f1f6;--color-neutral-400:#e2e4ee;--color-neutral-500:#d3d6e5;--color-neutral-600:#c3c7d8;--color-accent-300:#cfc9ff;}
html[data-a11y-contrast="1"][data-theme="light"]{--color-text:#000;--color-neutral-300:#14161f;--color-neutral-400:#1f2230;--color-neutral-500:#2b2f3f;--color-neutral-600:#3a3e50;--color-accent-300:#382f75;}
html[data-a11y-contrast="1"] body{filter:contrast(1.18);}
html[data-a11y-links="1"] a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px;outline:1px dashed currentColor;outline-offset:3px;}
html[data-a11y-motion="1"] *,html[data-a11y-motion="1"] *::before,html[data-a11y-motion="1"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* The theme ground is painted on <html> too, so overscroll never exposes a
   white strip behind the page.
   NOTE: do NOT add `transition: background-color` here or on body. When the
   value comes from a custom property, Chrome leaves the background stuck on
   the old colour indefinitely — switching light -> dark kept the light ground
   while the text switched to its pale dark-theme colours, i.e. unreadable.
   The theme swap is instant on purpose. */
/* A barely-there vertical lift in the ground stops the long dark page reading
   as one flat slab. Fixed so it does not scroll away. */
html{background:var(--color-bg);}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--color-accent) 5%,var(--color-bg)) 0%,
    var(--color-bg) 42%,
    color-mix(in srgb,var(--color-section) 12%,var(--color-bg)) 100%);}
/* Applied for one frame while the theme flips. Any element with a colour
   transition whose value comes from a custom property can otherwise latch
   onto the outgoing theme's colour permanently (Chrome) — that left the nav
   links dark-on-dark after a toggle. Suppressing transitions for the swap
   commits the new colours instantly; hover transitions resume immediately. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{transition:none!important;}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  /* Kill the grey flash Android/iOS paint over every tapped link. */
  -webkit-tap-highlight-color:color-mix(in srgb,var(--color-accent) 22%,transparent);
  text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.015em;
  /* balance keeps headline line-breaks even instead of leaving one orphan
     word on the last line; pretty stops single-word widows in body copy. */
  text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
/* Proportional figures look better in running text; tabular in the rider
   table so the numbers line up column-wise. */
.spec__row span:last-child,.stat__num{font-variant-numeric:tabular-nums;}
/* height:auto is essential: images carry width/height attributes for layout
   stability, and without this the attribute height stays pinned while the
   width scales down — which stretched the About press photo vertically.
   Class rules (.hero__img) still override it where a fixed height is wanted. */
img{display:block;max-width:100%;height:auto;-webkit-user-drag:none;user-select:none;}
a{color:var(--color-accent-400);text-decoration:none;}
a:hover{color:var(--color-accent-300);}
button{font:inherit;color:inherit;}
:focus{outline:none;}
/* Focus ring reads as part of the design rather than a browser artefact:
   accent ring plus a ground-coloured gap so it stays visible on any surface. */
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--color-accent) 18%,transparent);border-radius:3px;}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent);}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--color-bg);}
::-webkit-scrollbar-thumb{background:var(--color-neutral-800);border-radius:9px;}
::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-700);}

.lighten{mix-blend-mode:lighten;background-color:transparent;}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--color-accent);color:var(--color-bg);padding:12px 20px;font-weight:600;}
.skip:focus{left:0;}

/* ---------- keyframes ---------- */
@keyframes mk-ticker{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@keyframes mk-rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
/* No filter:blur() here. Animating a blur forces a full repaint of every
   glyph each frame, and ten oversized letters (loader + hero) doing it at
   once was the visible hitch on entry. Opacity + transform composite on the
   GPU and look near-identical. */
@keyframes mk-letter{
  0%{opacity:0;transform:translate3d(0,.42em,0) rotate(6deg) scale(.94);}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);}}
@keyframes mk-pulse{0%,100%{opacity:.3;transform:scale(1);}50%{opacity:1;transform:scale(1.35);}}
/* Translate only. Scaling these two layers meant continuously resampling a
   62vw x 70vh radial gradient — the single most expensive thing on the page,
   running forever. Drifting them reads the same and costs almost nothing. */
@keyframes mk-drift-a{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(7vw,-5vh,0);}}
@keyframes mk-drift-b{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(-8vw,6vh,0);}}
@keyframes mk-eq{0%,100%{transform:scaleY(.22);}50%{transform:scaleY(1);}}
@keyframes mk-loader-bar{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes mk-loader-out{0%,58%{opacity:1;clip-path:inset(0 0 0 0);}100%{opacity:1;clip-path:inset(0 0 100% 0);}}
@keyframes mk-wipe{0%{transform:translateY(100%);}45%{transform:translateY(0);}100%{transform:translateY(-100%);}}
@keyframes mk-cue{0%,100%{transform:translateY(0);opacity:.35;}50%{transform:translateY(9px);opacity:1;}}

.anim-rise{animation:mk-rise .9s var(--ease) both;animation-delay:var(--d,0s);}

/* ---------- ambient ---------- */
/* contain isolates this layer so its animation can't trigger layout or paint
   work anywhere else on the page. */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;}
.ambient__blob{position:absolute;border-radius:50%;will-change:transform;}
/* Dialled back. The glow was competing with the content instead of sitting
   behind it — restraint is what makes a page read as considered. */
.ambient__blob--a{top:-20vh;left:-10vw;width:62vw;height:70vh;background:radial-gradient(circle at center,color-mix(in srgb,var(--color-accent) 15%,transparent) 0%,transparent 68%);animation:mk-drift-a 26s ease-in-out infinite;}
.ambient__blob--b{bottom:-26vh;right:-14vw;width:66vw;height:74vh;background:radial-gradient(circle at center,color-mix(in srgb,var(--color-section-glow) 24%,transparent) 0%,transparent 66%);animation:mk-drift-b 32s ease-in-out infinite;}
html[data-theme="light"] .ambient__blob--a,
html[data-theme="light"] .ambient__blob--b{opacity:.5;}
.ambient__grain{position:absolute;inset:0;opacity:.032;background-size:180px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");}

/* ---------- loader / wipe / cursor / progress ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--color-bg);display:grid;place-items:center;animation:mk-loader-out 1.9s cubic-bezier(.7,0,.3,1) forwards;}
.loader[hidden]{display:none;}
.loader__inner{display:grid;gap:20px;justify-items:center;}
.loader__word{display:flex;gap:.04em;font-weight:900;font-size:clamp(38px,8vw,88px);letter-spacing:.14em;text-transform:uppercase;line-height:1;}
.loader__word span{animation:mk-letter .7s var(--ease) both;}
.loader__word span:nth-child(2){animation-delay:.07s;}
.loader__word span:nth-child(3){animation-delay:.14s;}
.loader__word span:nth-child(4){animation-delay:.21s;}
.loader__word span:nth-child(5){animation-delay:.28s;}
.loader__track{width:min(240px,52vw);height:1px;background:var(--color-neutral-800);overflow:hidden;}
.loader__bar{height:100%;background:var(--color-accent);transform-origin:left;animation:mk-loader-bar 1.15s cubic-bezier(.5,0,.2,1) forwards;}

.wipe{position:fixed;inset:0;z-index:150;pointer-events:none;display:none;background:linear-gradient(to bottom,var(--color-section) 0%,var(--color-bg) 100%);}
.wipe.is-on{display:block;animation:mk-wipe .78s cubic-bezier(.76,0,.24,1) forwards;}
/* With animations suppressed the wipe would never play out and would sit over
   the page forever — so it simply never shows. */
html[data-a11y-motion="1"] .wipe,
html[data-a11y-motion="1"] .wipe.is-on{display:none!important;}
@media (prefers-reduced-motion:reduce){.wipe,.wipe.is-on{display:none!important;}}

/* Cursor glow. The wrapper is moved by JS (transform only, GPU-composited);
   the inner core owns the scale so a CSS transition can ease it without
   fighting the per-frame transform written to the wrapper. */
.cursor{position:fixed;top:0;left:0;z-index:4;pointer-events:none;opacity:0;
  transition:opacity .45s ease;will-change:transform;}
.cursor__core{display:block;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;
  background:radial-gradient(circle at center,
    color-mix(in srgb,var(--color-accent) 30%,transparent) 0%,
    color-mix(in srgb,var(--color-accent) 14%,transparent) 34%,
    color-mix(in srgb,var(--color-section-glow) 8%,transparent) 55%,
    transparent 70%);
  transform:scale(1);transition:transform .4s var(--ease);}
/* screen makes it read as light thrown onto the page rather than a sticker */
.cursor{mix-blend-mode:screen;}
/* Grows over anything clickable — a soft spotlight on what you're about to hit. */
.cursor.is-hot .cursor__core{transform:scale(1.32);}

html[data-theme="light"] .cursor{mix-blend-mode:multiply;}
html[data-theme="light"] .cursor__core{
  background:radial-gradient(circle at center,
    color-mix(in srgb,var(--color-accent) 15%,transparent) 0%,
    color-mix(in srgb,var(--color-accent) 7%,transparent) 38%,
    transparent 68%);}
html[data-a11y-motion="1"] .cursor{display:none;}
.progress{position:fixed;top:0;left:0;z-index:120;height:2px;width:0;background:linear-gradient(to right,var(--color-accent-600),var(--color-accent-300));box-shadow:0 0 12px var(--color-accent);}
.navscrim{position:fixed;top:0;left:0;right:0;height:132px;z-index:99;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--color-bg) 88%,transparent) 0%,color-mix(in srgb,var(--color-bg) 62%,transparent) 46%,transparent 100%);}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--pad);background:transparent;border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,padding .45s ease;}
/* backdrop-filter re-blurs everything behind the bar on every scroll frame.
   At the top the bar is transparent and there is nothing to blur, so it is
   only switched on once the nav actually has a background. */
.nav.is-stuck{background:color-mix(in srgb,var(--color-bg) 82%,transparent);border-bottom-color:color-mix(in srgb,var(--color-text) 10%,transparent);
  padding-top:12px;padding-bottom:12px;backdrop-filter:blur(16px);}
.nav__brand{display:flex;align-items:baseline;gap:9px;color:var(--color-text);}
.nav__brand:hover{color:var(--color-text);}
.nav__word{font-weight:900;font-size:20px;letter-spacing:.2em;text-transform:uppercase;line-height:1;}
.nav__dot{width:5px;height:5px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 12px var(--color-accent);animation:mk-pulse 2.2s ease-in-out infinite;}
.nav__links{display:flex;align-items:center;gap:clamp(9px,2vw,30px);}
/* No `transition: color` here. When an element's BASE colour comes from a
   theme variable and that property is transitioned, Chrome latches it to the
   outgoing theme's value and never updates — the nav links stayed dark-on-
   cream after switching to light. Hover still changes colour, just instantly. */
.nav__links>a{position:relative;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-neutral-300);padding:7px 0;text-shadow:0 1px 12px var(--color-bg);}
.nav__links>a:hover{color:var(--color-text);}
.nav__links>a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--color-accent);box-shadow:0 0 9px var(--color-accent);}
.nav__theme{display:grid;place-items:center;width:36px;height:36px;cursor:pointer;border-radius:50%;border:1px solid var(--color-neutral-800);
  background:color-mix(in srgb,var(--color-bg) 55%,transparent);color:var(--color-neutral-300);backdrop-filter:blur(6px);
  transition:color .3s ease,border-color .3s ease,transform .3s var(--ease);font-size:17px;}
.nav__theme:hover{color:var(--color-accent-300);border-color:var(--color-accent);transform:rotate(-18deg);}
/* Selector must out-specify `.nav__links > a` (0,1,1), which was overriding
   the padding to `7px 0` and leaving the label flush against the border. */
.nav__links > a.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-accent-300);border:1px solid var(--color-accent);border-radius:var(--radius-md);
  padding:10px 18px 10px 20px;   /* +2px left offsets the trailing letter-space */
  background:color-mix(in srgb,var(--color-bg) 55%,transparent);backdrop-filter:blur(6px);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;}
.nav__links > a.nav__cta::after{display:none!important;}
.nav__links > a.nav__cta:hover{color:var(--color-accent-200);
  background:color-mix(in srgb,var(--color-accent) 16%,transparent);
  box-shadow:0 0 26px color-mix(in srgb,var(--color-accent) 30%,transparent);}

/* ---------- layout ---------- */
.stage{position:relative;z-index:1;}
.route--page{padding:clamp(110px,16vh,156px) var(--pad) clamp(64px,10vh,112px);max-width:var(--maxw);margin:0 auto;}
.route--narrow{max-width:1240px;}
/* Wider vertical rhythm. Generous space between sections is most of what
   reads as "clean" — it lets each block be looked at on its own. */
.band{padding:0 var(--pad) clamp(80px,14vh,164px);max-width:var(--maxw);margin:0 auto;}
.band:first-of-type{padding-top:clamp(80px,14vh,164px);}
.band--split{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(40px,6vw,92px);align-items:start;padding-top:clamp(80px,14vh,164px);}
.band__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:26px;}
.stack{display:grid;gap:clamp(34px,6vh,60px);}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,5vw,68px);align-items:start;}
.split--form{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(34px,5vw,76px);}
.grid{display:grid;gap:14px;}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(226px,1fr));}
.grid--top{margin-top:clamp(40px,7vh,76px);}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-reveal][data-shown]{opacity:1;transform:none;}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.eyebrow__rule{width:32px;height:1px;background:var(--color-accent);}
.eyebrow__text{font-size:10.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--color-accent-300);}
.eyebrow__text--dim{letter-spacing:.3em;color:var(--color-neutral-500);}
.kicker{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;}
.kicker__num{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--color-accent);}
.kicker__label{font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--color-neutral-500);}
.h-lg{font-size:clamp(30px,3.6vw,50px);font-weight:500;letter-spacing:-.028em;line-height:1.04;margin-bottom:18px;}
.h-md{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.026em;line-height:1.06;margin-bottom:16px;}
.h-xl{font-size:clamp(30px,4vw,54px);font-weight:500;letter-spacing:-.03em;margin-top:16px;max-width:24ch;}
.h-sm{font-size:22px;font-weight:600;margin-bottom:18px;}
.h-page{font-size:clamp(46px,8vw,116px);font-weight:500;letter-spacing:-.03em;line-height:.92;margin-bottom:20px;}
.h-page--sm{font-size:clamp(40px,6.6vw,96px);}
.h-page__mark{font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
.h-admin{font-size:clamp(32px,4.4vw,58px);font-weight:500;letter-spacing:-.03em;line-height:.96;}
.lede{font-size:15.5px;color:var(--color-neutral-400);max-width:42ch;margin-bottom:28px;}
.lede--page{font-size:16px;max-width:52ch;margin-bottom:clamp(40px,7vh,68px);}
.body-strong{font-size:15.5px;color:var(--color-neutral-300);margin-bottom:14px;}
.body-dim{font-size:15.5px;color:var(--color-neutral-500);margin-bottom:28px;}
.soft{text-transform:none;letter-spacing:0;color:var(--color-neutral-700);}

.link-arrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-300);}
.link-arrow:hover{color:var(--color-accent-200);}
.link-mini{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-400);}
.link-mini:hover{color:var(--color-accent-300);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--radius-md);padding:15px 26px;background:transparent;border:1px solid transparent;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease,transform .25s var(--ease);}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn--accent{color:var(--color-accent);border-color:var(--color-accent);}
.btn--accent:hover{background:color-mix(in srgb,var(--color-accent) 16%,transparent);color:var(--color-accent-300);box-shadow:0 0 34px color-mix(in srgb,var(--color-accent) 32%,transparent);}
.btn--outline{color:var(--color-text);border-color:var(--color-neutral-800);}
.btn--outline:hover{border-color:var(--color-neutral-500);color:var(--color-accent-300);}
.btn--ghost-light{color:var(--color-text);border-color:color-mix(in srgb,var(--color-text) 40%,transparent);padding:16px 28px;}
.btn--ghost-light:hover{background:color-mix(in srgb,var(--color-text) 10%,transparent);box-shadow:0 0 34px color-mix(in srgb,var(--color-accent) 34%,transparent);color:var(--color-text);}
.btn--bare{color:var(--color-neutral-500);border-color:transparent;}
.btn--bare:hover{color:var(--color-accent-300);}
.btn--block{width:100%;padding:15px 20px;font-size:13px;}
.btn--sm{font-size:11.5px;letter-spacing:.14em;padding:11px 16px;}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:stretch;min-height:100vh;
  border-bottom:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);}
.hero__copy{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(96px,15vh,150px) var(--pad) clamp(48px,8vh,80px);}
.hero__copy>*{margin:0;}
.hero__word{display:flex;gap:.02em;font-weight:900;font-size:clamp(58px,9.4vw,148px);letter-spacing:.02em;text-transform:uppercase;line-height:.86;margin-left:-.02em;}
.hero__word span{animation:mk-letter .95s cubic-bezier(.15,.85,.2,1) both;animation-delay:var(--d,0s);}
/* The accent O carries the brand colour — give it a soft bloom so it reads as
   lit rather than simply filled. */
.hero__word .is-accent{
  color:var(--color-accent);
  text-shadow:0 0 38px color-mix(in srgb,var(--color-accent) 45%,transparent),
              0 0 90px color-mix(in srgb,var(--color-accent) 22%,transparent);}
html[data-theme="light"] .hero__word .is-accent{text-shadow:0 0 30px color-mix(in srgb,var(--color-accent) 25%,transparent);}
.hero__lede{font-size:clamp(15px,1.3vw,18px);color:var(--color-neutral-400);max-width:40ch;}
/* Genre chips — a quick, scannable statement of what the music is, in the
   restrained outline style rather than filled badges. */
.genres{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.genres li{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-neutral-400);border:1px solid var(--color-divider);
  border-radius:999px;padding:7px 14px;transition:border-color .3s ease;}
.genres li:hover{border-color:var(--color-accent);color:var(--color-accent-300);}

.hero__actions{display:flex;flex-wrap:wrap;gap:10px;}
.hero__media{position:relative;overflow:hidden;min-height:52vh;}
/* max-width:none is load-bearing: the global img{max-width:100%} would clamp
   the 116% bleed and leave the media box uncovered at the right edge. */
.hero__img{position:absolute;inset:-8%;width:116%;max-width:none;height:116%;object-fit:cover;object-position:54% 30%;will-change:transform;}
.hero__fade-x{position:absolute;inset:0;background:linear-gradient(to right,var(--color-bg) 0%,color-mix(in srgb,var(--color-bg) 55%,transparent) 26%,transparent 62%);}
.hero__fade-y{position:absolute;inset:0;background:linear-gradient(to top,var(--color-bg) 0%,transparent 42%);}
.hero__scroll{position:absolute;bottom:22px;right:clamp(18px,4vw,40px);display:flex;align-items:center;gap:10px;
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--color-neutral-500);}
.hero__scroll i{font-size:13px;animation:mk-cue 1.9s ease-in-out infinite;}
.eq{display:flex;align-items:flex-end;gap:4px;height:26px;}
.eq span{width:3px;height:100%;background:var(--color-accent);transform-origin:bottom;animation:mk-eq 1.1s ease-in-out infinite;}
.eq span:nth-child(2){animation-duration:1.4s;animation-delay:.12s;}
.eq span:nth-child(3){background:var(--color-accent-600);animation-duration:.9s;animation-delay:.3s;}
.eq span:nth-child(4){animation-duration:1.6s;animation-delay:.05s;}
.eq span:nth-child(5){background:var(--color-accent-600);animation-duration:1.25s;animation-delay:.38s;}
.eq span:nth-child(6){animation-duration:1.05s;animation-delay:.5s;}
/* neutral-600/700 measure 4.08:1 and 2.69:1 on the dark ground — below AA.
   The quiet text tiers step up one rung so both themes pass. */
.eq em{margin-left:12px;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--color-neutral-500);}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-bottom:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);
  background:color-mix(in srgb,var(--color-surface) 45%,var(--color-bg));padding:15px 0;}
.ticker__track{display:flex;width:max-content;animation:mk-ticker 32s linear infinite;}
.ticker__set{display:flex;align-items:center;gap:28px;padding-right:28px;font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--color-neutral-500);white-space:nowrap;}
.ticker__set i{font-style:normal;color:var(--color-accent);}

/* ---------- embeds / player ---------- */
.embed{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.embed iframe{display:block;border:0;width:100%;}
.player{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:16/9;background:var(--color-surface);margin-bottom:18px;}
.player iframe{display:block;border:0;width:100%;height:100%;}
.player__idle{position:absolute;inset:0;cursor:pointer;overflow:hidden;}
.player__thumb{position:absolute;inset:0;opacity:.72;background-size:cover;background-position:center;}
.player__veil{position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--color-bg) 92%,transparent) 0%,transparent 62%);}
.player__badge{position:absolute;top:clamp(18px,2.4vw,30px);left:clamp(22px,3vw,40px);display:flex;align-items:center;gap:10px;
  padding:8px 14px 8px 11px;border-radius:999px;background:color-mix(in srgb,var(--color-bg) 72%,transparent);box-shadow:var(--shadow-sm);backdrop-filter:blur(8px);}
.player__badge i{font-size:18px;color:var(--color-accent);}
.player__badge span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-300);}
.player__body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:clamp(22px,3vw,40px);}
.player__play{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--color-text) 45%,transparent);background:color-mix(in srgb,var(--color-bg) 45%,transparent);backdrop-filter:blur(6px);}
.player__play i{font-size:23px;}
.player__title{display:block;font-size:clamp(19px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-bottom:9px;text-wrap:pretty;}
.player__cta{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--color-accent-300);}

/* ---------- shelf ---------- */
.shelfwrap{margin-bottom:clamp(34px,6vh,60px);}
.shelfwrap__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.shelfwrap__title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.shelfwrap__title h2{font-size:19px;font-weight:600;letter-spacing:-.01em;}
.shelfwrap__nav{display:flex;gap:8px;}
.chip-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--color-surface) 80%,var(--color-bg));box-shadow:var(--shadow-sm);}
.chip-icon i{font-size:18px;color:var(--color-accent);}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-neutral-400);border:1px solid var(--color-neutral-800);border-radius:999px;padding:7px 14px;transition:color .3s ease,border-color .3s ease;}
.pill:hover{color:var(--color-accent-300);border-color:var(--color-accent);}
.round{display:grid;place-items:center;width:38px;height:38px;cursor:pointer;border-radius:50%;border:1px solid var(--color-neutral-800);
  background:color-mix(in srgb,var(--color-surface) 70%,var(--color-bg));color:var(--color-neutral-300);font-size:16px;
  transition:color .3s ease,border-color .3s ease,transform .3s var(--ease);}
.round:hover{color:var(--color-accent-300);border-color:var(--color-accent);}
.shelf{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px;margin:-2px -2px 0;}
.shelf::-webkit-scrollbar{height:0;display:none;}
.vcard{flex:0 0 auto;width:clamp(200px,21vw,258px);cursor:pointer;scroll-snap-align:start;transition:transform .35s var(--ease);}
.vcard:hover{transform:translateY(-4px);}
.vcard__shot{position:relative;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:16/9;transition:box-shadow .35s ease;}
.vcard:hover .vcard__shot{box-shadow:var(--shadow-lg);}
.vcard__img{position:absolute;inset:0;background-size:cover;background-position:center;}
.vcard__veil{position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--color-bg) 62%,transparent) 0%,transparent 58%);}
.vcard__badge{position:absolute;top:9px;left:9px;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-bg);background:var(--color-accent);border-radius:999px;padding:4px 9px;}
.vcard__hover{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s ease;}
.vcard:hover .vcard__hover{opacity:1;}
.vcard__hover span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb,var(--color-bg) 62%,transparent);border:1px solid color-mix(in srgb,var(--color-text) 40%,transparent);backdrop-filter:blur(6px);}
.vcard__title{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--color-text);margin:11px 0 5px;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vcard__by{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--color-neutral-500);}
.vcard__by i{font-size:12px;color:var(--color-neutral-600);}

/* ---------- cards / tiles ---------- */
.card{position:relative;padding:30px 24px 26px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 80%,var(--color-bg));box-shadow:var(--shadow-sm);
  transition:opacity .8s ease,transform .5s var(--ease),box-shadow .4s ease;overflow:hidden;}
/* A one-pixel light catch along the top edge — the detail that makes a flat
   panel read as a physical surface rather than a coloured rectangle. */
.card::before,.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--color-text) 16%,transparent) 22%,
    color-mix(in srgb,var(--color-text) 16%,transparent) 78%,transparent);pointer-events:none;
  transition:background .4s ease;}
/* On hover the top edge picks up the accent — a small cue that the surface is
   interactive, without moving anything. */
.card:hover::before,.tile:hover::before{
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--color-accent) 70%,transparent) 20%,
    color-mix(in srgb,var(--color-accent) 70%,transparent) 80%,transparent);}
.tile:hover .tile__go{color:var(--color-accent);transform:translate(2px,-2px);}
.tile__go{transition:color .3s ease,transform .3s var(--ease);}
.card:hover .card__icon{transform:scale(1.06);}
.card__icon{transition:transform .35s var(--ease);}
.card__icon{font-size:24px;color:var(--color-accent);display:block;margin-bottom:20px;}
.card h3{font-size:16.5px;font-weight:600;margin-bottom:8px;}
.card p{font-size:13.5px;color:var(--color-neutral-500);}
.tile{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px;border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-surface) 80%,var(--color-bg));box-shadow:var(--shadow-sm);color:var(--color-text);
  transition:opacity .8s ease,transform .5s var(--ease),box-shadow .4s ease;}
.tile:hover{color:var(--color-text);}
.tile__main{display:flex;align-items:center;gap:14px;}
.tile__main>i{font-size:25px;color:var(--color-accent);}
.tile strong{display:block;font-size:15.5px;font-weight:600;}
.tile em{display:block;font-style:normal;font-size:12.5px;color:var(--color-neutral-500);}
.tile__go{font-size:16px;color:var(--color-neutral-500);}
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.ticklist li{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--color-neutral-400);}
.ticklist span{color:var(--color-accent);}

/* ---------- cta band ---------- */
.cta{position:relative;overflow:hidden;background:var(--color-section);padding:clamp(60px,10vh,112px) var(--pad);}
.cta__glow{position:absolute;top:-40%;left:6%;width:52vw;height:180%;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--color-section-glow) 0%,transparent 66%);animation:mk-drift-a 24s ease-in-out infinite;}
.cta__inner{position:relative;max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;}
.cta__eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--color-accent-300);}

/* ---------- about ---------- */
.spec{display:grid;gap:1px;background:color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);overflow:hidden;}
.spec__row{display:flex;justify-content:space-between;gap:16px;padding:15px 19px;background:color-mix(in srgb,var(--color-surface) 55%,var(--color-bg));font-size:14px;}
.spec__row span:first-child{color:var(--color-neutral-500);}
.spec__row span:last-child{text-align:right;}
.press{margin:0;overflow:hidden;border-radius:var(--radius-lg);}
/* Fixed 4:3 frame with a cover crop biased to the artist, so the press photo
   is composed rather than just however tall the source happens to be. */
.press__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:52% 28%;border-radius:var(--radius-lg);}
.press__sig{width:clamp(170px,20vw,250px);height:auto;margin:18px 0 0;}
.press figcaption{font-size:11.5px;color:var(--color-neutral-600);margin-top:12px;}

/* ---------- feature ---------- */
.feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(30px,5vw,68px);align-items:center;
  padding:clamp(26px,4vw,52px);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 60%,var(--color-bg));
  box-shadow:var(--shadow-sm);margin-bottom:clamp(34px,6vh,60px);}
.feature__reel{justify-self:center;width:100%;max-width:340px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--color-bg);}
/* The viral clip is the headline item on this page — accent edge and a
   warmer ground so it reads ahead of the standard featured block. */
.feature--viral{background:color-mix(in srgb,var(--color-accent) 9%,var(--color-bg));box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 45%,transparent);}
.feature--viral .feature__reel{box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 40%,transparent),0 18px 44px rgba(0,0,0,.5);}
.flame{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-accent-300);border:1px solid color-mix(in srgb,var(--color-accent) 55%,transparent);
  border-radius:999px;padding:4px 10px;background:color-mix(in srgb,var(--color-accent) 14%,transparent);}
.flame i{font-size:11px;}
.feature__reel iframe{display:block;border:0;width:100%;}

/* ---------- forms ---------- */
.points{display:grid;gap:15px;max-width:420px;margin-bottom:30px;}
.points>div{display:flex;gap:13px;align-items:flex-start;}
.points i{font-size:19px;color:var(--color-accent);margin-top:2px;}
.points span{font-size:14px;color:var(--color-neutral-300);}
.mailline{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--color-accent-300);}
.mailline i{font-size:17px;}

.panel{padding:clamp(24px,3vw,38px);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 60%,var(--color-bg));box-shadow:var(--shadow-md);}
.panel--gate{display:grid;gap:16px;max-width:360px;}
.gate__icon{font-size:26px;color:var(--color-accent);}
.form{display:grid;gap:17px;position:relative;}
.form__title{font-size:19px;font-weight:600;margin-bottom:4px;}
.form__note{font-size:11.5px;color:var(--color-neutral-500);}
.form__err{font-size:12.5px;color:var(--color-accent-300);}
.field{display:grid;gap:7px;}
.field label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-neutral-500);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
input,select,textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;color:var(--color-text);
  background:var(--color-bg);border:1px solid var(--color-neutral-800);border-radius:var(--radius-md);padding:13px 15px;
  transition:border-color .3s ease,box-shadow .3s ease;}
textarea{resize:vertical;}
input:focus,select:focus,textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 18%,transparent);outline:none;}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--color-text) 38%,transparent);}

/* Date field: keep the value left-aligned and give the picker button a
   visible, tappable target instead of a dark icon adrift on the right. */
input[type="date"]{text-align:left;}
input[type="date"]::-webkit-datetime-edit{padding:0;}
/* Chrome's date input is already an internal flex row, so auto margin parks
   the picker button on the right and leaves the value hard left. */
input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:auto;padding:4px;cursor:pointer;opacity:.6;border-radius:4px;
  transition:opacity .2s ease,background .2s ease;}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;background:color-mix(in srgb,var(--color-accent) 20%,transparent);}
input[type="date"]::-webkit-inner-spin-button{display:none;}

/* Native select chevron, drawn to match the system rather than fight it. */
select{cursor:pointer;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.seg2__btn{cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-neutral-400);background:transparent;border:1px solid var(--color-neutral-800);border-radius:var(--radius-md);padding:14px 12px;
  transition:color .3s ease,border-color .3s ease,background .3s ease;}
.seg2__btn.is-on{color:var(--color-accent-300);border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 14%,transparent);}
.drop{display:flex!important;align-items:center;gap:14px;cursor:pointer;border:1px dashed var(--color-neutral-800);border-radius:var(--radius-md);
  padding:16px;transition:border-color .3s ease;position:relative;text-transform:none!important;letter-spacing:0!important;font-size:inherit!important;}
.drop:hover{border-color:var(--color-accent);}
.drop i{font-size:22px;color:var(--color-accent);}
.drop span{display:grid;gap:3px;}
.drop strong{font-size:13.5px;font-weight:600;color:var(--color-text);}
.drop em{font-style:normal;font-size:11.5px;color:var(--color-neutral-500);}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;}
.or{font-size:11.5px;color:var(--color-neutral-600);margin:2px 0 0;text-align:center;}
.done{display:grid;place-items:center;text-align:center;gap:15px;padding:44px 10px;}
.done>i{font-size:42px;color:var(--color-accent);}
.done h2{font-size:22px;font-weight:600;}
.done p{font-size:14px;color:var(--color-neutral-500);max-width:36ch;}
.done__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.done__actions .btn{padding:12px 20px;font-size:12px;}
.done__mail{font-size:12px;color:var(--color-neutral-600);}

/* ---------- admin ---------- */
.adminhead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:clamp(28px,5vh,48px);}
.adminhead__actions{display:flex;align-items:center;gap:10px;}
.notice{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:16px 20px;border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-accent) 12%,transparent);box-shadow:0 0 0 1px var(--color-accent);margin-bottom:22px;}
.notice p{font-size:13.5px;color:var(--color-neutral-300);max-width:62ch;}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.filters button{cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-neutral-400);background:transparent;border:1px solid var(--color-neutral-800);border-radius:999px;padding:9px 16px;
  transition:color .3s ease,border-color .3s ease;}
.filters button.is-on{color:var(--color-accent-300);border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,transparent);}
.empty{font-size:14px;color:var(--color-neutral-500);padding:40px 0;}
.subs{display:grid;gap:12px;}
.sub{display:grid;gap:16px;padding:24px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 70%,var(--color-bg));box-shadow:var(--shadow-sm);}
.sub__top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.sub__name{display:flex;align-items:center;gap:11px;margin-bottom:6px;}
.sub__name h3{font-size:17px;font-weight:600;}
.sub__chip{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:3px 9px;}
.sub__meta{font-size:12.5px;color:var(--color-neutral-500);}
.sub__msg{font-size:14px;color:var(--color-neutral-300);text-wrap:pretty;}
.sub__links{display:flex;flex-wrap:wrap;gap:10px;}
.sub__links a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--color-neutral-300);
  border:1px solid var(--color-neutral-800);border-radius:999px;padding:8px 14px;transition:color .3s ease,border-color .3s ease;}
.sub__links a:hover{color:var(--color-accent-300);border-color:var(--color-accent);}
.sub__acts{display:flex;gap:8px;}
.steps{display:grid;gap:13px;font-size:14px;color:var(--color-neutral-300);margin:0 0 22px;padding-left:20px;}
.code{font-family:ui-monospace,monospace;font-size:11.5px;line-height:1.65;color:var(--color-neutral-300);background:var(--color-bg);
  border-radius:var(--radius-md);padding:18px;margin:0;overflow-x:auto;box-shadow:var(--shadow-sm);}

/* ---------- a11y widget ---------- */
.a11y{position:fixed;right:18px;bottom:18px;z-index:130;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px;}
.a11y__fab{display:grid;place-items:center;width:48px;height:48px;cursor:pointer;border-radius:var(--radius-md);
  border:1px solid var(--color-accent);background:var(--color-surface);color:var(--color-accent-300);box-shadow:var(--shadow-md);font-size:24px;
  transition:box-shadow .3s ease,transform .3s var(--ease);}
.a11y__fab:hover{box-shadow:0 0 0 1px var(--color-accent),0 0 28px color-mix(in srgb,var(--color-accent) 30%,transparent);transform:translateY(-2px);}
.a11y__panel{width:232px;max-height:76vh;overflow-y:auto;display:grid;gap:6px;padding:10px;border-radius:var(--radius-lg);
  background:var(--color-surface);box-shadow:var(--shadow-lg);animation:mk-rise .34s var(--ease) both;}
.a11y__panel[hidden]{display:none;}
.a11y__panel button{width:100%;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--color-text);
  background:color-mix(in srgb,var(--color-bg) 65%,var(--color-surface));border:1px solid transparent;border-radius:var(--radius-md);
  padding:13px 14px;text-align:center;transition:border-color .25s ease,color .25s ease;}
.a11y__panel button:hover{border-color:var(--color-accent);color:var(--color-accent-300);}
.a11y__stmt{font-size:12.5px!important;color:var(--color-neutral-400)!important;background:transparent!important;border-color:var(--color-neutral-800)!important;padding:12px 14px!important;}
.a11y__text{font-size:12px;line-height:1.6;color:var(--color-neutral-400);margin:4px 2px 2px;}

/* ---------- footer ---------- */
.foot{border-top:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);padding:clamp(44px,7vh,72px) var(--pad) 34px;}
.foot__inner{max-width:var(--maxw);margin:0 auto;}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:34px;margin-bottom:44px;}
.foot__sig{width:clamp(210px,26vw,330px);height:auto;margin:0 0 18px -2%;}
.foot__vibe{display:inline-flex;align-items:center;gap:9px;font-size:clamp(16px,1.7vw,21px);font-weight:500;letter-spacing:-.01em;color:var(--color-text);margin-bottom:14px;}
.foot__blurb{font-size:13.5px;color:var(--color-neutral-500);margin-bottom:14px;max-width:32ch;}
.foot__mail{font-size:13px;color:var(--color-neutral-400);}
.foot__nav{display:grid;gap:10px;align-content:start;}
.foot__label{font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--color-neutral-700);}
.foot__nav a{font-size:13.5px;color:var(--color-neutral-400);}
.foot__nav a:hover{color:var(--color-text);}
.foot__social{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px;}
.foot__social a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:color-mix(in srgb,var(--color-surface) 80%,var(--color-bg));box-shadow:var(--shadow-sm);color:var(--color-neutral-300);font-size:22px;
  transition:color .3s ease,box-shadow .3s ease,transform .3s var(--ease);}
.foot__social a:hover{color:var(--color-accent-300);box-shadow:0 0 0 1px var(--color-accent),0 0 26px color-mix(in srgb,var(--color-accent) 26%,transparent);transform:translateY(-3px);}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;
  border-top:1px solid color-mix(in srgb,var(--color-text) 7%,transparent);font-size:11.5px;color:var(--color-neutral-500);}
.foot__legal a{color:var(--color-neutral-400);}

/* ---------- mobile nav ---------- */
.nav__mobilebar{display:none;align-items:center;gap:10px;}
.nav__burger{display:grid;place-content:center;gap:5px;width:42px;height:42px;cursor:pointer;
  border:1px solid var(--color-neutral-800);border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--color-bg) 55%,transparent);backdrop-filter:blur(6px);}
.nav__burger span{display:block;width:18px;height:1.5px;background:var(--color-text);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s ease;}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.menu{position:fixed;inset:0;z-index:98;display:flex;flex-direction:column;justify-content:center;gap:34px;
  padding:96px var(--pad) 40px;background:color-mix(in srgb,var(--color-bg) 97%,transparent);
  backdrop-filter:blur(18px);animation:mk-rise .3s var(--ease) both;overflow-y:auto;}
.menu[hidden]{display:none;}
.menu__links{display:grid;gap:4px;}
.menu__links a{font-size:clamp(26px,8vw,40px);font-weight:600;letter-spacing:-.02em;color:var(--color-neutral-300);
  padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent);transition:color .25s ease;}
.menu__links a:hover,.menu__links a.is-active{color:var(--color-text);}
.menu__links a.is-active{color:var(--color-accent);}
.menu__cta{color:var(--color-accent-300)!important;border-bottom:0!important;}
.menu__social{display:flex;gap:12px;}
.menu__social a{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;font-size:21px;
  background:color-mix(in srgb,var(--color-surface) 80%,var(--color-bg));box-shadow:var(--shadow-sm);color:var(--color-neutral-300);}
.menu__social a:hover{color:var(--color-accent-300);}
body.is-locked{overflow:hidden;}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .nav__links{gap:14px;}
  .nav__links>a{font-size:10.5px;letter-spacing:.12em;}
}
@media (max-width:860px){
  .nav__links{display:none;}
  .nav__mobilebar{display:flex;}
  .field-row{grid-template-columns:1fr;}
  .hero{min-height:auto;}
  .hero__media{min-height:52vh;order:-1;}
  .hero__copy{padding-top:clamp(48px,8vh,80px);}
  .hero__fade-x{background:linear-gradient(to bottom,transparent 30%,var(--color-bg) 100%);}
  .cta__inner{align-items:flex-start;}
  .feature__reel{max-width:100%;}

  /* Label and value were colliding mid-row: the label wrapped to two lines on
     the left while the right-aligned value wrapped into it. Stack instead. */
  .spec__row{flex-direction:column;gap:3px;padding:14px 16px;}
  .spec__row span:last-child{text-align:left;font-weight:500;}
  .spec__row span:first-child{font-size:11px;letter-spacing:.14em;text-transform:uppercase;}

  /* Comfortable tap targets — these were 16–21px tall. */
  .link-arrow,.link-mini,.mailline,.foot__mail,.foot__nav a,.press figcaption a,.spec__row a{
    display:inline-flex;align-items:center;min-height:44px;}
  .ticklist li{min-height:32px;align-items:center;}
  .pill,.round{min-width:44px;min-height:44px;}
  .round{width:44px;height:44px;}

  /* Platform embeds ship desktop-tall; trim them so the pages stop feeling
     like an endless scroll on a phone. */
  iframe[src*="open.spotify.com"]{height:352px!important;}
  iframe[src*="soundcloud.com"]{height:400px!important;}
  iframe[src*="music.apple.com"]{height:380px!important;}
  iframe[src*="instagram.com"]{height:460px!important;}

  /* Keep the floating a11y button clear of the last line of content. */
  .a11y{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));}
  .a11y__fab{width:44px;height:44px;font-size:21px;}
  .a11y__panel{width:min(232px,calc(100vw - 28px));}
  .foot__legal{padding-bottom:56px;}

  /* iOS Safari force-zooms the page whenever a focused field is under 16px.
     Everything here was 14px, so every tap into the booking or collab form
     punched the layout out of shape. */
  input,select,textarea{font-size:16px;}

  /* Respect notches and the home indicator. */
  .nav{padding-left:max(var(--pad),env(safe-area-inset-left));
       padding-right:max(var(--pad),env(safe-area-inset-right));}
  .menu{padding-bottom:calc(40px + env(safe-area-inset-bottom));overscroll-behavior:contain;}
  .foot{padding-bottom:calc(34px + env(safe-area-inset-bottom));}

  /* Momentum scrolling for the video shelf. */
  .shelf{-webkit-overflow-scrolling:touch;scroll-padding-left:2px;}
}
@media (max-width:520px){
  :root{--pad:20px;}
  .nav__word{font-size:17px;}
  .foot__top{gap:26px;}
  .done__actions{flex-direction:column;align-self:stretch;}
  .done__actions .btn{width:100%;}

  /* Full-width stacked buttons read better and are far easier to hit than
     two narrow pills sharing a 375px row. */
  .hero__actions{flex-direction:column;align-items:stretch;}
  .hero__actions .btn{width:100%;}
  .cta .btn--ghost-light{width:100%;}

  /* Seven social circles were wrapping 5 + 2. An even grid looks deliberate. */
  .foot__social{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;justify-items:center;}
  .foot__social a{width:100%;max-width:60px;height:54px;font-size:20px;border-radius:var(--radius-lg);}

  .rowhead{gap:8px;}
  .shelfwrap__title{gap:9px;}
  .shelfwrap__title h2{font-size:17px;}
  .feature{padding:22px 18px;}
  .panel{padding:22px 18px;}
  .card{padding:26px 20px 22px;}
  .tile{padding:22px 18px;}
  .sub__acts{width:100%;}
  .sub__acts .btn{flex:1;}
}