/* ============================================================
   experience.moe — placeholder stylesheet
   Design tokens from web spec v4 — values to be confirmed
   by sampling source artwork
   ============================================================ */

/* --- Tokens --- */
:root {
  --moe-cream:    #F1EBE0;
  --moe-black:    #15120F;
  --moe-red:      #DD3B26;
  --moe-white:    #FFFFFF;
  --moe-accent-a: #E8A23A;  /* amber — A-15 only */
  --moe-accent-b: #3E8E8C;  /* teal  — B-012 / Baffle only */

  /* Spacing scale (8px base) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s6: 48px;
  --s8: 64px;
  --s12: 96px;
  --s16: 128px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

/* --- Base --- */
body {
  font-family: Inter, "Neue Haas Grotesk", Helvetica, Arial, sans-serif;
  background: var(--moe-cream);
  color: var(--moe-black);
  line-height: 1.6;
}

/* Product pages get slightly cooler white background */
body.page-a,
body.page-b {
  background: var(--moe-white);
}

/* --- Utility --- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* --- Typography --- */
.wordmark,
.page-designation,
.product-designation,
.edition-name {
  font-family: "Archivo Black", Anton, "Impact", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.wordmark         { font-size: clamp(2rem, 6vw, 5rem); color: var(--moe-black); }
.page-designation { font-size: 1.25rem; color: var(--moe-red); }
.product-designation { font-size: clamp(1.5rem, 4vw, 3rem); }
.edition-name     { font-size: clamp(2.5rem, 7vw, 6rem); color: var(--moe-black); }

.hook {
  font-size: clamp(1.1rem, 2.5vw, 1.75rem);
  line-height: 1.3;
  max-width: 32ch;
}

.tagline { font-size: 1rem; }

.spec-frame {
  font-family: "Space Mono", "IBM Plex Mono", monospace;
  font-size: 0.95rem;
  color: var(--moe-red);
  margin-top: var(--s4);
}

.pairing-caption {
  font-size: 0.9rem;
  font-style: italic;
  max-width: 48ch;
}

.domain-mark {
  font-family: "Space Mono", "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  color: var(--moe-black);
  text-decoration: none;
  opacity: 0.7;
}

/* --- Layout --- */

/* Page X — Arrival */
.arrival {
  min-height: 100vh;
  background: var(--moe-black);
  color: var(--moe-cream);
  display: grid;
  place-items: center;
  padding: var(--s8) var(--s8);
  position: relative;
}

.wordmark-lockup {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s8);
}

.wordmark { color: var(--moe-red); }
.tagline  { color: var(--moe-cream); }

/* CatalogStrip */
.catalog-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin-bottom: var(--s8);
}

.glyph-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: "Archivo Black", Anton, sans-serif;
  font-size: 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: background 0.15s, color 0.15s;
}

.glyph-slot.live {
  color: var(--moe-cream);
  border-color: var(--moe-red);
}
.glyph-slot.live:hover {
  background: var(--moe-red);
  color: var(--moe-cream);
}

.glyph-slot.ghost {
  color: var(--moe-cream);
  opacity: 0.15;
  cursor: default;
}

.arrival .domain-mark {
  position: absolute;
  bottom: var(--s4);
  right: var(--s4);
  color: var(--moe-cream);
}

/* Screed */
.screed {
  background: var(--moe-cream);
  padding: var(--s12) var(--s8);
}

.screed-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  font-size: 1.05rem;
}

/* Site footer */
.site-footer {
  background: var(--moe-black);
  color: var(--moe-cream);
  padding: var(--s4) var(--s8);
  display: flex;
  gap: var(--s4);
}
.site-footer a { color: var(--moe-cream); text-decoration: none; font-size: 0.875rem; }
.site-footer a:hover { color: var(--moe-red); }

/* --- Product page layout --- */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s3) var(--s8);
  border-bottom: 1px solid var(--moe-black);
}

.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s6);
  align-items: end;
  padding: var(--s12) var(--s8) var(--s8);
  min-height: 60vh;
  position: relative;
  overflow: hidden;
}

.hero-letter {
  font-family: "Archivo Black", Anton, sans-serif;
  font-size: clamp(8rem, 25vw, 20rem);
  line-height: 0.85;
  color: var(--moe-red);
  opacity: 0.15;
  user-select: none;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* Pairing */
.pairing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  align-items: center;
  padding: var(--s12) var(--s8);
  position: relative;
}

.pairing-caption {
  grid-column: 1 / -1;
  border-top: 1px solid var(--moe-black);
  padding-top: var(--s3);
}

/* Fragment placeholders — replace with real images */
.fragment-placeholder {
  aspect-ratio: 4/3;
  background: var(--moe-black);
  opacity: 0.08;
  border: 1px dashed var(--moe-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fragment-placeholder::after {
  content: "[ fragment ]";
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  opacity: 0.4;
}
.fragment-placeholder.small { aspect-ratio: 1; }

/* Fish glyph placeholder */
.fish-glyph {
  aspect-ratio: 3/2;
  border: 1px dashed currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fish-glyph::after {
  content: "[ glyph ]";
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  opacity: 0.4;
}
.fish-glyph.accent.anchovy { color: var(--moe-accent-a); }
.fish-glyph.accent.bonito  { color: var(--moe-accent-b); }
.fish-glyph.small { aspect-ratio: 1; max-width: 80px; }

/* Spec block */
.spec-block {
  padding: var(--s8);
  background: var(--moe-black);
  color: var(--moe-cream);
}

.spec-block dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s1) var(--s6);
  font-family: "Space Mono", "IBM Plex Mono", monospace;
  font-size: 0.85rem;
}

.spec-block dt { color: var(--moe-red); }
.spec-block dd { opacity: 0.85; }
.spec-block .spec-frame { color: var(--moe-accent-a); }
.page-b .spec-frame { color: var(--moe-accent-b); }

/* Baffle sub-hero */
.baffle-sub-hero {
  padding: var(--s12) var(--s8) var(--s6);
  border-top: 2px solid var(--moe-black);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: end;
}
.baffle-sub-hero .hero-letter.small {
  font-size: clamp(4rem, 12vw, 10rem);
}

/* Edition band */
.edition-band {
  background: var(--moe-black);
  color: var(--moe-cream);
  padding: var(--s12) var(--s8);
}

.edition-band .edition-name { color: var(--moe-accent-b); margin-bottom: var(--s2); }
.edition-band .edition-sub  { font-size: 0.85rem; opacity: 0.6; margin-bottom: var(--s8); }

.edition-editorial {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-bottom: var(--s8);
}
.edition-editorial .bio { font-size: 0.85rem; opacity: 0.6; }

.inline-pairing {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s8);
}
.inline-pairing .pairing-caption { border: none; padding: 0; }

/* CTA bar */
.cta-bar {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.cta-link {
  color: var(--moe-accent-b);
  font-family: "Space Mono", monospace;
  font-size: 0.85rem;
  text-decoration: none;
}
.cta-link:hover { text-decoration: underline; }

/* Applications grid */
.applications {
  padding: var(--s12) var(--s8);
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s4);
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: 0.9rem;
}

/* Catalog footer nav */
.catalog-footer-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s4) var(--s8);
  border-top: 1px solid var(--moe-black);
  font-family: "Archivo Black", Anton, sans-serif;
  font-size: 1.1rem;
}
.catalog-footer-nav a { color: var(--moe-black); text-decoration: none; }
.catalog-footer-nav a:hover { color: var(--moe-red); }
.catalog-footer-nav .ghost { opacity: 0.2; cursor: default; }
.catalog-footer-nav .home-link { font-size: 0.75rem; opacity: 0.5; font-family: "Space Mono", monospace; text-transform: lowercase; }

/* --- Responsive --- */

@media (max-width: 1024px) {
  .arrival  { padding: var(--s6); }
  .screed   { padding: var(--s8) var(--s4); }
  .hero     { padding: var(--s8) var(--s4); }
  .pairing  { padding: var(--s8) var(--s4); }
  .spec-block, .applications, .edition-band { padding: var(--s8) var(--s4); }
}

@media (max-width: 640px) {
  .arrival  { padding: var(--s4); text-align: left; }

  .catalog-strip { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; }
  .glyph-slot    { scroll-snap-align: start; flex-shrink: 0; }

  .hero     { grid-template-columns: 1fr; padding: var(--s4); }
  .hero-letter { font-size: clamp(5rem, 30vw, 10rem); }

  .pairing  {
    grid-template-columns: 1fr;
    padding: var(--s4);
  }

  .baffle-sub-hero { grid-template-columns: 1fr; padding: var(--s4); }

  .spec-block dl { grid-template-columns: 1fr; }
  .spec-block dt { margin-top: var(--s2); }

  .application-grid { grid-template-columns: 1fr; }

  .cta-bar  { flex-direction: column; align-items: flex-start; }

  .edition-band { padding: var(--s6) var(--s3); }
  .edition-name { font-size: clamp(2rem, 12vw, 4rem); }
}