/* Homepage front page — faithful port of docs/product-knowledge/brand-exploration/prototype
   (index.html / styles.css / app.js) and docs/product-knowledge/tokens/tokens.css, using the
   `.hf-*` class names already present in app/views/public/home/index.html.erb. Scoped under
   .home-front so it never leaks onto other pages.

   Mapping to the prototype's real selectors (for anyone diffing against styles.css):
     hf-mast          -> .hdr.mast / .mast
     hf-mast-row      -> .mast .row
     hf-mast-brand    -> .mast-brand
     hf-mast-logo     -> .mast-logo
     hf-mast-tag      -> .mast-tag
     hf-mast-nav      -> .mast nav / .mast nav a
     hf-sectionbar    -> .sectionbar / .sectionbar-row
     hf-beats         -> .beats / .beats a
     hf-top           -> .vx-top (named grid-template-areas, breakpoints 768px/1100px)
     hf-lead-link     -> .vx-lead-link / .lead-link
     hf-lead-img      -> .vx-lead-ph (aspect-ratio 4/3)
     hf-lead-text     -> .vx-lead-text (centered)
     hf-lead-h        -> .vx-lead-h
     hf-dek           -> .t-dek
     hf-start         -> .vx-start
     hf-box-h         -> .vx-box-h
     hf-brief         -> .vx-brief (numbered circular badges)
     hf-side          -> .vx-side / .vx-side-item / .vx-side-h / .vx-side-dek
     hf-nlband        -> .nlband / .nlband-in / .nlband-text / .nlband-cta
     hf-beat-sec      -> .vx-sec
     hf-beat-head     -> .vx-sec-head (4px top border)
     hf-beat-h        -> .vx-sec-h (huge editorial clamp)
     hf-beat-body     -> .vx-sec-body (1.7fr/1fr at 900px)
     hf-beat-lead(-h) -> .vx-sec-lead / .vx-sec-lead-h
     hf-beat-list(-h) -> .vx-sec-list / .vx-sec-item-h
     hf-river         -> .vx-river / .vx-row / .vx-row-h
     hf-railhead      -> .railhead
     hf-ftr/hf-fcols  -> .ftr / .fcols

   Deliberate deviation: buttons use the prototype's real --color-action-primary blue
   (#216BFF / hover #0054FC) rather than the repo's default saturated red. A solid blue fill
   with white text is not a white/near-white button, so it already satisfies this repo's
   CLAUDE.md button-visibility rule while being faithful to the prototype. */

.home-front {
  /* color tokens (tokens.css) */
  --hf-ink: #212121;
  --hf-ink-a80: rgba(33, 33, 33, 0.8);
  --hf-ink-a70: rgba(33, 33, 33, 0.7);
  --hf-ink-a50: rgba(33, 33, 33, 0.5);
  --hf-ink-a40: rgba(33, 33, 33, 0.4);
  --hf-ink-a10: rgba(33, 33, 33, 0.1);
  --hf-white: #ffffff;
  --hf-link: #216bff;
  --hf-accent: #216bff;
  --hf-accent-hover: #0054fc;
  --hf-city-red: #c8102e;
  --hf-surface-subtle: #eef2f6;
  --hf-surface-blue: #d2f4ff;
  --hf-border: var(--hf-ink-a10);
  --hf-border-field: var(--hf-ink-a50);

  /* type tokens */
  --hf-font-primary: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hf-font-editorial: 'Bricolage Grotesque', Inter, system-ui, sans-serif;

  /* spacing tokens (tokens.css --space-*) */
  --hf-space-4: 4px;
  --hf-space-8: 8px;
  --hf-space-12: 12px;
  --hf-space-16: 16px;
  --hf-space-20: 20px;
  --hf-space-24: 24px;
  --hf-space-32: 32px;
  --hf-space-40: 40px;
  --hf-space-48: 48px;
  --hf-space-64: 64px;
  --hf-radius-6: 6px;
  --hf-radius-pill: 9999px;

  color: var(--hf-ink);
  font-family: var(--hf-font-primary);
  background: var(--hf-white);
}

.home-front .hf-edge { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.home-front a { color: inherit; text-decoration: none; }

/* utility/type-role classes (already used across the ERB) */
.home-front .hf-label {
  font-family: var(--hf-font-primary); font-weight: 700; font-size: 12px; line-height: 1.25;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.home-front .hf-dek { font-family: var(--hf-font-primary); font-weight: 400; font-size: 20px; line-height: 1.5; }
.home-front .hf-c-secondary { color: var(--hf-ink-a70); }
.home-front .hf-meta { display: block; font-family: var(--hf-font-primary); font-weight: 500; font-size: 13px; line-height: 1.5; }
.home-front .hf-c-primary { color: var(--hf-ink); }

.home-front .hf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hf-space-8);
  min-height: 44px; padding-inline: var(--hf-space-24); border-radius: var(--hf-radius-pill);
  background: var(--hf-accent); color: var(--hf-white); font-weight: 700; font-size: 15px;
  line-height: 1.25; border: 0; cursor: pointer; white-space: nowrap;
  transition: background-color 150ms ease-out;
}
.home-front .hf-btn:hover { background: var(--hf-accent-hover); }

/* ---------------------------------------------------------------- masthead (.hdr.mast / .mast) */
.home-front .hf-mast { background: var(--hf-white); border-bottom: 0; position: relative; }
.home-front .hf-mast::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hf-ink);
}
.home-front .hf-mast-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hf-space-16);
  flex-wrap: wrap; padding-block: var(--hf-space-24) var(--hf-space-32); position: relative;
}
.home-front .hf-mast-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hf-space-16);
  flex-wrap: wrap; padding-block: var(--hf-space-8) var(--hf-space-20); position: relative;
}
.home-front .hf-mast-actions {
  display: flex; align-items: center; gap: var(--hf-space-16); flex-wrap: wrap; position: relative;
}
.home-front .hf-mast-cta-top { flex-shrink: 0; position: relative; z-index: 2; }
.home-front .hf-mast-pill {
  display: none; position: absolute; top: 40px; left: 268px; z-index: 2;
  background: var(--hf-surface-subtle); color: var(--hf-ink); font-family: var(--hf-font-primary);
  font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: var(--hf-radius-pill); white-space: nowrap;
  transform: rotate(-6deg);
}
.home-front .hf-mast-arrow {
  display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible;
}
/* The path and head are drawn in pixels by mast_arrow_controller.js from the real positions of the pill and the
   button. Motion: the line draws once on load (pathLength is normalised to 1, so the timing does not depend on the
   drawn length), then the head fades in as it finishes. No loop; static under prefers-reduced-motion. */
.home-front .hf-mm-arrow-path {
  fill: none; stroke: #ff7866; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.home-front .hf-mm-arrow-head { fill: #ff7866; }
.home-front .hf-mm-arrow-head-drawn { fill: #ff7866; stroke: #ff7866; stroke-width: 1.5; stroke-linejoin: round; }
.home-front .hf-mm-arrow-head-drawn[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .home-front .hf-mm-arrow-path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: hf-mast-arrow-draw 1.2s cubic-bezier(.45, .05, .25, 1) .3s forwards;
  }
  .home-front .hf-mm-arrow-head, .home-front .hf-mm-arrow-head-drawn {
    opacity: 0; animation: hf-mast-arrow-head-in .25s ease-out 1.45s forwards;
  }
}
@keyframes hf-mast-arrow-draw { to { stroke-dashoffset: 0; } }
@keyframes hf-mast-arrow-head-in { to { opacity: 1; } }
@media (min-width: 1024px) {
  .home-front .hf-mast-arrow { display: block; }
  .home-front .hf-mast-pill { display: inline-block; }
}
.home-front .hf-mast-brand { display: flex; flex-direction: column; gap: var(--hf-space-8); color: var(--hf-ink); }
.home-front .hf-mast-logo-row { display: flex; align-items: center; gap: var(--hf-space-8); }
.home-front .hf-mast-mark { width: clamp(1.5rem, 0.9rem + 2.8vw, 3rem); height: auto; flex-shrink: 0; overflow: visible; }
.home-front .hf-mast-mark-path { fill: var(--hf-ink); stroke: var(--hf-white); stroke-width: .5; stroke-linejoin: round; }
.home-front .hf-mast-logo {
  font-family: var(--hf-font-editorial); font-weight: 800; font-size: clamp(1.875rem, 1rem + 4vw, 4.5rem);
  line-height: 0.9; letter-spacing: -0.045em;
}
.home-front .hf-mast-tag {
  font-family: var(--hf-font-primary); font-weight: 600; font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
  letter-spacing: 0.02em;
}
.home-front .hf-mast-nav { align-self: center; align-items: flex-start; display: flex; gap: 0; }
.home-front .hf-mast-nav a {
  min-height: auto; padding: var(--hf-space-4) var(--hf-space-16) var(--hf-space-8);
  border-left: 1px solid var(--hf-ink); color: var(--hf-ink); font-weight: 600; font-size: 14px;
}
.home-front .hf-mast-nav a:hover { color: var(--hf-link); }
/* Log out is a form button (DELETE); styled as one more nav link */
.home-front .hf-mast-navform { display: contents; }
.home-front .hf-mast-navbtn {
  padding: var(--hf-space-4) var(--hf-space-16) var(--hf-space-8); border: 0; border-left: 1px solid var(--hf-ink);
  background: none; color: var(--hf-ink); font-family: var(--hf-font-primary); font-weight: 600; font-size: 14px; line-height: inherit; cursor: pointer;
}
.home-front .hf-mast-navbtn:hover { color: var(--hf-link); }
.home-front .hf-mast-nav .hf-mast-cta {
  align-self: center; margin-left: var(--hf-space-12); border-left: 0; padding: 0 var(--hf-space-20);
  min-height: 40px; color: var(--hf-white); font-size: 14px;
}
.home-front .hf-mast-nav .hf-mast-cta:hover { color: var(--hf-white); }
.home-front .hf-burger {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-left: auto; border: 0; background: none; color: var(--hf-ink); cursor: pointer; border-radius: var(--hf-radius-6);
}
.home-front .hf-burger .hf-b-close { display: none; }
.home-front .hf-burger[aria-expanded="true"] .hf-b-open { display: none; }
.home-front .hf-burger[aria-expanded="true"] .hf-b-close { display: inline; }

@media (max-width: 639px) {
  .home-front .hf-mast-top { align-items: center; padding-block: var(--hf-space-16); flex-wrap: nowrap; }
  .home-front .hf-mast-map { display: none !important; }
  .home-front .hf-burger { display: inline-flex; }
  .home-front .hf-mast-nav {
    display: none; position: fixed; left: 0; right: 0; top: 164px; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--hf-white);
    border-top: 1px solid var(--hf-border); box-shadow: 0 18px 40px -18px rgba(33, 33, 33, .28);
  }
  .home-front .hf-mast-nav.is-open { display: flex; }
  .home-front .hf-mast-nav a {
    border-left: 0; border-top: 1px solid var(--hf-border); padding: var(--hf-space-16) var(--hf-edge, var(--hf-space-16));
    min-height: 48px; display: flex; align-items: center;
  }
  .home-front .hf-mast-nav .hf-mast-cta { margin: var(--hf-space-12) var(--hf-space-16); border-top: 0; }
  .home-front .hf-mast-navbtn {
    border-left: 0; border-top: 1px solid var(--hf-border); padding: var(--hf-space-16) var(--hf-edge, var(--hf-space-16));
    min-height: 48px; display: flex; align-items: center; text-align: left; width: 100%;
  }
}

/* ---------------------------------------------------------------- masthead map (.mast-map / .mm-*) */
.home-front .hf-mast-map { display: none; }
@media (min-width: 640px) {
  .home-front .hf-mast-map {
    display: flex; flex-direction: row; align-items: flex-end; gap: var(--hf-space-12);
    margin-left: auto; margin-right: var(--hf-space-32); align-self: flex-end;
    margin-block: calc(-1 * var(--hf-space-8)) 0;
  }
}
.home-front .hf-mm-svg { display: block; height: 104px; width: auto; overflow: visible; }
.home-front .hf-mm-land { fill: var(--hf-surface-subtle); stroke: var(--hf-ink); stroke-width: .7; stroke-linejoin: round; }
.home-front .hf-mm-dot { fill: var(--hf-ink); }
.home-front .hf-mm-big { fill: var(--hf-city-red); stroke: var(--hf-white); stroke-width: .7; }
.home-front .hf-mm-ring { fill: none; stroke: var(--hf-city-red); stroke-width: .5; opacity: 0; }
.home-front .hf-mm-origin { fill: var(--hf-city-red); }
.home-front .hf-mm-pulse { fill: none; stroke: var(--hf-city-red); stroke-width: .6; opacity: 0; }
.home-front .hf-mm-cap {
  margin: 0; padding-bottom: var(--hf-space-4); line-height: 1.3; max-width: 5ch; white-space: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .04em;
  color: var(--hf-ink); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .home-front .hf-mm-land { stroke-dasharray: 1; animation: hf-mm-trace .8s cubic-bezier(.4,0,.2,1) both, hf-mm-fill .5s ease-out .55s both; }
  .home-front .hf-mm-dot { transform-box: fill-box; transform-origin: center; animation: hf-mm-pop .35s cubic-bezier(.3,1.6,.5,1) var(--d) both; }
  .home-front .hf-mm-big { transform-box: fill-box; transform-origin: center; animation: hf-mm-pop .5s cubic-bezier(.3,1.8,.5,1) var(--d) both; }
  .home-front .hf-mm-ring { transform-box: fill-box; transform-origin: center; animation: hf-mm-ring .9s ease-out var(--d) both; }
  .home-front .hf-mm-origin { transform-box: fill-box; transform-origin: center; animation: hf-mm-pop .4s cubic-bezier(.3,1.8,.5,1) .3s both; }
  .home-front .hf-mm-pulse { transform-box: fill-box; transform-origin: center; animation: hf-mm-ring 1.1s ease-out .35s both; }
  .home-front .hf-mm-pulse2 { animation-delay: .75s; }
}
@keyframes hf-mm-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hf-mm-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes hf-mm-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hf-mm-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }

/* ---------------------------------------------------------------- "Find your city" picker (.picker)
   Simplified from the prototype: a flat searchable list instead of a region/city two-pane popover,
   since the real ~10 TXLW cities have no region data and don't need browsing-by-region. */
.home-front .hf-ic16 { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-front .hf-ic20 { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-front .hf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-front .hf-sectionbar-row { display: flex; align-items: center; flex-wrap: nowrap; }
.home-front .hf-picker {
  position: relative; flex: none; display: flex; align-items: center;
  padding-right: var(--hf-space-12); margin-right: var(--hf-space-4); border-right: 1px solid var(--hf-border);
}
.home-front .hf-picker-btn {
  display: inline-flex; align-items: center; gap: var(--hf-space-8); min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--hf-ink);
}
.home-front .hf-picker-btn:hover .hf-picker-lbl { color: var(--hf-link); }
.home-front .hf-picker-chev { transition: transform 150ms ease-out; }
.home-front .hf-picker-btn[aria-expanded="true"] .hf-picker-chev { transform: rotate(180deg); }
.home-front .hf-picker-panel {
  position: absolute; z-index: 20; left: 0; top: calc(100% + var(--hf-space-4));
  width: min(24rem, calc(100vw - 2 * var(--hf-space-16)));
  background: var(--hf-white); border: 1px solid var(--hf-border); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(33, 33, 33, .28); overflow: hidden;
}
.home-front .hf-picker-search {
  display: flex; align-items: center; gap: var(--hf-space-8); margin: var(--hf-space-12);
  padding-left: var(--hf-space-12); border: 1px solid var(--hf-border-field); border-radius: 6px;
  color: var(--hf-ink-a70);
}
.home-front .hf-picker-search:focus-within { outline: 2px solid var(--hf-link); outline-offset: 2px; }
.home-front .hf-picker-search input {
  flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 15px; color: var(--hf-ink);
}
.home-front .hf-picker-results {
  list-style: none; margin: 0; padding: var(--hf-space-4) var(--hf-space-8) var(--hf-space-8);
  max-height: 20rem; overflow-y: auto; border-top: 1px solid var(--hf-border);
}
.home-front .hf-picker-results li {
  display: flex; align-items: center; min-height: 44px; padding-inline: var(--hf-space-12);
  border-radius: 6px; color: var(--hf-ink);
}
.home-front .hf-picker-results li a { display: block; width: 100%; padding-block: var(--hf-space-8); }
.home-front .hf-picker-results li.is-active { background: var(--hf-surface-subtle); }
.home-front .hf-picker-none { padding-block: var(--hf-space-12); color: var(--hf-ink-a70); }

/* two-pane: county list left, that county's cities right (real County data, not the prototype's regions) */
.home-front .hf-picker-panes {
  display: grid; grid-template-columns: 11rem 1fr; height: 18rem;
  border-top: 1px solid var(--hf-border);
}
.home-front .hf-picker-counties {
  list-style: none; margin: 0; padding: var(--hf-space-4) 0; overflow-y: auto;
  background: var(--hf-surface-subtle); border-right: 1px solid var(--hf-border);
}
.home-front .hf-picker-county {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hf-space-8);
  width: 100%; min-height: 44px; padding: 0 var(--hf-space-12) 0 var(--hf-space-16);
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 15px; text-align: left;
  color: var(--hf-ink-a70);
}
.home-front .hf-picker-county svg { opacity: 0; }
.home-front .hf-picker-county:hover { color: var(--hf-ink); }
.home-front .hf-picker-county.is-on { background: var(--hf-white); color: var(--hf-ink); font-weight: 600; }
.home-front .hf-picker-county.is-on svg { opacity: 1; }
.home-front .hf-picker-cities-pane { overflow-y: auto; overscroll-behavior: contain; padding: var(--hf-space-8) var(--hf-space-16); }
.home-front .hf-picker-county-list ul { list-style: none; margin: 0; padding: 0; }
.home-front .hf-picker-county-list li a { display: block; padding-block: var(--hf-space-8); color: var(--hf-ink); }
.home-front .hf-picker-county-list a:hover { color: var(--hf-link); }

/* ---------------------------------------------------------------- section bar (.sectionbar) */
.home-front .hf-sectionbar { border-bottom: 1px solid var(--hf-border); }
.home-front .hf-sectionbar .hf-edge { padding-block: var(--hf-space-4); }
.home-front .hf-beats { display: flex; gap: var(--hf-space-4); overflow-x: auto; scrollbar-width: none; }
.home-front .hf-beats::-webkit-scrollbar { display: none; }
.home-front .hf-beats a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--hf-space-8);
  font-weight: 600; font-size: 13px; color: var(--hf-ink-a70); white-space: nowrap;
  text-decoration: underline 2px transparent; text-underline-offset: 10px;
  transition: color 150ms ease-out;
}
.home-front .hf-beats a:hover { color: var(--hf-ink); }

/* ---------------------------------------------------------------- top grid (.vx-top) */
.home-front .hf-top {
  display: grid; gap: var(--hf-space-32); padding-block: var(--hf-space-32) var(--hf-space-48);
  grid-template-areas: "lead" "start" "side";
}
.home-front .hf-top > section[aria-label="Lead story"] { grid-area: lead; }
.home-front .hf-start { grid-area: start; }
.home-front .hf-top > section[aria-label="More top stories"] { grid-area: side; }
@media (min-width: 768px) {
  .home-front .hf-top { grid-template-columns: 1fr 1fr; grid-template-areas: "lead lead" "start side"; }
}
@media (min-width: 1100px) {
  .home-front .hf-top {
    grid-template-columns: 15rem minmax(0, 1fr) 17rem; grid-template-areas: "start lead side"; gap: var(--hf-space-32);
  }
  .home-front .hf-top > section[aria-label="More top stories"] {
    padding-left: var(--hf-space-32); border-left: 1px solid var(--hf-border);
  }
}
}

.home-front .hf-lead-link { display: block; }
.home-front .hf-lead-img { aspect-ratio: 4 / 3; border-radius: var(--hf-radius-6); overflow: hidden; background: var(--hf-surface-subtle); }
.home-front .hf-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-front .hf-lead-text {
  margin-top: var(--hf-space-20); text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: var(--hf-space-12);
}
.home-front .hf-lead-h {
  margin: 0; font-family: var(--hf-font-editorial); font-weight: 800; font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--hf-ink); text-wrap: balance;
}
.home-front .hf-lead-link:hover .hf-lead-h { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.home-front .hf-lead-text .hf-dek { max-width: 48ch; }
.home-front .hf-lead-text .hf-label { color: var(--hf-city-red); }

.home-front .hf-start {
  align-self: start; padding: var(--hf-space-16) var(--hf-space-20) var(--hf-space-20); border: 1px solid var(--hf-border);
}
.home-front .hf-box-h {
  margin: 0 0 var(--hf-space-12); padding-bottom: var(--hf-space-12); border-bottom: 1px solid var(--hf-border);
  font-family: var(--hf-font-primary); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
}
.home-front .hf-brief { list-style: none; margin: 0; padding: 0; counter-reset: hfb; display: grid; gap: var(--hf-space-16); }
.home-front .hf-brief li { position: relative; padding-left: var(--hf-space-32); counter-increment: hfb; font-size: 15px; line-height: 1.4; color: var(--hf-ink); }
.home-front .hf-brief li::before {
  content: counter(hfb); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--hf-ink); color: var(--hf-white); font-size: 13px; font-weight: 700;
}
.home-front .hf-brief a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--hf-border-field); }
.home-front .hf-brief a:hover { text-decoration-color: currentColor; }

.home-front .hf-side { display: grid; gap: var(--hf-space-24); align-content: start; }
.home-front .hf-side-item + .hf-side-item { padding-top: var(--hf-space-24); border-top: 1px solid var(--hf-border); }
.home-front .hf-side-item a { display: flex; flex-direction: column; gap: var(--hf-space-8); }
.home-front .hf-side-img { aspect-ratio: 4 / 3; border-radius: var(--hf-radius-6); overflow: hidden; background: var(--hf-surface-subtle); margin-bottom: var(--hf-space-4); }
.home-front .hf-side-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-front .hf-side-h { margin: 0; font-family: var(--hf-font-editorial); font-weight: 800; font-size: 1.125rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--hf-ink); text-wrap: pretty; }
.home-front .hf-side-item a:hover .hf-side-h { text-decoration: underline; text-underline-offset: 3px; }
/* Below the wide layout only the first three side stories show (the rail sits under the lead, beside "Start here"). */
.home-front .hf-side-item:nth-child(n+4) { display: none; }
/* Wide layout: three columns that should end together. Three big stacked cards made the rail about 450px taller than the lead
   and "Start here", leaving white space under both, so the rail is five compact rows (square thumbnail beside the headline),
   about as tall as the lead. */
@media (min-width: 1100px) {
  .home-front .hf-side { gap: 0; align-content: start; }
  .home-front .hf-side-item:nth-child(n+4) { display: block; }
  .home-front .hf-side-item + .hf-side-item { padding-top: var(--hf-space-16); }
  .home-front .hf-side-item:not(:last-child) { padding-bottom: var(--hf-space-16); }
  .home-front .hf-side-item a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--hf-space-12); row-gap: var(--hf-space-4); align-content: start; }
  .home-front .hf-side-img { grid-row: 1 / span 2; aspect-ratio: 1; margin: 0; }
  .home-front .hf-side-h { font-size: 1rem; }
  /* "Start here" takes the full row height too, its five items spaced evenly down the card, so no column stops short. */
  .home-front .hf-start { align-self: stretch; display: flex; flex-direction: column; }
  .home-front .hf-brief { flex: 1; align-content: space-between; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .home-front .hf-side-item a { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--hf-space-16); row-gap: var(--hf-space-8); align-content: start; }
  .home-front .hf-side-img { grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; }
}

/* ---------------------------------------------------------------- newsletter band (.nlband) */
.home-front .hf-nlband { background: var(--hf-surface-blue); }
.home-front .hf-nlband-in { display: grid; gap: var(--hf-space-20); padding-block: var(--hf-space-40); }
@media (min-width: 960px) {
  .home-front .hf-nlband-in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--hf-space-48); align-items: center; }
}
.home-front .hf-nlband-h {
  margin: 0; font-family: var(--hf-font-primary); font-weight: 700; font-size: clamp(24px, calc(24px + 0.0097 * (100vw - 375px)), 32px);
  line-height: 1.25; letter-spacing: 0;
}
.home-front .hf-nlband-text p { margin-top: var(--hf-space-8); }
.home-front .hf-nlband-text a { color: var(--hf-link); white-space: nowrap; }
.home-front .hf-nlband-text a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-front .hf-nlband-cta { min-height: 52px; padding-inline: var(--hf-space-32); font-size: 17px; }
@media (max-width: 639px) { .home-front .hf-nlband-cta { width: 100%; } }
.home-front .hf-memberband { background: var(--hf-surface-subtle); }

/* Band accents, played once on first view by in_view_controller.js. The finished state is the
   default, so reduced motion and no-JS readers just see it at rest. */
.home-front .hf-member-mark {
  --hf-mark: color-mix(in srgb, var(--hf-accent) 22%, transparent);
  background: linear-gradient(var(--hf-mark), var(--hf-mark)) no-repeat 0 85% / 100% 60%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  /* highlighter: sweeps left to right behind the words */
  .home-front .hf-member-mark.is-armed { background-size: 0% 60%; }
  .home-front .hf-member-mark.is-in { background-size: 100% 60%; transition: background-size 0.8s cubic-bezier(.65,0,.35,1) 0.2s; }
}

/* ---------------------------------------------------------------- beat sections (.vx-sec) */
.home-front .hf-beat-sec { padding-block: var(--hf-space-48) var(--hf-space-24); overflow-x: clip; }
.home-front .hf-beat-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hf-space-16);
  padding-top: var(--hf-space-16); border-top: 4px solid var(--hf-ink);
}
.home-front .hf-beat-h {
  margin: 0; font-family: var(--hf-font-editorial); font-weight: 800; font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  line-height: 0.95; letter-spacing: -0.04em;
}
.home-front .hf-beat-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hf-space-32); margin-top: var(--hf-space-24); }
@media (min-width: 900px) {
  .home-front .hf-beat-body { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--hf-space-40); }
}
.home-front .hf-beat-lead { display: flex; flex-direction: column; gap: var(--hf-space-8); }
.home-front .hf-beat-lead-img { aspect-ratio: 16 / 9; border-radius: var(--hf-radius-6); overflow: hidden; background: var(--hf-surface-subtle); margin-bottom: var(--hf-space-8); }
.home-front .hf-beat-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-front .hf-beat-lead .hf-label { color: var(--hf-city-red); font-family: var(--hf-font-primary); font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; }
.home-front .hf-beat-lead .hf-label::before { content: ""; }
.home-front .hf-beat-lead .hf-meta { margin-top: var(--hf-space-8); }
.home-front .hf-beat-lead-h {
  margin: 0; font-family: var(--hf-font-editorial); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--hf-ink);
}
.home-front .hf-beat-lead:hover .hf-beat-lead-h { text-decoration: underline; text-underline-offset: 4px; }
.home-front .hf-beat-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.home-front .hf-beat-list li { border-top: 1px solid var(--hf-border); }
.home-front .hf-beat-list li:first-child { border-top: 0; }
.home-front .hf-beat-list a { display: flex; flex-direction: column; gap: var(--hf-space-4); padding-block: var(--hf-space-16); }
.home-front .hf-beat-list li:first-child a { padding-top: 0; }
.home-front .hf-beat-list .hf-label { color: var(--hf-city-red); font-family: var(--hf-font-primary); font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; }
.home-front .hf-beat-item-h {
  margin: 0; font-family: var(--hf-font-editorial); font-weight: 800; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--hf-ink);
}
.home-front .hf-beat-list a:hover .hf-beat-item-h { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- river (.vx-river) */
.home-front .hf-river { padding-block: var(--hf-space-48) clamp(24px, calc(24px + 0.0291 * (100vw - 375px)), 48px); }
.home-front .hf-railhead { display: block; padding-bottom: var(--hf-space-12); border-bottom: 2px solid var(--hf-ink); margin: 0 0 var(--hf-space-8); }
.home-front .hf-river-row { border-bottom: 1px solid var(--hf-border); }
.home-front .hf-river-row a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--hf-space-16); align-items: center; padding-block: var(--hf-space-16); }
@media (min-width: 640px) {
  .home-front .hf-river-row a { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--hf-space-24); }
}
.home-front .hf-river-row a > div:last-child { display: flex; flex-direction: column; gap: var(--hf-space-8); }
.home-front .hf-river-img { aspect-ratio: 3 / 2; border-radius: var(--hf-radius-6); overflow: hidden; background: var(--hf-surface-subtle); }
.home-front .hf-river-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-front .hf-river-row .hf-label { color: var(--hf-city-red); font-family: var(--hf-font-primary); font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; }
.home-front .hf-river-h {
  margin: 0; font-family: var(--hf-font-editorial); font-weight: 800; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.15; color: var(--hf-ink);
}
.home-front .hf-river-row a:hover .hf-river-h { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- footer (.ftr) */
.home-front .hf-ftr { background: var(--hf-ink); color: var(--hf-white); padding-block: var(--hf-space-64) var(--hf-space-32); }
.home-front .hf-fcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-40) var(--hf-space-24); }
.home-front .hf-ftr .hf-logo {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: var(--hf-space-16);
  font-family: var(--hf-font-editorial); font-weight: 800;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); line-height: 0.92; letter-spacing: -0.045em; color: var(--hf-white);
  transition: opacity 150ms ease-out;
}
.home-front .hf-ftr .hf-logo-text { width: min-content; }
.home-front .hf-ftr .hf-mast-mark { width: clamp(4.5rem, 3.6rem + 2.5vw, 6.5rem); }
.home-front .hf-ftr .hf-mast-mark-path { fill: var(--hf-surface-blue); stroke: var(--hf-ink); }
.home-front .hf-ftr .hf-flabel { display: block; margin-bottom: var(--hf-space-12); color: rgba(255, 255, 255, 0.7); }
.home-front .hf-ftr .hf-flinks a { display: block; padding-block: var(--hf-space-4); font-size: 15px; line-height: 1.4; color: var(--hf-white); transition: opacity 150ms ease-out; }
.home-front .hf-ftr .hf-logo:hover, .home-front .hf-ftr .hf-flinks a:hover { text-decoration: none; opacity: 0.7; }
.home-front .hf-ftr a:focus-visible { outline: 2px solid var(--hf-white); outline-offset: 3px; }
.home-front .hf-ftr .hf-fcopy {
  grid-column: 1 / -1; margin: 0; padding-top: var(--hf-space-20); border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 768px) {
  .home-front .hf-fcols { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--hf-space-64); }
  .home-front .hf-ftr .hf-logo { margin-right: auto; }
  .home-front .hf-ftr .hf-fcopy { flex-basis: 100%; }
}

/* ================================================================== MOTION
   Ported from prototype/styles.css (sx-* rules ~1064-1194). All of it is
   gated behind prefers-reduced-motion: no-preference — with reduced motion,
   or without IntersectionObserver (see homepage_front_controller.js), nothing
   in this block ever gets its trigger class added, so the page is static. */
@media (prefers-reduced-motion: no-preference) {
  /* ---- draw-in rules on load: masthead rule + "Start here" underline ---- */
  .home-front .hf-mast { position: relative; }
  .home-front .hf-mast::after { animation: hf-li-draw 0.7s cubic-bezier(.2,.7,.2,1) both; }

  .home-front .hf-box-h { position: relative; border-bottom-color: transparent; }
  .home-front .hf-box-h::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hf-ink);
    transform-origin: 0 50%; animation: hf-li-draw 0.6s cubic-bezier(.2,.7,.2,1) 0.15s both;
  }

  /* ---- beat-section scroll entrance (.sx-armed -> .sx-in -> .sx-done) ---- */
  .home-front { --hf-sx-out: cubic-bezier(.22,1,.36,1); --hf-sx-inout: cubic-bezier(.65,0,.35,1); }

  .home-front .hf-beat-head { position: relative; }
  .home-front .hf-beat-sec.sx-armed .hf-beat-head { border-top-color: transparent; }
  .home-front .hf-beat-sec.sx-armed .hf-beat-head::before {
    content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--hf-ink);
    transform: scaleX(0); transform-origin: 0 50%;
  }
  .home-front .hf-beat-sec.sx-in .hf-beat-head::before { transform: scaleX(1); transition: transform 900ms var(--hf-sx-inout); }

  .home-front .hf-beat-sec.sx-armed .hf-beat-h { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
  .home-front .hf-beat-sec.sx-armed .hf-beat-h { transform: translateY(110%); display: inline-block; }
  .home-front .hf-beat-sec.sx-in .hf-beat-h { transform: none; transition: transform 900ms var(--hf-sx-out) 180ms; }

  .home-front .hf-beat-sec.sx-armed .hf-beat-lead-img { clip-path: inset(100% 0 0 0); }
  .home-front .hf-beat-sec.sx-armed .hf-beat-lead-img img { transform: scale(1.12); }
  .home-front .hf-beat-sec.sx-in .hf-beat-lead-img { clip-path: inset(0); transition: clip-path 1000ms var(--hf-sx-inout) 250ms; }
  .home-front .hf-beat-sec.sx-in .hf-beat-lead-img img { transform: none; transition: transform 1500ms var(--hf-sx-out) 250ms; }

  .home-front .hf-beat-sec.sx-armed .hf-sx-stage > :not(.hf-beat-lead-img),
  .home-front .hf-beat-sec.sx-armed .hf-sx-prog { opacity: 0; transform: translateY(14px); }
  .home-front .hf-beat-sec.sx-in .hf-sx-stage > :not(.hf-beat-lead-img),
  .home-front .hf-beat-sec.sx-in .hf-sx-prog { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 700ms var(--hf-sx-out); }
  .home-front .hf-beat-sec.sx-in .hf-sx-stage > :nth-child(2) { transition-delay: 650ms; }
  .home-front .hf-beat-sec.sx-in .hf-sx-stage > :nth-child(3) { transition-delay: 730ms; }
  .home-front .hf-beat-sec.sx-in .hf-sx-stage > :nth-child(4) { transition-delay: 810ms; }
  .home-front .hf-beat-sec.sx-in .hf-sx-stage > :nth-child(5) { transition-delay: 890ms; }
  .home-front .hf-beat-sec.sx-in .hf-sx-prog { transition-delay: 1000ms; }

  .home-front .hf-beat-sec.sx-armed .hf-beat-list li { opacity: 0; transform: translateX(28px); border-top-color: transparent; }
  .home-front .hf-beat-sec.sx-in .hf-beat-list li { opacity: 1; transform: none; transition: opacity 600ms ease-out var(--hf-sx-d), transform 800ms var(--hf-sx-out) var(--hf-sx-d); }
  .home-front .hf-beat-sec.sx-in .hf-beat-list li:nth-child(1) { --hf-sx-d: 450ms; }
  .home-front .hf-beat-sec.sx-in .hf-beat-list li:nth-child(2) { --hf-sx-d: 570ms; }
  .home-front .hf-beat-sec.sx-in .hf-beat-list li:nth-child(3) { --hf-sx-d: 690ms; }

  .home-front .hf-beat-sec.sx-done .hf-beat-head::before,
  .home-front .hf-beat-sec.sx-done .hf-beat-h,
  .home-front .hf-beat-sec.sx-done .hf-beat-lead-img,
  .home-front .hf-beat-sec.sx-done .hf-beat-lead-img img,
  .home-front .hf-beat-sec.sx-done .hf-beat-list li,
  .home-front .hf-beat-sec.sx-done .hf-sx-prog { transition: none; }

  /* ---- rotating-lead stage swap (sx-leave / sx-enter). Provisional timing candidates from
     txlw-motion-decisions.md D3: out 100ms, in 150ms, in starts 80ms after out begins. ---- */
  .home-front .hf-sx-stage { transition: opacity 100ms ease-in; }
  .home-front .hf-sx-stage.hf-sx-leave { opacity: 0; }
  .home-front .hf-sx-stage.hf-sx-enter { animation: hf-sx-in 150ms ease-out both; }

  .home-front .hf-beat-list li { position: relative; }
  .home-front .hf-beat-list li::after {
    content: ""; position: absolute; left: -16px; top: var(--hf-space-16); bottom: var(--hf-space-16); width: 3px; border-radius: 2px; background: #fd7869;
    transform: scaleY(0); transform-origin: 50% 0; transition: transform 150ms ease-out;
  }
  .home-front .hf-beat-list li:first-child::after { top: 0; }
  .home-front .hf-beat-list li.sx-on::after { transform: scaleY(1); }
}

@keyframes hf-li-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hf-sx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hf-sx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- shared slot: every story sits invisibly in the lead's one grid cell, so the cell takes
   the tallest story's height and nothing below moves on a swap (txlw-motion-decisions.md §9) ---- */
.home-front .hf-beat-lead.hf-sx-sized { display: grid; }
.home-front .hf-beat-lead.hf-sx-sized > * { grid-area: 1 / 1; min-width: 0; }
.home-front .hf-sx-sizer { visibility: hidden; }

/* ---- rotation progress segments (unaffected by reduced-motion gate above: always rendered so
   the segment markers are visible, only the *fill* animation is motion) ---- */
.home-front .hf-sx-prog { display: flex; gap: 6px; margin-bottom: var(--hf-space-12); flex: 1 1 auto; min-width: 80px; }
.home-front .hf-sx-prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--hf-border); overflow: hidden; display: block; }
.home-front .hf-sx-prog i b { display: block; height: 100%; background: #fd7869; transform: scaleX(0); transform-origin: 0 50%; }
.home-front .hf-sx-prog i.done b { transform: scaleX(1); background: var(--hf-ink); }
@media (prefers-reduced-motion: no-preference) {
  .home-front .hf-sx-prog i.on b { animation: hf-sx-fill 2420ms linear forwards; }
  .home-front .hf-beat-sec.sx-paused .hf-sx-prog i.on b { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .home-front .hf-sx-prog i.on b { transform: scaleX(1); }
}

/* ---------------------------------------------------------------- after you subscribe (.hf-after)
   Plain list by default (no JS, phones, reduced motion). after_steps_controller.js adds .is-pinned on wide, tall screens with
   motion allowed: the steps stay put on the left while a scene scrubs with scroll on the right. Opacity and transform only. */
.home-front .hf-after { padding-block: var(--hf-space-48); }
.home-front .hf-after .hf-label { margin: 0; }
.home-front .hf-after-h {
  margin: var(--hf-space-8) 0 0; font-family: var(--hf-font-editorial); font-weight: 800; letter-spacing: -0.045em; line-height: 1.06; color: var(--hf-ink);
  font-size: clamp(28px, calc(28px + 0.0145 * (100vw - 375px)), 40px); text-wrap: balance;
}
.home-front .hf-after-steps { list-style: none; margin: var(--hf-space-32) 0 0; padding: 0; display: grid; gap: var(--hf-space-32); }
.home-front .hf-after-steps li { display: flex; gap: var(--hf-space-12); padding-top: var(--hf-space-16); border-top: 2px solid var(--hf-ink); }
.home-front .hf-after-n { flex: none; width: 16px; font-size: 12px; font-weight: 700; line-height: 25px; color: var(--hf-ink); }
.home-front .hf-after-h3 { margin: 0; font-family: var(--hf-font-primary); font-weight: 600; line-height: 1.25; color: var(--hf-ink); font-size: clamp(18px, calc(18px + 0.00242 * (100vw - 375px)), 20px); }
.home-front .hf-after-steps p { margin: var(--hf-space-8) 0 0; line-height: 1.5; color: var(--hf-ink-a80); text-wrap: pretty; font-size: clamp(16px, calc(16px + 0.00121 * (100vw - 375px)), 17px); }
@media (min-width: 768px) { .home-front .hf-after-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hf-space-24); } }

/* Equal halves with a 24px gap, like the About scene and the Mews feature rows it follows. */
.home-front .hf-after-track.is-pinned { --hf-as-h: min(calc(100svh - 48px), 440px, 50vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--hf-space-24); height: 300svh; }
.home-front .is-pinned .hf-after-pin > * { max-width: 29rem; }
/* Text column and scene panel share one height (--hf-as-h) and the pair is centred in the window while pinned, so neither stops short. */
.home-front .is-pinned .hf-after-pin {
  position: sticky; top: calc((100svh - var(--hf-as-h)) / 2); align-self: start; height: var(--hf-as-h);
  display: flex; flex-direction: column; justify-content: center;
}
.home-front .is-pinned .hf-after-steps { grid-template-columns: 16px minmax(0, 1fr); grid-auto-rows: min-content; gap: var(--hf-space-16); }
.home-front .is-pinned .hf-after-steps li, .home-front .is-pinned .hf-after-steps li > div { display: contents; }
.home-front .is-pinned .hf-after-n { grid-column: 1; }
.home-front .is-pinned .hf-after-h3 {
  grid-column: 2; color: var(--hf-ink-a70); text-decoration: underline 2px transparent; text-underline-offset: 6px;
  transition: color 100ms ease-in, text-decoration-color 100ms ease-in;
}
.home-front .is-pinned .is-active .hf-after-h3 { color: var(--hf-ink); text-decoration-color: currentColor; transition: color 150ms ease-out, text-decoration-color 150ms ease-out; }
.home-front .is-pinned .hf-after-steps li { border-top: 0; padding-top: 0; }
.home-front .is-pinned .hf-after-steps p { grid-column: 1 / -1; grid-row: 5; margin: var(--hf-space-16) 0 0; opacity: 0; transition: opacity 100ms ease-in; }
.home-front .is-pinned .is-active p { opacity: 1; transition: opacity 150ms ease-out 80ms; }

/* The scene: decorative, aria-hidden, built by the controller. A neutral panel, so the page's pastel stays with the newsletter band. */
.home-front .hf-as {
  position: sticky; top: calc((100svh - var(--hf-as-h)) / 2); align-self: start; overflow: hidden; pointer-events: none;
  height: var(--hf-as-h); border-radius: var(--hf-radius-6); background: var(--hf-surface-subtle);
}
.home-front .hf-as > * { position: absolute; }
.home-front .hf-as-tag {
  top: var(--hf-space-16); left: var(--hf-space-16); padding: 4px 10px; border: 1.5px solid var(--hf-ink-a50, rgba(33, 33, 33, .5)); border-radius: 6px;
  font-size: 12px; line-height: 1.25; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--hf-ink-a70);
}
.home-front .hf-as-cities { inset: 18% 8%; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--hf-space-8); align-content: center; justify-content: center; }
.home-front .hf-as-cities li {
  padding: 8px 16px; border-radius: 9999px; background: var(--hf-white); border: 1px solid var(--hf-border-field, rgba(33, 33, 33, .5));
  font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--hf-ink); transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.home-front .hf-as-cities li.is-pick { background: var(--hf-accent); border-color: transparent; color: var(--hf-white); }
.home-front .hf-as-mail, .home-front .hf-as-story {
  left: 50%; top: 50%; width: min(68%, 380px); margin-left: calc(min(68%, 380px) / -2); transform: translateY(0);
  padding: var(--hf-space-24); border-radius: var(--hf-radius-6); background: var(--hf-white); border: 1px solid var(--hf-border);
  opacity: 0; box-shadow: 0 14px 28px -22px rgba(0, 0, 0, .45);
}
.home-front .hf-as-mail { margin-top: -110px; }
.home-front .hf-as-story { margin-top: -140px; }
.home-front .hf-as-label { margin: 0; font-size: 12px; line-height: 1.25; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--hf-ink); }
.home-front .hf-as-mail-h { margin: var(--hf-space-12) 0 var(--hf-space-16); font-family: var(--hf-font-editorial); font-weight: 800; font-size: 26px; line-height: 1.06; letter-spacing: -0.045em; color: var(--hf-ink); }
.home-front .hf-as-lines i, .home-front .hf-as-head i { display: block; height: 7px; border-radius: 4px; background: var(--hf-ink-a10, rgba(33, 33, 33, .1)); margin-bottom: 11px; }
.home-front .hf-as-head i { height: 12px; background: var(--hf-ink); }
.home-front .hf-as-head { margin-bottom: var(--hf-space-16); }
.home-front .hf-as-gate {
  position: absolute; left: 0; right: 0; bottom: var(--hf-space-24); margin: 0 auto; width: max-content; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 18px; border-radius: 9999px; background: var(--hf-ink); color: var(--hf-white); font-size: 14px; line-height: 1.25; font-weight: 700; opacity: 0;
}
.home-front .hf-as-gate svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }