/* "nocturne": a child theme on the Fluid base v2. Dark-first and cinematic:
   deep ink-blue, one soft glow of light behind the hero, the hero headline in
   a silver gradient set in a tight display sans, cards as quiet translucent
   panels with crisp 1px edges. The primary button is brushed silver, the same
   metal as the headline; links and focus carry one pale steel-blue. A
   deliberate light mode (grey-blue paper, ink headline, ink buttons) keeps
   the same structure, and follows the OS or <html data-theme>.
   Upstreamed from the parked-domain landing page (domain-landing,
   public/themes/nocturne.css, written for Fluid 1.0); its landing-only rules
   (the domain wordmark sizing, the two-form layout, message pages) stay there.
   Fonts: none. System stacks only (SF Pro / Segoe UI Variable / Inter, with
   a system serif for the hero subheadline); nothing downloads.
   Link after the base: fluid.min.css, then this file. Theme-private tokens
   are prefixed --nc-. */
@layer reset, tokens, base, layouts, components, themes, utilities;

@layer themes {

  /* ---------- Tokens: dark first ---------- */
  :root {
    --nc-bg: oklch(15.5% 0.022 258);
    --nc-bg-deep: oklch(12% 0.018 258);
    --nc-surface: oklch(20% 0.024 256);
    --nc-text: oklch(96.5% 0.006 250);
    --nc-text-2: oklch(78% 0.022 250);
    --nc-text-3: oklch(68% 0.022 250);
    --nc-panel: oklch(21% 0.026 256 / 0.55);
    --nc-panel-sheen: oklch(100% 0 0 / 0.028);
    --nc-panel-edge: oklch(100% 0 0 / 0.085);
    --nc-panel-hi: oklch(100% 0 0 / 0.05);
    --nc-panel-glint: oklch(90% 0.05 230 / 0.5);
    --nc-panel-shadow: 0 40px 80px -40px oklch(5% 0.02 258 / 0.75);
    --nc-field: oklch(13% 0.02 258 / 0.72);
    --nc-field-edge: oklch(50% 0.025 250);
    --nc-field-edge-hover: oklch(64% 0.03 245);
    /* Brushed silver: the headline's metal, used once more on the primary button. */
    --nc-accent: oklch(91% 0.012 245);
    --nc-accent-hover: oklch(96% 0.008 245);
    --nc-on-accent: oklch(18% 0.03 258);
    --nc-btn-top: oklch(98% 0.004 250);
    --nc-btn-bottom: oklch(86% 0.02 242);
    --nc-btn-top-hover: oklch(100% 0 0);
    --nc-btn-bottom-hover: oklch(90% 0.018 242);
    --nc-btn-hi: oklch(100% 0 0 / 0.75);
    --nc-btn-shadow: 0 1px 0 oklch(0% 0 0 / 0.35), 0 8px 22px -14px oklch(80% 0.06 232 / 0.32);
    --nc-link: oklch(84% 0.07 232);
    --nc-ring: color-mix(in oklch, var(--nc-link) 26%, transparent);
    --nc-line: oklch(100% 0 0 / 0.08);
    --nc-head-top: oklch(99% 0.004 250);
    --nc-head-bottom: oklch(82% 0.035 240);
    --nc-glow-core: oklch(74% 0.09 228 / 0.36);
    --nc-glow-halo: oklch(52% 0.09 246 / 0.28);
    --nc-sub: oklch(86% 0.025 240);
    --nc-horizon: oklch(85% 0.065 232 / 0.6);
    --nc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aab8cb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --nc-font-quote: ui-serif, "New York", "Iowan Old Style", Charter, "Palatino Linotype", Georgia, serif;

    /* Fluid knobs and colour roles, so every page and component follows. */
    --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, "Helvetica Neue", system-ui, Arial, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, "Helvetica Neue", system-ui, Arial, sans-serif;
    --weight-display: 620;
    --accent: var(--nc-accent);
    --accent-ink: var(--nc-link);
    --on-accent: var(--nc-on-accent);
    --accent-hover: var(--nc-accent-hover);
    --accent-fill: var(--nc-accent);
    --accent-fill-hover: var(--nc-accent-hover);
    --accent-subtle: color-mix(in oklch, var(--nc-link) 14%, var(--nc-bg));
    --neutral-tint: oklch(50% 0.02 255);
    --color-background: var(--nc-bg);
    --color-surface: var(--nc-surface);
    --color-surface-raised: var(--nc-surface);
    --color-text: var(--nc-text);
    --color-text-muted: var(--nc-text-2);
    --color-text-subtle: var(--nc-text-3);
    --color-border: var(--nc-field-edge);
    --color-border-subtle: var(--nc-line);
    --color-focus: var(--nc-link);
    --color-selection: color-mix(in oklch, var(--nc-link) 30%, var(--nc-bg));
    --shadow-color: oklch(5% 0.02 258);
    --radius-card: 14px;
    --radius-control: 10px;
    --radius-pill: 9999px;
    --border-width: 1px;
    --shadow-style: 1;
    --space-section: 4rem;
    --space-gutter: 2rem;
    --container-content: 62rem;
    --motion-base: 320ms;
  }

  /* ---------- Light mode: the OS, or <html data-theme="light"> ---------- */
  :root[data-theme="light"] {
    --nc-bg: oklch(94.5% 0.012 252);
    --nc-bg-deep: oklch(92% 0.014 252);
    --nc-surface: oklch(97.6% 0.006 250);
    --nc-text: oklch(21% 0.03 258);
    --nc-text-2: oklch(44% 0.03 255);
    --nc-text-3: oklch(50% 0.025 255);
    --nc-panel: oklch(100% 0 0 / 0.6);
    --nc-panel-sheen: oklch(100% 0 0 / 0.55);
    --nc-panel-edge: oklch(30% 0.04 256 / 0.12);
    --nc-panel-hi: oklch(100% 0 0 / 0.9);
    --nc-panel-glint: oklch(55% 0.1 245 / 0.3);
    --nc-panel-shadow: 0 1px 2px oklch(30% 0.04 256 / 0.05), 0 32px 64px -44px oklch(30% 0.05 256 / 0.24);
    --nc-field: oklch(100% 0 0 / 0.92);
    --nc-field-edge: oklch(62% 0.02 252);
    --nc-field-edge-hover: oklch(50% 0.03 252);
    /* Ink: the headline's colour, used once more on the primary button. */
    --nc-accent: oklch(26% 0.04 258);
    --nc-accent-hover: oklch(32% 0.05 256);
    --nc-on-accent: oklch(98.5% 0.004 250);
    --nc-btn-top: oklch(31% 0.045 256);
    --nc-btn-bottom: oklch(23% 0.035 259);
    --nc-btn-top-hover: oklch(37% 0.055 254);
    --nc-btn-bottom-hover: oklch(28% 0.045 257);
    --nc-btn-hi: oklch(100% 0 0 / 0.14);
    --nc-btn-shadow: 0 1px 2px oklch(25% 0.04 258 / 0.2), 0 8px 18px -12px oklch(25% 0.05 258 / 0.42);
    --nc-link: oklch(45% 0.11 248);
    --nc-ring: color-mix(in oklch, var(--nc-link) 20%, transparent);
    --nc-line: oklch(30% 0.04 256 / 0.1);
    --nc-head-top: oklch(17% 0.03 260);
    --nc-head-bottom: oklch(36% 0.06 250);
    --nc-glow-core: oklch(100% 0 0 / 0.95);
    --nc-glow-halo: oklch(99.5% 0.003 250 / 0.75);
    --nc-sub: oklch(42% 0.03 255);
    --nc-horizon: oklch(45% 0.11 248 / 0.45);
    --nc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23515d70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --shadow-color: oklch(30% 0.04 256);
    --accent-subtle: color-mix(in oklch, var(--nc-link) 12%, var(--nc-bg));
    --color-selection: color-mix(in oklch, var(--nc-link) 22%, var(--nc-bg));
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --nc-bg: oklch(94.5% 0.012 252);
      --nc-bg-deep: oklch(92% 0.014 252);
      --nc-surface: oklch(97.6% 0.006 250);
      --nc-text: oklch(21% 0.03 258);
      --nc-text-2: oklch(44% 0.03 255);
      --nc-text-3: oklch(50% 0.025 255);
      --nc-panel: oklch(100% 0 0 / 0.6);
      --nc-panel-sheen: oklch(100% 0 0 / 0.55);
      --nc-panel-edge: oklch(30% 0.04 256 / 0.12);
      --nc-panel-hi: oklch(100% 0 0 / 0.9);
      --nc-panel-glint: oklch(55% 0.1 245 / 0.3);
      --nc-panel-shadow: 0 1px 2px oklch(30% 0.04 256 / 0.05), 0 32px 64px -44px oklch(30% 0.05 256 / 0.24);
      --nc-field: oklch(100% 0 0 / 0.92);
      --nc-field-edge: oklch(62% 0.02 252);
      --nc-field-edge-hover: oklch(50% 0.03 252);
      /* Ink: the headline's colour, used once more on the primary button. */
      --nc-accent: oklch(26% 0.04 258);
      --nc-accent-hover: oklch(32% 0.05 256);
      --nc-on-accent: oklch(98.5% 0.004 250);
      --nc-btn-top: oklch(31% 0.045 256);
      --nc-btn-bottom: oklch(23% 0.035 259);
      --nc-btn-top-hover: oklch(37% 0.055 254);
      --nc-btn-bottom-hover: oklch(28% 0.045 257);
      --nc-btn-hi: oklch(100% 0 0 / 0.14);
      --nc-btn-shadow: 0 1px 2px oklch(25% 0.04 258 / 0.2), 0 8px 18px -12px oklch(25% 0.05 258 / 0.42);
      --nc-link: oklch(45% 0.11 248);
      --nc-ring: color-mix(in oklch, var(--nc-link) 20%, transparent);
      --nc-line: oklch(30% 0.04 256 / 0.1);
      --nc-head-top: oklch(17% 0.03 260);
      --nc-head-bottom: oklch(36% 0.06 250);
      --nc-glow-core: oklch(100% 0 0 / 0.95);
      --nc-glow-halo: oklch(99.5% 0.003 250 / 0.75);
      --nc-sub: oklch(42% 0.03 255);
      --nc-horizon: oklch(45% 0.11 248 / 0.45);
      --nc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23515d70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      --shadow-color: oklch(30% 0.04 256);
      --accent-subtle: color-mix(in oklch, var(--nc-link) 12%, var(--nc-bg));
      --color-selection: color-mix(in oklch, var(--nc-link) 22%, var(--nc-bg));
    }
  }

  /* ---------- Page ---------- */
  html { background-color: var(--nc-bg-deep); }
  body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--nc-bg) 0, var(--nc-bg) 28rem, var(--nc-bg-deep) 100%);
    font-feature-settings: "kern", "calt";
  }
  body > main { flex: 1 0 auto; }
  .section[data-bg="alt"] { background: transparent; }

  /* Display tracking tightens with size. */
  h1, .display { letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; }
  h2 { font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; text-wrap: balance; }
  h3 { letter-spacing: -0.015em; }

  /* ---------- Hero: the one bold place ---------- */
  /* Let the glow fall below the hero without widening the page. */
  @supports (overflow: clip) {
    .hero { overflow: visible; overflow-x: clip; }
  }
  .hero:not([data-theme], [data-overlay]) { background: transparent; }
  /* The glow: two radial layers with eased falloff (no visible rim), centred on the headline. */
  .hero:not([data-theme], [data-overlay]) .hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: 46%;
    inset-inline-start: 50%;
    inline-size: min(86rem, 230vw);
    block-size: clamp(28rem, 22rem + 22vw, 50rem);
    translate: -50% -50%;
    background:
      radial-gradient(closest-side,
        var(--nc-glow-core) 0%,
        color-mix(in oklab, var(--nc-glow-core) 62%, transparent) 28%,
        color-mix(in oklab, var(--nc-glow-core) 28%, transparent) 55%,
        color-mix(in oklab, var(--nc-glow-core) 8%, transparent) 80%,
        transparent 100%) center / 58% 50% no-repeat,
      radial-gradient(closest-side,
        var(--nc-glow-halo) 0%,
        color-mix(in oklab, var(--nc-glow-halo) 60%, transparent) 30%,
        color-mix(in oklab, var(--nc-glow-halo) 26%, transparent) 58%,
        color-mix(in oklab, var(--nc-glow-halo) 7%, transparent) 82%,
        transparent 100%) center / 100% 100% no-repeat;
    pointer-events: none;
  }
  /* The headline in the metal: a vertical gradient clipped to the text. */
  .hero:not([data-theme], [data-overlay]) .hero__headline {
    letter-spacing: -0.035em;
    line-height: 1;
    padding-block: 0.04em 0.1em;
    color: var(--nc-head-top);
    background: linear-gradient(180deg, var(--nc-head-top) 30%, var(--nc-head-bottom) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @media (min-width: 48rem) {
    .hero .hero__headline { letter-spacing: -0.04em; }
  }
  .hero__subheadline {
    font-family: var(--nc-font-quote);
    font-style: italic;
    letter-spacing: 0.002em;
    color: var(--nc-sub);
  }
  /* A hairline horizon under the glow. */
  .hero:not([data-theme], [data-overlay])::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    margin-inline: auto;
    inline-size: min(100% - 2rem, 56rem);
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--nc-horizon) 50%, transparent);
    pointer-events: none;
  }

  /* ---------- Cards: translucent panels ---------- */
  .card {
    background: linear-gradient(180deg, var(--nc-panel-sheen), transparent 10rem), var(--nc-panel);
    border: 1px solid var(--nc-panel-edge);
    border-radius: var(--radius-card);
    box-shadow: inset 0 1px 0 var(--nc-panel-hi), var(--nc-panel-shadow);
  }
  /* Light catching the top edge of each panel. */
  .card::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 12%;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--nc-panel-glint) 50%, transparent);
    pointer-events: none;
  }

  /* ---------- Fields ---------- */
  label {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.003em;
    color: var(--nc-text);
  }
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), textarea, select) {
    background-color: var(--nc-field);
    border: 1px solid var(--nc-field-edge);
    border-radius: var(--radius-control);
    color: var(--nc-text);
    box-shadow: none;
    padding: 0.75rem 0.9375rem;
    font-size: 1rem;
    transition: border-color var(--duration-fast) var(--ease-fluid), box-shadow var(--duration-fast) var(--ease-fluid);
  }
  /* One height for every one-line control and every button, so a field and its button line up. */
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select) {
    block-size: 3.25rem;
    padding-block: 0;
  }
  textarea { min-block-size: 9rem; line-height: 1.55; resize: vertical; }
  select:not([multiple], [size]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--nc-chevron);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    padding-inline-end: 2.75rem;
    cursor: pointer;
  }
  select option { background-color: var(--nc-surface); color: var(--nc-text); }
  :is(input, textarea)::placeholder { color: var(--nc-text-3); }
  :is(input, textarea, select):hover { border-color: var(--nc-field-edge-hover); }
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), textarea, select):focus {
    border-color: var(--nc-link);
    background-color: var(--nc-field);
    box-shadow: 0 0 0 1px var(--nc-link), 0 0 0 5px var(--nc-ring);
    outline: 2px solid transparent;
  }
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nc-text);
    caret-color: var(--nc-text);
    box-shadow: 0 0 0 100px var(--nc-surface) inset;
  }
  :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--color-error); }
  :is(input, textarea, select)[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 1px var(--color-error), 0 0 0 5px color-mix(in oklch, var(--color-error) 22%, transparent);
  }
  .form-error { color: var(--color-error); font-size: 0.875rem; line-height: 1.5; }
  .form-help { font-size: 0.8125rem; color: var(--nc-text-2); font-weight: 400; }
  label .form-help { font-size: inherit; color: var(--nc-text-3); }

  /* ---------- Buttons ---------- */
  :is(button, .button) {
    border-radius: var(--radius-control);
    --_btn-min-height: 3.25rem;
    --_btn-padding-inline: 1.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
    box-shadow: none;
    transition: background-color var(--duration-fast) var(--ease-fluid), box-shadow var(--duration-fast) var(--ease-fluid);
  }
  /* The primary button in the headline's metal: a short vertical gradient and a lit top edge. */
  :is(button, .button):not([data-variant]) {
    background-image: linear-gradient(180deg, var(--nc-btn-top), var(--nc-btn-bottom));
    box-shadow: inset 0 1px 0 var(--nc-btn-hi), var(--nc-btn-shadow);
  }
  :is(button, .button):not([data-variant]):hover:not(:disabled) {
    background-image: linear-gradient(180deg, var(--nc-btn-top-hover), var(--nc-btn-bottom-hover));
  }
  :is(button, .button):focus-visible { outline: 2px solid var(--nc-link); outline-offset: 3px; }
  :is(button, .button)[data-variant="outline"] {
    --_btn-color: var(--nc-text);
    --_btn-color-hover: var(--nc-text);
    --_btn-bg: transparent;
    --_btn-bg-hover: color-mix(in oklch, var(--nc-link) 12%, transparent);
    --_btn-border: var(--nc-field-edge);
  }
  :is(button, .button)[data-variant="outline"]:hover:not(:disabled) { --_btn-border: var(--nc-field-edge-hover); }

  /* ---------- Tables, footer, small things ---------- */
  table { font-size: 0.9375rem; }
  th, td { border-block-end-color: var(--nc-line); }
  th { background: transparent; color: var(--nc-text-2); font-weight: 500; }

  .site-footer {
    --_footer-bg: transparent;
    --_footer-text: var(--nc-text-2);
    --_footer-border: var(--nc-line);
    background: transparent;
    border-block-start: 1px solid var(--nc-line);
  }
  .site-footer__copyright { font-size: 0.875rem; letter-spacing: -0.01em; }
  .site-footer__copyright a { color: inherit; font-weight: 500; }
  .site-footer__links { font-size: 0.875rem; }
  .site-footer a:hover { color: var(--nc-text); }

  .skip-link { background: var(--nc-accent); color: var(--nc-on-accent); box-shadow: none; }
  .skip-link:focus { box-shadow: 0 0 0 2px var(--nc-bg), 0 0 0 4px var(--nc-link); }
  ::selection { background: var(--color-selection); color: var(--nc-text); }

  /* ---------- Motion and access ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .hero:not([data-theme], [data-overlay]) .hero__content::before { animation: nc-breathe 16s ease-in-out infinite alternate; }
  }
  @keyframes nc-breathe {
    from { opacity: 0.88; scale: 1; }
    to { opacity: 1; scale: 1.05; }
  }
  @media (prefers-contrast: more) {
    :root:root:root {   /* outranks the light-mode rules above */
      --nc-text-2: var(--nc-text);
      --nc-text-3: var(--nc-text);
      --nc-sub: var(--nc-text);
      --nc-field-edge: var(--nc-text-2);
      --nc-panel-edge: var(--nc-field-edge);
    }
  }
  @media (forced-colors: active) {
    .hero .hero__headline { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
    :is(button, .button):not([data-variant]) { background-image: none; }
    .hero .hero__content::before, .hero::after, .card::before { display: none; }
  }
}