/* Postcard lettering font (Danny t219 to t224): Nunito 900, a subset of Latin letters and - , . ' only (5 KB).
   SIL Open Font License 1.1, Copyright 2014 The Nunito Project Authors; licence text in /type/nunito-OFL.txt.
   Only area pages load it. The text sits over the image, so a late swap cannot shift the layout. */
@font-face { font-family: 'KMD Round'; font-style: normal; font-weight: 900; font-display: swap; src: url(/type/nunito-900-latin-postcard.woff2) format('woff2'); unicode-range: U+0020-007E; }
/* Area postcards (Danny t219 to t224). The lettering follows the temporary icon set: rounded heavy letters, a navy-900
   outline like the icons' rounded stroke, a teal-700 offset as the second colour (the icons are duotone), and the cream of
   the map marker rings for the place pill. White on the navy outline is 17:1 whatever is behind it. Sizes scale with the
   card (container query units), with vw fallbacks. */
.area-pc-fig { margin: var(--s-3) 0; max-inline-size: 50rem; }
.area-pc { position: relative; margin: 0; max-inline-size: 50rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: #0e5c63; container-type: inline-size; }
.area-pc img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.area-pc-txt { position: absolute; inset-block-start: 6%; inset-inline-start: 5.5%; inset-inline-end: 5.5%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; gap: 1.6cqi; }
.area-pc-name { margin: 0; max-inline-size: 100%; font-family: 'KMD Round', 'Arial Rounded MT Bold', 'Hiragino Maru Gothic ProN', var(--font); font-weight: 900; font-size: 7vw; font-size: 7.6cqi; line-height: 1.05; letter-spacing: 0.01em; color: #fff; -webkit-text-stroke: 0.3rem #0b1c2c; -webkit-text-stroke-width: 1.25cqi; paint-order: stroke fill; text-shadow: 0.2rem 0.2rem 0 #0e5c63; text-shadow: 0.75cqi 0.75cqi 0 #0e5c63; overflow-wrap: anywhere; }
.area-pc-name:lang(ja) { font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', var(--font); font-size: 8.4cqi; -webkit-text-stroke-width: 0.9cqi; }
.area-pc-place { margin: 0; padding: 0.15rem 0.6rem; padding: 0.7cqi 2.2cqi; border: 2px solid #0b1c2c; border-width: max(2px, 0.55cqi); border-radius: 99px; background: #faf8f3; color: #0e5c63; font-family: 'KMD Round', var(--font); font-weight: 900; font-size: 0.8rem; font-size: max(0.75rem, 3.2cqi); line-height: 1.2; letter-spacing: 0.04em; }
/* QA 2026-11-13: name-meaning caption under the card (no card carries a photo credit since QA R5). */
.area-pc-cap { display: flex; flex-direction: column; gap: 0.15rem; margin-block-start: 0.4rem; }
.area-pc-note { color: inherit; }
.area-pc-cap .area-pc-han { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Hiragino Sans', 'Noto Sans CJK KR', 'Noto Sans CJK JP', system-ui, sans-serif; }
html[data-contrast='more'] .area-pc { outline: 3px solid #fff; }
html[data-contrast='more'] .area-pc-name { color: #fff; -webkit-text-stroke-color: #000; text-shadow: none; }
html[data-contrast='more'] .area-pc-place { background: #000; color: #fff; border-color: #fff; }
/* Areas list (QA R2-L3): badge left of each card's name. */
.area-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; align-items: start; }
.area-card > .area-badge-sm { grid-row: 1 / span 4; inline-size: 40px; block-size: 40px; border-radius: 9px; }
.area-card > :not(svg) { grid-column: 2; }
.area-card > .h-card { margin-block-start: 0.35rem; }
.area-card .name-tags { margin-block: 0.25rem; }
html[data-contrast='more'] .area-card > .area-badge-sm { outline: 2px solid #fff; }