/* Hallmark · genre: modern-minimal + editorial · macrostructure: Letter over a Marquee Hero (the /pack shape)
 * theme: UpHex brand (pack_tokens.css, locked) · nav: N5 floating pill · footer: Ft5 statement
 * enrichment: generated miniature-town scenes (UpHex AI images) + hand-built SVG postmark/envelope
 * Loaded by layouts/letters after pack_tokens.css and base_marketing.css; every value is a pack token.
 * Motion contract: CSS default = finished state. Entrances run only for html.js + no-preference;
 * one load sequence, one reveal per block, one payoff (the envelope seals on subscribe). */

.letter { --read: 0; }

/* ------------------------------------------------------------------ reading progress */
.letter-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.letter-progress span { display: block; height: 100%; background: var(--color-blue); transform-origin: left center; transform: scaleX(var(--read)); }

/* ------------------------------------------------------------------ hero */
.lhero { position: relative; padding-top: 7.5rem; }
.lhero__copy { position: relative; z-index: 3; }
.lcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.lcrumbs a { color: var(--color-blue-deep); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--touch-target); }
.lcrumbs span { display: inline-flex; align-items: center; }

.lstamp { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0 var(--space-xl); }
.lstamp > div {
  display: inline-flex; align-items: baseline; gap: var(--space-xs);
  padding: 7px 14px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  font-size: var(--text-sm); white-space: nowrap;
}
.lstamp dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.lstamp dd { margin: 0; color: var(--color-navy); font-weight: 600; }

.lhero__title {
  font: 800 clamp(2.5rem, 5.2vw + 0.6rem, 5.25rem)/0.98 var(--font-display);
  letter-spacing: -0.045em; max-width: 15ch;
  overflow-wrap: anywhere; min-width: 0;
}
.lhero__title em { display: inline-block; font-size: 1.04em; letter-spacing: -0.03em; }
.lhero__lede { margin-top: var(--space-lg); max-width: 36rem; font-size: var(--text-md); color: var(--color-muted); }
.lhero__jump {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--touch-target); margin-top: var(--space-md);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-blue-deep); text-underline-offset: 3px; white-space: nowrap;
}
.lhero__jump:hover { color: var(--color-navy); }

.lscene { position: relative; z-index: 1; margin: var(--space-lg) 0 0; overflow: clip; }
.lscene__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.lscene__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.lscene__caption { position: relative; margin-top: calc(-1 * var(--space-xl)); font-size: var(--text-xs); color: var(--color-muted); text-align: right; }

.lpostmark { position: absolute; top: 16%; right: 5%; width: clamp(84px, 11vw, 150px); height: auto; color: var(--color-blue-deep); transform: rotate(-8deg); }
.lpostmark__disc { fill: color-mix(in oklab, var(--color-canvas) 86%, transparent); }
.lpostmark__edge { fill: none; stroke: currentColor; stroke-width: 2.5; }
.lpostmark__ring { font: 800 10.5px var(--font-body); letter-spacing: 0.2em; fill: currentColor; }
.lpostmark__month { font: 800 13px var(--font-body); letter-spacing: 0.22em; fill: currentColor; }
.lpostmark__day { font: italic 600 36px var(--font-editorial); fill: currentColor; }

@media (min-width: 760px) { .lscene__frame { aspect-ratio: 16 / 8; } }
@media (min-width: 960px) {
  .lhero { padding-top: 8.5rem; }
  .lscene { margin-top: -12vw; pointer-events: none; }
  .lscene__img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 88%, transparent 100%);
  }
  .lpostmark { top: 34%; }
  /* The landing form's small print needs the canvas behind it, so the town starts a little lower. */
  .letter-landing .lscene { margin-top: -5vw; }
}

/* ------------------------------------------------------------------ reading layout */
.letter-layout { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) 0 var(--space-2xl); }
.letter-rail { display: none; }
.letter-body { min-width: 0; max-width: 42rem; width: 100%; margin: 0 auto; font-size: 1.1875rem; line-height: 1.75; color: var(--color-navy); }
.letter-body > p { margin: 0 0 1.35em; }
.letter-body > p:first-of-type { font-size: var(--text-lg); line-height: 1.55; font-weight: 600; }
/* The site-wide em is the display accent; inside a letter it's just emphasis. */
.letter-body > p em, .letter-body li em { font-family: inherit; font-weight: inherit; color: inherit; letter-spacing: 0; }
.letter-body strong { font-weight: 800; }
.letter-body a { color: var(--color-blue-deep); text-underline-offset: 3px; }
.letter-body > h2 { margin: 2em 0 0.6em; font: 800 var(--text-xl)/1.12 var(--font-display); letter-spacing: -0.03em; }
.letter-body blockquote { position: relative; margin: 2rem 0; padding-left: var(--space-lg); }
.letter-body blockquote::before { content: ""; position: absolute; inset: 0.25em auto 0.25em 0; width: 3px; border-radius: var(--radius-pill); background: var(--color-blue); }
.letter-body blockquote p, .letter-body blockquote em { font: italic 500 var(--text-lg)/1.4 var(--font-editorial); color: var(--color-blue-deep); }
.letter-body ul, .letter-body ol { margin: 0 0 1.35em; padding-left: 1.25rem; list-style: disc; }
.letter-body ol { list-style: decimal; }
.letter-body li { margin-bottom: 0.4em; }
.letter-signoff { margin: var(--space-xl) 0 0; font: italic 500 var(--text-xl) var(--font-editorial); color: var(--color-navy); }
.letter-figure { margin: var(--space-xl) 0; }
.letter-figure img { width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.letter-figure figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

.letter-rail-track { position: absolute; top: 0; bottom: 2.75rem; left: 50%; width: 2px; margin-left: -1px; background: var(--color-rule); overflow: hidden; border-radius: var(--radius-pill); }
.letter-rail-fill { position: absolute; inset: 0; background: var(--color-blue); transform-origin: top center; transform: scaleY(var(--read)); }
.letter-rail-envelope { position: absolute; bottom: 0; left: 50%; width: 2.25rem; margin-left: -1.125rem; fill: var(--color-canvas); stroke: var(--color-muted); stroke-width: 1.75; stroke-linejoin: round; transition: fill var(--dur-short) linear, stroke var(--dur-short) linear; }
html[data-newsletter="subscribed"] .letter-rail-envelope { fill: var(--color-soft-blue); stroke: var(--color-blue); }

@media (min-width: 1024px) {
  .letter-layout { grid-template-columns: 3rem minmax(0, 42rem); column-gap: 3.5rem; justify-content: center; }
  .letter-body { margin: 0; }
  .letter-rail { display: block; position: sticky; top: 7rem; height: min(28rem, calc(100vh - 12rem)); }
}

/* ------------------------------------------------------------------ signup form (on top of .start-form) */
.nl-form { position: relative; }
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-entry.start-form { margin-top: var(--space-lg); }
.nl-fine a { color: inherit; text-underline-offset: 2px; }
.nl-form[data-state="loading"] .nl-button span { opacity: 0; }
.nl-form[data-state="loading"] .nl-button { position: relative; }
.nl-form[data-state="loading"] .nl-button::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 1.1rem; height: 1.1rem; margin: -0.55rem 0 0 -0.55rem;
  border: 2px solid var(--color-surface); border-right-color: transparent; border-radius: 50%;
  animation: nl-spin 700ms linear infinite;
}
.nl-done { margin-top: var(--space-lg); animation: nl-fade var(--dur-long) var(--ease-out) both; }
.nl-done:focus { outline: none; }
.nl-done p { margin-top: var(--space-2xs); color: var(--color-muted); }
.nl-done-title { font: 800 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--color-blue-deep); }
.nl-form--night .start-form__input { border-color: transparent; }
.nl-form--night .start-form__note { color: var(--color-on-navy-2); }
.nl-form--night .start-form__error { color: var(--color-on-navy); }
.nl-form--night .nl-done-title { color: var(--color-blue-light); }
.nl-form--night .nl-done p, .nl-form--night .nl-done strong { color: var(--color-on-navy-2); }

/* ------------------------------------------------------------------ inline aside */
.letter-aside {
  margin: var(--space-2xl) 0; padding: var(--space-xl) var(--space-lg);
  border: var(--rule-hair) solid color-mix(in oklab, var(--color-blue) 22%, var(--color-white));
  border-radius: var(--radius-panel); background: var(--color-soft-blue);
  font-size: var(--text-base); line-height: 1.55;
}
.letter-aside__title { margin-top: var(--space-xs); font: 800 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.03em; }
.letter-aside__lede { margin-top: var(--space-xs); color: var(--color-muted); }
@media (min-width: 760px) { .letter-aside { padding: var(--space-xl); } }

/* ------------------------------------------------------------------ night close (base .close) */
.letter-close { min-height: auto; }
.letter-close .close__content { padding: var(--space-4xl) 0 var(--space-2xl); }
.letter-close__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.letter-close__copy { min-width: 0; }
.letter-close .close__title { font-size: var(--text-3xl); max-width: 14ch; margin-top: var(--space-xs); }
.kicker--on-navy { color: var(--color-on-navy-2); }
.letter-close__art { width: min(100%, 17rem); margin: 0 auto; }
.letter-proof { margin-top: var(--space-xl); }
.letter-proof li { padding: var(--space-sm) 0; border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-white) 14%, transparent); font-size: var(--text-sm); color: var(--color-on-navy-2); }
.letter-proof strong { color: var(--color-on-navy); }
.letter-secondary { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-sm); padding-bottom: var(--space-2xl); font-size: var(--text-sm); color: var(--color-on-navy-2); }
.letter-secondary a { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--touch-target); font-weight: 700; color: var(--color-blue-light); white-space: nowrap; text-underline-offset: 3px; }
.letter-secondary a:hover { color: var(--color-on-navy); }
@media (min-width: 960px) {
  .letter-close__grid { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-4xl); }
}

/* ------------------------------------------------------------------ envelope (on navy) */
.envelope { width: 100%; height: auto; overflow: visible; }
.env-back { fill: var(--color-navy-raised); stroke: color-mix(in oklab, var(--color-white) 28%, transparent); stroke-width: 1.5; }
.env-front { fill: color-mix(in oklab, var(--color-navy-raised) 80%, var(--color-white)); stroke: color-mix(in oklab, var(--color-white) 28%, transparent); stroke-width: 1.5; }
.env-flap { fill: var(--color-navy-raised); stroke: color-mix(in oklab, var(--color-white) 28%, transparent); stroke-width: 1.5; stroke-linejoin: round; transform-box: fill-box; transform-origin: top center; }
.env-flap-open { transform: scaleY(-1); }
.env-flap-closed { opacity: 0; transform: scaleY(-1); fill: color-mix(in oklab, var(--color-navy-raised) 70%, var(--color-white)); }
.env-letter rect { fill: var(--color-canvas); stroke: var(--color-rule); stroke-width: 1.5; }
.env-letter path { fill: none; stroke: var(--color-rule-strong); stroke-width: 6; stroke-linecap: round; }
.env-seal { fill: var(--color-blue); transform-box: fill-box; transform-origin: center; transform: scale(0); }
html[data-newsletter="subscribed"] .env-letter { transform: translateY(42px); transition: transform 460ms var(--ease-out); }
html[data-newsletter="subscribed"] .env-flap-open { opacity: 0; transition: opacity 120ms linear 320ms; }
html[data-newsletter="subscribed"] .env-flap-closed { opacity: 1; transform: scaleY(1); transition: opacity 0ms linear 380ms, transform 420ms var(--ease-in-out) 380ms; }
html[data-newsletter="subscribed"] .env-seal { transform: scale(1); transition: transform 260ms var(--ease-out) 820ms; }

/* ------------------------------------------------------------------ related letters / cards */
.letter-related { padding: var(--space-3xl) 0; }
.letter-related__title { max-width: 16ch; }
.letter-cards { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.letter-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-width: 0;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-soft); text-decoration: none; color: var(--color-navy);
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.letter-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.letter-card__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.letter-card__body { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); }
.letter-card__title { font: 800 var(--text-lg)/1.15 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.letter-card__go { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-blue-deep); }

/* ------------------------------------------------------------------ /newsletter */
.letter-landing__form { max-width: 38rem; }
.letter-count { padding: var(--space-3xl) 0 0; }
.letter-count__grid { display: grid; gap: var(--space-lg); align-items: end; }
.letter-count__figure { font: 800 var(--text-mega)/0.86 var(--font-display); letter-spacing: -0.06em; color: var(--color-navy); }
@media (min-width: 900px) { .letter-count__grid { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xl); } }

/* ------------------------------------------------------------------ dock */
.letter-dock {
  position: fixed; inset: auto 0 0 0; z-index: 55;
  padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
  border-top: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-surface); box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(calc(100% + 1rem));
  transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) linear;
}
.letter-dock[data-open="true"] { opacity: 1; transform: none; }
.letter-dock-title { padding-right: 2.75rem; font-weight: 800; letter-spacing: -0.01em; }
.letter-dock .nl-entry.start-form { margin-top: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.letter-dock .start-form__note { display: none; }
.letter-dock .start-form__input, .letter-dock .start-form__button { min-height: 48px; }
.letter-dock .nl-done { margin-top: var(--space-xs); }
.letter-dock-close {
  position: absolute; top: var(--space-2xs); right: var(--space-2xs); display: grid; place-items: center;
  width: var(--touch-target); height: var(--touch-target); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-muted); cursor: pointer;
}
.letter-dock-close:hover { color: var(--color-navy); background: var(--color-canvas); }
.letter-dock-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 640px) {
  .letter-dock { inset: auto 1.25rem 1.25rem auto; width: 22rem; padding: var(--space-md) var(--space-lg) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
}

/* ------------------------------------------------------------------ motion (entrances only) */
@media (prefers-reduced-motion: no-preference) {
  html.js .lstamp > div { animation: l-rise var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
  html.js .lhero__title { animation: l-rise 560ms var(--ease-out) both 180ms; }
  html.js .lhero__title em { animation: l-land 520ms var(--ease-out) both 520ms; }
  html.js .lhero__lede, html.js .lhero__jump, html.js .letter-landing__form { animation: l-rise 560ms var(--ease-out) both 420ms; }
  html.js .lscene__frame { animation: l-scene 1100ms var(--ease-out) both 120ms; }
  html.js .lpostmark { animation: l-stamp 480ms var(--ease-out) both 1000ms; }

  html.js .letter-aside[data-reveal], html.js .letter-close__art[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
  html.js .letter-aside.in-view, html.js .letter-close__art.in-view { opacity: 1; transform: none; }
  html.js .letter-close__art[data-reveal] .env-letter { transform: translateY(42px); transition: transform 700ms var(--ease-out) 240ms; }
  html.js .letter-close__art.in-view .env-letter { transform: none; }
  html.js[data-newsletter="subscribed"] .letter-close__art .env-letter { transform: translateY(42px); transition-delay: 0ms; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-dock, .env-letter, .env-flap, .env-seal, .letter-card { transition-property: opacity; transition-duration: 150ms; }
  .letter-card:hover { transform: none; }
  .nl-form[data-state="loading"] .nl-button::after { animation-duration: 1400ms; }
}

@keyframes l-rise { from { opacity: 0; transform: translateY(0.6em); } }
@keyframes l-land { from { opacity: 0; transform: translateY(0.35em) rotate(-3deg); } }
@keyframes l-scene { from { opacity: 0; transform: scale(1.04); } }
@keyframes l-stamp { from { opacity: 0; transform: scale(1.45) rotate(-22deg); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes nl-spin { to { transform: rotate(360deg); } }
@keyframes nl-fade { from { opacity: 0; } }