/* Landing pages + guides (generated by scripts/landing-pages.mjs), and the 404 page.
   Loaded after styles.css and legal.css, which supply the tokens, nav, footer, doc-hero,
   contents list, doc sections, callouts and FAQ.
     .poster              state, city and hub pages, /guides: one column, no sidebar
     .doc-layout--guide   long-form guides: takeaways band, sidebar contents, numbered rows */

/* ---------- Hero ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 28px;
  font-size: .85rem; color: rgba(255, 240, 244, .62);
}
.crumbs a { display: inline-block; padding: 12px 0; margin: -12px 0; color: rgba(255, 240, 244, .78); transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }
.crumbs span[aria-hidden] { opacity: .45; }

.doc-hero__lede {
  max-width: 62ch; margin-top: 20px;
  font-size: var(--fs-lead); line-height: 1.65; color: rgba(255, 240, 244, .82);
}

/* Poster and guide heroes end flat: no cream curve, no floating card */
.doc-hero--poster::after, .doc-hero--guide::after { display: none; }
.doc-hero--poster .doc-hero__title { font-size: clamp(2.9rem, 1rem + 5.6vw, 6rem); max-width: 15ch; }
.doc-hero--poster .doc-hero__title--long { font-size: clamp(2.6rem, 1rem + 4.4vw, 5.2rem); max-width: 20ch; }
.doc-hero--guide { padding-bottom: clamp(56px, 7vw, 88px); }
.doc-hero--guide .doc-hero__title { font-size: clamp(2.5rem, 1.3rem + 4vw, 4.8rem); max-width: 18ch; }

/* The short version, set on the plum under a hairline */
.hero-short {
  display: grid; grid-template-columns: 180px 1fr; gap: 24px;
  margin-top: 44px; padding: 24px 0 56px; border-top: 1px solid var(--line-light);
}
.hero-short__label { font-family: var(--f-serif); font-style: italic; font-size: 1.5rem; line-height: 1.1; color: var(--rose); }
.hero-short ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hero-short li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .96rem; font-weight: 600; line-height: 1.5; color: rgba(255, 240, 244, .9); }
.hero-short svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: #fff; background: var(--wine); }

/* ---------- Contents as a row under the hero (poster pages) ---------- */
.toc--row { position: static; max-height: none; overflow: visible; padding: 22px 0; border-bottom: 1px solid var(--line); }
.toc--row .toc__progress { display: none; }
@media (min-width: 1025px) {
  .toc--row .toc__box { display: flex; align-items: baseline; gap: 28px; }
  .toc--row .toc__box summary { flex: none; padding: 0; margin: 0; border: 0; }
  .toc--row ol { display: flex; flex-wrap: wrap; gap: 4px 22px; }
  .toc--row a { display: inline-flex; gap: 8px; padding: 4px 0; border-left: 0; border-bottom: 2px solid transparent; }
  .toc--row a span { padding-top: 0; }
  .toc--row a.is-active { border-bottom-color: var(--coral); }
}

/* Contents links and the phone toggle are 44px to tap (sidebar and row alike) */
.doc-layout--guide .toc a, .toc--row a { min-height: 44px; align-items: center; }
@media (max-width: 1024px) {
  .toc__box summary { min-height: 44px; }
  .toc__box { padding-block: 6px; }
}

/* ---------- Poster body ---------- */
.doc.poster { max-width: none; }
.poster__local { padding-top: 16px; }
.poster__local .doc-sec, .poster__end .doc-sec { max-width: 860px; }
.doc-sec--story p:first-of-type { font-size: clamp(1.1rem, 1rem + .4vw, 1.28rem); line-height: 1.65; font-weight: 500; color: var(--charcoal); }
.poster__band { margin-top: 64px; padding: 24px 0 72px; background: var(--cream-2); border-block: 1px solid var(--line); }
.poster__band .doc-sec { border-top: 0; }
.poster__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--line); }
.poster__end { padding: 24px 0 clamp(96px, 10vw, 140px); }
.poster__end .doc-sec { max-width: none; }
.poster__end .doc-sec:first-child { border-top: 0; }
@media (min-width: 1025px) {
  .poster__end .doc-sec--faq { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 56px; }
  .doc-sec--faq .doc-sec__num, .doc-sec--faq h2 { grid-column: 1; }
  .doc-sec--faq .faq__list { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* Facts about a place: ruled two-column list */
.glance { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; border-top: 1px solid var(--line); }
.glance > div { padding: 18px 24px 20px 0; border-bottom: 1px solid var(--line); }
.glance > div:nth-child(even) { padding: 18px 0 20px 24px; border-left: 1px solid var(--line); }
.glance dt { margin-bottom: 6px; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wine); }
.glance dd { margin: 0; font-size: .98rem; line-height: 1.6; }

/* Six steps, numbered in serif italic */
.steps-grid { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; margin-top: 18px; }
.steps-grid li { counter-increment: step; font-size: .96rem; line-height: 1.55; }
.steps-grid li::before {
  content: counter(step); display: block; margin-bottom: 10px;
  font-family: var(--f-serif); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--wine);
}
.steps-grid strong { display: block; margin-bottom: 4px; font-family: var(--f-display); font-size: 1.08rem; letter-spacing: -.01em; }

/* Pages to go to: one row per link */
.doc-sec .link-list { margin-top: 12px; }
.doc-sec .link-list li { padding: 0; border-top: 1px solid var(--line); }
/* Long lists (the hub's states and cities) run in two columns on wide screens */
@media (min-width: 900px) {
  .poster__local .doc-sec:has(.link-list > li:nth-child(4)) { max-width: none; }
  .link-list:has(> li:nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
.doc-sec .link-list li + li { margin-top: 0; }
.doc-sec .link-list li::before { display: none; }
.doc .link-list a:not(.btn):not(.link) {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 4px 20px; align-items: center;
  padding: 18px 4px 18px 0; color: var(--ink-2); text-decoration: none;
}
.link-list__title { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.3; letter-spacing: -.015em; color: var(--charcoal); transition: color .2s; }
.link-list__desc { grid-column: 1; font-size: .95rem; line-height: 1.55; }
.link-list__arrow { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--wine); transition: transform .3s var(--ease); }
.doc .link-list a:hover .link-list__title { color: var(--wine); }
.doc .link-list a:hover .link-list__arrow { transform: translateX(4px); }

/* Chip links (same pill as the homepage "Dating by state" row), 44px to tap */
.page-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.doc a.chip-link:not(.btn):not(.link) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px;
  font-size: .88rem; font-weight: 600; color: var(--charcoal); text-decoration: none;
  border: 1px solid rgba(29, 26, 28, .14); background: #fff;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.doc a.chip-link:not(.btn):not(.link):hover { border-color: var(--wine); color: var(--charcoal); transform: translateY(-1px); }

.doc .faq__list { margin-top: 6px; }

/* ---------- Long-form guides ---------- */
.takeaways { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); margin-top: 56px; }
.takeaways__label { font-family: var(--f-serif); font-style: italic; font-size: 1.8rem; line-height: 1.1; color: var(--wine); }
.takeaways ol { counter-reset: take; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.takeaways li {
  counter-increment: take; padding-top: 14px; border-top: 2px solid var(--charcoal);
  font-family: var(--f-display); font-size: 1.12rem; line-height: 1.35; letter-spacing: -.015em; color: var(--charcoal);
}
.takeaways li::before {
  content: counter(take, lower-roman) "."; display: block; margin-bottom: 8px;
  font-family: var(--f-serif); font-style: italic; font-size: 1.6rem; color: var(--wine);
}
.doc-layout--guide { padding-top: 32px; }
.doc-layout--guide .doc { counter-reset: sec; }
.doc-layout--guide .doc-sec { counter-increment: sec; }

/* Each point: heading on the left, explanation on the right */
.rows { counter-reset: item; }
.rows__item { counter-increment: item; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 22px 0; border-top: 1px solid var(--line); }
.rows__item:first-child { padding-top: 4px; border-top: 0; }
.doc-sec .rows__item h3 { margin: 0; font-family: var(--f-display); font-size: 1.08rem; line-height: 1.3; letter-spacing: -.01em; }
.rows__item h3::before {
  content: counter(sec) "." counter(item); display: block; margin-bottom: 6px;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: var(--wine);
}
.rows--own-numbers .rows__item h3::before { display: none; }
.doc-sec .rows__item p { margin: 0; }

/* ---------- Closing call to action: a plum panel like the homepage's final section ---------- */
.page-cta {
  margin-top: 56px; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-lg);
  color: #fff; text-align: center;
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(140, 43, 78, .55), transparent 65%),
    linear-gradient(180deg, var(--plum-950), var(--plum-900));
}
.page-cta h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.page-cta p { max-width: 52ch; margin: 12px auto 22px; color: rgba(255, 240, 244, .78); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-short, .takeaways { grid-template-columns: 1fr; gap: 14px; }
  .toc--row { padding: 20px 0 0; border-bottom: 0; }
  .doc-layout--guide { padding-top: 32px; }
}
@media (max-width: 720px) {
  .hero-short { margin-top: 32px; padding-bottom: 40px; }
  .hero-short ul, .takeaways ol { grid-template-columns: 1fr; gap: 14px; }
  .takeaways { margin-top: 40px; }
  .glance, .poster__pair { grid-template-columns: 1fr; }
  .glance > div, .glance > div:nth-child(even) { padding: 16px 0; border-left: 0; }
  .steps-grid { grid-template-columns: 1fr; gap: 18px; }
  .steps-grid li { position: relative; padding-left: 44px; }
  .steps-grid li::before { position: absolute; left: 0; top: 0; font-size: 2rem; }
  .poster__band { margin-top: 40px; padding-bottom: 48px; }
  .rows__item { grid-template-columns: 1fr; gap: 6px; }
  .page-cta .btn { width: 100%; }
}

/* ---------- 404: the plum hero fills the screen; no cream curve or summary card below it ---------- */
.doc-hero--404 { min-height: 100vh; padding-bottom: 96px; }
.doc-hero--404::after { display: none; }
.page-links--hero { margin-top: 32px; gap: 12px; }