/*! Massarrah — generated 2026-05-31 */
/* DO NOT EDIT — edit src/css/* and rebuild via `npm run build`. */

/* ─── 00-primitives.css ─── */
/* ============================================================
   LANDING — Type primitives
   Used by several landing sections. Tokens live in chrome/02-tokens.css.
   ============================================================ */
.display    { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track-tight); line-height: var(--leading-tight); color: var(--white); }
.smallcaps  { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; }
.lato-italic{ font-family: var(--font-body); font-style: italic; }
.glyph      { font-family: var(--font-cuneiform); }

/* ─── 01-hero.css ─── */
/* ============================================================
   HERO — Read the Name
   Three cuneiform signs press into existence, then resolve into "Massarrah".
   ============================================================ */
section.hero {
  /* svh handles mobile browser chrome correctly (no jump when address bar hides) */
  min-height: 100svh;
  min-height: 100vh; /* fallback */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(60px, 12vh, 100px) clamp(16px, 5vw, 24px);
  padding-top: max(clamp(60px, 12vh, 100px), env(safe-area-inset-top));
  padding-bottom: max(clamp(60px, 12vh, 100px), env(safe-area-inset-bottom));
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(255,215,0,0.22), transparent 60%),
    radial-gradient(1px 1px at 80% 18%, rgba(240,201,135,0.18), transparent 60%),
    radial-gradient(1px 1px at 67% 72%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 84%, rgba(255,215,0,0.12), transparent 60%),
    radial-gradient(1px 1px at 92% 60%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(1px 1px at 8% 62%, rgba(240,201,135,0.10), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: var(--container-hero);
}
.reading {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(20px, 6vw, 96px);
  margin-bottom: clamp(36px, 7vw, 56px);
  /* Allow horizontal scroll on tiny screens rather than overflow */
  max-width: 100%;
}
.sign {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0;
  animation: signPress 1.1s var(--ease-out-quart) forwards;
}
.sign-1 { animation-delay: 0.4s; }
.sign-2 { animation-delay: 1.1s; }
.sign-3 { animation-delay: 1.8s; }
.sign .glyph {
  font-family: var(--font-cuneiform);
  font-size: clamp(90px, 18vw, 240px);
  line-height: 1;
  color: var(--hero-glyph, var(--royal-gold));
  text-shadow: 0 0 60px rgba(255, 215, 0, 0.18), 0 2px 0 rgba(255, 215, 0, 0.04);
}
.sign .meta {
  display: flex; flex-direction: column; align-items: center;
  margin-top: clamp(14px, 2vw, 22px); opacity: 0;
  animation: fadeIn 700ms ease forwards;
}
.sign-1 .meta { animation-delay: 1.0s; }
.sign-2 .meta { animation-delay: 1.7s; }
.sign-3 .meta { animation-delay: 2.4s; }
.sign .num {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.4em;
  color: var(--royal-gold);
  opacity: 0.85; margin-bottom: 6px;
}
.sign .trans {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px); color: var(--white);
  letter-spacing: 0.05em;
}
.sign .gloss {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.4vw, 13px); color: var(--white-50);
  margin-top: 4px;
}
@keyframes signPress {
  0%   { opacity: 0; transform: scale(1.18); filter: blur(14px); }
  40%  { opacity: 0.9; filter: blur(4px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes fadeIn { to { opacity: 1; } }

.hero-name {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 3.0s;
  padding: 0 16px;
  width: 100%;
}
.hero-name .rosetta {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(13px, 1.5vw, 15px);
  color: var(--white-50);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
  max-width: 56ch;
  text-align: center;
  line-height: 1.55;
}
.hero-name h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 9vw, 132px);
  letter-spacing: var(--track-wordmark);
  color: var(--white);
  line-height: 1;
  text-wrap: balance;
  /* On mobile: keep wordmark on one line even if it shrinks */
  white-space: nowrap;
}
.hero-name h1 em {
  font-style: normal;
  color: var(--royal-gold);
}
.hero-name .tagline {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 19px);
  letter-spacing: 0.08em;
  color: var(--light-gold);
  opacity: 0.85;
  text-align: center;
}

.scroll-hint {
  position: absolute; bottom: clamp(20px, 5vh, 36px); left: 50%;
  transform: translateX(-50%);
  color: var(--white-50);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.4em; text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 4.0s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  /* Hide on very short viewports to avoid colliding with content */
}
@media (max-height: 540px) {
  .scroll-hint { display: none; }
}
.scroll-hint::after {
  content: ""; width: 1px; height: 32px;
  background: linear-gradient(to bottom, var(--royal-gold), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* On very small screens, tighten the inter-glyph gap so all three still fit */
@media (max-width: 380px) {
  .reading { gap: 14px; }
  .sign .glyph { font-size: 78px; }
}

/* ─── 02-plate-zero.css ─── */
/* ============================================================
   PLATE 0 — The App (intro)
   ============================================================ */
section.plate-zero {
  padding: clamp(80px, 12vw, 120px) clamp(16px, 5vw, 24px) clamp(60px, 8vw, 80px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.plate-zero .pz-icon {
  width: clamp(96px, 14vw, 168px);
  height: clamp(96px, 14vw, 168px);
  margin-bottom: clamp(28px, 4vw, 40px);
  border-radius: 22%;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(220, 151, 80, 0.18),
    0 24px 60px -16px rgba(0, 0, 0, 0.75),
    0 0 60px -8px rgba(220, 151, 80, 0.18);
  animation: iconBreathe 6s ease-in-out infinite;
}
.plate-zero .pz-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@keyframes iconBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.015); }
}
.plate-zero .pz-kicker {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--royal-gold);
  margin-bottom: 22px;
}
.plate-zero h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--white);
  text-wrap: balance;
  max-width: 18ch;
}
.plate-zero h2 em { font-style: normal; color: var(--royal-gold); }
.plate-zero p {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--white-70);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}
.plate-zero .facts {
  margin-top: clamp(28px, 5vw, 44px);
  display: flex; gap: 0; flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 14px;
}
.plate-zero .fact {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--white-70);
  letter-spacing: 0.04em;
  padding: 0 clamp(14px, 2vw, 22px);
  position: relative;
}
.plate-zero .fact strong {
  color: var(--royal-gold);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 8px;
}
.plate-zero .fact + .fact::before {
  content: "\00b7";
  position: absolute; left: -3px; top: 50%;
  transform: translateY(-50%);
  color: var(--royal-gold);
  opacity: 0.4;
}
/* Stack to multiple lines cleanly on narrow screens */
@media (max-width: 540px) {
  .plate-zero .facts { gap: 8px 0; }
  .plate-zero .fact { flex: 0 0 auto; }
}

/* ─── 03-press.css ─── */
/* ============================================================
   PLATE I — Press a Wedge (interactive clay)
   ============================================================ */
section.press {
  padding: clamp(80px, 12vw, 140px) clamp(16px, 5vw, 24px) clamp(60px, 10vw, 120px);
  display: flex; flex-direction: column; align-items: center;
}
.press-intro { max-width: 720px; text-align: center; margin-bottom: clamp(36px, 6vw, 56px); padding: 0 12px; }
.press-intro .smallcaps {
  color: var(--royal-gold);
  font-size: 12px; margin-bottom: 22px; display: block;
}
.press-intro h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 60px);
  letter-spacing: var(--track-tight);
  color: var(--white);
  line-height: var(--leading-tight);
}
.press-intro p {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--white-70);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.clay-surface {
  position: relative;
  width: min(720px, 92vw);
  height: clamp(220px, 50vw, 360px);
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 25% 20%, #c19a6b 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, #a17e5a 0%, transparent 60%),
    linear-gradient(135deg, #9d7d5e 0%, #8d6e63 50%, #6d5446 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.06),
    inset 0 -2px 12px rgba(0,0,0,0.45),
    0 18px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(220, 151, 80, 0.15);
  cursor: crosshair;
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
}
.clay-surface::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(48, 42, 40, 0.18) 0%, transparent 6%),
    radial-gradient(circle at 62% 14%, rgba(48, 42, 40, 0.10) 0%, transparent 5%),
    radial-gradient(circle at 38% 78%, rgba(48, 42, 40, 0.15) 0%, transparent 5%),
    radial-gradient(circle at 84% 62%, rgba(48, 42, 40, 0.12) 0%, transparent 7%),
    radial-gradient(circle at 8% 86%, rgba(48, 42, 40, 0.10) 0%, transparent 5%);
  pointer-events: none;
}
.clay-surface .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(48, 42, 40, 0.55);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.8vw, 17px);
  letter-spacing: 0.06em;
  pointer-events: none;
  transition: opacity 400ms ease;
  text-align: center;
  padding: 0 16px;
}
.clay-surface .placeholder.gone { opacity: 0; }

/* The wedge stamp itself */
.wedge {
  position: absolute;
  font-family: var(--font-cuneiform);
  font-size: clamp(34px, 4vw, 42px);
  line-height: 1;
  color: rgba(38, 26, 18, 0.85);
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 50%;
  animation: wedgePress 360ms cubic-bezier(0.32, 1.0, 0.32, 1) backwards;
  text-shadow:
    0 -1px 0 rgba(255, 240, 210, 0.28),
    0  1px 0 rgba(0, 0, 0, 0.38),
    0  0 6px rgba(0, 0, 0, 0.22);
}
@keyframes wedgePress {
  0%   { opacity: 0; transform: var(--rot, none) scale(1.45); }
  55%  { opacity: 1; }
  100% { transform: var(--rot, none) scale(1); }
}

.press-caption {
  margin-top: clamp(24px, 4vw, 36px);
  max-width: 620px;
  text-align: center;
  color: var(--white-70);
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: var(--leading-relaxed);
  opacity: 0;
  transition: opacity 700ms ease;
  padding: 0 12px;
}
.press-caption.shown { opacity: 1; }
.press-caption em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--light-gold);
}

/* ─── 04-plate-ii.css ─── */
/* ============================================================
   PLATE II — What Survived (specimen gallery)
   Gilgamesh, Hammurabi, Babylonian Map of the World.
   ============================================================ */
section.plate {
  padding: clamp(80px, 12vw, 120px) clamp(16px, 5vw, 24px);
  background: linear-gradient(180deg, var(--deep-night) 0%, var(--abyss) 100%);
}
.plate-inner { max-width: var(--container-wide); margin: 0 auto; }
.plate-header { text-align: center; margin-bottom: clamp(48px, 8vw, 88px); }
.plate-no {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.45em;
  color: var(--royal-gold);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.plate-header h2 {
  margin: 0 auto;
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 5.2vw, 76px);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--white);
  text-wrap: balance;
}
.plate-header h2 em { font-style: normal; color: var(--royal-gold); }

.specimens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 6vw, 56px);
}
@media (max-width: 960px) {
  .specimens { grid-template-columns: 1fr; gap: 56px; }
}
@media (min-width: 640px) and (max-width: 960px) {
  /* Tablet: two columns, third spans both */
  .specimens { grid-template-columns: repeat(2, 1fr); }
  .specimens .specimen:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 540px;
    margin: 0 auto;
  }
}

.specimen { display: flex; flex-direction: column; }
.case {
  aspect-ratio: 4 / 5;
  position: relative;
  background:
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(220, 151, 80, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(13, 27, 42, 0.6) 0%, rgba(13, 27, 42, 0.95) 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6% 6% 8%;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(220, 151, 80, 0.10),
    inset 0 -60px 80px -40px rgba(0, 0, 0, 0.5);
}
.case::after {
  content: ""; position: absolute;
  bottom: 5%; left: 18%; right: 18%; height: 14px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.artifact-photo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter:
    contrast(1.04) saturate(0.95)
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  position: relative;
  z-index: 1;
}
.artifact-flood  { width: 92%; height: auto; }
.artifact-stele  { width: auto; height: 94%; max-width: 50%; }
.artifact-map    { width: 86%; height: auto; }

.specimen .label {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(220, 151, 80, 0.18);
}
.specimen .catalog {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--royal-gold);
  margin-bottom: 10px;
}
.specimen h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 26px);
  color: var(--white);
  letter-spacing: var(--track-tight);
  line-height: 1.15;
  text-wrap: balance;
}
.specimen .provenance {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--light-gold);
  margin: 0 0 14px;
}
.specimen .blurb {
  font-size: clamp(14px, 1.5vw, 15px);
  color: var(--white-70);
  line-height: var(--leading-relaxed);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.specimen .attr {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--white-50);
  font-style: italic;
}
.specimen .attr a {
  color: var(--white-70);
  text-decoration: none;
  border-bottom: 1px dotted rgba(220, 151, 80, 0.4);
  transition: color 150ms ease, border-color 150ms ease;
}
.specimen .attr a:hover, .specimen .attr a:focus-visible {
  color: var(--royal-gold);
  border-bottom-color: var(--royal-gold);
}

/* ─── 05-ea-nasir.css ─── */
/* ============================================================
   PLATE III — Ea-nāṣir's complaint
   ============================================================ */
section.ea-nasir {
  background: var(--abyss);
  padding: clamp(80px, 12vw, 140px) clamp(16px, 5vw, 24px);
  position: relative;
  overflow: hidden;
}
.ea-nasir::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 35% 55%, rgba(120, 80, 45, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 30%, rgba(220, 151, 80, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.ea-inner {
  position: relative;
  max-width: var(--container-wide); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 960px) {
  .ea-inner { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 56px); }
}
.ea-tablet-frame {
  aspect-ratio: 1 / 1.18;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(220, 151, 80, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(13, 27, 42, 0.6) 0%, rgba(13, 27, 42, 0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  box-shadow:
    inset 0 0 0 1px rgba(220, 151, 80, 0.18),
    0 0 60px rgba(220, 151, 80, 0.08),
    0 40px 90px -24px rgba(0, 0, 0, 0.8);
}
.ea-tablet-frame::after {
  content: ""; position: absolute;
  bottom: 5%; left: 22%; right: 22%; height: 14px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.ea-photo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter:
    contrast(1.05) saturate(0.95)
    drop-shadow(0 22px 28px rgba(0, 0, 0, 0.6))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  position: relative;
  z-index: 1;
}
.ea-text { max-width: 540px; }
.ea-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--royal-gold);
  margin-bottom: 22px;
}
.ea-text h2 {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4.2vw, 56px);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--white);
  text-wrap: balance;
}
.ea-quote {
  margin: 0 0 22px;
  padding-left: 22px;
  border-left: 2px solid var(--royal-gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.55;
  color: var(--light-gold);
}
.ea-quote em { font-style: normal; color: var(--white); font-weight: 500; }
.ea-attribution {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--white-50);
  margin: 0 0 36px;
  letter-spacing: 0.04em;
}
.ea-context {
  font-size: clamp(15px, 1.7vw, 17px);
  color: var(--white-85);
  line-height: var(--leading-relaxed);
  margin: 0;
  text-wrap: pretty;
}
.ea-context strong {
  color: var(--white);
  font-weight: 700;
}

/* ─── 06-curriculum.css ─── */
/* ============================================================
   PLATE IV — Curriculum (44 signs, 4 levels)
   ============================================================ */
section.curriculum { padding: clamp(80px, 12vw, 140px) clamp(16px, 5vw, 24px); }
.curr-inner { max-width: var(--container-wide); margin: 0 auto; }
.curr-header { text-align: center; margin-bottom: clamp(48px, 8vw, 80px); }
.curr-header .plate-no { margin-bottom: 18px; }
.curr-header h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--white);
  text-wrap: balance;
}
.curr-header h2 em { font-style: normal; color: var(--royal-gold); }
.curr-header p {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--white-70);
  text-wrap: pretty;
}
.levels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 32px);
}
@media (max-width: 1024px) { .levels { grid-template-columns: repeat(2, 1fr); gap: 48px; } }
@media (max-width: 540px) { .levels { grid-template-columns: 1fr; gap: 36px; } }
.level {
  padding-top: 32px;
  border-top: 1px solid rgba(220, 151, 80, 0.25);
  display: flex; flex-direction: column;
}
.level .l-no {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--royal-gold);
  margin-bottom: 10px;
}
.level .l-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--white);
  margin-bottom: 4px;
  letter-spacing: var(--track-tight);
}
.level .l-count {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--white-50);
  margin-bottom: 28px;
}
.level .l-signs {
  font-family: var(--font-cuneiform);
  color: var(--light-gold);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.6;
  letter-spacing: 0.06em;
  word-spacing: 0.18em;
  word-wrap: break-word;
  flex: 1;
}
.level .l-foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--white-70);
  font-style: italic;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ─── 07-materials.css ─── */
/* ============================================================
   PLATE V — Scribe's Tablets (achievement materials)
   Five tiers: Clay → Bronze → Lapis → Obsidian → Gold
   ============================================================ */
section.materials {
  padding: clamp(80px, 12vw, 140px) clamp(16px, 5vw, 24px) clamp(60px, 10vw, 120px);
  background: linear-gradient(180deg, var(--deep-night) 0%, var(--abyss) 100%);
}
.mat-inner { max-width: var(--container-wide); margin: 0 auto; }
.mat-header { text-align: center; margin-bottom: clamp(56px, 9vw, 100px); }
.mat-header .plate-no { margin-bottom: 18px; }
.mat-header h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--white);
  text-wrap: balance;
}
.mat-header h2 em { font-style: normal; color: var(--royal-gold); }
.mat-header p {
  margin: 0 auto; max-width: 56ch;
  font-size: clamp(16px, 1.8vw, 19px); color: var(--white-70);
  text-wrap: pretty;
}

.tablets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(24px, 3vw, 32px);
}
@media (max-width: 920px) { .tablets { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (max-width: 540px) { .tablets { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 380px) { .tablets { grid-template-columns: 1fr; gap: 32px; max-width: 240px; margin: 0 auto; } }

.scribe-tablet { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stone {
  width: clamp(96px, 14vw, 168px);
  aspect-ratio: 1;
  border-radius: 22%;
  position: relative;
  margin-bottom: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cuneiform);
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform 600ms var(--ease-out-quart);
}
.scribe-tablet:hover .stone { transform: translateY(-4px) rotate(-1deg); }
.stone::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.stone::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 30% 12%, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 78% 92%, rgba(0, 0, 0, 0.30) 0%, transparent 60%);
  z-index: 2;
  mix-blend-mode: overlay;
}
.stone > .g {
  position: relative;
  z-index: 3;
  display: block;
  transform: translateY(0.04em);
  max-width: 90%;
  text-align: center;
}

/* Material variants */
.stone-clay {
  background:
    radial-gradient(ellipse at 25% 18%, #E8C18A 0%, transparent 55%),
    radial-gradient(ellipse at 80% 88%, #8A5E3A 0%, transparent 55%),
    linear-gradient(145deg, #D4A574 0%, #B88859 50%, #8a5e3a 100%);
  box-shadow:
    inset 0 6px 14px rgba(255, 240, 210, 0.20),
    inset 0 -10px 24px rgba(0, 0, 0, 0.32),
    0 22px 44px -12px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(180, 120, 70, 0.4);
  color: #5a3a18;
}
.stone-clay::before {
  background-image:
    linear-gradient(96deg,  transparent 28%, rgba(80, 45, 20, 0.18) 28.4%, transparent 28.8%),
    linear-gradient(112deg, transparent 56%, rgba(80, 45, 20, 0.15) 56.3%, transparent 56.6%),
    linear-gradient(64deg,  transparent 72%, rgba(80, 45, 20, 0.16) 72.3%, transparent 72.7%),
    radial-gradient(circle at 18% 72%, rgba(80, 45, 20, 0.10) 0%, transparent 14%),
    radial-gradient(circle at 80% 24%, rgba(80, 45, 20, 0.08) 0%, transparent 10%);
}
.stone-bronze {
  background:
    radial-gradient(ellipse at 25% 18%, #E5A55E 0%, transparent 55%),
    radial-gradient(ellipse at 80% 88%, #6d4314 0%, transparent 55%),
    linear-gradient(145deg, #CD7F32 0%, #A8651E 50%, #6d4314 100%);
  box-shadow:
    inset 0 6px 14px rgba(255, 220, 170, 0.22),
    inset 0 -10px 24px rgba(0, 0, 0, 0.38),
    0 22px 44px -12px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(120, 70, 25, 0.55);
  color: #2a1408;
}
.stone-bronze::before {
  background-image:
    radial-gradient(circle at 20% 28%, rgba(0, 0, 0, 0.14) 0%, transparent 3.5%),
    radial-gradient(circle at 62% 18%, rgba(0, 0, 0, 0.12) 0%, transparent 3%),
    radial-gradient(circle at 35% 68%, rgba(0, 0, 0, 0.14) 0%, transparent 3.5%),
    radial-gradient(circle at 82% 56%, rgba(0, 0, 0, 0.12) 0%, transparent 3.2%),
    radial-gradient(circle at 60% 86%, rgba(0, 0, 0, 0.14) 0%, transparent 3.5%),
    radial-gradient(circle at 18% 88%, rgba(255, 220, 170, 0.10) 0%, transparent 2.5%),
    radial-gradient(circle at 78% 32%, rgba(255, 220, 170, 0.12) 0%, transparent 2.8%),
    radial-gradient(circle at 45% 45%, rgba(255, 220, 170, 0.08) 0%, transparent 2.5%);
}
.stone-lapis {
  background:
    radial-gradient(ellipse at 25% 18%, #4A8AC5 0%, transparent 50%),
    radial-gradient(ellipse at 80% 88%, #102942 0%, transparent 55%),
    linear-gradient(145deg, #2A6FB0 0%, #26619C 50%, #163C66 100%);
  box-shadow:
    inset 0 6px 14px rgba(180, 220, 255, 0.20),
    inset 0 -10px 26px rgba(0, 0, 0, 0.55),
    0 22px 44px -12px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(20, 50, 90, 0.7);
  color: #f0c987;
}
.stone-lapis::before {
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255, 215, 0, 0.85) 0%, transparent 1.6%),
    radial-gradient(circle at 78% 18%, rgba(255, 215, 0, 0.7) 0%, transparent 1.4%),
    radial-gradient(circle at 32% 72%, rgba(220, 151, 80, 0.7) 0%, transparent 1.4%),
    radial-gradient(circle at 85% 65%, rgba(255, 215, 0, 0.65) 0%, transparent 1.5%),
    radial-gradient(circle at 55% 84%, rgba(255, 215, 0, 0.55) 0%, transparent 1.2%),
    radial-gradient(circle at 12% 55%, rgba(220, 151, 80, 0.6) 0%, transparent 1.4%),
    radial-gradient(circle at 70% 38%, rgba(255, 215, 0, 0.5) 0%, transparent 1.0%),
    radial-gradient(circle at 48% 22%, rgba(255, 215, 0, 0.45) 0%, transparent 1.0%),
    radial-gradient(circle at 28% 50%, rgba(220, 151, 80, 0.5) 0%, transparent 1.1%),
    linear-gradient(105deg, transparent 40%, rgba(220, 230, 255, 0.10) 40.4%, transparent 40.8%);
}
.stone-obsidian {
  background:
    radial-gradient(ellipse at 25% 16%, #8455B5 0%, transparent 42%),
    radial-gradient(ellipse at 78% 80%, #160828 0%, transparent 55%),
    linear-gradient(145deg, #4A2D7A 0%, #2D1B4E 70%, #100620 100%);
  box-shadow:
    inset 0 6px 18px rgba(200, 170, 240, 0.28),
    inset 0 -10px 26px rgba(0, 0, 0, 0.60),
    0 22px 44px -12px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(106, 63, 160, 0.5);
  color: #f0c987;
}
.stone-obsidian::before {
  background:
    radial-gradient(ellipse 70% 35% at 30% 18%, rgba(220, 200, 255, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 30% 60% at 78% 70%, rgba(168, 110, 220, 0.20) 0%, transparent 50%),
    conic-gradient(from 200deg at 50% 50%, transparent 0deg, rgba(220, 200, 255, 0.06) 60deg, transparent 120deg, transparent 360deg);
}
.stone-gold {
  background:
    radial-gradient(ellipse at 25% 18%, #FBD68F 0%, transparent 55%),
    radial-gradient(ellipse at 80% 88%, #8a5a26 0%, transparent 55%),
    linear-gradient(145deg, #F0B860 0%, #DC9750 50%, #95611f 100%);
  box-shadow:
    inset 0 6px 14px rgba(255, 240, 200, 0.32),
    inset 0 -10px 22px rgba(0, 0, 0, 0.38),
    0 22px 44px -10px rgba(220, 151, 80, 0.40),
    0 0 36px rgba(255, 215, 0, 0.22),
    0 0 0 1px rgba(255, 215, 0, 0.55);
  color: #4a2e08;
}
.stone-gold::before {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.22) 0%, transparent 4%),
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.16) 0%, transparent 3.5%),
    radial-gradient(circle at 40% 65%, rgba(0, 0, 0, 0.12) 0%, transparent 3.5%),
    radial-gradient(circle at 85% 60%, rgba(0, 0, 0, 0.10) 0%, transparent 3.5%),
    radial-gradient(circle at 60% 85%, rgba(255, 255, 255, 0.16) 0%, transparent 3.5%),
    radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.12) 0%, transparent 3%);
}
.stone > .g {
  text-shadow:
    0 -1.5px 1px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 240, 220, 0.15);
}
.stone-lapis > .g, .stone-obsidian > .g {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.5),
    0 -1px 0 rgba(255, 240, 200, 0.20);
}

.scribe-tablet h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scribe-tablet .role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--royal-gold);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.scribe-tablet p {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--white-50);
  line-height: 1.45;
  max-width: 22ch;
  text-wrap: pretty;
}

/* ─── 08-app-preview.css ─── */
/* ============================================================
   PLATE VI — The App (animated phone preview)
   ============================================================ */
section.app { padding: clamp(80px, 12vw, 140px) clamp(16px, 5vw, 24px); }
.app-inner { max-width: var(--container-wide); margin: 0 auto; }
.app-header { text-align: center; margin-bottom: clamp(48px, 8vw, 80px); }
.app-header .plate-no { margin-bottom: 18px; }
.app-header h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 72px);
  line-height: var(--leading-tight);
  color: var(--white);
  text-wrap: balance;
}
.app-header h2 em { font-style: normal; color: var(--royal-gold); }
.app-header p {
  margin: 0 auto; max-width: 52ch;
  font-size: clamp(16px, 1.8vw, 19px); color: var(--white-70);
  text-wrap: pretty;
}

.phone-preview {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: clamp(40px, 8vw, 96px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 40px;
}
@media (max-width: 880px) {
  .phone-preview { grid-template-columns: 1fr; gap: 56px; justify-items: center; }
}

.phone-frame {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(145deg, #2a2a2e 0%, #15151a 100%);
  box-shadow:
    0 0 0 1.5px rgba(220, 151, 80, 0.32),
    0 0 44px rgba(255, 215, 0, 0.10),
    inset 0 0 0 2px rgba(0, 0, 0, 0.5),
    0 40px 80px -16px rgba(0, 0, 0, 0.78);
  position: relative;
  animation: phoneFloat 8s ease-in-out infinite;
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-0.4deg); }
}
.phone-frame::before {
  content: ""; position: absolute;
  top: 20px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10;
}
.phone-screens {
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  background: var(--deep-night);
}
.phone-screen {
  position: absolute; inset: 0;
  opacity: 0;
  animation: phoneCycle 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: opacity, transform;
}
.phone-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.phone-screen-1 { animation-delay: 0s; }
.phone-screen-2 { animation-delay: 5s; }
.phone-screen-3 { animation-delay: 10s; }
@keyframes phoneCycle {
  0%   { opacity: 0; transform: scale(1.08); }
  3%   { opacity: 1; transform: scale(1.07); }
  30%  { opacity: 1; transform: scale(1.00); }
  33%  { opacity: 0; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.00); }
}
.phone-tap {
  position: absolute;
  width: 48px; height: 48px;
  top: 64%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(220, 151, 80, 0.35);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  animation: tapPulse 15s infinite;
}
.phone-tap::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(220, 151, 80, 0.6);
  animation: tapRing 15s infinite;
}
@keyframes tapPulse {
  0%, 14% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  22% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 0; }
}
@keyframes tapRing {
  0%, 14%, 100% { opacity: 0; transform: scale(0.4); }
  15% { opacity: 1; transform: scale(0.6); }
  24% { opacity: 0; transform: scale(2); }
}

.phone-captions {
  position: relative;
  min-height: clamp(240px, 30vh, 280px);
  width: 100%;
}
.phone-cap {
  position: absolute; inset: 0;
  opacity: 0;
  animation: capCycle 15s ease infinite;
}
.phone-cap-1 { animation-delay: 0s; }
.phone-cap-2 { animation-delay: 5s; }
.phone-cap-3 { animation-delay: 10s; }
@keyframes capCycle {
  0%   { opacity: 0; transform: translateY(8px); }
  4%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; }
}
.phone-cap .num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--royal-gold);
  margin-bottom: 16px;
}
.phone-cap h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: var(--track-tight);
  color: var(--white);
  line-height: 1.2;
  text-wrap: balance;
}
.phone-cap h3 em { font-style: normal; color: var(--royal-gold); }
.phone-cap p {
  margin: 0;
  font-size: clamp(15px, 1.7vw, 17px);
  color: var(--white-85);
  line-height: var(--leading-relaxed);
  max-width: 38ch;
  text-wrap: pretty;
}
@media (max-width: 880px) {
  .phone-captions { text-align: center; }
  .phone-cap p { margin-left: auto; margin-right: auto; }
}

.phone-dots {
  position: absolute;
  left: 0; bottom: 0;
  display: flex; gap: 10px;
}
@media (max-width: 880px) {
  .phone-dots { left: 50%; transform: translateX(-50%); justify-content: center; }
}
.phone-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  animation: dotCycle 15s linear infinite;
}
.phone-dot:nth-child(1) { animation-delay: 0s; }
.phone-dot:nth-child(2) { animation-delay: 5s; }
.phone-dot:nth-child(3) { animation-delay: 10s; }
@keyframes dotCycle {
  0%, 33% { background: var(--royal-gold); width: 22px; border-radius: 4px; }
  34%, 100% { background: rgba(255, 255, 255, 0.18); width: 8px; border-radius: 50%; }
}

/* ─── 09-closer.css ─── */
/* ============================================================
   CLOSER — final CTA + tagline
   ============================================================ */
section.closer {
  padding: clamp(100px, 14vw, 160px) clamp(16px, 5vw, 24px) clamp(64px, 10vw, 100px);
  text-align: center;
  position: relative;
  background: var(--abyss);
  overflow: hidden;
}
.closer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(220, 151, 80, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.closer-inner { position: relative; max-width: 760px; margin: 0 auto; }
.closer .strip {
  font-family: var(--font-cuneiform);
  font-size: clamp(16px, 2vw, 22px);
  color: var(--royal-gold);
  letter-spacing: 0.2em;
  margin-bottom: clamp(24px, 5vw, 36px);
  opacity: 0.65;
}
.closer h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 6.2vw, 92px);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--white);
  text-wrap: balance;
}
.closer h2 em { font-style: normal; color: var(--royal-gold); }
.closer .tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--light-gold);
  letter-spacing: 0.06em;
  margin-bottom: clamp(36px, 6vw, 56px);
}
.closer .ctas {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 32px;
}
/* The .cta-pill base styles live in chrome/08-buttons.css; closer just sets layout */
.closer .cta-pill {
  /* Slightly larger on the closer for emphasis */
  padding: 16px 30px;
  font-size: clamp(15px, 1.7vw, 17px);
}
.closer .fine {
  font-size: 13px;
  color: var(--white-50);
  letter-spacing: 0.04em;
}

/* On very narrow screens stack the CTAs full width for thumb access */
@media (max-width: 480px) {
  .closer .ctas { flex-direction: column; gap: 12px; }
  .closer .cta-pill { width: 100%; justify-content: center; }
}

/* ─── 99-reduce-motion.css ─── */
/* ============================================================
   Landing-specific reduce-motion overrides
   (chrome's reduce-motion is in chrome/99-a11y.css)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sign, .sign .meta, .hero-name, .scroll-hint,
  .wedge, .phone-frame, .phone-screen, .phone-cap,
  .phone-dot, .phone-tap, .plate-zero .pz-icon {
    animation: none !important;
    opacity: 1 !important;
  }
  /* When motion is off, show all phone screens stacked instead of cycling */
  .phone-screen-1 { opacity: 1; }
  .phone-cap-1 { opacity: 1; }
}