/* Recognitium — the shared chrome of the redesign preview.
   Fonts, brand tokens, the sky, the bar, the phone sheet, the skip link,
   kickers, buttons, layout helpers and the footer. Loaded by the home page
   and by every sub-page after scrollcraft.css. Edit here, never per page. */

  /* -------------------------------------------------------- shared pieces -- */
  .kicker {
    font-family: var(--sc-font-text); font-weight: 500;
    font-size: 0.68rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--sc-ink-soft);
  }
  /* Buttons: one primary language. Every primary is the page's orange, as
     the nav pill is; ghosts stay white on black; the arrow rides along. */
  .btn-primary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.8em;
    font-family: var(--sc-font-text); font-weight: 500;
    font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; text-decoration: none;
    padding: 1em 2em; border-radius: var(--sc-r-sm);
    transition: background 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out),
                color 200ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
  }
  .btn-primary { color: #050505; background: var(--sc-accent); box-shadow: 0 0 24px rgba(229, 84, 21, 0.18); }
  .btn-primary:hover { background: #ff6a2b; translate: 0 -1px; box-shadow: 0 12px 30px -12px rgba(229, 84, 21, 0.75); }
  .btn-primary:active { transform: scale(0.97); }
  .btn-ghost {
    color: rgba(237, 242, 248, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.2);
  }
  .btn-ghost:hover { border-color: rgba(229, 84, 21, 0.5); background: rgba(255, 255, 255, 0.06); color: var(--sc-ink); }
  .btn-ghost:active { transform: translateY(1px); }
  .arr { width: 14px; height: 14px; flex: 0 0 auto; transition: translate 200ms var(--sc-ease-out); }
  .btn-primary:hover .arr, .btn-ghost:hover .arr { translate: 3px 0; }
  .btn-ghost .arr { color: rgba(237, 242, 248, 0.5); }
  .beat-foot a { display: inline-flex; align-items: center; gap: 0.45em; }
  .beat-foot a .arr { width: 12px; height: 12px; }
  .beat-foot a:hover .arr { translate: 3px 0; }
  .section-pad { padding-block: calc(var(--sc-section) * 0.5) calc(var(--sc-section) * 0.72); }
  .gutter { padding-inline: var(--sc-gutter); }
  section[id] { scroll-margin-top: 5.5rem; }

  .foot {
    padding: var(--sc-6) 0 0;
    border-top: 1px solid var(--sc-hairline);
    display: grid; gap: var(--sc-6);
    font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  }
  .foot__grid {
    display: grid; grid-template-columns: minmax(16rem, 1fr) repeat(2, minmax(9rem, 12rem));
    gap: var(--sc-6) var(--sc-8); justify-content: space-between;
  }
  .foot__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
  .foot__brand img { width: 28px; height: 28px; object-fit: contain; mix-blend-mode: screen; border-radius: 50%; opacity: 0.94; }
  .foot__brand span {
    font-family: var(--sc-font-text); font-weight: 400; font-size: 13px;
    letter-spacing: 0.36em; text-transform: uppercase; color: var(--sc-ink);
  }
  .foot__id p { margin: var(--sc-4) 0 0; max-width: 30ch; font-weight: 300; line-height: 1.65; color: var(--sc-ink-soft); }
  .foot__col { display: grid; gap: var(--sc-2); align-content: start; }
  .foot__col b {
    font-family: var(--sc-font-mono); font-weight: 400; font-size: 0.6rem;
    letter-spacing: 0.22em; text-transform: uppercase; color: rgba(237, 242, 248, 0.45);
    margin-bottom: var(--sc-2);
  }
  .foot__col a {
    color: var(--sc-ink-soft); text-decoration: none; font-weight: 300; width: fit-content;
    transition: color 300ms var(--sc-ease-out);
  }
  .foot__col a:hover, .foot__col a:focus-visible { color: var(--sc-ink); outline: none; }
  .foot__row {
    display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap;
    border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4);
    font-family: var(--sc-font-mono); font-weight: 400; font-size: 0.62rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237, 242, 248, 0.45);
  }
  @media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__id { grid-column: 1 / -1; } }
  @media (max-width: 560px) {
    .foot__grid { grid-template-columns: 1fr; gap: var(--sc-5); }
    .foot__col { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-2) var(--sc-4); }
    .foot__col b { flex-basis: 100%; margin-bottom: 0; }
  }
  /* ------------------------------------------------------------ the type -- */
  @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('assets/fonts/fraunces-latin-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('assets/fonts/fraunces-latin-italic.woff2') format('woff2'); }
  @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/space-grotesk-latin-300-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

  /* ------------------------------------------------------------ the brand -- */
  :root {
    --sc-canvas:      #04070d;
    --sc-surface:     #0a101b;
    --sc-ink:         #edf2f8;
    --sc-ink-soft:    #93a0b4;
    --sc-accent:      #e55415;   /* the original brand accent, verbatim     */
    --sc-accent-ink:  #050505;
    --accent-hi:      #ff7842;   /* the original's bright variant           */
    --sc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --sc-font-text:    "Space Grotesk", "Avenir Next", system-ui, sans-serif;
    --sc-font-mono:    "JetBrains Mono", ui-monospace, monospace;   /* the original's label face */
    --sc-shadow-color: 217 45% 3%;
    --ok: #57c98a;
    --bad: #f87171;
  }
  .sc-display { font-weight: 300; letter-spacing: -0.015em; line-height: 1.02; }
  .sc-display em { font-style: italic; font-weight: 400; color: var(--sc-ink); }
  .sc-body { font-weight: 300; letter-spacing: 0.005em; line-height: 1.68; }
  .sc-lede { font-weight: 300; }

  /* z-index MUST stay negative: at 0 a positioned layer paints above all
     static content and veils every flow section's text. */
  .ambient {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(95% 65% at 50% 112%, rgba(38, 78, 148, 0.34), transparent 64%),
      url("assets/stars.webp") center / cover no-repeat;
    opacity: 0.6;
  }

  /* ---------------------------------------------- the chrome, per original --
     Structure, sizes and the hairline accent border are copied from
     Navbar.tsx verbatim; only the typeface and the ground color family
     stay this redesign's own. */
  .site-bar {
    position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
    height: 76px;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sc-5);
    padding-inline: var(--sc-gutter);
    background: rgba(2, 4, 9, 0.92);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    transition: background 400ms var(--sc-ease-out);
  }
  /* Near-black on the page's near-black ground; a shade deeper once the
     reader has left the top. */
  body.is-scrolled .site-bar { background: rgba(2, 4, 9, 0.97); }
  .site-bar::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(229,84,21,0.14) 25%,
      rgba(255,120,66,0.4) 50%, rgba(229,84,21,0.14) 75%, transparent 95%);
  }
  .site-bar__brand {
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; flex-shrink: 0;
  }
  /* The mark is light on black: screen-blended, its square vanishes into the bar. */
  .site-bar__brand img { width: 44px; height: 44px; object-fit: contain; opacity: 0.94; mix-blend-mode: screen; border-radius: 50%; transition: opacity 500ms var(--sc-ease-out); }
  .site-bar__brand:hover img { opacity: 1; }
  .site-bar__brand span {
    font-family: var(--sc-font-text); font-weight: 400;
    font-size: 15px; letter-spacing: 0.36em; text-transform: uppercase;
    color: var(--sc-ink); white-space: nowrap;
    -moz-osx-font-smoothing: grayscale; font-synthesis: none;
  }
  .site-bar__links { display: flex; align-items: center; gap: 3rem; margin-inline: auto; }
  @media (max-width: 1000px) { .site-bar__links { gap: 2rem; } }
  .site-bar__links > a {
    font-family: var(--sc-font-text);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    text-decoration: none; color: rgba(237, 242, 248, 0.6);
    transition: color 400ms var(--sc-ease-out);
  }
  .site-bar__links > a:hover, .site-bar__links > a:focus-visible { color: var(--sc-ink); outline: none; }
  .site-bar__cta {
    font-family: var(--sc-font-text); font-weight: 500;
    font-size: 12px; letter-spacing: 0.2em;
    text-transform: uppercase; text-decoration: none;
    color: #050505; background: var(--sc-accent); white-space: nowrap;
    padding: 0.6rem 1.3rem; border-radius: var(--sc-r-pill);
    box-shadow: 0 0 24px rgba(229, 84, 21, 0.25);
    transition: background 300ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
  }
  .site-bar__cta:hover { background: #ff6a2b; }
  .site-bar__cta:active { transform: translateY(1px); }
  .burger { display: none; }
  @media (max-width: 820px) {
    .site-bar__links { display: none; }
    .burger { display: block; position: relative; }
    .burger > summary {
      list-style: none; cursor: pointer;
      display: grid; place-items: center; gap: 5px;
      width: 40px; height: 40px; border-radius: var(--sc-r-sm);
    }
    .burger > summary:hover { background: rgba(255, 255, 255, 0.04); }
    .burger > summary::-webkit-details-marker { display: none; }
    /* Three equal lines: the universal sign, nothing clever. */
    .burger > summary i {
      display: block; width: 20px; height: 1.5px; border-radius: 1px;
      background: rgba(237, 242, 248, 0.9);
      transition: opacity 200ms var(--sc-ease-out);
    }
    .burger[open] > summary i:nth-child(2) { opacity: 0.35; }
    .burger__panel {
      position: fixed; left: 0; right: 0; top: 76px;
      max-height: calc(100vh - 76px); overflow-y: auto;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(2, 4, 9, 0.95);
      -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
      display: grid; padding: var(--sc-6) var(--sc-gutter);
    }
    .burger__panel a {
      text-decoration: none; color: var(--sc-ink);
      font-size: var(--sc-t-sm); font-weight: 400;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: var(--sc-3) var(--sc-2); border-radius: var(--sc-r-sm);
    }
    .burger__panel a:hover { background: rgba(255, 255, 255, 0.04); }
  }
  .burger:not([open]) .burger__panel { display: none; }
  .burger__panel .burger__cta {
    color: #050505; font-weight: 500; background: var(--sc-accent);
    border-radius: var(--sc-r-pill); text-align: center; margin-bottom: var(--sc-3);
  }
  @media (max-width: 600px) { .site-bar > .site-bar__cta { display: none; } }
  .skip {
    position: absolute; left: -9999px; z-index: 200;
    background: var(--sc-accent); color: var(--sc-accent-ink);
    padding: var(--sc-2) var(--sc-4); border-radius: var(--sc-r-sm);
  }
  .skip:focus-visible { left: var(--sc-4); top: var(--sc-4); position: fixed; }

  .sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }

/* Native scroll everywhere, as on the home page: no animated jumps on load or anchors. */
html { scroll-behavior: auto; }

/* Phones: the specimen's labels stay legible; no label under 10.5px. */
@media (max-width: 480px) {
  .specimen .field__label, .specimen .module__head, .specimen .frow, .specimen .specimen__bar, .specimen .dotline, .specimen .witness-note { font-size: 0.66rem !important; }
  .hero-evidence, .hero-readout { font-size: 0.7rem; }
}
@media (max-width: 480px) { .specimen .arrowline, .specimen .chip, .specimen .receipt-id, .specimen .receipt-id span { font-size: 0.66rem !important; } }