/* ============================================================
   THE LETTERS
   An editorial framework. Deep midnight, champagne, ivory.
   Set in Cormorant Garamond (display), Instrument Serif
   (italic moments), DM Sans (utility), with a quiet grain.
   ============================================================ */

:root {
  /* Palette */
  --midnight: #0d1626;
  --midnight-deep: #070d1a;
  --midnight-soft: #16223a;
  --ivory: #f4ece0;
  --ivory-dim: #d9d1c5;
  --ivory-muted: #8b8c95;
  --champagne: #c8a974;
  --champagne-soft: #8e774f;
  --champagne-glow: rgba(200, 169, 116, 0.16);
  --rule: rgba(244, 236, 224, 0.22);
  --rule-soft: rgba(244, 236, 224, 0.12);

  /* Type */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --italic: "Instrument Serif", "Cormorant Garamond", serif;
  --sans: "DM Sans", system-ui, sans-serif;

  /* Space */
  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--midnight);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ============================================================
   ATMOSPHERE
   A radial champagne glow plus a film of grain. Sets the mood.
   ============================================================ */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 110vw;
  height: 110vh;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 55% 42% at 50% 16%, rgba(200, 169, 116, 0.22), transparent 62%),
    radial-gradient(ellipse 60% 50% at 22% 30%, rgba(200, 169, 116, 0.10), transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 72%, rgba(120, 150, 210, 0.10), transparent 62%);
  filter: blur(48px);
}
.atmosphere-noise {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   MASTHEAD
   Like the top of a magazine cover.
   ============================================================ */
.masthead {
  position: relative;
  z-index: 2;
  padding: 24px var(--pad) 22px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 24px;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.masthead-title {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ivory);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
}
.masthead-imprint {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 12px;
}
.masthead-imprint a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 169, 116, 0.45);
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.masthead-imprint a:hover {
  border-bottom-color: var(--champagne);
  color: var(--ivory);
}
.masthead-imprint-arrow {
  width: 9px;
  height: 9px;
  opacity: 0.85;
  transition: transform 0.25s ease;
}
.masthead-imprint a:hover .masthead-imprint-arrow {
  transform: translate(2px, -2px);
}
.masthead-the {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 30px);
  color: var(--ivory);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  line-height: 1;
  align-self: flex-start;
  position: relative;
  top: 0.5em;
}
.masthead-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(60px, 9vw, 124px);
  line-height: 0.86;
  letter-spacing: 0;
  font-feature-settings: "kern", "liga", "calt", "swsh";
  background: linear-gradient(
    176deg,
    #f6e9cf 0%,
    var(--champagne) 52%,
    #b18f56 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--champagne); /* fallback */
  filter: drop-shadow(0 4px 30px rgba(200, 169, 116, 0.30));
  padding-bottom: 0.06em;
}
.masthead-tagline {
  font-family: var(--italic);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--ivory-dim);
  margin-top: 16px;
  letter-spacing: 0.005em;
}
.masthead-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}
.flourish-line {
  display: block;
  width: clamp(40px, 8vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne-soft), var(--champagne));
}
.masthead-flourish .flourish-line:last-child {
  background: linear-gradient(90deg, var(--champagne), var(--champagne-soft), transparent);
}
.flourish-mark {
  color: var(--champagne);
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(200, 169, 116, 0.4));
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 52px) var(--pad);
}
.view {
  animation: fade 0.6s ease forwards;
}
@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
[hidden] { display: none !important; }

/* Hide the closing and colophon blocks while letters are streaming in.
   When revealed (the is-hidden class is removed), they fade and rise in. */
.closing.is-hidden,
.colophon.is-hidden {
  display: none;
}
.closing,
.colophon {
  animation: result-block-rise 0.6s ease;
}
@keyframes result-block-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FORM
   Two-column editorial layout. Aside is letter-from-the-editor.
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 880px) {
  .form-grid { grid-template-columns: 1fr; gap: 48px; }
}

.form-aside {
  position: sticky;
  top: 40px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.aside-eyebrow {
  font-family: var(--italic);
  font-style: italic;
  font-size: 15px;
  color: var(--champagne);
  margin: 16px 0 16px;
}
.aside-body {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ivory-dim);
  margin: 0 0 24px 0;
}
.aside-signature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  margin: 0;
}
.signature-name {
  font-family: var(--italic);
  font-style: italic;
  font-size: 18px;
  color: var(--ivory);
  letter-spacing: 0;
  text-transform: none;
}
.signature-detail { font-size: 11px; }

.form {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.field {
  position: relative;
}
.field-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.field-num {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--champagne);
}
.field-label {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ivory);
}
.field-optional {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.55em;
  color: var(--ivory-muted);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 6px;
}
.field-hint {
  font-family: var(--italic);
  font-style: italic;
  font-size: 16px;
  color: var(--ivory-dim);
  margin: 0 0 20px 0;
  max-width: 540px;
}

/* Text input */
input[type="text"] {
  width: 100%;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  letter-spacing: 0.02em;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 4px 0 16px;
  color: var(--ivory);
  outline: none;
  transition: border-color 0.3s ease;
  text-transform: lowercase;
}
input[type="text"]::placeholder {
  color: rgba(244, 236, 224, 0.42);
  font-style: italic;
  font-family: var(--italic);
}
input[type="text"]:focus {
  border-color: var(--champagne);
}
.field-aux {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  margin-top: 14px;
}

/* Stage list (radio rows) */
.stage-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-soft);
}
.stage-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: padding 0.2s ease;
}
.stage-row:hover { padding-left: 12px; }
.stage-row input { position: absolute; opacity: 0; pointer-events: none; }
.stage-row-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stage-row-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ivory);
  transition: color 0.2s ease;
}
.stage-row-body {
  font-family: var(--italic);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ivory-muted);
}
.stage-row-mark {
  width: 14px;
  height: 14px;
  border: 1px solid var(--ivory-muted);
  border-radius: 50%;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.stage-row input:checked ~ .stage-row-mark {
  background: var(--champagne);
  border-color: var(--champagne);
  box-shadow: 0 0 0 4px var(--champagne-glow);
}
.stage-row input:checked ~ .stage-row-inner .stage-row-title {
  color: var(--champagne);
  font-style: italic;
  font-family: var(--italic);
}

/* Mode grid */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.mode-card {
  cursor: pointer;
  position: relative;
}
.mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.mode-card-inner {
  padding: 22px 20px;
  border: 1px solid var(--rule);
  background: rgba(22, 25, 34, 0.4);
  transition: all 0.25s ease;
  height: 100%;
  position: relative;
}
.mode-card-inner::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ivory-muted);
  transition: all 0.25s ease;
}
.mode-card:hover .mode-card-inner {
  background: rgba(22, 25, 34, 0.7);
  border-color: var(--champagne-soft);
}
.mode-card input:checked ~ .mode-card-inner {
  border-color: var(--champagne);
  background: rgba(200, 169, 116, 0.05);
}
.mode-card input:checked ~ .mode-card-inner::before {
  background: var(--champagne);
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px var(--champagne-glow);
}
.mode-card-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ivory);
  margin-bottom: 6px;
}
.mode-card:hover .mode-card-title,
.mode-card input:checked ~ .mode-card-inner .mode-card-title {
  font-family: var(--italic);
  font-style: italic;
}
.mode-card-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ivory-muted);
  padding-right: 18px;
}

/* Switch */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 44px;
  height: 24px;
  border: 1px solid var(--ivory-muted);
  background: transparent;
  border-radius: 999px;
  position: relative;
  transition: all 0.25s ease;
}
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--ivory-muted);
  border-radius: 50%;
  transition: all 0.25s ease;
}
.switch input:checked + .switch-track {
  background: var(--champagne);
  border-color: var(--champagne);
}
.switch input:checked + .switch-track .switch-thumb {
  background: var(--midnight);
  transform: translateX(20px);
}
.switch-label {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ivory);
}

.why-wrap { margin-top: 18px; }
textarea {
  width: 100%;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.5;
  background: rgba(22, 25, 34, 0.5);
  color: var(--ivory);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  resize: vertical;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
textarea::placeholder {
  font-family: var(--italic);
  font-style: italic;
  color: var(--ivory-muted);
}
textarea:focus {
  border-color: var(--champagne);
  background: rgba(22, 25, 34, 0.8);
}

/* Submit */
.form-submit {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
  background: var(--champagne);
  color: var(--midnight);
  border: none;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivory);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary-arrow {
  display: flex;
  width: 24px;
  height: 12px;
  transition: transform 0.3s ease;
}
.btn-primary:hover .btn-primary-arrow { transform: translateX(4px); }
.form-submit-aux {
  font-family: var(--italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ivory-dim);
}

/* ============================================================
   LOADING
   ============================================================ */
.view-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-inner {
  text-align: center;
  max-width: 520px;
}
.loading-mark {
  font-family: var(--display);
  font-size: 96px;
  line-height: 1;
  color: var(--champagne);
  margin-bottom: 32px;
  display: inline-block;
  position: relative;
}
.loading-glyph {
  display: inline-block;
  animation: glyph-breath 2.4s ease-in-out infinite;
}
@keyframes glyph-breath {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1); }
}
.loading-eyebrow {
  font-family: var(--italic);
  font-style: italic;
  color: var(--champagne);
  font-size: 15px;
  margin-bottom: 12px;
}
.loading-title {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 16px 0;
  color: var(--ivory);
}
.loading-msg {
  font-family: var(--italic);
  font-style: italic;
  font-size: 17px;
  color: var(--ivory-dim);
  margin: 0;
  min-height: 1.5em;
  transition: opacity 0.4s ease;
}

/* ============================================================
   RESULT - EDITION HEADER
   ============================================================ */
.edition-header {
  margin-bottom: clamp(48px, 7vw, 96px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.edition-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.edition-dot { color: var(--champagne); }
.edition-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 14vw, 192px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: 0 0 20px 0;
  color: var(--ivory);
  text-transform: lowercase;
}
.edition-deck {
  font-family: var(--italic);
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--ivory-dim);
  margin: 0 0 32px 0;
}
.edition-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: transparent;
  color: var(--ivory-dim);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-ghost:hover {
  border-color: var(--champagne);
  color: var(--champagne);
  background: rgba(200, 169, 116, 0.04);
}
.btn-ghost:disabled,
.btn-ghost[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-ghost:disabled:hover,
.btn-ghost[disabled]:hover {
  border-color: var(--rule);
  color: var(--ivory-dim);
  background: transparent;
}
.btn-ghost svg { opacity: 0.7; }

/* Mobile-only note explaining the zip download behavior */
.edition-actions-note {
  margin-top: 14px;
  font-family: var(--italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ivory-dim);
  text-align: center;
}

/* ============================================================
   LETTERS
   Each letter is a magazine spread.
   ============================================================ */
.letters {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.letter-spread {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(48px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  animation: spread-rise 0.6s ease forwards;
}
@media (max-width: 760px) {
  .letter-spread {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 56px 0;
  }
}
@keyframes spread-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.letter-spread:last-child { border-bottom: none; }

.letter-display {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
}
.letter-display-meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  margin-bottom: 16px;
}
.letter-glyph {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(140px, 22vw, 280px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--ivory);
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}
.letter-glyph.why-letter {
  color: var(--champagne);
  font-style: italic;
  font-family: var(--italic);
  font-weight: 400;
}
.letter-glyph::after {
  content: "";
  position: absolute;
  bottom: 0.08em;
  left: 0;
  width: 38px;
  height: 1px;
  background: var(--champagne);
  opacity: 0.6;
}
.letter-why-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--italic);
  font-style: italic;
  font-size: 14px;
  color: var(--champagne);
}
.letter-why-mark::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--champagne);
}

.letter-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.letter-word {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 24px 0;
  color: var(--champagne);
}
.letter-principle {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  font-weight: 400;
  margin: 0 0 24px 0;
  color: var(--ivory);
  max-width: 60ch;
}
.letter-principle::first-letter {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05em;
  color: var(--champagne);
}
.letter-creative-note {
  font-family: var(--italic);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ivory-muted);
  padding: 12px 0 12px 20px;
  border-left: 1px solid var(--champagne);
  margin: 0 0 28px 0;
  max-width: 56ch;
}
.letter-pair {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.letter-pair:last-child { border-bottom: 1px solid var(--rule-soft); }
.letter-pair-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 500;
}
.letter-pair-action {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ivory);
}
.letter-pair-mantra {
  font-family: var(--italic);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ivory);
  letter-spacing: -0.005em;
}
.letter-pair-mantra::before { content: "“"; color: var(--champagne); margin-right: 2px; }
.letter-pair-mantra::after { content: "”"; color: var(--champagne); margin-left: 2px; }

/* Scroll indicator (shown after result loads, hidden on scroll) */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.scroll-indicator-line {
  width: 1px;
  height: 32px;
  background: var(--champagne);
  opacity: 0.5;
}
.scroll-indicator-caption {
  font-family: var(--italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ivory-dim);
  letter-spacing: 0.005em;
}
.scroll-indicator-chevron {
  width: 20px;
  height: 10px;
  color: var(--champagne);
  animation: chevron-bounce 2s ease-in-out infinite;
}
@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* While the framework is streaming in, make the indicator feel alive */
.scroll-indicator.is-streaming .scroll-indicator-caption {
  color: var(--champagne);
}
.scroll-indicator.is-streaming .scroll-indicator-line {
  opacity: 1;
  animation: line-pulse 1.6s ease-in-out infinite;
}
.scroll-indicator.is-streaming .scroll-indicator-chevron {
  animation: chevron-bounce 1.2s ease-in-out infinite;
}
@keyframes line-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Redo button */
.letter-redo-row {
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-redo,
.btn-save-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ivory-muted);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-redo:hover,
.btn-save-card:hover {
  color: var(--champagne);
  border-color: var(--champagne);
  background: rgba(200, 169, 116, 0.04);
}
.btn-redo:disabled,
.btn-save-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-redo svg,
.btn-save-card svg {
  opacity: 0.7;
}

/* While regenerating */
.letter-spread.is-regenerating .letter-body {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.letter-spread.is-regenerating .btn-redo svg {
  animation: redo-spin 1s linear infinite;
}
@keyframes redo-spin {
  to { transform: rotate(-360deg); }
}

/* Brief highlight after regeneration */
.letter-spread.just-regenerated {
  animation: just-regenerated 1.2s ease;
}
@keyframes just-regenerated {
  0% { background: rgba(200, 169, 116, 0.10); }
  100% { background: transparent; }
}

/* Smooth entrance for letters that arrive via streaming */
.letter-spread.letter-streaming-in {
  opacity: 0;
  transform: translateY(20px);
}
.letter-spread:not(.letter-streaming-in) {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* "Composing" placeholder shown before the first letter arrives */
.letter-composing {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 80px 0;
}
.letter-composing-dot {
  width: 10px;
  height: 10px;
  background: var(--champagne);
  border-radius: 50%;
  opacity: 0.4;
  animation: composing-pulse 1.4s ease-in-out infinite;
}
.letter-composing-dot:nth-child(2) { animation-delay: 0.2s; }
.letter-composing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes composing-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing {
  margin: clamp(48px, 7vw, 88px) 0 32px;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.closing-rule {
  width: 60px;
  height: 1px;
  background: var(--champagne);
  margin: 0 auto 40px;
}
.closing-text {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ivory);
  margin: 0 0 32px 0;
}
.closing-signature {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}

.colophon {
  margin-top: 80px;
  padding: 32px 0 0;
  border-top: 1px solid var(--rule);
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.colophon-title {
  font-family: var(--italic);
  font-style: italic;
  font-size: 15px;
  color: var(--champagne);
  margin-bottom: 12px;
}
.colophon p {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ivory-dim);
  margin: 0;
}
.colophon-action-intro {
  margin-top: 28px !important;
  font-family: var(--italic) !important;
  font-style: italic !important;
  font-size: 15px !important;
  color: var(--champagne) !important;
}
.colophon-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* ============================================================
   ERROR
   ============================================================ */
.view-error {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-inner {
  text-align: center;
  max-width: 500px;
}
.error-eyebrow {
  font-family: var(--italic);
  font-style: italic;
  font-size: 16px;
  color: var(--champagne);
  margin-bottom: 16px;
}
.error-msg {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ivory);
  margin: 0 0 32px 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  z-index: 2;
  padding: 24px var(--pad);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-left {
  flex: 0 1 auto;
}
.footer-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
}
.footer-right span {
  display: inline-block;
}
.footer-mark {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--rule);
}

/* On narrower viewports, stack and center the footer rows */
@media (max-width: 640px) {
  .footer-inner {
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
  .footer-left,
  .footer-right {
    flex: 0 0 100%;
    justify-content: center;
  }
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--ivory);
  color: var(--midnight);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 22px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   CARD STAGE (offscreen render target)
   ============================================================ */
#cardStage {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1080px;
  pointer-events: none;
}

/* Letter card for image export (1080 × 1350, IG portrait) */
.export-card {
  width: 1080px;
  height: 1350px;
  background: var(--midnight);
  color: var(--ivory);
  padding: 90px 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  font-family: var(--sans);
}
.export-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 25% 15%, rgba(200, 169, 116, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(140, 165, 220, 0.10), transparent 60%);
  pointer-events: none;
}
.export-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.export-card > * { position: relative; z-index: 1; }

.export-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.export-card-top-name {
  font-family: var(--italic);
  font-style: italic;
  text-transform: lowercase;
  font-size: 24px;
  letter-spacing: 0;
  color: var(--champagne);
}

.export-card-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  justify-content: center;
  padding: 48px 0;
}
.export-card-letter {
  font-family: var(--display);
  font-weight: 300;
  font-size: 360px;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--ivory);
  text-transform: uppercase;
}
.export-card-letter.why { color: var(--champagne); font-family: var(--italic); font-style: italic; font-weight: 400; }
.export-card-word {
  font-family: var(--italic);
  font-style: italic;
  font-size: 64px;
  font-weight: 400;
  color: var(--champagne);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 12px;
}
.export-card-principle {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.45;
  color: var(--ivory);
  max-width: 800px;
}

.export-card-mantra {
  font-family: var(--italic);
  font-style: italic;
  font-size: 34px;
  color: var(--ivory);
  line-height: 1.4;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.export-card-mantra::before { content: "“"; color: var(--champagne); }
.export-card-mantra::after { content: "”"; color: var(--champagne); }

.export-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   THE LETTERS — additions for the discipleship edition
   Audience toggle, scripture verse blocks, card verses.
   Built on the same midnight + champagne editorial palette.
   ============================================================ */

/* ---- Audience toggle (two large choices) ---- */
.audience-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 620px) {
  .audience-toggle { grid-template-columns: 1fr; }
}
.audience-option { position: relative; cursor: pointer; }
.audience-option input { position: absolute; opacity: 0; pointer-events: none; }
.audience-option-inner {
  position: relative;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  background: rgba(244, 236, 224, 0.015);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.audience-option-inner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--champagne);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.audience-option:hover .audience-option-inner {
  border-color: var(--rule);
  background: rgba(244, 236, 224, 0.04);
}
.audience-option input:checked ~ .audience-option-inner {
  border-color: var(--champagne-soft);
  background: var(--champagne-glow);
}
.audience-option input:checked ~ .audience-option-inner::before { opacity: 1; }
.audience-option-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ivory-dim);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  transition: color 0.3s ease;
}
.audience-option:hover .audience-option-title,
.audience-option input:checked ~ .audience-option-inner .audience-option-title {
  color: var(--ivory);
}
.audience-option-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ivory-muted);
}

/* ---- Scripture verse block inside a letter spread ---- */
.letter-verse {
  position: relative;
  margin-top: 30px;
  padding: 26px 30px 24px 34px;
  border-left: 2px solid var(--champagne);
  background: linear-gradient(110deg, rgba(200, 169, 116, 0.08), rgba(200, 169, 116, 0.02));
  border-radius: 0 3px 3px 0;
}
.letter-verse::before {
  content: "“";
  position: absolute;
  top: 0.12em;
  left: 0.16em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
  color: var(--champagne);
  opacity: 0.3;
}
.letter-verse-text {
  font-family: var(--italic);
  font-style: italic;
  font-size: 23px;
  line-height: 1.5;
  color: var(--ivory);
  font-weight: 400;
  position: relative;
}
.letter-verse-ref {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* The "to sit with" reflection reuses .letter-pair styling, but we
   soften the quotation marks since reflection is not a mantra. */
.letter-verse + .letter-pair { border-top: 1px solid var(--rule-soft); margin-top: 22px; }

/* ---- Verse block on the export card ---- */
.export-card-verse {
  padding: 32px 0 0;
  border-top: 1px solid var(--rule);
}
.export-card-verse-text {
  font-family: var(--display);
  font-style: normal;
  font-size: 38px;
  line-height: 1.4;
  color: var(--ivory);
}
.export-card-verse-text::before { content: "“"; color: var(--champagne); }
.export-card-verse-text::after { content: "”"; color: var(--champagne); }
.export-card-verse-ref {
  margin-top: 22px;
  font-size: 18px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* Card encouragement is a touch smaller than the old principle so the
   verse has room to breathe. */
.export-card-principle {
  font-size: 27px;
  line-height: 1.5;
  color: var(--ivory-dim);
}

/* ============================================================
   THE LETTERS — v2: fork, guided flow, longer letters, lenses,
   memorial, and redesigned highlight cards.
   ============================================================ */

/* ---- Welcome / fork ---- */
.view-welcome { max-width: 880px; margin: 0 auto; }
.welcome-inner { text-align: center; padding: 0; }
.welcome-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 14px;
}
.welcome-question {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ivory);
  margin: 0 0 14px;
}
.welcome-sub {
  font-family: var(--display);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--ivory-dim);
  max-width: 52ch;
  margin: 0 auto 30px;
}
.fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}
@media (max-width: 680px) { .fork { grid-template-columns: 1fr; } }
.fork-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 38px 34px 32px;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(200, 169, 116, 0.20), transparent 68%),
    linear-gradient(165deg, rgba(200, 169, 116, 0.06), rgba(244, 236, 224, 0.015));
  border: 1px solid rgba(200, 169, 116, 0.28);
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(244, 236, 224, 0.06), 0 8px 30px rgba(0, 0, 0, 0.18);
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}
/* Memorial card runs cooler and quieter, a different door. */
.fork-card-memorial {
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(120, 150, 210, 0.22), transparent 68%),
    linear-gradient(165deg, rgba(150, 175, 220, 0.07), rgba(244, 236, 224, 0.012));
  border-color: rgba(140, 165, 215, 0.3);
}
.fork-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--champagne);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.fork-card:hover {
  border-color: var(--champagne-soft);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(244, 236, 224, 0.08), 0 14px 40px rgba(0, 0, 0, 0.28);
}
.fork-card[data-path="encouragement"]:hover {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200, 169, 116, 0.20), transparent 70%),
    linear-gradient(165deg, rgba(200, 169, 116, 0.10), rgba(244, 236, 224, 0.02));
}
.fork-card-memorial:hover {
  border-color: rgba(120, 150, 210, 0.5);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(120, 150, 210, 0.22), transparent 70%),
    linear-gradient(165deg, rgba(150, 175, 220, 0.10), rgba(244, 236, 224, 0.02));
}
.fork-card-memorial::before { background: rgba(150, 175, 220, 0.8); }
.fork-card:hover::before { opacity: 1; }
.fork-card-glyph {
  font-family: var(--italic);
  font-size: 34px;
  color: var(--champagne);
  line-height: 1;
}
.fork-card-memorial .fork-card-glyph { font-size: 30px; color: #9fb3da; }
.fork-card-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ivory);
}
.fork-card-body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ivory-dim);
}
.fork-card-memorial .fork-card-go { color: #9fb3da; }
.fork-card-go {
  margin-top: 6px;
  color: var(--champagne);
  width: 30px;
  opacity: 0.6;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.fork-card-go svg { width: 100%; display: block; }
.fork-card:hover .fork-card-go { opacity: 1; transform: translateX(4px); }

/* ---- Guided flow shell ---- */
.view-flow { max-width: 760px; margin: 0 auto; }
.flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}
.flow-back-to-start,
.flow-showall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--ivory-muted);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 0.25s ease;
}
.flow-back-to-start:hover,
.flow-showall:hover { color: var(--champagne); }
.flow-progress {
  display: flex;
  gap: 7px;
  flex: 1;
  justify-content: center;
}
.flow-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
  transition: background 0.3s ease, transform 0.3s ease;
}
.flow-progress-dot.is-active { background: var(--champagne); transform: scale(1.3); }
.flow-progress-dot.is-done { background: var(--champagne-soft); }

/* steps: one shown at a time unless .show-all on the form */
.flow-step { display: none; }
.flow-step.is-current { display: block; animation: stepIn 0.45s ease both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.flow-form.show-all .flow-step { display: block; margin-bottom: 56px; animation: none; }
.flow-form.show-all .flow-nav { display: none; }
.flow-form.show-all .flow-submit { display: inline-flex !important; }
.flow-form.show-all #flowSubmitAux { display: block !important; }

.flow-step-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 14px;
}
.flow-step-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ivory);
  margin: 0 0 14px;
}
.flow-step-instruction {
  font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--ivory-dim);
  max-width: 54ch;
  margin: 0 0 28px;
}

/* ---- Choice rows (posture, lens) ---- */
.choice-list { display: flex; flex-direction: column; gap: 12px; }
.choice-row { position: relative; cursor: pointer; display: block; }
.choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.choice-row-inner {
  position: relative;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  background: rgba(244, 236, 224, 0.015);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.choice-row-inner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--champagne);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.choice-row:hover .choice-row-inner { background: rgba(244, 236, 224, 0.04); }
.choice-row input:checked ~ .choice-row-inner {
  border-color: var(--champagne-soft);
  background: var(--champagne-glow);
}
.choice-row input:checked ~ .choice-row-inner::before { opacity: 1; }
.choice-row-title {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  color: var(--ivory-dim);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}
.choice-row:hover .choice-row-title,
.choice-row input:checked ~ .choice-row-inner .choice-row-title { color: var(--ivory); }
.choice-row-body {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ivory-muted);
}

/* lens selector marked as optional */
.flow-optional-tag {
  font-family: var(--italic);
  font-style: italic;
  font-size: 0.62em;
  color: var(--ivory-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 10px;
  vertical-align: middle;
}

/* ---- Text inputs in the flow ---- */
.flow-field { margin-bottom: 4px; }
.flow-input,
.flow-textarea {
  width: 100%;
  background: rgba(244, 236, 224, 0.03);
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ivory);
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 30px);
  padding: 14px 4px;
  outline: none;
  transition: border-color 0.3s ease;
}
.flow-textarea {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  resize: vertical;
  min-height: 84px;
  border: 1px solid var(--rule);
  padding: 14px 16px;
  font-family: var(--display);
}
.flow-input:focus,
.flow-textarea:focus { border-color: var(--champagne); }
.flow-input::placeholder,
.flow-textarea::placeholder { color: var(--ivory-muted); opacity: 0.6; }
.flow-field-aux {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ivory-muted);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
.flow-sub-field { margin-top: 28px; }
.flow-sub-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 10px;
}

/* switch reused for the personal note toggle */
.flow-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ivory-dim);
}
.flow-switch input { position: absolute; opacity: 0; pointer-events: none; }
.flow-switch-track {
  width: 44px; height: 24px;
  border-radius: 999px;
  background: var(--rule);
  position: relative;
  transition: background 0.3s ease;
  flex-shrink: 0;
}
.flow-switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ivory-dim);
  transition: transform 0.3s ease, background 0.3s ease;
}
.flow-switch input:checked ~ .flow-switch-track { background: var(--champagne-soft); }
.flow-switch input:checked ~ .flow-switch-track .flow-switch-thumb {
  transform: translateX(20px);
  background: var(--ivory);
}

/* ---- Flow nav ---- */
.flow-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
}
.flow-prev { margin-right: auto; }
.flow-prev.is-hidden { visibility: hidden; }

/* ---- Longer letter body (flowing prose, may have paragraphs) ---- */
.letter-body-text {
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.62;
  font-weight: 400;
  color: var(--ivory);
  margin: 0 0 22px 0;
  max-width: 64ch;
}
.letter-body-text p { margin: 0 0 0.9em 0; }
.letter-body-text p:last-child { margin-bottom: 0; }
.letter-body-text p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  margin: 0.06em 0.1em -0.04em 0;
  color: var(--champagne);
  background: linear-gradient(176deg, var(--champagne), var(--champagne-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Memorial opening line in the result header ---- */
.edition-opening {
  font-family: var(--italic);
  font-style: italic;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--ivory-dim);
  max-width: 60ch;
  margin: 18px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
}

/* ---- Redesigned highlight card (encouragement, per letter) ---- */
/* Reuses .export-card sizing; the body now shows the distilled cardLine. */
.export-card-cardline {
  font-family: var(--display);
  font-size: 40px;
  line-height: 1.4;
  color: var(--ivory);
  max-width: 820px;
}
.export-card-verse-quiet {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.export-card-verse-quiet .export-card-verse-text {
  font-size: 30px;
}

/* ---- Memorial tribute card (single, name large at top) ---- */
.tribute-card {
  width: 1080px;
  height: 1350px;
  background: var(--midnight);
  color: var(--ivory);
  padding: 110px 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  font-family: var(--sans);
}
.tribute-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 12%, rgba(200, 169, 116, 0.18), transparent 62%),
    radial-gradient(ellipse 50% 40% at 50% 92%, rgba(140, 165, 220, 0.08), transparent 60%);
  pointer-events: none;
}
.tribute-card::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5; mix-blend-mode: overlay; pointer-events: none;
}
.tribute-card > * { position: relative; z-index: 1; }
.tribute-top {
  text-align: center;
}
.tribute-eyebrow {
  font-size: 16px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 36px;
}
.tribute-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 150px;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--ivory);
}
.tribute-dates {
  font-family: var(--italic);
  font-style: italic;
  font-size: 30px;
  color: var(--ivory-muted);
  margin-top: 24px;
}
.tribute-middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 30px 0;
}
.tribute-line {
  font-family: var(--display);
  font-size: 46px;
  line-height: 1.4;
  color: var(--ivory);
  max-width: 780px;
  margin: 0 auto;
}
.tribute-verse {
  font-family: var(--italic);
  font-style: italic;
  font-size: 30px;
  line-height: 1.45;
  color: var(--ivory-dim);
  max-width: 720px;
  margin: 0 auto;
}
.tribute-verse-ref {
  font-family: var(--sans);
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-top: 20px;
}
.tribute-bottom {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   ENTRANCE — gentle staggered fade-and-rise on first load.
   Calm, not flashy: the page opens rather than snaps in.
   ============================================================ */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glowIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.atmosphere-glow { animation: glowIn 1.6s ease both; }

.masthead-row    { animation: riseIn 0.8s ease both 0.05s; }
.masthead-title  { animation: riseIn 0.9s ease both 0.18s; }
.masthead-flourish { animation: riseIn 0.9s ease both 0.28s; }
.masthead-tagline{ animation: riseIn 0.9s ease both 0.38s; }

/* The word "Letters" rendered in the gold thread wherever it appears. */
.gold-word {
  color: var(--champagne);
  font-style: italic;
  font-family: var(--display);
}

/* Welcome content cascades in just after the masthead. */
.welcome-eyebrow  { animation: riseIn 0.8s ease both 0.42s; }
.welcome-question { animation: riseIn 0.85s ease both 0.52s; }
.welcome-sub      { animation: riseIn 0.85s ease both 0.62s; }
.fork-card        { animation: riseIn 0.9s ease both 0.74s; }
.fork-card-memorial { animation-delay: 0.86s; }

/* Respect reduced-motion preferences: no movement, just present. */
@media (prefers-reduced-motion: reduce) {
  .atmosphere-glow,
  .masthead-row, .masthead-title, .masthead-tagline,
  .welcome-eyebrow, .welcome-question, .welcome-sub,
  .fork-card, .fork-card-memorial {
    animation: none;
  }
}

/* ============================================================
   MOBILE SPLASH — tighten the header and welcome spacing so at
   least one fork card shows above the fold on phones. Desktop
   layout is untouched.
   ============================================================ */
@media (max-width: 600px) {
  /* Header: less vertical padding, smaller wordmark, tighter stack */
  .masthead { padding: 16px var(--pad) 16px; }
  .masthead-row { margin-bottom: 14px; }
  .masthead-the { font-size: 14px; letter-spacing: 0.16em; text-indent: 0.16em; top: 0.4em; }
  .masthead-name { font-size: clamp(52px, 17vw, 76px); }
  .masthead-flourish { margin-top: 12px; }
  .masthead-tagline { margin-top: 10px; font-size: 13px; line-height: 1.4; }

  /* Stage: pull the welcome up closer to the header */
  .stage { padding: 24px var(--pad) 48px; }
  .welcome-inner { padding: 0; }
  .welcome-eyebrow { margin: 0 0 10px; }
  .welcome-question { font-size: clamp(27px, 8vw, 34px); margin: 0 0 12px; }
  .welcome-sub { font-size: 15px; margin: 0 auto 24px; line-height: 1.5; }

  /* Cards: a touch less inner padding so they sit higher and read compact */
  .fork-card { padding: 26px 24px 24px; gap: 10px; }
  .fork-card-title { font-size: 22px; }
  .fork-card-body { font-size: 13.5px; }
}

/* Very short or very small phones: trim a little more. */
@media (max-width: 600px) and (max-height: 740px) {
  .masthead { padding: 12px var(--pad) 12px; }
  .masthead-name { font-size: clamp(46px, 15vw, 64px); }
  .masthead-tagline { display: none; } /* tagline is a nicety; drop it to surface a card */
  .stage { padding: 18px var(--pad) 40px; }
  .welcome-sub { margin: 0 auto 18px; }
}

/* ============================================================
   SHORT DESKTOP / LAPTOP — on wide but short screens (common
   laptops ~657-720px tall), reclaim more vertical space so the
   choice cards' titles clear the fold. Tall screens unaffected.
   ============================================================ */
@media (min-width: 601px) and (max-height: 800px) {
  .masthead { padding: 18px var(--pad) 16px; }
  .masthead-row { margin-bottom: 16px; }
  .masthead-name { font-size: clamp(56px, 7vw, 96px); }
  .masthead-flourish { margin-top: 14px; }
  .masthead-tagline { margin-top: 10px; }
  .stage { padding: 22px var(--pad) 44px; }
  .welcome-eyebrow { margin: 0 0 10px; }
  .welcome-question { margin: 0 0 10px; }
  .welcome-sub { margin: 0 auto 22px; }
}

/* Shorter still: trim the masthead further and drop the tagline. */
@media (min-width: 601px) and (max-height: 680px) {
  .masthead { padding: 14px var(--pad) 12px; }
  .masthead-name { font-size: clamp(48px, 6vw, 78px); }
  .masthead-the { font-size: clamp(15px, 1.8vw, 22px); top: 0.45em; }
  .masthead-flourish { margin-top: 10px; }
  .masthead-tagline { display: none; }
  .stage { padding: 18px var(--pad) 40px; }
  .welcome-question { font-size: clamp(28px, 4vw, 40px); }
  .welcome-sub { margin: 0 auto 18px; font-size: 16px; }
}

/* ============================================================
   FLOW MODE — when answering the guided questions, the buttons
   must ALWAYS be reachable without scrolling. We collapse the
   masthead to a slim bar, tighten spacing, and pin the nav to
   the bottom of the viewport. The splash/result keep the full
   grand masthead (this only applies while body.in-flow).
   ============================================================ */

/* 1) Collapse the masthead to a slim, quiet bar during the flow. */
body.in-flow .footer { display: none; } /* pinned nav occupies the bottom; footer would overlap */
body.in-flow .masthead {
  padding: 12px var(--pad);
  position: sticky;
  top: 0;
  background: rgba(13, 22, 38, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20;
}
body.in-flow .masthead-row,
body.in-flow .masthead-flourish,
body.in-flow .masthead-tagline { display: none; }
body.in-flow .masthead-title {
  /* shrink the wordmark right down to a small inline lockup */
  gap: 8px;
}
body.in-flow .masthead-the {
  font-size: clamp(12px, 1.4vw, 15px);
  top: 0.42em;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}
body.in-flow .masthead-name {
  font-size: clamp(26px, 3.2vw, 38px) !important;
  filter: drop-shadow(0 2px 10px rgba(200, 169, 116, 0.18));
}

/* 2) Tighten the stage + flow spacing so steps start higher. */
body.in-flow .stage { padding: 22px var(--pad) 0; }
body.in-flow .flow-top { margin-bottom: 22px; }
body.in-flow .flow-step-eyebrow { margin-bottom: 10px; }
body.in-flow .flow-step-title { margin: 0 0 10px; }
body.in-flow .flow-step-instruction { margin: 0 0 20px; }

/* 3) Pin the nav to the bottom of the viewport as a sticky bar.
      Content scrolls under it; the buttons are always in view.
      NOTE: position:fixed only works relative to the viewport if no
      ancestor has a transform/filter. The entrance animation can leave
      a transform on .view-flow, so we clear it here. */
body.in-flow .view-flow { transform: none !important; animation: none !important; }
.flow-form { padding-bottom: 96px; }   /* room so content never hides behind the bar */
body.in-flow .flow-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--maxw);
  background: linear-gradient(to top, var(--midnight) 62%, rgba(13, 22, 38, 0));
  z-index: 25;
}

/* The submit button (last step) is inside the same nav, so it's pinned too. */
body.in-flow .flow-submit-aux {
  position: fixed;
  bottom: 64px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 25;
  background: none;
}

/* When "show all steps" is on, the form is long and scrolly by design,
   so release the sticky nav and let it sit at the end normally. */
body.in-flow .flow-form.show-all .flow-nav { position: static; transform: none; background: none; padding: 0; }
body.in-flow .flow-form.show-all { padding-bottom: 24px; }

/* On short screens, make long choice lists scroll within the step
   instead of pushing the page, so the pinned bar never overlaps content
   awkwardly. The sticky bar already guarantees the button is reachable. */
@media (max-height: 720px) {
  body.in-flow .choice-list { gap: 8px; }
  body.in-flow .choice-row-inner { padding: 13px 18px; }
  body.in-flow .flow-step-instruction { margin: 0 0 14px; font-size: 15px; }
}