/* HNTR Systems site. Tokens and components from the HNTR / Mag View design system. */

/* Fonts: Barlow, Barlow Condensed, JetBrains Mono (SIL OFL, latin subset). */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("fonts/BarlowCondensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/BarlowCondensed-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/JetBrainsMono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/JetBrainsMono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("fonts/JetBrainsMono-700.woff2") format("woff2"); }

/* ===== Base palette ===== */
:root {
  --mv-black: #0B0C0C;
  --mv-carbon: #0E100F;
  --mv-graphite-900: #171A19;
  --mv-graphite-800: #1F2321;
  --mv-graphite-700: #2A2F2C;
  --mv-graphite-600: #3A403C;
  --mv-grey-500: #5C635E;
  --mv-grey-400: #7E857F;
  --mv-grey-300: #A3A8A2;
  --mv-grey-100: #E2E3DD;
  --mv-bone: #F3F2EC;
  --mv-fde: #B29A73;
  --mv-fde-dark: #7A5F3D;
  --mv-coyote: #8A6C47;
  --mv-red: #F0483E;
  --mv-red-deep: #B8231C;
  --mv-nv-red: #9E2A1E;
  --mv-nv-red-dim: #6E1D14;
  --mv-nv-red-faint: #4E150F;
  --mv-nv-red-hot: #C23020;
  --mv-nv-line: #2E0B07;

  --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ===== Semantic: dark (default) ===== */
:root {
  --bg-base: var(--mv-carbon);
  --bg-raised: var(--mv-graphite-900);
  --bg-raised-2: var(--mv-graphite-800);
  --bg-sunken: var(--mv-black);
  --bg-pressed: var(--mv-graphite-700);
  --line-subtle: #232826;
  --line-default: #333A36;
  --line-strong: #4C544F;
  --text-primary: var(--mv-grey-100);
  --text-secondary: var(--mv-grey-300);
  --text-tertiary: var(--mv-grey-400);
  --text-disabled: var(--mv-grey-500);
  --accent: var(--mv-fde);
  --accent-pressed: var(--mv-coyote);
  --on-accent: var(--mv-carbon);
  --signal: var(--mv-red);
  --focus-ring: var(--mv-fde);
  --brand-surface: var(--mv-fde);
  --on-brand-surface: var(--mv-carbon);
}

/* ===== Sun: carbon on bone ===== */
[data-theme="light"] {
  --bg-base: #E6E5DE;
  --bg-raised: var(--mv-bone);
  --bg-raised-2: #FAF9F5;
  --bg-sunken: #D8D7CF;
  --bg-pressed: #CFCEC6;
  --line-subtle: #CFCEC6;
  --line-default: #B4B4AB;
  --line-strong: var(--mv-grey-400);
  --text-primary: var(--mv-carbon);
  --text-secondary: var(--mv-graphite-600);
  --text-tertiary: var(--mv-grey-500);
  --text-disabled: var(--mv-grey-400);
  --accent: var(--mv-fde-dark);
  --accent-pressed: #5E4A30;
  --on-accent: var(--mv-bone);
  --signal: var(--mv-red-deep);
  --focus-ring: var(--mv-carbon);
}

/* ===== Night: red/amber only, NVG-safe ===== */
[data-theme="night"] {
  --bg-base: #000000;
  --bg-raised: #0A0302;
  --bg-raised-2: #110403;
  --bg-sunken: #000000;
  --bg-pressed: #1A0604;
  --line-subtle: #1A0604;
  --line-default: var(--mv-nv-line);
  --line-strong: #4A120C;
  --text-primary: var(--mv-nv-red);
  --text-secondary: var(--mv-nv-red-dim);
  --text-tertiary: var(--mv-nv-red-faint);
  --text-disabled: #3A100B;
  --accent: var(--mv-nv-red-dim);
  --accent-pressed: var(--mv-nv-red-faint);
  --on-accent: #000000;
  --signal: var(--mv-nv-red-hot);
  --focus-ring: var(--mv-nv-red);
  --brand-surface: #000000;
  --on-brand-surface: var(--mv-nv-red-dim);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-base);
  color: var(--text-primary);
  font: 400 16px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font: 600 14px/1 var(--font-condensed); letter-spacing: .16em; text-transform: uppercase; }
.label { font: 600 13px/1 var(--font-condensed); letter-spacing: .14em; color: var(--text-tertiary); text-transform: uppercase; }
.mono { font-family: var(--font-mono); }
svg { display: block; flex: none; }

/* 45° chamfer, top-left + bottom-right: the signature cut. */
.cut-6 { clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.cut-5 { clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.cut-8 { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.cut-10 { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* ===== Header ===== */
.site-header { border-bottom: 1px solid var(--line-subtle); }
.site-header .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav { display: flex; gap: 32px; font: 600 15px/1 var(--font-condensed); letter-spacing: .12em; text-transform: uppercase; }
.site-nav a { padding: 8px 0; color: var(--text-secondary); }
.site-nav a:hover { color: var(--text-primary); }

/* HNTR lockup: Rack mark + wordmark. */
.lockup { display: inline-flex; align-items: center; color: var(--text-primary); }

/* ===== Hero ===== */
.hero { background: var(--brand-surface); color: var(--on-brand-surface); }
.hero .wrap {
  padding-top: 112px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 48px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  margin: 0;
  font: 700 clamp(48px, 8vw, 104px)/0.92 var(--font-condensed);
  letter-spacing: .02em;
  text-transform: uppercase;
  max-width: 14ch;
  text-wrap: balance;
}
.hero p { margin: 0; max-width: 52ch; font: 500 19px/1.5 var(--font-body); text-wrap: pretty; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.btn-inverse {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 28px;
  background: var(--on-brand-surface);
  color: var(--brand-surface);
  font: 700 18px/1 var(--font-condensed);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.btn-inverse:active { opacity: .85; }
.hero-mark { display: flex; justify-content: center; padding: 48px; }

/* ===== Principles ===== */
.principles { border-top: 1px solid var(--line-subtle); border-bottom: 1px solid var(--line-subtle); background: var(--bg-sunken); }
.principles .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.principle { padding: 32px 24px 32px 0; display: flex; flex-direction: column; gap: 10px; }
.principle .n { font: 500 13px/1 var(--font-mono); color: var(--text-tertiary); }
.principle h3 { margin: 0; font: 600 20px/1.1 var(--font-condensed); letter-spacing: .1em; text-transform: uppercase; }
.principle p { margin: 0; font: 400 16px/1.5 var(--font-body); color: var(--text-secondary); max-width: 32ch; }

/* ===== Contact ===== */
.contact {
  max-width: 1120px;
  margin: 0 auto;
  padding: 112px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 64px;
  align-items: start;
}
.contact-intro { display: flex; flex-direction: column; gap: 24px; }
.contact-intro .eyebrow { color: var(--text-tertiary); }
.contact h2 { margin: 0; font: 700 56px/0.95 var(--font-condensed); text-transform: uppercase; letter-spacing: .02em; }
.contact-intro p { margin: 0; font: 400 18px/1.5 var(--font-body); color: var(--text-secondary); max-width: 40ch; }
.channels { display: flex; flex-direction: column; border-top: 1px solid var(--line-default); margin-top: 16px; }
.channel { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-default); }
.channel span:first-child { font: 600 14px/1.4 var(--font-condensed); letter-spacing: .12em; color: var(--text-tertiary); text-transform: uppercase; }
.channel a { font: 400 15px/1.4 var(--font-mono); text-align: right; }
.channel a:hover { color: var(--accent); }

/* Panel: chamfered (16px), 1px border drawn as two clip-path layers. */
.panel {
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  background: var(--line-default);
  padding: 1px;
}
.panel-inner {
  clip-path: polygon(calc(16px - 0.4px) 0, 100% 0, 100% calc(100% - 16px + 0.4px), calc(100% - 16px + 0.4px) 100%, 0 100%, 0 calc(16px - 0.4px));
  background: var(--bg-raised);
  padding: 32px;
}

form { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.field .optional { color: var(--text-disabled); }
.input-frame { padding: 1.5px; background: var(--line-strong); }
.input-frame.invalid { background: var(--signal); }
.input-frame input,
.input-frame textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  background: var(--bg-sunken);
  color: var(--text-primary);
  font: 400 17px/1 var(--font-body);
}
.input-frame input { height: 52px; padding: 0 14px; }
.input-frame textarea { padding: 14px; line-height: 1.5; resize: vertical; min-height: 160px; }
.input-frame input:focus,
.input-frame textarea:focus { background: var(--bg-base); }
.input-frame:focus-within { background: var(--focus-ring); }
.error { font: 500 14px/1.3 var(--font-body); color: var(--signal); }
.error:empty { display: none; }

/* Segmented control (Topic). */
.segmented { display: flex; gap: 1px; padding: 1px; background: var(--line-strong); }
.segmented button {
  flex: 1;
  min-height: 56px;
  border: 0;
  padding: 0 12px;
  cursor: pointer;
  background: var(--bg-raised);
  color: var(--text-secondary);
  font: 600 16px/1 var(--font-condensed);
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.segmented button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.segmented button:active { background: var(--bg-pressed); }
.segmented button[aria-checked="true"]:active { background: var(--accent-pressed); }
/* Four topics don't fit a phone-width row: wrap to 2×2. */
@media (max-width: 520px) {
  .segmented { display: grid; grid-template-columns: 1fr 1fr; }
}

.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.form-foot > span { font: 400 14px/1.4 var(--font-body); color: var(--text-tertiary); }

/* Buttons (Button.jsx): primary lg, secondary md. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-condensed);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { height: 64px; padding: 0 24px; font-size: 20px; background: var(--accent); color: var(--on-accent); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-secondary { height: 56px; padding: 0 20px; font-size: 17px; background: var(--line-strong); color: var(--text-primary); }
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(7.4px 0, 100% 0, 100% calc(100% - 7.4px), calc(100% - 7.4px) 100%, 0 100%, 0 7.4px);
  background: var(--bg-raised-2);
}
.btn-secondary:active::before { background: var(--bg-pressed); }
.btn-secondary > * { position: relative; }

.sent { display: flex; flex-direction: column; gap: 20px; padding: 24px 0; min-height: 420px; justify-content: center; }
.sent h3 { margin: 0; font: 700 32px/1 var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; }
.sent p { margin: 0; font: 400 17px/1.5 var(--font-body); color: var(--text-secondary); }
.sent .ref { font: 400 13px/1 var(--font-mono); color: var(--text-tertiary); }
[hidden] { display: none !important; }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--line-subtle); }
.site-footer .wrap { padding-top: 32px; padding-bottom: 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-footer .copy { font: 400 13px/1 var(--font-mono); color: var(--text-tertiary); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }