/* Email-sequence pages · Dr. Jeff Yoo (system B). Tokens + fonts come from /assets/brand.css. */

/* ---------------------------------- Hero ---------------------------------- */
.hero {
  position: relative;
  padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 5vw, 56px);
  overflow: hidden;
}
.hero { background: radial-gradient(560px 300px at 82% 0%, rgba(169, 192, 230, 0.28), transparent 75%); }
.hero__inner { position: relative; max-width: 860px; }
.hero h1 { font-size: clamp(36px, 5.4vw, 60px); }

/* -------------------------------- Timeline -------------------------------- */
.tl { max-width: 860px; }
.tl__card {
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px clamp(16px, 3vw, 28px) 18px;
}
.tl__group + .tl__group { border-top: 1px solid var(--hair-soft); }
.tl__label {
  margin: 20px 0 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.tl__list { list-style: none; margin: 0; padding: 0 0 6px; }
.tl__item {
  display: flex; align-items: flex-start; gap: 14px; min-height: 48px;
  padding: 10px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none;
  transition: background 0.25s var(--ease);
}
.tl__item:hover { background: var(--bg); }
.tl__num {
  flex: none; width: 36px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  background: var(--navy); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 600;
}
.tl__txt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px; min-width: 0; }
.tl__when { font-size: 14px; font-weight: 600; color: var(--muted); min-width: 0; }
.tl__subj { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }

/* --------------------------------- Emails --------------------------------- */
.mails { max-width: 860px; padding-top: clamp(24px, 4vw, 40px); }
.phase {
  margin: clamp(56px, 7vw, 84px) 0 22px;
  font-size: clamp(24px, 3vw, 30px);
  display: flex; align-items: center; gap: 16px;
}
.phase::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.mail { margin: 0 0 clamp(40px, 5vw, 56px); scroll-margin-top: 24px; }
.mail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.mail__num { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.mail__tag, .mail__quad {
  font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; line-height: 1.4;
}
.mail__tag { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.mail__quad { background: var(--surface); color: var(--muted); border: 1px solid var(--hair); }

.mail__frame {
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mail__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 20px; background: var(--surface-2); border-bottom: 1px solid var(--hair-soft);
}
.mail__dots { display: inline-flex; gap: 6px; }
.mail__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(23, 40, 66, 0.14); }
.mail__send { font-size: 14px; font-weight: 600; color: var(--muted); }

.mail__head { display: flex; align-items: center; gap: 14px; padding: 22px clamp(20px, 4vw, 40px) 0; }
.mail__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hair); }
.mail__from { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mail__name { font-weight: 700; font-size: 17px; }
.mail__to { font-size: 15px; color: var(--muted); }

.mail__label { margin: 22px clamp(20px, 4vw, 40px) 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.mail__label--inline { display: inline; margin: 0 8px 0 0; }
.mail__subject {
  margin: 0 clamp(20px, 4vw, 40px); font-size: clamp(23px, 2.6vw, 28px); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance;
}
.mail__preview {
  margin: 12px clamp(20px, 4vw, 40px) 0; padding: 0 0 20px; border-bottom: 1px solid var(--hair-soft);
  font-size: 17px; color: var(--muted); line-height: 1.5;
}

.mail__body { padding: 26px clamp(20px, 4vw, 40px) 32px; max-width: 680px; }
.mail__body p { margin: 0 0 18px; line-height: 1.62; }
.mail__body .mail__h { margin: 28px 0 8px; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.mail__arrows, .mail__steps, .mail__components { margin: -4px 0 20px; padding: 0; }
.mail__arrows { list-style: none; }
.mail__arrows li { position: relative; padding-left: 28px; margin: 0 0 8px; }
.mail__arrows li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.mail__steps { padding-left: 26px; }
.mail__steps li { margin: 0 0 12px; padding-left: 4px; }
.mail__steps li::marker { color: var(--accent); font-weight: 800; }
.mail__components {
  padding: 16px 20px 16px 44px; background: var(--bg); border-radius: var(--radius-sm); font-size: 17px; line-height: 1.5;
}
.mail__components li { margin: 0 0 6px; }
.mail__components li::marker { color: var(--accent); font-weight: 700; }

.mail__fig { margin: 6px 0 24px; }
.mail__fig img { width: 100%; height: auto; border-radius: var(--radius-sm); aspect-ratio: 16 / 9; object-fit: cover; }
.mail__fig figcaption { margin-top: 8px; font-size: 15px; color: var(--muted); }

.mail__cta { margin: 6px 0 24px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mail__btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 700; font-size: 17px;
  box-shadow: 0 12px 26px -14px rgba(185, 66, 60, 0.7);
}
.mail__btn-link { font-size: 15px; }

.mail__sign { margin-top: 26px !important; font-family: var(--display); font-weight: 600; font-size: 20px; }
.mail__ps { padding-top: 18px; border-top: 1px dashed var(--hair); color: var(--ink); }
.mail__ps b { color: var(--accent); }

/* Merge tokens: small, wrap freely, never nowrap. */
.tok-merge, .tok-link {
  display: inline; white-space: normal; overflow-wrap: anywhere;
  font-family: var(--sans); font-size: max(13px, 0.8em); font-weight: 700; letter-spacing: 0.01em;
  padding: 1px 7px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tok-merge { background: rgba(169, 192, 230, 0.32); color: var(--navy); }
.tok-link { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.mail__subject .tok-merge, .tl__subj .tok-merge, .mail__subject .tok-link, .tl__subj .tok-link { font-size: max(13px, 0.72em); vertical-align: 0.1em; }

/* ------------------------------ Reveal tweak ------------------------------ */
.reveal { transform: translateY(18px); }

/* ---- mobile hardening (references/mobile.md) ---- */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
  .wrap { padding-inline: 16px; }
  .hero { padding: 56px 0 28px; }
  .hero h1 { font-size: 36px; }
  .tl__txt { flex-direction: column; }
  .tl__subj { font-size: 16px; }
  .mail__frame { border-radius: 14px; }
  .mail__bar { padding: 10px 16px; }
  .mail__dots { display: none; }
  .mail__head, .mail__body { padding-left: 18px; padding-right: 18px; }
  .mail__label, .mail__subject, .mail__preview { margin-left: 18px; margin-right: 18px; }
  .mail__label--inline { margin: 0 8px 0 0; }
  .mail__body p, .mail__body li { font-size: 18px; }
  .mail__components li { font-size: 16px; }
  .mail__components { padding-left: 38px; }
}
@media (max-width: 420px) {
  .tok-merge, .tok-link, code { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .tl__item { transition: none; }
}