/* ============================================================
   Sprinturf Redesign - Base styles
   Reset, typography, layout primitives, foundational components.

   Loads tokens, then applies them. Existing class names and
   selectors are preserved so legacy pages still render. New
   utility and component classes are added at the bottom of
   each section (clearly labeled NEW).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Anton&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap");
@import url("./tokens.css");

/* ============================================================
   Reset
   Modern, minimal. Honors user reduced-motion preferences in
   motion.css; this layer just sets a sane default.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body { margin: 0; min-height: 100vh; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
p { margin: 0 0 1.25rem; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
a:hover { text-decoration-color: var(--action-600); }

/* ============================================================
   Body defaults
   Inter at 17px, 1.6 leading, ink-900 on paper-50.
   text-rendering optimizeLegibility kicks in OpenType kerning.
   ============================================================ */
body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--ink-900);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ============================================================
   Typography utility classes
   Display tier uses Anton for industrial-editorial feel.
   ============================================================ */
.t-mega, .t-display, .t-h1, .t-h2 {
  font-family: var(--font-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 0.5em;
  color: var(--ink-1000);
}
.t-mega { font-size: var(--fs-mega); letter-spacing: var(--ls-mega); }
.t-display { font-size: var(--fs-display); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h1, h2 { margin-top: 0; }

/* H3 and H4: Inter sans, not display. Cleaner editorial cadence. */
h3.t-h3 {
  font-family: var(--font-text);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  color: var(--ink-900);
}
h4 {
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: var(--ls-heading);
}

.t-eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 700;
  color: var(--brand-700);
  margin: 0 0 0.75em;
}
.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: var(--measure);
  color: var(--ink-700);
}
.t-small { font-size: var(--fs-small); }
.t-tiny { font-size: var(--fs-tiny); }

/* NEW - editorial accent serif for pull-quote / stat numerals */
.t-editorial {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  letter-spacing: -0.015em;
  color: var(--ink-1000);
}

/* NEW - text-balance utility for short editorial headlines */
.text-balance { text-wrap: balance; }

/* NEW - text-pretty utility for body paragraphs (avoids orphans) */
.text-pretty { text-wrap: pretty; }

/* NEW - tabular numerals for stats and spec tables */
.numeric {
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--ls-numeric);
}

/* ============================================================
   Layout primitives - containers
   ============================================================ */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
/* NEW - editorial body width (720px) for long-form copy */
.container-text { max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); }
/* NEW - marginalia layout (1180px) for body + side notes */
.container-marginalia { max-width: var(--container-marginalia); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================
   Layout primitives - sections
   Tight, default, loose. Use these instead of ad-hoc clamps.
   ============================================================ */
.section { padding-block: var(--space-section); }
.section-tight { padding-block: var(--space-section-tight); } /* NEW */
.section-lg { padding-block: var(--space-section-loose); }
.section-hero { padding-block: var(--space-hero); }            /* NEW */

/* Section surfaces (back-compat preserved) */
.section-paper { background: var(--paper-50); }
.section-paper-100 { background: var(--paper-100); }
.section-cream { background: var(--cream-50); }                /* NEW */
.section-ink { background: var(--ink-900); color: var(--paper-50); }
.section-ink h1, .section-ink h2 { color: var(--paper-50); }
.section-ink .t-eyebrow { color: var(--brand-300); }
.section-brand { background: var(--brand-700); color: var(--paper-50); }
.section-brand h1, .section-brand h2 { color: var(--paper-50); }
.section-brand .t-eyebrow { color: var(--brand-300); }
.section-brand-deep { background: var(--brand-950); color: var(--paper-50); } /* NEW */
.section-brand-deep h1, .section-brand-deep h2 { color: var(--paper-50); }

/* ============================================================
   Layout primitives - grids
   Self-fitting responsive grids without breakpoints.
   ============================================================ */
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-asym { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
@media (min-width: 768px) { .grid-asym { grid-template-columns: 5fr 7fr; gap: var(--sp-10); } }

/* ============================================================
   Layout primitives - stack and flow
   ============================================================ */
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.flow > * + * { margin-top: 1em; }

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Skip link (a11y)
   ============================================================ */
.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  z-index: 9999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink-900);
  color: var(--paper-50);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }

/* ============================================================
   Focus rings
   Inset + outset combo on inputs (in components.css). Default
   ring on everything else lives here.
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--action-600);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Aspect ratio utilities (NEW)
   For image and media containers.
   ============================================================ */
.aspect-cinema { aspect-ratio: 21 / 9; }
.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-photo { aspect-ratio: 3 / 2; }
.aspect-card { aspect-ratio: 16 / 10; }
.aspect-cover { object-fit: cover; width: 100%; height: 100%; }

/* ============================================================
   Buttons
   Industrial 6px radius, drop shadow lifts on hover, arrow
   nudges 3px (not 4) for restraint.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  min-height: 48px;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition:
    background var(--t),
    color var(--t),
    border-color var(--t),
    transform var(--t),
    box-shadow var(--t);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
}
.btn:focus-visible { outline-offset: 3px; }

/* Primary action - red. Subtle drop shadow at rest, lifts on hover. */
.btn-primary {
  background: var(--action-600);
  color: var(--paper-50);
  box-shadow: var(--shadow-action);
}
.btn-primary:hover {
  background: var(--action-700);
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(154, 11, 34, 0.20),
    0 10px 24px rgba(200, 16, 46, 0.30),
    0 20px 40px rgba(200, 16, 46, 0.14);
  text-decoration: none;
}
.btn-primary:active { transform: translateY(0); }

/* Secondary action - inverted ink. */
.btn-secondary {
  background: var(--paper-50);
  color: var(--ink-900);
  border-color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--ink-900);
  color: var(--paper-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  text-decoration: none;
}

/* Ghost on light surfaces */
.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn-ghost:hover {
  background: var(--ink-900);
  color: var(--paper-50);
  text-decoration: none;
}

/* Ghost on dark surfaces */
.btn-ghost-light {
  background: transparent;
  color: var(--paper-50);
  border-color: var(--paper-50);
}
.btn-ghost-light:hover {
  background: var(--paper-50);
  color: var(--ink-900);
  text-decoration: none;
}

.btn-sm { padding: 0.625rem 1rem; min-height: 40px; font-size: 0.9375rem; }
.btn-lg { padding: 1.125rem 2rem; min-height: 56px; font-size: 1.0625rem; }

/* Trailing arrow nudge - 3px, restrained */
.btn .arrow {
  transition: transform var(--t);
  display: inline-block;
  will-change: transform;
}
.btn:hover .arrow { transform: translateX(3px); }

/* NEW - .btn-icon: square 44x44 minimum, icon-only */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--line);
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
.btn-icon:hover { background: var(--paper-100); border-color: var(--ink-300); }
.btn-icon:active { transform: scale(0.96); }

/* ============================================================
   Cards
   Subtle hairline at rest, lift + soft shadow + corner-pull
   tilt on hover. Corner-pull comes from a slight rotate that
   raises one corner more than the other.
   ============================================================ */
.card {
  background: var(--paper-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--t-slow) var(--ease-out),
    box-shadow var(--t-slow) var(--ease-out),
    border-color var(--t);
  will-change: transform;
}
.card:hover {
  transform: translateY(-3px) rotate(-0.15deg);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--ink-300);
}

.card-img {
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100%;
  background: var(--paper-100);
}
.card-body { padding: var(--sp-5); }
.card-eyebrow {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--brand-700);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
}
.card-title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1.05;
  margin: 0 0 var(--sp-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--ink-1000);
}
.card-link {
  color: var(--action-600);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.card-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.card-link .arrow { transition: transform var(--t); display: inline-block; }
.card-link:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Tables
   Spec tables for product technical pages.
   ============================================================ */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.spec-table th { font-weight: 700; color: var(--ink-700); width: 40%; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* ============================================================
   Forms
   16px input font (prevents iOS zoom). Premium focus ring is
   inset + outset combo for a thick, intentional feel.
   ============================================================ */
.form-group { margin-bottom: var(--sp-5); }
.form-label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink-700);
  margin-bottom: var(--sp-2);
}
.form-required { color: var(--action-600); margin-left: 2px; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem; /* 16px to prevent iOS zoom */
  font-family: var(--font-text);
  color: var(--ink-900);
  background: var(--paper-50);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-input);
  min-height: 48px;
  transition:
    border-color var(--t),
    box-shadow var(--t),
    background var(--t-fast);
}
.form-input:hover, .form-select:hover, .form-textarea:hover {
  border-color: var(--ink-300);
  background: var(--paper-50);
}
/* Focus: inset hairline + outset glow combo for a premium feel */
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--action-600);
  box-shadow:
    inset 0 0 0 1px var(--action-600),
    0 0 0 4px rgba(200, 16, 46, 0.12);
  outline: none;
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-help { font-size: var(--fs-tiny); color: var(--ink-500); margin-top: var(--sp-2); }

/* ============================================================
   Trust strip
   Industrial credibility band. Now with hairline dividers
   between items for editorial cadence.
   ============================================================ */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
  gap: 0;
}
.trust-strip-item {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--ink-700);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-5);
  position: relative;
}
.trust-strip-item + .trust-strip-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--line);
}
@media (max-width: 640px) {
  /* Drop dividers on narrow viewports - they look broken when wrapping */
  .trust-strip-item + .trust-strip-item::before { display: none; }
  .trust-strip-item { padding: var(--sp-2) var(--sp-3); }
}

/* ============================================================
   Eyebrow accent line
   Existing .accent-rule preserved (3px x 48px red bar).
   NEW .eyebrow-rule pairs a 24px line with the eyebrow text
   stacked above for editorial-feature spacing.
   ============================================================ */
.accent-rule {
  display: inline-block;
  width: 48px;
  height: 3px;
  background: var(--action-600);
  margin-bottom: var(--sp-4);
}
/* NEW - eyebrow with stacked 24px accent line above */
.eyebrow-rule {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.eyebrow-rule::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--action-600);
}
.eyebrow-rule .label {
  font-family: var(--font-text);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 700;
  color: var(--brand-700);
}

/* ============================================================
   Stat
   Existing structure preserved; numerals now use editorial
   serif and tabular-nums when paired with .numeric.
   ============================================================ */
.stat { text-align: left; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  line-height: 0.92;
  color: var(--ink-1000);
  display: block;
  margin-bottom: var(--sp-2);
  letter-spacing: var(--ls-mega);
}
/* NEW - serif variant for editorial stat displays */
.stat-num.t-editorial {
  font-family: var(--font-editorial);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.stat-label {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--ink-500);
  font-weight: 600;
}

/* ============================================================
   Logo wall
   Existing structure preserved.
   ============================================================ */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  align-items: center;
  justify-items: center;
}
@media (min-width: 640px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .logo-wall { grid-template-columns: repeat(6, 1fr); } }
.logo-wall img {
  max-height: 48px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--t), filter var(--t);
}
.logo-wall img:hover { opacity: 1; filter: grayscale(0); }

/* ============================================================
   NEW - editorial-block
   Narrow 65ch text block with optional first-line large-cap.
   Use for long-form essay sections, project case-study copy.
   ============================================================ */
.editorial-block {
  max-width: var(--measure);
  margin-inline: auto;
}
.editorial-block p { line-height: var(--lh-loose); color: var(--ink-700); }
.editorial-block.has-largecap > p:first-of-type::first-letter {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  padding: 0.05em 0.1em 0 0;
  margin-right: 0.04em;
  color: var(--ink-1000);
}