/* ------------------------------------------------------------------
   Automatic Windings Ltd — preview stylesheet

   Brand tokens, base styles and component classes only. Utility classes
   are provided by Tailwind, configured in index.html. This file lives in
   /public so it is copied verbatim into the build output and is never
   handed to PostCSS.

   Primary navy (#000066) and gold (#FFCC33) are taken directly from the
   legacy Automatic Windings site. Supporting tones are refined neutrals
   chosen to sit with the navy. No gradients anywhere in the system.
   ------------------------------------------------------------------ */

:root {
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Bodoni Moda', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --color-navy: #000066;
  --color-navy-deep: #00004a;
  --color-gold: #ffcc33;
  --color-gold-deep: #8a6a00;

  --color-paper: #f7f6f2;
  --color-paper-soft: #f1efe9;
  --color-paper-deep: #e9e6dd;

  --color-ink: #14151a;
  --color-ink-soft: #3c3f4a;
  --color-ink-muted: #6b6e8a;

  --color-line: #e2e0d8;
  --color-line-strong: #c9c6bc;

  --color-signal: #b3261e;
  --color-blue: #2233cc;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------- Base ---------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'calt';
}

::selection {
  background: var(--color-gold);
  color: var(--color-navy);
}

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

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* ------------------------- Components ------------------------- */

/* Layout container: generous max width for large monitors, tight gutters on mobile */
.container-x {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .container-x {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .container-x {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1536px) {
  .container-x {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Editorial display type */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--color-ink-soft);
}

@media (min-width: 640px) {
  .lede {
    font-size: 1.25rem;
    line-height: 1.6;
  }
}

.prose-aw {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.prose-aw p + p {
  margin-top: 1.25rem;
}

.prose-aw strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* Rules and hairlines */
.rule-gold {
  height: 0.125rem;
  width: 3rem;
  background-color: var(--color-gold);
}

/* Reveal on scroll. The hidden state is only applied when the `js` class has
   been set on the document, so content is never left invisible. */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Underline link motion */
.link-line {
  position: relative;
  display: inline-block;
}

.link-line::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.125rem;
  height: 1px;
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
}

.link-line:hover::after,
.link-line:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .link-line::after {
    transition: none;
  }
}