/* ─────────────────────────────────────────────────────────────────────────
   home.css — styles for the content homepage only (/).
   Loaded after styles.css, which supplies the tokens, header and nav.
   The map page does not load this file.
   ───────────────────────────────────────────────────────────────────────── */

/* Vertical rhythm tiers used throughout: 16 / 24 / 32 / 48 / 72. */
.home{
  --measure:68ch;          /* readable line length for prose */
  --gutter:clamp(20px, 5vw, 40px);
  --wrap:1120px;
}

/* The homepage scrolls natively; no inner scroller, no fixed shell. */
.home .app{display:block; min-height:100dvh}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px}

.home section{scroll-margin-top:80px}

/* ─── Hero ────────────────────────────────────────────────────────────────
   Asymmetric two-column on desktop, stacked on mobile. The left column is
   prose, the right is a compact "at a glance" card — content first, but the
   card gives the fold something concrete. */
.hero{
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
  padding-block:clamp(40px, 8vw, 76px);
}
.hero-grid{
  display:grid; gap:clamp(28px, 5vw, 52px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr); gap:56px}
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.eyebrow .tri{display:inline-flex; width:26px; height:10px; border-radius:2px; overflow:hidden}
.eyebrow .tri i{flex:1}
.eyebrow .tri i:nth-child(1){background:var(--it-green)}
.eyebrow .tri i:nth-child(2){background:var(--it-white)}
.eyebrow .tri i:nth-child(3){background:var(--it-red)}

.hero h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(2.05rem, 5.4vw, 3.35rem); line-height:1.08;
  letter-spacing:-.015em; color:var(--primary); margin-bottom:20px; text-wrap:balance;
}
.hero h1 em{font-style:italic; color:var(--accent)}

.hero .hp-lede{
  font-size:clamp(1.06rem, 2.1vw, 1.22rem); line-height:1.6;
  color:var(--muted); max-width:56ch; margin-bottom:14px;
}
.hero .hp-lede strong{color:var(--fg); font-weight:600}
.hero .hp-lede-2{font-size:1rem; line-height:1.65; color:var(--muted); max-width:56ch; margin-bottom:30px}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

.hp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 26px; border-radius:var(--r-md);
  font-size:1rem; font-weight:600; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.hp-btn svg{width:19px; height:19px; flex:none}
.hp-btn-primary{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(43,42,36,.16)}
.hp-btn-primary:hover{background:var(--accent-hover)}
.hp-btn-secondary{background:transparent; color:var(--fg); border-color:var(--border-strong)}
.hp-btn-secondary:hover{background:var(--surface-2); border-color:var(--accent); color:var(--accent)}
.hp-btn:active{transform:translateY(1px)}
.hp-btn:focus-visible{outline:3px solid var(--accent-ring); outline-offset:2px}

.cta-note{font-size:.87rem; color:var(--muted); margin-top:16px}

/* ─── Hero side card ──────────────────────────────────────────────────── */
.glance{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:24px; box-shadow:0 1px 3px rgba(43,42,36,.06);
}
.glance h2{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.12rem;
  color:var(--primary); margin-bottom:16px;
}
.glance dl{display:grid; gap:14px; margin:0}
.glance .row{display:flex; gap:13px; align-items:flex-start}
.glance .row svg{width:19px; height:19px; flex:none; color:var(--secondary); margin-top:2px}
.glance dt{font-weight:600; font-size:.93rem; color:var(--fg); margin-bottom:2px}
.glance dd{font-size:.9rem; line-height:1.5; color:var(--muted); margin:0}

/* ─── Stat strip ──────────────────────────────────────────────────────── */
.hp-stats{border-bottom:1px solid var(--border); background:var(--bg); padding-block:clamp(26px, 4vw, 38px)}
.hp-stats-grid{display:grid; gap:22px; grid-template-columns:repeat(2,minmax(0,1fr)); text-align:center}
@media (min-width:720px){.hp-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hp-stat .n{
  display:block; font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(1.6rem, 3.6vw, 2.15rem); line-height:1.1; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.hp-stat .l{display:block; font-size:.85rem; color:var(--muted); margin-top:6px; line-height:1.4}

/* ─── Prose sections ──────────────────────────────────────────────────── */
.section{padding-block:clamp(44px, 7vw, 72px)}
.section + .section{border-top:1px solid var(--border)}
.section-alt{background:var(--surface-2)}

.section-head{margin-bottom:clamp(26px, 4vw, 38px); max-width:var(--measure)}
.section-head.center{margin-inline:auto; text-align:center}
.section h2{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(1.55rem, 3.3vw, 2.05rem); line-height:1.18;
  letter-spacing:-.01em; color:var(--primary); text-wrap:balance;
}
.section-head p{margin-top:12px; font-size:1.02rem; line-height:1.6; color:var(--muted)}

.prose{max-width:var(--measure)}
.prose p{font-size:1.02rem; line-height:1.72; color:var(--fg); margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose em{font-style:italic}
.prose strong{font-weight:600}
.prose h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.2rem;
  color:var(--primary); margin:32px 0 12px;
}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.prose a:hover{color:var(--accent-hover)}

/* Pull-quote style callout for the single most important warning. */
.hp-callout{
  margin:28px 0; padding:20px 22px; border-radius:var(--r-md);
  background:var(--danger-soft); border-left:3px solid var(--danger);
  max-width:var(--measure);
}
.hp-callout p{font-size:1rem; line-height:1.62; color:var(--fg); margin:0}
.hp-callout strong{font-weight:600}

/* ─── Numbered steps ──────────────────────────────────────────────────── */
.steps{display:grid; gap:20px; grid-template-columns:minmax(0,1fr); counter-reset:step}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}}
.step{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; counter-increment:step;
}
.section-alt .step{background:var(--surface-2)}
.step::before{
  content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; margin-bottom:15px;
  background:var(--accent); color:#fff;
  font-family:'Fraunces',Georgia,serif; font-size:1.02rem; font-weight:600;
}
.step h3{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.1rem; color:var(--primary); margin-bottom:9px}
.step p{font-size:.95rem; line-height:1.62; color:var(--muted)}

/* ─── Card grids (cities, guides) ─────────────────────────────────────── */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(248px, 1fr))}

.tile{
  display:flex; flex-direction:column; gap:7px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:19px 20px; text-decoration:none; color:inherit;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.section-alt .tile{background:var(--bg)}
.tile:hover{border-color:var(--accent); box-shadow:0 3px 12px rgba(43,42,36,.09); transform:translateY(-2px)}
.tile:focus-visible{outline:3px solid var(--accent-ring); outline-offset:2px}
.tile .t{
  display:flex; align-items:center; gap:8px;
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.08rem; color:var(--primary);
}
.tile .t svg{width:16px; height:16px; flex:none; color:var(--danger)}
.tile .d{font-size:.9rem; line-height:1.55; color:var(--muted)}
.tile .hp-meta{
  margin-top:auto; padding-top:10px; font-size:.79rem; font-weight:500;
  color:var(--muted); letter-spacing:.02em;
}

.more-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:26px;
  min-height:44px; font-weight:600; font-size:.97rem;
  color:var(--accent); text-decoration:none;
}
.more-link:hover{color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px}
.more-link svg{width:16px; height:16px; transition:transform var(--t)}
.more-link:hover svg{transform:translateX(3px)}
.more-link:focus-visible{outline:3px solid var(--accent-ring); outline-offset:3px; border-radius:4px}

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.faq-list{max-width:var(--measure); display:grid; gap:2px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 2px; min-height:44px; cursor:pointer; list-style:none;
  font-weight:600; font-size:1.01rem; color:var(--primary);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:''; flex:none; width:11px; height:11px; margin-right:4px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-3px); transition:transform var(--t);
}
.faq-item[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq-item summary:focus-visible{outline:3px solid var(--accent-ring); outline-offset:-2px; border-radius:4px}
.faq-item .hp-a{padding:0 2px 20px}
.faq-item .hp-a p{font-size:.98rem; line-height:1.68; color:var(--muted)}
.faq-item .hp-a a{color:var(--accent)}

/* ─── Closing CTA ─────────────────────────────────────────────────────── */
.closer{
  background:var(--surface); border-top:1px solid var(--border);
  padding-block:clamp(44px, 7vw, 68px); text-align:center;
}
.closer h2{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(1.5rem, 3.2vw, 2rem); color:var(--primary); margin-bottom:14px; text-wrap:balance;
}
.closer p{font-size:1.02rem; line-height:1.6; color:var(--muted); max-width:52ch; margin:0 auto 26px}
.closer .cta-row{justify-content:center}

/* ─── Footer ──────────────────────────────────────────────────────────── */
.site-foot{background:var(--bg); border-top:1px solid var(--border); padding-block:34px}
.site-foot .inner{display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:baseline}
.site-foot nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.site-foot a{
  display:inline-flex; align-items:center; min-height:32px;
  font-size:.9rem; color:var(--muted); text-decoration:none;
}
.site-foot a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.site-foot .fine{font-size:.83rem; line-height:1.6; color:var(--muted); max-width:62ch; margin-top:18px}
.site-foot .fine em{font-style:italic}
/* .site-foot a is an inline-flex nav pill; links inside running text in .fine
   must opt back out of that or they break the line box. */
.site-foot .fine a{
  display:inline; min-height:0; font-size:inherit; color:var(--muted);
  text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--border-strong);
}
.site-foot .fine a:hover{color:var(--accent); text-decoration-color:currentColor}

/* ─── Motion & small screens ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .tile,.hp-btn,.more-link svg,.faq-item summary::after{transition:none}
  .tile:hover{transform:none}
  .hp-btn:active{transform:none}
}
@media (max-width:480px){
  .cta-row .hp-btn{width:100%}
}

/* Affiliate line, homepage only. Prefixed hp- because home.css and styles.css
   share a namespace — see CLAUDE.md. Deliberately quiet: a rule, muted text and
   one inline link, never a card or a button. The generated pages use .aff-note
   in city.css; these are separate because city.css is not loaded here. */
.hp-aff{margin-top:22px;padding-top:16px;border-top:1px solid var(--border);
  font-size:.9rem;color:var(--muted);line-height:1.65;max-width:62ch}
.hp-aff a{color:var(--accent-bright);font-weight:600}
.hp-aff .hp-aff-disc{display:block;margin-top:5px;font-size:.78rem;color:var(--muted-2)}