/* NowHitz areas (2026-10-24): /go/area/<id>/ pages and the home #nh-areas block.
   New tokens are --nh-*, new classes .nh-a-*; rules live under body.nh-a-page or #nh-areas. Light/dark follows
   v2-theme.js (html[data-theme]) — no prefers-color-scheme. System fonts only. */
:root{--nh-bg:#fff;--nh-surface:#f5f5f7;--nh-fg:#1d1d1f;--nh-fg-2:#6e6e73;--nh-line:rgba(0,0,0,.08);--nh-accent:#0071e3;--nh-warn:#d70015;
 --nh-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Hiragino Sans","Noto Sans KR","Noto Sans JP","Segoe UI",sans-serif;
 --nh-spring-open:linear(0,0.25 8%,0.6 18%,0.86 32%,0.98 50%,1.015 64%,1.004 80%,1);--nh-ease-close:cubic-bezier(.3,0,.2,1);--nh-ease-micro:cubic-bezier(.2,.8,.2,1);--nh-sticky-top:56px}
:root[data-theme="dark"]{--nh-bg:#000;--nh-surface:#1c1c1e;--nh-fg:#f5f5f7;--nh-fg-2:#98989d;--nh-line:rgba(255,255,255,.10);--nh-accent:#2997ff;--nh-warn:#ff453a}

/* ---------- area page ---------- */
/* owner pass 2 (2026-10-24): the site's warm paper palette (--v2-*, dark included), photos and blocks 4px with the
   full-bleed phone hero at 0, buttons 8px, no pills, statuses as small word labels, one section-header grammar */
body.nh-a-page{--nh-bg:var(--v2-paper,#fbfaf7);--nh-surface:var(--v2-sunken,#f4f2ed);--nh-fg:var(--v2-ink,#171512);--nh-fg-2:var(--v2-text2,#5f5a53);--nh-line:var(--v2-hair,#e6e2da);--nh-accent:var(--v2-accent,#ac442e);--nh-r:4px;--nh-btn:8px}
html body.nh-a-page{background:var(--nh-bg)}
body.nh-a-page .nh-a{font-family:var(--nh-font);color:var(--nh-fg);max-width:760px;margin:0 auto;padding:0 0 64px;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
body.nh-a-page .nh-a a{color:inherit}
body.nh-a-page .nh-a-cover{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--nh-surface);border-radius:0}
body.nh-a-page .nh-a-pcap{margin:6px 16px 0;font-size:12px;line-height:16px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-pcap a{color:inherit;text-decoration:none}
body.nh-a-page .nh-a-cover img{display:block;width:100%;height:100%;object-fit:cover;view-transition-name:var(--nh-vt);view-transition-class:nh-area}
body.nh-a-page .nh-a-head{padding:16px 16px 4px}
body.nh-a-page .nh-a-head h1{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;margin:0;font-size:34px;line-height:40px;font-weight:800;letter-spacing:-.03em;word-break:keep-all}
body.nh-a-page .nh-a-head h1 .nh-a-h1s{font-size:17px;line-height:22px;font-weight:600;letter-spacing:0;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-lede{margin:12px 0 0;font-size:17px;line-height:1.6;word-break:keep-all;text-wrap:pretty}
body.nh-a-page .nh-a-st{margin:10px 0 0;font-size:13px;line-height:18px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-st span{display:block}
body.nh-a-page .nh-a i{font-style:normal}

/* sticky section bar: anchors, not tabs (no role=tablist) */
body.nh-a-page .nh-a-tabs{position:sticky;top:var(--nh-sticky-top);z-index:20;margin-top:20px;background:color-mix(in srgb,var(--nh-bg) 80%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--nh-line)}
body.nh-a-page .nh-a-tabs-in{display:flex;gap:2px;padding:0 8px;height:48px;overflow-x:auto;scrollbar-width:none}
body.nh-a-page .nh-a-tabs-in::-webkit-scrollbar{display:none}
body.nh-a-page .nh-a-tabs a{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:44px;padding:0 6px;font-size:15px;font-weight:600;color:var(--nh-fg-2);text-decoration:none;white-space:nowrap;transition:color .18s var(--nh-ease-micro)}
body.nh-a-page .nh-a-tabs a::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--nh-fg);transform:scaleX(0);transition:transform .18s var(--nh-ease-micro)}
body.nh-a-page .nh-a-tabs a[aria-current="true"]{color:var(--nh-fg)}
body.nh-a-page .nh-a-tabs a[aria-current="true"]::after{transform:scaleX(1)}
html[lang="en"] body.nh-a-page .nh-a-tabs a{font-size:14px;padding:0 4px}

body.nh-a-page .nh-a-sec{margin-top:48px;padding:0 16px;scroll-margin-top:calc(var(--nh-sticky-top) + 48px + 8px)}
body.nh-a-page .nh-a-sec h2{position:relative;margin:0 0 18px;padding-bottom:11px;font-size:22px;line-height:28px;font-weight:800;letter-spacing:-.02em}
body.nh-a-page .nh-a-sec h2::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;background:var(--nh-accent)}
body.nh-a-page .nh-a-sec h2 small{font-size:15px;font-weight:600;color:var(--nh-fg-2);margin-left:4px}
body.nh-a-page .nh-a-note,body.nh-a-page .nh-a-ck{margin:0 0 12px;font-size:13px;line-height:18px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-p{margin:16px 0 8px;font-size:16px;line-height:1.65}
html[lang="en"] body.nh-a-page .nh-a-p{line-height:26px}
/* 지금 사람: drawn with the shared crowd grammar (crowd-ui.css: level word + gauge, advice, one strip of hours) */
body.nh-a-page .nh-a-crowd .cw-band{margin:18px 0 14px}
body.nh-a-page .nh-a-crowd .nh-a-ck:has(+.nh-a-ckm){margin-bottom:6px}
body.nh-a-page .nh-a-crowd .nh-a-ck a{color:var(--nh-fg);font-weight:700;text-decoration:none;white-space:nowrap}

/* rows */
body.nh-a-page .nh-a-list{list-style:none;margin:0;padding:0}
body.nh-a-page .nh-a-list>li{border-top:1px solid var(--nh-line)}
body.nh-a-page .nh-a-list>li:first-child{border-top:0}
body.nh-a-page .nh-a-more .nh-a-list>li:first-child{border-top:1px solid var(--nh-line)}
body.nh-a-page .nh-a-row{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 28px 14px 0;text-decoration:none;min-height:44px;transition:background-color .18s var(--nh-ease-micro)}
body.nh-a-page a.nh-a-row:active{background:var(--nh-surface)}
body.nh-a-page .nh-a-go{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;color:var(--nh-fg-2);opacity:.6}
body.nh-a-page .nh-a-t{font-size:16px;line-height:22px;font-weight:700;word-break:keep-all}
body.nh-a-page .nh-a-s{font-size:15px;line-height:21px;color:var(--nh-fg-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
body.nh-a-page .nh-a-meta{font-size:13px;line-height:18px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-meta i{margin:0 5px;opacity:.6}
body.nh-a-page .nh-a-mi{display:inline-block;max-width:100%}
body.nh-a-page .nh-a-mi a{color:inherit;text-decoration:underline;text-decoration-color:var(--nh-line);text-underline-offset:2px}
body.nh-a-page .nh-a-nw{white-space:nowrap}
body.nh-a-page .nh-a-golist{list-style:none;margin:0;padding:0}
body.nh-a-page .nh-a-golist li{font-size:16px;line-height:1.65;padding:2px 0}
/* the site bar matches this page's background, so the bar and the page do not show two whites / two blacks */
body.nh-a-page .mobile-header{background:color-mix(in srgb,var(--nh-bg) 92%,transparent)}
body.nh-a-page .nh-a-tag{align-self:flex-start;font-size:12px;line-height:16px;font-weight:700;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-tag.nh-a-urgent{padding:1px 5px;border:1px solid currentColor;border-radius:2px;color:var(--nh-accent)}
body.nh-a-page .nh-a-warn{display:block;font-size:13px;line-height:18px;font-weight:600;color:var(--nh-fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nh-areas .nh-a-chips em{font-style:normal;height:24px;padding:0 10px;border-radius:2px;background:var(--nh-surface);font-size:12px;line-height:24px;font-weight:600}
body.nh-a-page .nh-a-foot{margin:10px 0 0}
body.nh-a-page .nh-a-map{position:absolute;right:0;top:12px;padding:5px 10px;border:1px solid var(--nh-line);border-radius:var(--nh-btn);font-size:13px;font-weight:700;text-decoration:none;color:var(--nh-fg)}
body.nh-a-page .nh-a-row:has(.nh-a-map){padding-right:64px}
/* 근처 숙소 (2026-10-24): thumb 64px (4px) · name / kind · distance · map; Type 3 originals whole on a neutral tile; no photo = a kind tile */
body.nh-a-page .nh-a-srow{flex-direction:row;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
body.nh-a-page .nh-a-stx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body.nh-a-page .nh-a-kind{font-size:12px;line-height:16px;font-weight:600;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-stx a.nh-a-t{color:var(--nh-fg);text-decoration:underline;text-decoration-color:var(--nh-line);text-underline-offset:3px}
body.nh-a-page .nh-a-srow .nh-a-map{top:50%;transform:translateY(-50%)}
body.nh-a-page .nh-a-sth{flex:none;width:64px;height:64px;border-radius:var(--nh-r);overflow:hidden;background:var(--nh-surface);display:grid;place-items:center}
body.nh-a-page .nh-a-sth img{width:100%;height:100%;object-fit:cover;display:block}
body.nh-a-page .nh-a-sth.nh-a-ct img{object-fit:contain}
body.nh-a-page .nh-a-sk{background:none;border:1px solid var(--nh-line);color:var(--nh-fg-2)}
body.nh-a-page .nh-a-sk::before{content:"";width:26px;height:26px;background:currentColor;-webkit-mask:var(--nh-k) center/contain no-repeat;mask:var(--nh-k) center/contain no-repeat}
body.nh-a-page .nh-a-sk[data-k="bed"]{--nh-k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18.5v-11M21 18.5V14a3 3 0 0 0-3-3h-8v4.5M3 15.5h18'/%3E%3Ccircle cx='6.5' cy='12.5' r='1.8'/%3E%3C/svg%3E")}
body.nh-a-page .nh-a-sk[data-k="hotel"]{--nh-k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h14v17M3 21h18M9 8h1M14 8h1M9 12h1M14 12h1M10 21v-4h4v4'/%3E%3C/svg%3E")}
body.nh-a-page .nh-a-sk[data-k="hanok"]{--nh-k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10c3 0 5-1 7-4h6c2 3 4 4 7 4M5 10v10h14V10M3 20h18M10 20v-5h4v5'/%3E%3C/svg%3E")}

/* more / less, in place */
body.nh-a-page .nh-a-more summary{display:flex;align-items:center;min-height:44px;list-style:none;cursor:pointer;color:var(--nh-fg);font-size:15px;font-weight:700;border-top:1px solid var(--nh-line)}
body.nh-a-page .nh-a-more summary::-webkit-details-marker{display:none}
body.nh-a-page .nh-a-more summary::after{content:"";width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .24s var(--nh-ease-micro)}
body.nh-a-page .nh-a-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
body.nh-a-page .nh-a-more .nh-a-m2,body.nh-a-page .nh-a-more[open] .nh-a-m1{display:none}
body.nh-a-page .nh-a-more[open] .nh-a-m2{display:inline}
@supports (interpolate-size:allow-keywords){body.nh-a-page{interpolate-size:allow-keywords}
 body.nh-a-page .nh-a-more::details-content{height:0;overflow:clip;transition:height .24s var(--nh-ease-micro),content-visibility .24s allow-discrete}
 body.nh-a-page .nh-a-more[open]::details-content{height:auto}}

/* chip filter (cafés / shops) */
body.nh-a-page .nh-a-chipbar{display:flex;gap:8px;margin:0 0 8px}
body.nh-a-page .nh-a-chipbar button{min-height:36px;padding:0 14px;border-radius:var(--nh-btn);border:1px solid var(--nh-line);background:none;color:var(--nh-fg);font:600 14px/1 var(--nh-font);cursor:pointer;transition:background-color .18s var(--nh-ease-micro),color .18s var(--nh-ease-micro);position:relative}
body.nh-a-page .nh-a-chipbar button::before{content:"";position:absolute;inset:-4px 0}
body.nh-a-page .nh-a-chipbar button[aria-pressed="true"]{background:var(--nh-fg);border-color:var(--nh-fg);color:var(--nh-bg)}
body.nh-a-page .nh-a-sec[data-f="cafe"] li[data-k]:not([data-k="cafe"]),body.nh-a-page .nh-a-sec[data-f="food"] li[data-k]:not([data-k="food"]),body.nh-a-page .nh-a-sec[data-f="shop"] li[data-k]:not([data-k="shop"]){display:none}

/* local Shorts */
body.nh-a-page .nh-a-shs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}
body.nh-a-page .nh-a-shs>li,body.nh-a-page .nh-a-more .nh-a-shs>li:first-child{border:0}
body.nh-a-page .nh-a-more .nh-a-shs{margin:12px 0 4px}
body.nh-a-page .nh-a-sh{display:block;text-decoration:none;transition:transform .12s var(--nh-ease-micro)}
body.nh-a-page .nh-a-sh:active{transform:scale(.97)}
body.nh-a-page .nh-a-shp{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--nh-r);overflow:hidden;background:var(--nh-surface)}
body.nh-a-page .nh-a-shp img{width:100%;height:100%;object-fit:cover;display:block}
body.nh-a-page .nh-a-shp i{position:absolute;left:6px;bottom:6px;padding:4px 5px;border-radius:2px;background:rgba(0,0,0,.72);color:#fff;font-size:9px;line-height:1}
body.nh-a-page .nh-a-sh b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:13px;line-height:18px;font-weight:700;word-break:keep-all;overflow-wrap:anywhere}
body.nh-a-page .nh-a-sh small{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--nh-fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.nh-a-page .nh-a-all{margin:12px 0 0;font-size:15px;font-weight:700}
body.nh-a-page .nh-a-all a{color:var(--nh-fg);text-decoration:none}

body.nh-a-page .nh-a-credits{margin:64px 16px 0;padding-top:16px;border-top:1px solid var(--nh-line);font-size:13px;line-height:18px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-credits h2{margin:0 0 8px;font-size:13px;line-height:18px;font-weight:600;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-credits ol{margin:0;padding-left:18px}
body.nh-a-page .nh-a-credits li{word-break:keep-all;overflow-wrap:anywhere}
body.nh-a-page .nh-a-credits li:target{color:var(--nh-fg)}
body.nh-a-page .nh-a-credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}
body.nh-a-page .nh-a-ugcf{display:grid;gap:10px}

/* keep-all is for Korean only: Japanese has no spaces and would never wrap */
html[lang="ja"] body.nh-a-page .nh-a *,html[lang="ja"] #nh-areas *{word-break:normal;line-break:strict;overflow-wrap:anywhere}
body.nh-a-page .nh-a :focus-visible,#nh-areas :focus-visible{outline:2px solid var(--nh-accent);outline-offset:2px;border-radius:6px}
@media (max-width:767px){body.nh-a-page .nh-a-cover{width:100vw;margin-left:calc(50% - 50vw)}}
@media (min-width:768px){body.nh-a-page .nh-a-cover{border-radius:var(--nh-r)}body.nh-a-page .nh-a-pcap{margin:6px 0 0}body.nh-a-page .nh-a-head{padding:24px 0 4px}body.nh-a-page .nh-a-sec{margin-top:64px;padding:0}body.nh-a-page .nh-a-credits{margin:64px 0 0}
 body.nh-a-page .nh-a-shs{grid-template-columns:repeat(3,minmax(0,180px));gap:20px 16px}body.nh-a-page .nh-a-tabs-in{justify-content:flex-start;gap:8px;padding:0}body.nh-a-page .nh-a-tabs a{flex:0 0 auto;padding:0 12px}}

/* ---------- home block (#nh-areas) ---------- */
#nh-areas{font-family:var(--nh-font);color:var(--nh-fg);margin:4px 0 0;-webkit-tap-highlight-color:transparent}
#nh-areas h2{margin:28px 0 16px;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em}
#nh-areas .nh-a-fx{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 16px;border-radius:8px;background:var(--nh-surface);color:var(--nh-fg);text-decoration:none;font-size:15px;line-height:20px;font-weight:600}
#nh-areas .nh-a-fx span{color:var(--nh-accent)}
#nh-areas .nh-a-grid,#nh-areas .nh-a-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#nh-areas .nh-a-bi{position:relative;min-width:0}
#nh-areas .nh-a-big{grid-column:1/-1}
#nh-areas .nh-a-blk{position:relative;display:block;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--nh-surface);color:#fff;text-decoration:none;transform:translateZ(0);transition:transform .42s var(--nh-spring-open)}
#nh-areas .nh-a-big .nh-a-blk{aspect-ratio:3/2;border-radius:4px}
#nh-areas .nh-a-blk:active{transform:scale(.97);transition-duration:.12s;transition-timing-function:var(--nh-ease-micro)}
#nh-areas .nh-a-blk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;view-transition-name:var(--nh-vt);view-transition-class:nh-area}
#nh-areas .nh-a-blk::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.7) 100%);pointer-events:none}
#nh-areas .nh-a-blk.nh-a-strong::after{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.82) 100%)}
#nh-areas .nh-a-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:2px}
#nh-areas .nh-a-cap b{font-size:17px;line-height:22px;font-weight:600;word-break:keep-all}
#nh-areas .nh-a-big .nh-a-cap b{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.01em}
#nh-areas .nh-a-cap small{font-size:13px;line-height:18px;opacity:.92}
/* the rank: a bold white number in the top-left corner over a faint top shade — no disc (owner 2026-10-24) */
#nh-areas .nh-a-blk::before{content:"";position:absolute;inset:0 0 auto;height:42%;background:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,.34));pointer-events:none;z-index:1}
#nh-areas .nh-a-rk{position:absolute;top:8px;left:12px;z-index:2;font-size:30px;line-height:34px;font-weight:800;letter-spacing:-.03em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.28);font-variant-numeric:tabular-nums}
#nh-areas .nh-a-type::before{display:none}
#nh-areas .nh-a-type .nh-a-rk{color:var(--nh-fg);text-shadow:none}
#nh-areas .nh-a-cred a{color:inherit;text-decoration:underline;text-decoration-color:var(--nh-line);text-underline-offset:2px}
#nh-areas .nh-a-type{background:var(--nh-surface);color:var(--nh-fg)}
#nh-areas .nh-a-type::after{display:none}
#nh-areas .nh-a-type .nh-a-cap b{font-size:28px;line-height:34px;font-weight:700}
#nh-areas .nh-a-basis{margin:12px 0 0;font-size:13px;line-height:18px;color:var(--nh-fg-2)}
#nh-areas .nh-a-nw{white-space:nowrap}
#nh-areas .nh-a-cats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
#nh-areas .nh-a-cats a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;aspect-ratio:4/3;padding:12px 14px;border-radius:4px;background:var(--nh-surface);color:var(--nh-fg);text-decoration:none;transition:transform .42s var(--nh-spring-open)}
#nh-areas .nh-a-cats a:active{transform:scale(.97);transition-duration:.12s}
#nh-areas .nh-a-cats b{font-size:17px;line-height:22px;font-weight:600;word-break:keep-all}
#nh-areas .nh-a-cats small{font-size:13px;line-height:18px;color:var(--nh-fg-2)}
#nh-areas .nh-a-ci{position:absolute;left:14px;top:12px;width:28px;height:28px;color:var(--nh-fg-2)}
#nh-areas .nh-a-ci svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#nh-areas .nh-a-hr{margin:48px 0 0;border:0;border-top:1px solid var(--nh-line)}
#nh-areas .nh-a-moreh{margin:24px 0 8px}
@media (min-width:768px){#nh-areas .nh-a-grid{gap:24px}#nh-areas .nh-a-blk{aspect-ratio:4/3}#nh-areas .nh-a-big .nh-a-blk{aspect-ratio:3/2}#nh-areas .nh-a-cats{gap:24px}#nh-areas .nh-a-hr{margin-top:64px}}
@media (max-width:420px){#nh-areas .nh-a-cats a{aspect-ratio:auto;min-height:88px;padding-top:44px}#nh-areas .nh-a-ci{width:22px;height:22px}#nh-areas .nh-a-cats b{font-size:15px;line-height:20px}}

/* ---------- shared-photo transition between the block and the area hero ---------- */
@view-transition{navigation:auto}
::view-transition-group(*.nh-area){animation-duration:420ms;animation-timing-function:var(--nh-spring-open)}
:root.nh-back::view-transition-group(*.nh-area){animation-duration:320ms;animation-timing-function:var(--nh-ease-close)}
::view-transition-image-pair(*.nh-area){overflow:hidden;animation:nh-a-rad 420ms var(--nh-spring-open) both}
:root.nh-back::view-transition-image-pair(*.nh-area){animation:nh-a-rad 320ms var(--nh-ease-close) both reverse}
@keyframes nh-a-rad{from{border-radius:4px}to{border-radius:0}}
/* the site header is the same on both pages: it stays put instead of fading out and back in */
body.nh-a-page .mobile-header,body:has(#nh-areas) .mobile-header{view-transition-name:nh-header}
body.nh-a-page .layout>aside.left,body:has(#nh-areas) .layout>aside.left{view-transition-name:nh-side}
::view-transition-group(nh-header),::view-transition-group(nh-side),::view-transition-new(nh-header),::view-transition-new(nh-side){animation:none}
::view-transition-old(nh-header),::view-transition-old(nh-side){animation:none;opacity:0}
::view-transition-old(*.nh-area),::view-transition-new(*.nh-area){height:100%;object-fit:cover}
::view-transition-old(root){animation:120ms var(--nh-ease-micro) both nh-a-out}
::view-transition-new(root){animation:120ms var(--nh-ease-micro) 294ms both nh-a-in}
:root.nh-back::view-transition-new(root){animation-delay:194ms}
@keyframes nh-a-out{to{opacity:0}}
@keyframes nh-a-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
 body.nh-a-page .nh-a-cover img,#nh-areas .nh-a-blk img{view-transition-name:none}
 ::view-transition-old(root),::view-transition-new(root){animation:150ms linear both nh-a-in;animation-delay:0s}
 ::view-transition-old(root){animation-name:nh-a-out}
 #nh-areas .nh-a-blk:active,#nh-areas .nh-a-cats a:active,body.nh-a-page .nh-a-sh:active{transform:none}
 body.nh-a-page .nh-a-more::details-content{transition:none}}

/* related hubs */
nav.nh-a-more{margin:56px 16px 0}nav.nh-a-more p{margin:0;font-size:15px;line-height:28px;color:var(--nh-fg-2)}nav.nh-a-more a{display:inline-block;padding:8px 0;color:var(--nh-fg);font-weight:700;text-decoration:underline;text-decoration-color:var(--nh-line);text-underline-offset:3px}nav.nh-a-more i{font-style:normal}nav.nh-a-more a:focus-visible{outline:2px solid var(--nh-accent);outline-offset:2px}
@media (min-width:768px){nav.nh-a-more{margin:64px 0 0}}
/* desktop: category tiles keep a fixed, compact height instead of 4:3 so they do not read as empty cards */
@media (min-width:768px){#nh-areas .nh-a-cats a{aspect-ratio:auto;min-height:112px;padding:16px 18px}}