/* ============================================================
   JEWELL TYRES — BASE
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--jt-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--jt-black);
  background: var(--jt-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.display, .display-xl {
  font-family: var(--jt-display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.display-xl { font-size: clamp(2.5rem, 7vw, var(--fs-display-xl)); }
.display { font-size: clamp(2rem, 5vw, var(--fs-display)); }

h1.heading, .h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--ls-display); }
h2.heading, .h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); }
h3.heading, .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); }
h4.heading, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-tight); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--jt-black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
a:hover { color: var(--jt-earth); }

strong { font-weight: 700; }

/* Mono / technical */
.mono {
  font-family: var(--jt-mono);
  letter-spacing: var(--ls-mono);
  font-size: 0.95em;
}

/* Eyebrow — small caps label */
.eyebrow {
  font-family: var(--jt-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--jt-stone);
}

.eyebrow--yellow { color: var(--jt-yellow-dark); }
.eyebrow--inverse { color: var(--jt-yellow); }

/* Layout */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--text { max-width: var(--container-text); }

@media (min-width: 768px) {
  .container { padding-left: var(--s-7); padding-right: var(--s-7); }
}

.section { padding-block: var(--s-8); }
.section--lg { padding-block: var(--s-9); }
.section--sm { padding-block: var(--s-6); }

@media (min-width: 768px) {
  .section { padding-block: var(--s-9); }
  .section--lg { padding-block: var(--s-10); }
}

/* Grounds */
.ground--paper { background: var(--jt-paper); color: var(--jt-black); }
.ground--sand { background: var(--jt-sand); color: var(--jt-black); }
.ground--black {
  background: var(--jt-black);
  color: var(--jt-bone);
  position: relative;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(254,192,19,0.04) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0px, transparent 24px, rgba(255,255,255,0.015) 24px, rgba(255,255,255,0.015) 25px);
}
.ground--black .eyebrow { color: var(--jt-yellow); }
.ground--black a { color: var(--jt-bone); }
.ground--black a:hover { color: var(--jt-yellow); }
.ground--yellow { background: var(--jt-yellow); color: var(--jt-black); }
.ground--earth {
  background: var(--jt-earth);
  color: var(--jt-bone);
  background-image: repeating-linear-gradient(45deg, transparent 0px, transparent 32px, rgba(0,0,0,0.08) 32px, rgba(0,0,0,0.08) 33px);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  font-family: var(--jt-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid var(--jt-black);
  border-radius: var(--radius-1);
  background: var(--jt-yellow);
  color: var(--jt-black);
  cursor: pointer;
  transition: all var(--t-base);
}
.btn:hover {
  background: var(--jt-black);
  color: var(--jt-yellow);
}
.btn--inverse {
  background: var(--jt-black);
  color: var(--jt-yellow);
  border-color: var(--jt-yellow);
}
.btn--inverse:hover {
  background: var(--jt-yellow);
  color: var(--jt-black);
}
.btn--ghost {
  background: transparent;
  color: var(--jt-black);
}
.btn--ghost:hover {
  background: var(--jt-black);
  color: var(--jt-yellow);
}

.btn::after {
  content: '→';
  font-family: var(--jt-mono);
  margin-left: var(--s-1);
  transition: transform var(--t-base);
}
.btn:hover::after { transform: translateX(3px); }

/* Rules */
.rule { display: block; height: 1px; background: var(--jt-rule-light); border: 0; margin: 0; }
.rule--dark { background: var(--jt-rule); }
.rule--yellow { background: var(--jt-yellow); height: 3px; }
.rule--vertical { width: 1px; height: 100%; background: var(--jt-rule-light); }

/* Tags / chips */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  font-family: var(--jt-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--jt-bone);
  color: var(--jt-black);
  border: 1px solid var(--jt-rule-light);
  border-radius: var(--radius-1);
}
.tag--yellow { background: var(--jt-yellow); border-color: var(--jt-yellow-dark); }
.tag--black { background: var(--jt-black); color: var(--jt-yellow); border-color: var(--jt-black); }

/* Utility */
.uppercase { text-transform: uppercase; }
.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

/* Visually hidden */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================================================
   HERO ANIMATION — JT
   One orchestrated page-load reveal. Honours prefers-reduced-motion.
   ============================================================ */

@keyframes jt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jt-rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero { animation: jt-fade-in 400ms ease-out both; }
.hero__meta { animation: jt-rise-in 500ms ease-out 200ms both; }
.hero__display { animation: jt-rise-in 600ms ease-out 350ms both; }
.hero__sub { animation: jt-rise-in 500ms ease-out 500ms both; }
.hero__actions { animation: jt-rise-in 500ms ease-out 650ms both; }
.hero__side { animation: jt-rise-in 600ms ease-out 800ms both; }

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion
   WCAG 2.2 AA. Disables all transitions and animations for
   users who have requested reduced motion.
   ============================================================ */

@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;
  }
}

/* Font display — non-blocking font loads */
@font-face {
  font-family: 'Archivo Black';
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-display: swap;
}