/* ==========================================================================
   CRIMELINK — "EVIDENCE ROOM" concept
   core.css — tokens, reset, type, layout primitives, masthead, link line, footer

   Production homepage styles for apps/web.
   ========================================================================== */

/* --- Self-hosted brand fonts -------------------------------------------- */
/* Both files are copied unmodified from apps/mobile/assets/fonts/ so the site
   and the game finally share type. No external font requests anywhere. */

@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Special Elite";
  src: url("../assets/fonts/SpecialElite-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Cold room */
  --void: #08090a;
  --room: #0e1112;
  --room-hi: #161a1b;
  --rule: #232829;
  --rule-hi: #333a3b;

  /* Ink */
  --paper: #ece7da;
  --body: #c3c7c3;
  --steel: #98a19e; /* 7.3:1 on --void */
  --slate: #7a8683; /* 5.3:1 on --void */

  /* Hot points — brand-true, from apps/mobile/src/theme/colors.ts */
  --red: #e63946;      /* crimeRed — display type and rules only */
  --red-deep: #ce2c39; /* button fill: 5.2:1 against white label text */
  --red-lite: #ff5f6b; /* small red text on panels: clears AA at 12px */
  --amber: #d4af37;    /* accentGold — 9.3:1 on --void */

  /* Thermal signal ramp: cold slate -> teal -> amber -> ember -> hot */
  --sig-1: #3f5a63;
  --sig-2: #4e8c8a;
  --sig-3: #c9a34a;
  --sig-4: #e8802f;
  --sig-5: #ff4d3d;

  /* Type */
  --display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --record: "Special Elite", "Courier New", monospace;
  --data: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
  --read: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-body: clamp(15px, 0.28vw + 14.2px, 17px);
  --fs-lede: clamp(17px, 0.5vw + 15.5px, 21px);
  --fs-data: 12px;

  /* Space */
  --gutter: clamp(20px, 4.2vw, 74px);
  /* Cap the measure. Without this the layout — and every screenshot in it —
     keeps growing with the viewport, and phone captures end up rendered far
     above phone scale on a wide monitor. */
  --content-max: 1500px;
  --side: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --act-y: clamp(70px, 6.6vw, 116px);
  --rail: 162px; /* left link-line rail width on desktop */
  --masthead: 74px;

  /* A 720x1480 device capture reads at roughly 390 CSS px on a real phone.
     Cropped captures get a little more room than that so labels stay legible,
     but never enough to look blown up on a wide monitor. */
  --capture-max: 440px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1080px) {
  :root { --rail: 0px; }
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgb(230 57 70 / 22%);
}

/* Anchor targets must clear the sticky masthead */
main section[id],
main span[id] { scroll-margin-top: calc(var(--masthead) + 18px); }

body {
  margin: 0;
  background: var(--void);
  color: var(--body);
  font: 400 var(--fs-body)/1.7 var(--read);
  overflow-x: hidden;
  overflow-x: clip; /* clip does not create a scroll container, so horizontal
                       scrollWidth stays honest where it is supported */
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; }
a, button, input, select, textarea { touch-action: manipulation; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; } /* UA default is `margin: 1em 40px` — it silently narrows grid items */
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

::selection { background: var(--red); color: #fff; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Type primitives ----------------------------------------------------- */

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: 0.005em;
  color: var(--paper);
  text-transform: uppercase;
}

.display--xl { font-size: clamp(50px, 6.6vw, 104px); line-height: 0.84; }
.display--lg { font-size: clamp(38px, 4.6vw, 72px); }
.display--md { font-size: clamp(28px, 2.9vw, 42px); }
.display--sm { font-size: clamp(22px, 1.9vw, 28px); line-height: 0.95; }

.display .hot { color: var(--red); }
.display .warm { color: var(--amber); }
.display .dim { color: var(--slate); }

/* Machine-register labels */
.label {
  margin: 0;
  font: 400 var(--fs-data)/1.5 var(--data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.label--steel { color: var(--steel); }
.label--amber { color: var(--amber); }
.label--red { color: var(--red-lite); }

/* File-record register — used ONLY for file numbers, exhibit tags and stamps.
   Never body copy, never rotated, never distressed. */
.record {
  margin: 0;
  font: 400 13px/1.5 var(--record);
  letter-spacing: 0.05em;
  color: var(--steel);
}

.lede {
  max-width: 56ch;
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--body);
}

.prose { max-width: 62ch; }
.prose strong { color: var(--paper); font-weight: 600; }

.mono-note {
  font: 400 var(--fs-data)/1.75 var(--data);
  letter-spacing: 0.04em;
  color: var(--slate);
}

/* --- Layout primitives --------------------------------------------------- */

.act {
  position: relative;
  padding: var(--act-y) var(--side) var(--act-y) calc(var(--side) + var(--rail));
  border-top: 1px solid var(--rule);
}

.act--flush { padding-left: var(--side); }
.act--tight { padding-block: clamp(60px, 6vw, 104px); }

.act-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 76px);
}

.act-head__file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.act-head__file::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--red);
}

.act-head p.lede { margin: 0; font-size: var(--fs-body); color: var(--steel); }

@media (max-width: 900px) {
  .act-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
}

/* Evidence tag: the caption under every real capture */
.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font: 400 12px/1.5 var(--record);
  letter-spacing: 0.04em;
  color: var(--slate);
}

.tag b {
  font-weight: 400;
  color: var(--amber);
}

/* --- Grain + vignette ---------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgb(0 0 0 / 62%) 118%);
}

/* --- Skip link ----------------------------------------------------------- */

.skip {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 13px 18px;
  background: var(--paper);
  color: var(--void);
  font: 400 13px var(--data);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-180%);
  transition: transform 0.18s var(--ease);
}

.skip:focus { transform: translateY(0); }

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  position: sticky;
  z-index: 80;
  top: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
  height: var(--masthead);
  padding: 0 var(--side);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter: blur(9px);
}

.masthead__brand {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.masthead__brand img {
  width: clamp(112px, 11vw, 146px);
  filter: drop-shadow(0 2px 0 rgb(0 0 0 / 60%));
}

.masthead__nav {
  display: flex;
  gap: clamp(4px, 1.4vw, 20px);
  margin-left: auto;
}

.masthead__nav a {
  position: relative;
  padding: 10px 8px;
  font: 400 var(--fs-data)/1 var(--data);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--steel);
  transition: color 0.18s var(--ease);
}

.masthead__nav a::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 2px;
  left: 8px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}

.masthead__nav a:hover,
.masthead__nav a:focus-visible,
.masthead__nav a[aria-current="true"] { color: var(--paper); }

.masthead__nav a:hover::after,
.masthead__nav a:focus-visible::after,
.masthead__nav a[aria-current="true"]::after { transform: scaleX(1); }

.masthead__social {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

.masthead__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  color: var(--steel);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}

.masthead__social a:first-child { color: #b8bcff; }
.masthead__social svg { width: 17px; height: 17px; fill: currentColor; }
.masthead__social a:hover,
.masthead__social a:focus-visible {
  border-color: var(--rule-hi);
  background: var(--room-hi);
  color: var(--paper);
}

.masthead__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rule-hi);
  background: transparent;
  color: var(--paper);
  font: 400 var(--fs-data)/1 var(--data);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.masthead__cta:hover,
.masthead__cta:focus-visible {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.masthead__menu {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid var(--rule-hi);
  background: transparent;
  cursor: pointer;
  font: 400 var(--fs-data)/1 var(--data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}

.masthead__menu i {
  display: block;
  width: 15px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 1280px) {
  .masthead__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px var(--side) 20px;
    border-bottom: 1px solid var(--rule);
    background: var(--void);
  }
  .js .masthead__nav { display: none; }
  .js .masthead__nav.is-open { display: flex; }
  .masthead__nav a { padding: 15px 0; border-bottom: 1px solid var(--rule); }
  .masthead__nav a::after { display: none; }
  .masthead__menu { display: inline-flex; }
  .masthead__cta { display: none; }
}

@media (max-width: 560px) {
  .masthead { gap: 8px; }
  .masthead__social a { width: 36px; height: 44px; }
  .masthead__social a:nth-child(3) { display: none; }
}

/* --- The link line ------------------------------------------------------- */
/* One hairline down the left margin with a node at every act. The same visual
   language the Signal Map uses for its arcs, at page scale. */

.linkline {
  position: fixed;
  z-index: 60;
  top: calc(var(--masthead) + 34px);
  left: var(--side);
  width: calc(var(--rail) - 24px);
  pointer-events: none;
}

.linkline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 3px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rule) 12%, var(--rule) 88%, transparent);
}

.linkline ol { display: grid; gap: 7px; }

.linkline a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  pointer-events: auto;
  font: 400 12px/1 var(--data);
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--slate);
  transition: color 0.2s var(--ease);
}

.linkline a::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border: 1px solid var(--rule-hi);
  background: var(--void);
  transform: rotate(45deg);
  transition: background 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.linkline a:hover,
.linkline a:focus-visible { color: var(--paper); }

.linkline a[aria-current="true"] { color: var(--paper); }

.linkline a[aria-current="true"]::before {
  border-color: var(--red);
  background: var(--red);
  box-shadow: 0 0 0 3px rgb(230 57 70 / 18%);
}

.linkline span {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.3s var(--ease), opacity 0.3s var(--ease);
}

.linkline:hover span,
.linkline a:focus-visible span,
.linkline a[aria-current="true"] span { max-width: 104px; opacity: 1; }

@media (max-width: 1080px) { .linkline { display: none; } }
@media (max-width: 1240px) {
  .linkline:hover span,
  .linkline a:focus-visible span,
  .linkline a[aria-current="true"] span { max-width: 0; opacity: 0; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  background: var(--red-deep);
  color: #fff;
  cursor: pointer;
  font: 400 13px/1 var(--data);
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.16s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  background: var(--red);
  box-shadow: 0 0 0 1px rgb(230 57 70 / 45%), 0 10px 30px rgb(230 57 70 / 18%);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); }
.btn[hidden] { display: none; }

.btn[disabled] {
  background: var(--room-hi);
  border-color: var(--rule-hi);
  box-shadow: none;
  color: var(--slate);
  cursor: not-allowed;
  transform: none;
}

.btn--ghost {
  background: transparent;
  border-color: var(--rule-hi);
  color: var(--paper);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--paper);
  background: transparent;
  box-shadow: none;
  color: var(--paper);
}

.btn--quiet {
  min-height: 44px;
  padding: 0 16px;
  border-color: var(--rule);
  background: transparent;
  color: var(--steel);
  letter-spacing: 0.12em;
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
  border-color: var(--rule-hi);
  background: var(--room-hi);
  box-shadow: none;
  color: var(--paper);
}

/* --- Reveal -------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.44s var(--ease), transform 0.44s var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

/* --- Footer -------------------------------------------------------------- */

.site-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(48px, 5vw, 76px) var(--side);
  border-top: 1px solid var(--rule);
  background: var(--room);
}

.site-foot img { width: 132px; margin-bottom: 18px; opacity: 0.8; }

.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-content: start;
}

.site-foot__links a {
  padding: 6px 0;
  font: 400 var(--fs-data)/1 var(--data);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--steel);
  transition: color 0.18s var(--ease);
}

.site-foot__links a:hover,
.site-foot__links a:focus-visible { color: var(--paper); }

/* --- Small layout utilities used by the static document ------------------ */

.u-pad-14 { padding: 14px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-22 { margin-top: 22px; }
.u-mt-26 { margin-top: 26px; }
.u-mb-22 { margin-bottom: 22px; }

@media (max-width: 760px) {
  .site-foot { grid-template-columns: 1fr; }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .linkline span { max-width: 130px; opacity: 1; }
}