/* ============================================================
   Type Field — base.css
   Tokens, reset, header, hero specimen, weight/width pad
   ============================================================ */

:root {
  --paper: #FFFFFF;
  --paper-2: #F2F2EE;
  --ink: #0A0A0A;
  --ink-2: #3A3A38;
  --orange: #FF3D00;
  --mute: #8A8A86;
  --line: rgba(10, 10, 10, .22);
  --line-soft: rgba(10, 10, 10, .08);
  --font: 'Roboto Flex', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --head-h: 64px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22, .9, .28, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-variation-settings: 'wght' 420, 'opsz' 16;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--orange); color: var(--ink); }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: normal;
  letter-spacing: -.01em;
  line-height: 1.02;
  text-transform: uppercase;
}

.wrap { max-width: 1500px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; padding: 10px 16px;
  text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- kicker ---------- */
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem;
}
.kicker-dot { width: 9px; height: 9px; background: var(--orange); flex: none; }
.kicker.on-dark { color: rgba(255, 255, 255, .62); }

/* ---------- site header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  height: var(--head-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--gutter);
  background: #FFFFFF;
  border-bottom: 2px solid var(--ink);
}
.brand {
  font-family: var(--display);
  font-size: 17px; letter-spacing: .02em; color: var(--ink);
  text-decoration: none; display: flex; align-items: center; gap: 9px;
  text-transform: uppercase;
}
.brand::before { content: ''; width: 10px; height: 10px; background: var(--orange); }
.nav-links { display: flex; gap: 1.4rem; }
.nav-links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav-links a:hover { color: var(--ink); border-color: var(--orange); }
.nav-chip {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  border: 2px solid var(--ink); padding: 6px 12px; color: var(--ink);
  white-space: nowrap; border-radius: 0;
}

/* ---------- hero ---------- */
.hero {
  min-height: calc(100vh - var(--head-h));
  display: flex; flex-direction: column;
  padding: 0 var(--gutter);
}
.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
  padding: clamp(2rem, 5vh, 4rem) 0 2.5rem;
}
.hero-head { grid-column: 1 / -1; }
.hero-head h1 {
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  max-width: 14ch;
  letter-spacing: -.02em;
}
.hero-head h1 em {
  font-style: normal; color: var(--orange);
}
.hero-sub {
  max-width: 46ch; margin-top: 1.3rem;
  color: var(--ink-2); font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.6;
}

/* ---------- specimen ---------- */
.specimen {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(220px, 36vh, 400px);
}
.specimen-stage { position: relative; border-bottom: 2px solid var(--ink); cursor: text; }
.specimen-word {
  font-size: clamp(5rem, 15vw, 15.5rem);
  line-height: .92; letter-spacing: -.02em;
  font-variation-settings: 'wght' 700, 'wdth' 100, 'opsz' 144;
  outline: none;
  overflow-wrap: anywhere;
  caret-color: var(--orange);
  text-transform: uppercase;
}
.specimen-word:empty::before {
  content: attr(data-placeholder);
  color: var(--mute);
  font-variation-settings: 'wght' 300;
}
.specimen-hint {
  position: absolute; right: 0; bottom: -1.9rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute);
  transition: opacity .3s var(--ease);
}
.specimen-stage:focus-within .specimen-hint { opacity: 0; }
.specimen-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2.8rem; }
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  border: 2px solid var(--ink); padding: 6px 10px; background: var(--paper);
  border-radius: 0; text-transform: uppercase;
}
.chip b { color: var(--orange); font-weight: 400; }
.chip-note { color: var(--mute); }

/* ---------- pad ---------- */
.pad-panel { display: flex; flex-direction: column; gap: 1.1rem; }
.pad {
  position: relative; aspect-ratio: 1 / 1;
  border: 2px solid var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 25% 25%;
  cursor: crosshair; touch-action: none; overflow: hidden;
}
.pad-line-x, .pad-line-y { position: absolute; background: var(--ink); opacity: .3; pointer-events: none; }
.pad-line-x { left: 0; right: 0; height: 1px; top: 50%; }
.pad-line-y { top: 0; bottom: 0; width: 1px; left: 50%; }
.pad-cross {
  position: absolute; width: 16px; height: 16px;
  background: var(--orange); border: 2px solid var(--ink);
  transform: translate(-50%, -50%); pointer-events: none;
}
.pad-label {
  position: absolute; font-family: var(--mono); font-size: 10px;
  color: var(--mute); pointer-events: none;
}
.pad-label.t { top: 6px; left: 8px; }
.pad-label.b { bottom: 6px; left: 8px; }
.pad-label.l { top: 50%; left: 7px; transform: translateY(-50%); }
.pad-label.r { top: 50%; right: 7px; transform: translateY(-50%); }

.pad-readout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--line); border: 2px solid var(--ink);
}
.ro { background: var(--paper); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ro-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--mute); }
.ro-v { font-size: 1.7rem; line-height: 1; font-variation-settings: 'wght' 700; font-feature-settings: 'tnum'; }

.pad-sliders { display: flex; flex-direction: column; gap: 12px; }
.slider-row {
  display: grid; grid-template-columns: 52px 1fr 42px; align-items: center; gap: 10px;
  font-size: 12px; cursor: pointer;
}
.slider-row > span:first-child {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--mute);
}
.slider-val { font-family: var(--mono); font-size: 11px; text-align: right; font-feature-settings: 'tnum'; }

.pad-help {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
  border-top: 1px solid var(--line-soft); padding-top: 1rem;
}

/* ---------- hero scroll cue ---------- */
.hero-scroll {
  grid-column: 1 / -1;
  justify-self: end;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid var(--orange); padding-bottom: 3px;
  transition: color .15s var(--ease);
}
.hero-scroll:hover { color: var(--ink); }

/* ---------- range inputs ---------- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer;
  --fill: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--ink) var(--fill), var(--line) var(--fill));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -8px;
  border-radius: 0; background: var(--orange); border: 2px solid var(--ink);
  cursor: grab;
}
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--ink); }
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 0;
  background: var(--orange); border: 2px solid var(--ink); cursor: grab;
}

/* ---------- buttons & fields ---------- */
.btn {
  font: inherit; font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 18px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: pointer;
  border-radius: 0; box-shadow: 4px 4px 0 var(--ink);
  transition: box-shadow .15s var(--ease), transform .15s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 var(--ink); transform: translate(4px, 4px); }
.btn-primary { background: var(--orange); border-color: var(--ink); color: #FFFFFF; }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--orange); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

input[type="text"] {
  width: 100%; font: inherit; font-weight: 700;
  font-size: 1.1rem; padding: 12px 14px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  border-radius: 0;
}
input[type="text"]:focus { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}