/* ============================================================
   Homepage-only styles (front-page.php). Loaded after homesnacks.css.
   Ported from the static homepage slice; inline styles promoted to classes.
   ============================================================ */

/* ---------- Hero ---------- */
.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;
  max-width:1400px;margin:0 auto;padding:32px 40px 56px;}
.hero h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(56px,7vw,104px);
  line-height:.92;letter-spacing:-.02em;margin:0;}
.hero__sub{max-width:480px;margin-top:28px;font-family:'Newsreader',serif;font-size:19px;
  line-height:1.5;color:var(--ink-soft);}
.hero__sub strong{color:var(--ink);}
.hero__ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.hero__stats{margin-top:48px;padding-top:28px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.hero__stat .n{font-family:'Instrument Serif',serif;font-size:44px;line-height:1;}
.hero__stat .l{font-family:'Space Grotesk',sans-serif;font-size:12px;margin-top:6px;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.08em;}
.hero__mapcard{position:sticky;top:88px;}
.hero__cardhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}

/* US hex-tile map ("Pick your state"). 12-col geographic grid; each state a
   pointy-top hexagon placed by inline grid-row/grid-column. Even rows shift a
   half cell for the honeycomb tessellation (.hex--shift). */
.hexmap{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;}
.hex{position:relative;aspect-ratio:1/1.1547;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--bg-alt);display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--ink);transition:background .12s ease,color .12s ease;}
.hex--shift{transform:translateX(50%);}
.hex:hover,.hex:focus-visible{background:var(--accent);color:var(--bg);outline:none;}
.hex__abbr{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:.02em;}
@media(max-width:560px){.hex__abbr{font-size:9px;}}
.preview{margin-top:16px;padding:18px;background:var(--bg);border-radius:12px;border:1px solid var(--rule);}
.preview__head{display:flex;justify-content:space-between;align-items:baseline;}
.preview__state{font-size:36px;line-height:1.05;}
.preview__pop{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--ink-soft);text-align:right;}
.preview__pop span{color:var(--ink);font-size:16px;font-weight:600;}
.preview ol{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:4px;}
.preview li{display:flex;align-items:baseline;gap:12px;padding:6px 0;}
.preview li + li{border-top:1px dashed var(--rule);}
.preview__city{font-size:18px;flex:1;}
.preview__arrow{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--ink-soft);}
.preview__more{display:block;margin-top:14px;font-family:'Space Grotesk',sans-serif;font-size:13px;
  color:var(--accent2);text-decoration:underline;text-underline-offset:4px;}
.rank-dot{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;
  border-radius:99px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  border:1px solid var(--rule);color:var(--ink-soft);}
.rank-dot--1{background:var(--accent);color:var(--bg);border:none;}

/* ---------- Snack of the week ---------- */
.section--snack{background:var(--bg-alt);}
.snack__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px;flex-wrap:wrap;gap:16px;}
.snack__eyebrow{margin-bottom:8px;}
.snack__dot{display:inline-block;width:6px;height:6px;background:var(--accent3);border-radius:99px;margin-right:8px;}
.snack__title{font-size:48px;line-height:1;margin:0;}
.snack__readall{font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;}
.snack__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;}
.snack__onephoto{display:block;position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  margin-bottom:24px;border:1px solid var(--rule);}
.snack__onephoto img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.snack__onephoto:hover img{transform:scale(1.03);}
.snack__onerank{position:absolute;left:16px;bottom:12px;font-family:'Instrument Serif',serif;font-style:italic;
  font-size:88px;line-height:.8;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55);}
.snack__credit{margin:-16px 0 20px;font-size:10px;letter-spacing:.04em;color:var(--ink-soft);}
.snack__credits{margin:14px 4px 0;font-size:10px;letter-spacing:.04em;color:var(--ink-soft);line-height:1.8;}
.snack__credits .eyebrow{display:block;margin-bottom:2px;}
.snack__creditcity{font-weight:600;}
.snack__credit .rich-item,.snack__credits .rich-item{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}
.snack__onebody{min-width:0;}
.snack__onecity{display:inline-block;font-size:48px;line-height:1;margin-top:6px;color:var(--ink);text-decoration:none;}
.snack__onecity:hover{color:var(--accent);}
.snack__oneblurb{font-size:17px;line-height:1.5;color:var(--ink-soft);margin:16px 0 0;}
.snack__oneblurb strong{color:var(--ink);}
.scorebars{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.scorebar__label{margin-bottom:6px;}
.scorebar .track{height:6px;background:var(--bg-alt);border-radius:99px;overflow:hidden;}
.scorebar .fill{height:100%;background:var(--accent2);}
.ranklist{list-style:none;margin:0;padding:0;}
.ranklist li{border-bottom:1px solid var(--rule);}
.ranklist__link{display:grid;grid-template-columns:32px 48px 1fr auto;align-items:center;gap:14px;
  padding:10px 4px;text-decoration:none;color:var(--ink);transition:background .12s ease;border-radius:8px;}
.ranklist__link:hover{background:var(--bg-alt);}
.ranklist .r{font-family:'Instrument Serif',serif;font-style:italic;font-size:28px;color:var(--ink-soft);text-align:center;}
.ranklist__thumb{width:48px;height:48px;border-radius:10px;overflow:hidden;background:var(--bg-alt);}
.ranklist__thumb img{width:100%;height:100%;object-fit:cover;}
.ranklist__city{font-size:19px;}

/* ---------- Category explorer ---------- */
.cats{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start;}
.cats__eyebrow{margin-bottom:12px;}
.cats__title{font-size:64px;line-height:.95;margin:0;}
.cats__sub{font-size:18px;line-height:1.5;color:var(--ink-soft);margin-top:20px;max-width:380px;}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);
  border-radius:14px;overflow:hidden;background:var(--paper);}
.cat{padding:28px 24px;text-align:left;min-height:200px;display:flex;flex-direction:column;
  justify-content:space-between;text-decoration:none;color:var(--ink);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background .12s,color .12s;}
.cat:hover{background:var(--ink);color:var(--bg);}
.cat__glyph{font-size:32px;color:var(--accent);line-height:1;}
.cat__title{font-family:'Instrument Serif',serif;font-size:28px;line-height:1;margin-bottom:8px;}
.cat__copy{font-family:'Newsreader',serif;font-size:14px;line-height:1.45;margin:0;color:var(--ink-soft);}
.cat:hover .cat__copy{color:rgba(244,239,230,.75);}

/* ---------- Latest grid ---------- */
.section--latest{background:var(--paper);}
.latest__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:36px;flex-wrap:wrap;gap:16px;}
.latest__eyebrow{margin-bottom:10px;}
.latest__title{font-size:56px;line-height:1;margin:0;}
.latest__chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.tag--active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.latest__more{margin-top:40px;text-align:center;}

/* .grid-cards + .acard live in homesnacks.css (shared) so the related grid on
   single posts and the archive feature/rows render with the same card styles. */

/* ---------- Methodology ---------- */
.method{background:var(--ink);color:var(--bg);}
.method__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;
  max-width:1400px;margin:0 auto;padding:96px 40px;}
.method__eyebrow{color:var(--accent);margin-bottom:18px;}
.method h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:72px;line-height:.95;margin:0;}
.method__lede{font-size:20px;line-height:1.55;margin-top:28px;max-width:540px;color:rgba(244,239,230,.78);}
.method__ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.method__cta-light{background:var(--bg);color:var(--ink);}
.method__cta-ghost{color:var(--bg);border-color:rgba(244,239,230,.2);}
.method ol{list-style:none;padding:0;margin:0;}
.method li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-top:1px solid rgba(244,239,230,.12);}
.method .step{font-family:'Instrument Serif',serif;font-style:italic;font-size:36px;color:var(--accent);}
.method__steptitle{font-size:17px;font-weight:600;margin-bottom:4px;}
.method__stepcopy{font-size:15px;color:rgba(244,239,230,.65);line-height:1.5;}

/* ---------- State directory ---------- */
.directory__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;}
.directory__title{font-size:40px;line-height:1;margin:0;}
.directory__az{font-size:13px;color:var(--ink-soft);}
.directory{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule);}
.directory a{padding:14px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;
  font-family:'Newsreader',serif;font-size:17px;}
.directory a:hover{background:var(--bg-alt);}
.directory__abbr{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--ink-soft);}
.hubs__eyebrow{margin:36px 0 12px;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero__grid,.snack__grid,.cats,.method__grid{grid-template-columns:1fr;gap:40px;}
  .hero__mapcard{position:static;}
  .catgrid,.grid-cards{grid-template-columns:repeat(2,1fr);}
  .directory{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:clamp(44px,12vw,72px);}
  .snack__onerank{font-size:64px;}
}
@media(max-width:760px){
  .hero__grid{padding:24px 20px 40px;}
  .method__grid{padding:56px 20px;}
}
@media(max-width:560px){
  .catgrid,.grid-cards,.directory{grid-template-columns:1fr;}
  .hero__stats,.scorebars{grid-template-columns:1fr 1fr;}
}