/* EDITED IN PLACE (10/11, docs/GRADES-ON-PAGES.md: generators are retired for built pages). This file is no longer
   generated: mocks/src/people-attractions/make_css.py made its first build and now refuses to overwrite it without --force.
   Edit the rules here; tools/css_lint.py guards them (a rule two pages share goes in core.css). The note below is history. */
/* TG attraction.css: Attraction detail + hubs page (light pass on the live page). Part 1 is generated by
   mocks/src/people-attractions/make_css.py: the live TownTapestry app.css rules the live Attraction detail + hubs pages use
   (tools/css_audit.py, @media wrappers kept), minus every rule core.css already has (rules shared with another
   page file go to core.css through tools/css_dedupe.py). Part 2 is this page's additions
   (mocks/src/people-attractions/attraction-additions.css). */
.credit{position:absolute;right:14px;bottom:8px;z-index:2;font-size:11px;color:rgba(255,255,255,.7)}
.credit a{text-decoration:underline}
.bp-note{font-size:13px;margin:12px 0 0}
.at-hubhero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#fff;margin-top:8px;background:var(--night)}
.at-hubhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.at-hubhero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72))}
.at-hubhero .in{position:relative;z-index:1;padding:26px;max-width:760px}
.at-hubhero h1{font-size:clamp(30px,4.6vw,48px);line-height:1.04;letter-spacing:-.03em;margin:6px 0 8px}
.at-hubhero p{margin:0;color:#e7ecf1;font-size:16px}
.at-hubhero .kick{color:var(--accent-soft)}
.at-hubhero .credit{position:absolute;right:10px;bottom:8px;z-index:1;font-size:11px;color:#d6dbe1}
.at-hubhero .credit a{color:inherit}
.atd-toc{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.atd-toc a{font-size:13px;font-weight:600;color:var(--ink-2);border-radius:999px;background:var(--surface);padding:6px 12px}
.atd-chart{border:1px solid var(--line);border-radius:14px;padding:14px 10px 4px;background:#fff}
.atd-chart svg{width:100%;height:auto;display:block}
.atd-mrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:10px}
.atd-m{border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center;font-size:12px;display:flex;flex-direction:column;gap:2px}
.atd-m b{font-size:13px}
.atd-m span{color:var(--ink-2)}
.atd-m small{color:var(--muted)}
.atd-m.best{border-color:var(--accent);background:var(--accent-tint,#eefaf3)}
.atd-m.best b{color:var(--accent-ink)}
.atd-story{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.atd-about p{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0 0 12px}
.atd-facts{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.atd-facts div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:14px}
.atd-facts div:first-child{border-top:0}
.atd-facts dt{color:var(--muted)}
.atd-facts dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.atd-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;contain:inline-size}
.atd-plan .card,.atd-dir{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 18px;margin:0}
.atd-dir{margin-top:12px}
.atd-dir small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.atd-dir span{font-size:14px;color:var(--ink-2);line-height:1.55}
.atd-plan .card small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.atd-plan .card b{font-size:16px;line-height:1.35}
.atd-plan .card span{font-size:14px;color:var(--ink-2);line-height:1.5}
.atd-plan .card a.link{font-size:14px;font-weight:600}
.atd-fees{list-style:none;margin:0;padding:0}
.atd-fees li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-top:1px solid var(--line)}
.atd-fees li:first-child{border-top:0;padding-top:0}
.atd-fees li b{font-size:15px;white-space:nowrap}
.atd-tw{overflow-x:auto;margin-top:14px;border:1px solid var(--line);border-radius:14px;contain:inline-size}
.atd-tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.atd-tbl th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.atd-tbl td{padding:10px 12px;border-top:1px solid var(--line)}
.atd-tbl tr:first-child td{border-top:0}
.atd-tbl a{color:var(--ink)}
.atd-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:20px;scroll-margin-top:calc(var(--hdr) + 20px)}
.atd-split h4{margin:0;font-size:17px}
.atd-split p{margin:2px 0 10px;font-size:13px}
.atd-trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.atd-trip{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;color:var(--ink)}
.atd-trip span{font-size:13px;color:var(--muted)}
.atd-air{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.atd-air b{font-size:13px;background:var(--surface);border-radius:6px;text-align:center;padding:3px 0}
.atd-air em{font-style:normal;font-weight:700}
.atd-pin{position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.atd-faq details{border-top:1px solid var(--line);padding:12px 2px}
.atd-faq details:last-child{border-bottom:1px solid var(--line)}
.atd-faq summary{cursor:pointer;font-weight:650;font-size:16px}
.atd-faq p{margin:8px 0 0;color:var(--ink-2);line-height:1.6}
.atd-prompts{display:flex;flex-wrap:wrap;gap:8px}
.atd-prompts a{border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink);background:#fff}
.atd-prompts a:hover{border-color:var(--accent)}
@media (max-width:900px){
  .atd-story,.atd-split{grid-template-columns:1fr}
  .atd-mrow{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:560px){
  .atd-facts div{grid-template-columns:110px 1fr}
}
.sb-map{background:#f6f4ee}
.sb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 2px 0;font-size:13px;color:var(--ink-2)}
.sb-legend i{display:inline-block;flex:none}
.lg-vc{width:12px;height:12px;border-radius:50%;background:#e3a33b}
.lg-park{width:16px;height:12px;border-radius:3px;background:#e8d6bb;border:1px solid #b98a55}
.lg-road{width:22px;height:4px;border-radius:2px;background:#8a94a3}
.lg-loop{width:22px;height:4px;border-radius:2px;background:var(--accent)}
.lg-bed{background:var(--night);color:#fff;border-radius:999px;padding:1px 8px;font-size:11.5px}
.sb-sights{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0;margin:8px 2px 0;font-size:13px}
.sb-sights a{color:var(--ink)}
.sb-sights a:hover{color:var(--accent-ink)}
.sb-sights b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px}
.sb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:18px}
.sb-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:#fff;display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-card h3{font-size:19px;margin:0}
.sb-card h3 a{color:var(--ink)}
.sb-card h3 a:hover{color:var(--accent-ink)}
.sb-card .sb-meta{color:var(--ink)}
.sb-card .sb-pop{font-size:13px;color:var(--muted)}
.sb-card .sb-dist{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:4px}
.sb-tag{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.02em;background:var(--accent-tint,#eefaf3);color:var(--accent-ink);border-radius:999px;padding:2px 9px}
.sb-in{background:#fbf6ee;border-color:#e8d6bb}
.sb-in .sb-tag{background:#8a5a24;color:#fff}
.sb-in ul{margin:2px 0 0;padding:0;list-style:none;font-size:13px}
.sb-in li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-top:1px dashed #e8d6bb}
.sb-in li span{color:var(--muted);white-space:nowrap}
.sb-hub .sb-tag{background:var(--night);color:#fff}
.sb-more{margin-top:14px}
.sb-more summary{cursor:pointer;font-weight:700;font-size:14px;padding:4px 0}
.sb-more .atd-tw{margin-top:8px}
.lc-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
.lc-side h4{margin:0 0 8px;font-size:16px}
.lc-hotels{list-style:none;margin:0;padding:0}
.lc-hotels li{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-top:1px solid var(--line);border-radius:8px;cursor:pointer;transition:background .15s}
.lc-hotels li:first-child{border-top:0}
.lc-hotels b{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--night);color:#fff;font-size:12px}
.lc-hotels span{display:flex;flex:1;flex-direction:column;min-width:0}
.lc-hotels strong{font-size:14.5px;overflow-wrap:anywhere}
.lc-hotels small{color:var(--muted);font-size:12.5px}
.lc-eat-n{margin:0 0 8px;font-size:14px;color:var(--ink-2)}
.lc-hotels li.hi{background:var(--accent-tint)}
.lc-hotels li.hi>b{background:var(--accent-ink)}
.lc-pin.hi circle{fill:var(--accent-ink)}
.lc-dir{flex:none;align-self:center;font-size:12.5px;font-weight:600;color:var(--accent-ink);text-decoration:none;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:#fff}
.lc-dir:hover{border-color:var(--accent-ink)}
.lc-pin{cursor:pointer}
.lc-switch{display:inline-flex;gap:4px;padding:4px;background:#eef1ee;border-radius:999px;margin:0 0 10px}
.lc-switch button{border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.lc-switch button span{margin-left:4px;color:var(--muted);font-weight:500}
.lc-switch button.on{background:#fff;color:var(--night);box-shadow:0 1px 3px rgba(18,26,38,.15)}
.lc-eat circle{fill:#e2553f;stroke:#fff;stroke-width:1.5}
.lc-map .lc-eat,.lc-lg-eat{display:none}
[data-lc].eat .lc-map .lc-eat{display:inline}
[data-lc].eat .lc-lg-eat{display:inline-flex}
[data-lc].eat .lc-pins{opacity:.35}
.lc-dot{width:10px;height:10px;border-radius:50%;background:#e2553f}
.lc-chips{display:flex;flex-wrap:wrap;gap:6px}
.lc-chips span{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;background:#fff}
.lg-site{background:#fde2c4!important;border-color:#e08a2c!important}
.lg-water{background:#cfe2f3!important;border-color:#9cc3e4!important}
.atd-m.shut{background:#f3f4f6;border-color:#e5e7eb}
.atd-m.shut b,.atd-m.shut span,.atd-m.shut small{color:#9aa1ab}
.atd-m.best small{color:var(--accent-ink);font-weight:700}
@media (max-width:900px){
  .lc-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sb-cards{grid-template-columns:1fr}
  .sb-map{overflow-x:auto;contain:inline-size}
  .sb-map svg{min-width:640px}
}
.an-hero{position:relative;border-radius:var(--r-lg,18px);overflow:hidden;background:#0f1722;color:#fff;padding:38px 34px 30px;margin-top:8px;min-height:340px;display:flex;align-items:flex-end}
.an-hero svg{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.an-hero .in{position:relative;max-width:640px}
.an-hero .kick{color:#7ee2a8}
.an-hero h1{font-size:46px;line-height:1.05;letter-spacing:-.02em;margin:6px 0 10px;color:#fff}
.an-hero p{font-size:17px;line-height:1.55;color:#d7dee8;margin:0}
.an-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:13px;color:#c9d2de}
.an-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.an-top{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.an-feat{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#fff;background:var(--night)}
.an-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.an-feat:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75))}
.an-feat .in{position:relative;z-index:1;padding:20px 22px}
.an-feat .an-rank{z-index:2;width:40px;height:40px;font-size:18px}
.an-feat small{color:#cfe9d8;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:12px}
.an-feat b{display:block;font-size:28px;line-height:1.15;margin:4px 0}
.an-feat span{color:#e6ebf1;font-size:14px}
.an-top .at-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.an-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.an-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.an-types{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.an-type{border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--ink);display:flex;flex-direction:column;gap:4px}
.an-type b{font-size:15px}
.an-type span{font-size:26px}
.an-type small{color:var(--muted)}
.an-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.an-st{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--ink);display:flex;flex-direction:column;gap:2px;min-width:0}
.an-st b{font-size:14px}
.an-st small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
span.an-st{opacity:.7}
.an-dir-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.an-dir-ctl input,.an-dir-ctl select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;background:#fff;min-width:0}
.an-dir-ctl input{flex:1 1 220px}
.an-count{margin:0 0 10px;color:var(--muted);font-size:14px}
.an-dir{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.an-more{display:block;width:100%;text-align:center;padding:12px;font:inherit;font-weight:700;border:0;border-top:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink)}
.an-meth{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:12px}
@media (max-width:900px){
  .an-top,.an-cols{grid-template-columns:1fr}
  .an-types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an-hero h1{font-size:34px}
  .an-feat{min-height:280px}
}
@media (max-width:560px){
  .an-hero{padding:26px 18px 22px;min-height:300px}
}