/* "What's around {city}" SEO pages (frontend/scripts/build-near.mjs). Same design
   family as the halfway pages (halfway.css): Fredoka display + Nunito body, hairline
   dividers, teal = content, orange = actions. Single-theme white, on purpose — it
   mirrors the SPA landing + the halfway pages. Fonts + logo load from static paths,
   like halfway.css (the renderer never inlines them). */
@font-face{font-family:Fredoka;src:url(/fonts/fredoka-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url(/fonts/nunito-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url(/fonts/nunito-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
  --surface:#fff;--surface2:#f6f9fa;--ink:#12262b;--ink-soft:#3b565c;--muted:#748a8f;
  --line:#e6ebec;
  --brand:#0f9cb3;--brand-bright:#2bbdd3;--brand-deep:#0b7284;--brand-wash:#e7f6f8;
  --accent:#fb6e28;--accent-deep:#e2560f;--accent-wash:#fff1e8;
  --shadow:0 24px 60px -28px rgba(12,40,46,.5),0 2px 6px rgba(12,40,46,.06);
  --card-shadow:0 12px 28px -20px rgba(12,40,46,.5);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600}
h1,h2,h3,.cta,.callout b{font-family:'Fredoka','Trebuchet MS',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em}
a{color:var(--brand-deep)}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}

.top{border-bottom:1px solid var(--line);background:var(--surface)}
.topwrap{max-width:min(1120px,92vw);margin:0 auto;padding:0 clamp(16px,3vw,40px);display:flex;align-items:center;height:74px;gap:10px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{display:block;height:34px;aspect-ratio:132/47;background:url(/flockinn-logo.svg) left center/contain no-repeat}
.footwrap .brand-logo{height:27px}
.crumbs{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand-deep)}

main{padding:38px 0 8px}
h1{font-size:clamp(1.4rem,4.6vw,2.7rem);line-height:1.1;text-align:center;white-space:nowrap;margin:0 auto 14px}
h1 .place{position:relative;color:var(--accent-deep)}
h1 .place svg{position:absolute;left:0;bottom:-.17em;width:100%;height:.34em;overflow:visible}

section{margin-top:46px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px}
h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0}
.sec-head .aside{font-size:.86rem;font-weight:700;color:var(--muted);white-space:nowrap}
.sec-sub{margin:0 0 14px;color:var(--ink-soft);font-weight:500;font-size:.96rem}

/* things to do list */
.things{display:flex;flex-direction:column;gap:10px}
.thing{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:13px 16px;box-shadow:var(--card-shadow);text-decoration:none;color:inherit;
  transition:border-color .16s,transform .16s}
.thing:hover{border-color:var(--brand-bright);transform:translateY(-1px)}
.thumb{flex:none;width:54px;height:54px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--brand-bright),var(--brand-deep))}
.thumb svg{width:25px;height:25px}
.thing .body{min-width:0;flex:1}
.thing .name{font-weight:800;color:var(--ink);font-size:1.02rem;line-height:1.25}
.thing .meta{display:flex;flex-wrap:wrap;gap:7px 11px;margin-top:6px;font-size:.83rem;color:var(--ink-soft);font-weight:600;align-items:center}
.thing .meta .star{color:var(--accent-deep);font-weight:800}
.tag{display:inline-flex;align-items:center;background:var(--surface2);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;font-size:.73rem;font-weight:800}
.thing .price{flex:none;text-align:right}
.thing .price b{display:block;font-family:'Fredoka','Trebuchet MS',sans-serif;color:var(--ink);font-size:1.05rem}
.thing .price span{color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.more{margin-top:22px;text-align:center}

.cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;text-decoration:none;font-size:1.06rem;
  padding:15px 32px;border-radius:999px;transition:transform .12s ease,background .12s ease}
.cta::after{content:"→";font-weight:400}
.cta:hover{background:var(--accent-deep);transform:translateY(-2px)}
.cta:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* stays band */
.stays-band{display:flex;gap:18px;align-items:center;background:var(--surface2);border:1px solid var(--line);
  border-radius:18px;padding:20px 22px;box-shadow:var(--card-shadow)}
.stays-band .ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--brand-bright),var(--brand-deep))}
.stays-band .ic svg{width:26px;height:26px}
.stays-band .txt{flex:1;min-width:0}
.stays-band .txt b{display:block;color:var(--ink);font-size:1.06rem;font-family:'Fredoka','Trebuchet MS',sans-serif}
.stays-band .go{flex:none;background:var(--accent);color:#fff;text-decoration:none;font-weight:800;
  border-radius:999px;padding:11px 20px;font-size:.94rem;white-space:nowrap}
.stays-band .go:hover{background:var(--accent-deep)}

/* reach table */
.box{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.box.scroll{overflow-x:auto}
.reach-tbl{width:100%;border-collapse:collapse;min-width:540px}
.reach-tbl th,.reach-tbl td{padding:14px 18px;text-align:left;font-size:.97rem;vertical-align:top}
.reach-tbl thead th{background:var(--surface2);color:var(--muted);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.06em;font-weight:800;border-bottom:1px solid var(--line)}
.reach-tbl tbody td{border-top:1px solid var(--line);color:var(--ink-soft);font-weight:600}
.reach-tbl tbody tr:hover td{background:var(--surface2)}
.reach-tbl .mode-cell{color:var(--ink);font-weight:800;white-space:nowrap}
.reach-tbl .mode-cell i{display:inline-flex;width:26px;height:26px;border-radius:8px;background:var(--brand-wash);
  color:var(--brand-deep);align-items:center;justify-content:center;margin-right:9px;vertical-align:middle}
.reach-tbl .mode-cell i svg{width:15px;height:15px}
.reach-tbl .time{color:var(--brand-deep);font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}
.reach-tbl .time small{display:block;color:var(--muted);font-weight:700;font-size:.72rem}

/* callout */
.callout{display:flex;gap:15px;align-items:flex-start;margin-top:40px;background:var(--surface2);
  border:1px solid var(--line);border-left:3px solid var(--brand-bright);border-radius:16px;padding:19px 21px}
.callout-ic{flex:none}
.callout b{display:block;font-size:1.1rem;margin-bottom:5px;color:var(--ink)}
.callout p{margin:0;color:var(--ink-soft);font-weight:500}

/* faq */
.faqs details{border-top:1px solid var(--line);padding:15px 18px}
.faqs details:first-child{border-top:0}
.faqs summary{font-weight:800;color:var(--ink);cursor:pointer;font-size:1rem;list-style:none;display:flex;gap:11px;align-items:baseline}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::before{content:"+";color:var(--brand-bright);font-weight:800;font-family:'Fredoka',sans-serif}
.faqs details[open] summary::before{content:"–"}
.faqs p{margin:9px 0 2px 22px;color:var(--ink-soft);font-weight:500}

/* related places */
.pairs{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.pairs a{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:9px 15px;text-decoration:none;color:var(--ink);font-weight:800;font-size:.92rem;transition:border-color .14s,color .14s}
.pairs a:hover{border-color:var(--brand-bright);color:var(--brand-deep)}
.pairs a svg{width:13px;height:13px;color:var(--brand)}

/* hub page: city grid */
.lede{text-align:center;color:var(--ink-soft);font-size:clamp(1.04rem,1.5vw,1.18rem);font-weight:500;max-width:56ch;margin:0 auto 6px}
.cities{margin-top:26px}

.bot{border-top:1px solid var(--line);background:var(--surface);margin-top:clamp(52px,7vw,84px)}
.footwrap{max-width:min(1120px,92vw);margin:0 auto;padding:26px clamp(16px,3vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.footwrap>p{margin:0;color:var(--muted);font-size:.86rem;font-weight:500}
.legal{display:flex;gap:16px}
.legal a{color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:.86rem}
.legal a:hover{color:var(--brand-deep)}

@media(max-width:600px){
  .cta{width:100%;justify-content:center}
  .thing .price{display:none}
  .stays-band{flex-wrap:wrap}.stays-band .go{width:100%;text-align:center}
  .crumbs{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}