/* ============================================================
   JTR.COM — BASE
   Reset, typography, layout primitives, vertical-line grid.
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
  font-weight: 400;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ol, ul { list-style: none; }

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

/* ---------- TYPOGRAPHY ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.hero-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.lede {
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-mid);
}

.mono-xs {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-mid);
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.red { color: var(--red); }
.red-underline { border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.ink { color: var(--ink); }
.paper { color: var(--paper); }

/* ---------- LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-prose {
  width: 100%;
  max-width: var(--max-w-prose);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section-dark {
  background: var(--ink);
  color: var(--paper);
}

.section-dark .h2,
.section-dark .h3,
.section-dark .display,
.section-dark .ink { color: var(--paper); }

.section-dark .mono,
.section-dark .mono-xs { color: rgba(244, 241, 236, 0.7); }

.section-concrete { background: var(--concrete); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5);
}

.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }
.stack-8 > * + * { margin-top: var(--s-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
}

.flow > * + * { margin-top: 1em; }

/* ---------- VERTICAL LINE GRID ---------- */
/* The signature motif. Overlay 24 thin vertical lines.
   Use .vline-grid as a background, or stack vertical-grid::before
   on a section. Variants: light (on dark bg), dark (on light bg). */

.vgrid {
  position: relative;
  isolation: isolate;
}

.vgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grid);
  background-image: repeating-linear-gradient(
    to right,
    var(--rule-light) 0,
    var(--rule-light) 1px,
    transparent 1px,
    transparent calc(100% / 24)
  );
  background-size: 100% 100%;
}

.vgrid-light::before {
  background-image: repeating-linear-gradient(
    to right,
    var(--rule) 0,
    var(--rule) 1px,
    transparent 1px,
    transparent calc(100% / 24)
  );
}

/* dense vertical lines for Mode C (glass moment) — ~200 lines */
.vgrid-dense::before {
  background-image: repeating-linear-gradient(
    to right,
    var(--rule-light) 0,
    var(--rule-light) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ---------- TRIAD MARK ---------- */
.triad {
  display: inline-block;
  width: 32px;
  height: auto;
}

.triad-lg {
  width: 64px;
}

.triad-hero {
  width: clamp(48px, 6vw, 96px);
}

/* ---------- LINK STYLES ---------- */
.link-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

.section-dark .link-mono { color: var(--paper); }

.link-mono::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.link-mono:hover { color: var(--red); }
.link-mono:hover::after { transform: scaleX(1); }

.link-mono .caret { color: var(--red); margin-left: var(--s-2); }

.link-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: inherit;
  position: relative;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

.link-italic::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.link-italic:hover { color: var(--red); }
.link-italic:hover::after { transform: scaleX(1); }

/* ---------- A11Y ---------- */
.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;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}