/* =========================================================================
   I AM THIS MOTORCYCLE — core design system
   Cinematic · literary · analog. Dark gallery default, paper reading chapters.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Archivo:wght@400;500;600;700&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* ----------------------------------------------------------------- TOKENS */
:root {
  /* Ink & paper — warm near-black, warm off-white */
  --ink:        #0E0E0D;
  --ink-2:      #14130F;   /* raised surface on dark */
  --ink-3:      #1C1A15;   /* hairline-lit surface  */
  --paper:      #F4F1EA;
  --paper-2:    #ECE7DC;   /* recessed paper        */
  --gold:       #C9A227;

  /* Text roles on DARK */
  --on-ink:        #F4F1EA;
  --on-ink-soft:   #B7B2A6;   /* secondary           */
  --on-ink-mute:   #7C776B;   /* captions / meta      */
  --hair-ink:      rgba(244,241,234,0.14);
  --hair-ink-soft: rgba(244,241,234,0.08);

  /* Text roles on PAPER */
  --on-paper:        #16140F;
  --on-paper-soft:   #514C40;
  --on-paper-mute:   #8A8475;
  --hair-paper:      rgba(20,18,12,0.16);
  --hair-paper-soft: rgba(20,18,12,0.08);

  /* Type families */
  --font-display: 'Alfa Slab One', Georgia, serif;   /* woodtype stamps   */
  --font-serif:   'Spectral', Georgia, 'Times New Roman', serif; /* reading */
  --font-sans:    'Archivo', 'Helvetica Neue', Arial, sans-serif; /* labels */

  /* Fluid type scale (mobile-first) */
  --t-caption: 0.6875rem;                               /* 11px           */
  --t-label:   0.75rem;                                 /* 12px           */
  --t-meta:    0.8125rem;
  --t-body:    clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --t-lede:    clamp(1.25rem, 1.12rem + 0.6vw, 1.6rem);
  --t-h3:      clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --t-h2:      clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --t-h1:      clamp(2.6rem, 1.7rem + 4vw, 5rem);
  --t-stamp:   clamp(3.2rem, 1.2rem + 9.5vw, 9.5rem);   /* hero woodtype  */

  /* Spacing */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4.5rem;  --sp-8: 7rem;
  --sp-9: 11rem;

  --measure: 38rem;            /* reading column max */
  --edge: clamp(1.25rem, 5vw, 5rem);   /* page gutter    */

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.1,1);
}

/* --------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }

/* --------------------------------------------------------- TYPE HELPERS */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow::before {
  content: ""; width: 1.6em; height: 1px; background: currentColor; opacity: .6;
}
.eyebrow.no-rule::before { display: none; }

.stamp {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.serif-display {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}
.mono-tag {
  font-family: 'Archivo', monospace;
  font-size: var(--t-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Letterpress erosion — apply to .stamp via .inked */
.inked { filter: url(#letterpress); }
@media (prefers-reduced-motion: reduce) { /* keep — purely visual */ }

/* ------------------------------------------------------------- SURFACES */
.on-paper {
  background: var(--paper);
  color: var(--on-paper);
}
.on-paper .eyebrow { color: var(--on-paper-mute); }
.on-paper .eyebrow--gold { color: #97781a; }
.on-paper .caption,
.on-paper .mono-tag { color: var(--on-paper-mute); }

/* Paper grain + dark grain overlays (decorative, non-interactive) */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .055; mix-blend-mode: overlay;
}
.on-paper.grain::after { mix-blend-mode: multiply; opacity: .05; }

/* ---------------------------------------------------- PORTRAIT PLACEHOLDER */
.plate {
  position: relative; overflow: hidden; isolation: isolate;
  background: #0b0b0a;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, rgba(0,0,0,0) 2px 9px),
    linear-gradient(180deg, #23211c 0%, #121110 48%, #060605 100%);
}
.plate::before { /* grain on the plate */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 160px 160px; opacity: .14; mix-blend-mode: screen;
}
.plate__tag {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  padding: 0.85rem 1rem; display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-sans); font-size: var(--t-caption);
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,241,234,0.62);
}
.plate__tag b { color: var(--gold); font-weight: 600; letter-spacing: .14em; }
.plate__cx { /* faint registration cross, center */
  position: absolute; top: 50%; left: 50%; z-index: 3; width: 26px; height: 26px;
  transform: translate(-50%,-50%); opacity: .18;
}
.plate__cx::before, .plate__cx::after {
  content:""; position:absolute; background: var(--on-ink);
}
.plate__cx::before { left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.plate__cx::after  { top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }

/* ------------------------------------------------------------- BUTTONS */
.btn {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.95em 1.5em; border: 1px solid var(--hair-ink);
  color: var(--on-ink); background: transparent;
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.btn:hover { border-color: var(--gold); color: var(--paper); }
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.on-paper .btn { border-color: var(--hair-paper); color: var(--on-paper); }
.on-paper .btn:hover { border-color: #97781a; color: #000; }

/* text link with gold underline reveal */
.link {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.6em; position: relative;
}
.link::after {
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.link .arr { transition: transform .4s var(--ease); }
.link:hover .arr { transform: translateX(4px); }

/* ------------------------------------------------------------- LAYOUT */
.wrap { padding-inline: var(--edge); }
.rule { height: 1px; background: var(--hair-ink); border: 0; margin: 0; }
.on-paper .rule { background: var(--hair-paper); }
.measure { max-width: var(--measure); }

/* Scroll reveal base — gated on .js so content is visible without JS */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-reveal="slow"] { transition-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}