/* ============================================================
   TYPOGRAPHY - type is the architecture.
   Colossal serif vs. minuscule tracked caps; nothing in between
   without a reason.
   ============================================================ */

/* One-word chapter titles ("Silence.") - type at the scale of weather */
.t-colossal {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-colossal);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Chapter headlines - statements, not slogans */
.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.t-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-headline);
  line-height: 1.2;
  color: var(--ink);
}

/* Pull-quotes - italic, crossing images */
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-quote);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Whisper - the italic sub-voice under colossal words */
.t-whisper {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  line-height: 1.35;
  color: var(--ink-soft);
}
.t-whisper--bold {
  font-weight: 600;
}

/* Narration - film voice-over prose */
.t-narration {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.15vw, 1.75rem);
  line-height: 1.45;
  max-width: 34em;
  color: var(--ink-soft);
}
.text-plain {
  font-style: normal;
}
.text-strong {
  font-weight: 600;
}

/* Gallery label - tiny, tracked, uppercase. Captions, nav, buttons. */
.t-label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--type-label);
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Ghost - the chapter's roman numeral drifting behind content */
.t-ghost {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14rem, 34vw, 30rem);
  line-height: 1;
  color: var(--ghost);
  user-select: none;
}

/* The wordmark - the brand is typography */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.875rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* Hairline-underlined invitation link ("Begin your story ⎯") */
.thread {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: clamp(0.875rem, 1vw, 1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 0.5rem;
}
.thread::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--ink);
  transition: width var(--dur-whisper) var(--glide);
}
.thread:hover::after,
.thread:focus-visible::after {
  width: 5.5rem;
}

/* Service whispers - the offering, discovered not presented */
.whisper-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0;
  align-items: center;
}
.whisper-list li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  color: var(--ink-soft);
}
.whisper-list li + li::before {
  content: "·";
  margin-inline: 1.25rem;
  color: var(--hairline);
}