/* Field Notes Ohio: homepage redesign (Oct 2026). Loaded after app.css on pages that carry the list view. */
:root { --fno-ember-text:#9A4A1B; --fno-btn:#A8531F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fno-ember-text:#E8B98F; } }
:root[data-theme="dark"] { --fno-ember-text:#E8B98F; }

/* Wide layout while the home list is showing; detail pages keep the reading column */
.app:has(> .fno-home:not(.hide)) { max-width:none !important; padding-bottom:0; }
body:has(.fno-home:not(.hide)) .sitebar-in { max-width:1200px; }
.app:has(> .fno-home:not(.hide)) > :not(.list-view):not(.detail) { max-width:1200px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; box-sizing:border-box; }
.fno-home > main { padding:0 !important; }

/* Hero */
header.top.fno-hero { position:relative; min-height:600px; padding:0; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:none; clip-path:none; background:#142A1E; color:#fff; overflow:hidden; }
.fno-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.fno-scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,42,30,0.92) 0%, rgba(20,42,30,0.74) 45%, rgba(20,42,30,0.18) 100%); }
.fno-hero-in { position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; box-sizing:border-box; padding:72px 24px 28px; }
.fno-hero .brand .hero-kicker { color:#E8B98F; font-size:0.8rem; margin-bottom:14px; }
.fno-hero .brand .mark { font-size:clamp(2.5rem, 6vw, 4.25rem); line-height:1.04; max-width:13ch; color:#fff; }
.fno-hero .brand .mark em { color:#F0A06A; }
.fno-hero .brand .tag { font-size:1.15rem; line-height:1.55; max-width:36ch; color:#EFE8D6; margin-top:16px; }
.fno-hero .search-wrap { max-width:620px; margin-top:26px; }
.fno-hero .search-wrap input { min-height:56px; padding:14px 44px 14px 48px; border:0; border-radius:10px; background:#F7F3E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2355564C' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 16px center; color:#21231F; font-size:1.05rem; box-shadow:0 6px 24px rgba(0,0,0,0.18); }
.fno-hero .search-wrap input::placeholder { color:#55564C; }
.fno-hero .search-wrap input:focus { outline:3px solid #D97A3F; outline-offset:2px; }
.fno-hero #clearSearch { color:#21231F; }
.fno-hero .quick-row { margin-top:10px; gap:0 4px; }
.fno-hero .quick-label { color:#D9D2BF; font-size:0.95rem; margin-right:4px; }
.fno-hero .quick { background:transparent; border:0; border-radius:0; color:#fff; font-size:0.95rem; padding:6px 8px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,0.45); }
.fno-hero .quick:hover { color:#E8B98F; text-decoration-color:#E8B98F; }
.fno-hero-bottom { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 40px; margin-top:44px; }
.fno-hero .hero-stats { margin:0; grid-template-columns:repeat(5, max-content); gap:8px 40px; }
.fno-hero .hero-stats li { color:#D9D2BF; font-size:0.85rem; }
.fno-hero .hero-stats b { font-size:1.9rem; }
.fno-credit { margin:0; font-size:12px; color:rgba(255,255,255,0.78); }
.fno-credit a { color:inherit; }
@media (max-width:700px) {
  header.top.fno-hero { min-height:620px; }
  .fno-scrim { background:linear-gradient(180deg, rgba(20,42,30,0.5) 0%, rgba(20,42,30,0.35) 25%, rgba(20,42,30,0.93) 68%); }
  .fno-hero-bg { object-position:62% center; }
  .fno-hero-in { padding:40px 16px 20px; }
  .fno-hero .brand .tag { font-size:1rem; }
  .fno-hero .hero-stats { grid-template-columns:repeat(3, max-content); gap:10px 28px; }
  .fno-hero .hero-stats b { font-size:1.45rem; }
  .fno-hero-bottom { margin-top:28px; }
}

/* Sections */
.fno-sec { max-width:1200px; margin:0 auto; padding:64px 24px 0; box-sizing:border-box; }
.fno-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:24px; }
.fno-eyebrow { margin:0 0 6px; font-size:0.8rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--fno-ember-text); }
.fno-h2 { margin:0; font-family:var(--font-display); font-size:clamp(1.8rem, 3.5vw, 2.5rem); font-weight:600; line-height:1.1; color:var(--text); }
.fno-lede { margin:8px 0 0; font-size:1.05rem; line-height:1.55; color:var(--text-soft); max-width:56ch; }
.fno-more { font-weight:600; color:var(--fno-ember-text); }

/* Photo tiles */
.fno-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:20px; }
.fno-tile { position:relative; display:block; height:260px; border-radius:12px; overflow:hidden; color:#fff; text-decoration:none; background:#142A1E; }
.fno-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.fno-tile:hover img { transform:scale(1.04); }
.fno-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,42,30,0) 35%, rgba(20,42,30,0.9) 100%); }
.fno-tile-txt { position:absolute; z-index:1; left:20px; right:20px; bottom:18px; }
.fno-tile-txt b { display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:600; line-height:1.15; }
.fno-tile-txt span[hidden] { display:none !important; }
.fno-tile-txt span { display:block; margin-top:2px; font-size:0.95rem; color:#EFE8D6; }
.fno-tile:focus-visible { outline:3px solid #D97A3F; outline-offset:3px; }
@media (max-width:700px) {
  .fno-sec { padding:44px 16px 0; }
  .fno-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .fno-tile { height:160px; border-radius:10px; }
  .fno-tile-txt { left:12px; right:12px; bottom:10px; }
  .fno-tile-txt b { font-size:1.1rem; }
  .fno-tile-txt span { font-size:0.8rem; }
  .fno-tile .fno-long { display:none; }
  .fno-tiles .fno-tile:last-child { grid-column:1 / -1; height:120px; }
}
@media (min-width:701px) { .fno-tile .fno-short { display:none; } }

/* Six places to start */
.fno-start { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:40px clamp(18px, 4vw, 48px); }
.fno-start-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(420px, 100%), 1fr)); column-gap:48px; margin-top:20px; }
.fno-start-list a { display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--text); }
.fno-start-list a:hover .fno-pn { text-decoration:underline; text-underline-offset:3px; }
.fno-num { flex:none; min-width:40px; font-family:var(--font-display); font-size:2rem; font-weight:600; line-height:1; color:var(--fno-ember-text); }
.fno-pn { display:block; font-family:var(--font-display); font-size:1.35rem; font-weight:600; }
.fno-pw { display:block; margin-top:2px; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-soft); }
.fno-pd { display:block; margin-top:6px; font-size:1rem; line-height:1.5; color:var(--text-soft); }
@media (max-width:700px) { .fno-pd { display:none; } .fno-num { font-size:1.5rem; min-width:30px; } .fno-pn { font-size:1.15rem; } }

/* Plan a trip */
.fno-plan { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:20px; }
.fno-card { display:flex; flex-direction:column; gap:8px; padding:26px; border-radius:14px; text-decoration:none; background:var(--card); color:var(--text); border:1px solid var(--line); }
.fno-card:hover { border-color:var(--fno-ember-text); }
.fno-card svg { width:32px; height:32px; color:var(--fno-ember-text); }
.fno-card b { font-family:var(--font-display); font-size:1.45rem; font-weight:600; }
.fno-card span { font-size:1rem; line-height:1.5; color:var(--text-soft); }
.fno-card i { margin-top:auto; padding-top:6px; font-style:normal; font-weight:600; color:var(--fno-ember-text); }
.fno-card.fno-dark { background:#1F3B2C; border-color:#1F3B2C; color:#fff; }
.fno-card.fno-dark svg, .fno-card.fno-dark i { color:#E8B98F; }
.fno-card.fno-dark span { color:#D9D2BF; }

/* Map and park list */
.fno-home .explore-embed { margin:0; }
.fno-home #filterChips { margin:0 0 16px; }
.fno-home #filterChips .chip { border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:8px; font-size:0.9rem; padding:6px 14px; }
.fno-home #filterChips .chip.active { background:var(--fno-btn); border-color:var(--fno-btn); color:#fff; }
.fno-home #filterChips .chip[data-filter="mounds"], .fno-home #filterChips .chip[data-filter="history"], .fno-home #filterChips .chip[data-filter="roads"], .fno-home #filterChips .chip[data-filter="beaches"], .fno-home #filterChips .chip[data-filter="oddities"], .fno-home #filterChips .chip[data-filter="caves"], .fno-home #filterChips .chip[data-filter="falls"], .fno-home #filterChips .chip[data-filter="counties"], .fno-home #filterChips .chip[data-filter="bt"] { display:none; }
.fno-listsec { padding-bottom:24px; }
.fno-listsec #countLine, .fno-listsec #parkList { max-width:none; }

/* While searching: results go straight under the search box */
.fno-searching header.top.fno-hero { min-height:0; }
.fno-searching .fno-hero-in { padding-top:32px; }
.fno-searching .fno-hero .brand .tag, .fno-searching .fno-hero-bottom, .fno-searching .fno-tiles-sec, .fno-searching .fno-start-sec, .fno-searching .fno-plan-sec, .fno-searching .fno-map-sec { display:none; }
.fno-searching .fno-listsec { padding-top:28px; }

@media print { .fno-hero-bg, .fno-scrim, .fno-tiles-sec, .fno-plan-sec, .fno-map-sec { display:none !important; } header.top.fno-hero { min-height:0; color:#000; background:none; } }