/* GuideDistrict editorial system — shared by reading, tools and map panels. */
:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --radius-control: .5rem;
  --radius-card: .875rem;
  --radius-panel: 1rem;
  --shadow-panel: 0 14px 38px #08061235;
  --accent: #ff9dc6;
  --accent-warm: #ffc38d;
  --control-line: #8a789b;
  --pink: var(--accent);
  --panel: var(--surface);
  --reading-width: 72ch;
  --control-height: 44px;
}
[data-theme=light] { --accent: #963c6c; --accent-warm: #783785; --control-line: #8b758a; --shadow-panel: 0 12px 30px #39243a12; }
body { font-size: 16px; line-height: 1.65; }
button, input, select, textarea { font: inherit; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
:where(button, .button, summary, select) { border-radius: var(--radius-control); }
.button { min-height: var(--control-height); }
.eyebrow { font-size: 11px; line-height: 1.5; }
.section-heading p, .atlas-copy>p:not(.eyebrow) { font-size: 16px; line-height: 1.65; }
.section-heading h2 { font-size: clamp(30px,3.1vw,40px); }
.editorial-section { padding-top: var(--space-5); }
.topic-grid { gap: 22px; }
.topic-card.illustrated-card, .region-tile { border-radius: var(--radius-card); }
.topic-card.illustrated-card { align-items: stretch; }
.card-picture { aspect-ratio: 16/10; }
.card-copy { padding: 19px 20px 22px; }
.card-copy strong, .article-layout .card-copy strong { font-family: Inter,ui-sans-serif,system-ui,sans-serif; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.card-copy p, .article-layout .card-copy p { font-size: 15px; line-height: 1.65; margin-top: 9px; }
.card-copy .status-badge { font-size: 12px; line-height: 1.5; }
.card-arrow { width: 30px; height: 30px; }
.media-label { position: absolute; left: 10px; bottom: 10px; padding: 3px 7px; border-radius: 4px; background: #171323dc; color: #fff4e8; font-size: 10px; line-height: 1.5; letter-spacing: .035em; }
.illustrated-card:hover { box-shadow: var(--shadow-panel); }
.text-topic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.topic-card.text-topic-card { flex-direction: row; align-items: center; justify-content: space-between; min-height: 88px; padding: 18px 20px; gap: 18px; border-radius: var(--radius-control); }
.text-topic-card>div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.text-topic-card strong { font-family: Inter,ui-sans-serif,system-ui,sans-serif; font-size: 16px; line-height: 1.45; }
.text-topic-card .status-badge { align-self: start; padding: 0; border: 0; background: transparent; font-size: 12px; color: var(--muted); }
.text-topic-card>span { color: var(--accent); font-size: 20px; flex: none; }
.directory-group .text-topic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.directory-group .topic-card { min-height: 94px; }
.category-text { display: block; max-width: 880px; padding: 34px 0; }
.category-text .category-hero-copy { padding: 0 0 8px 25px; border-left: 3px solid var(--accent); }
.category-text .category-lead { max-width: 68ch; }
.breadcrumb { font-size: 13px; line-height: 1.6; }
.breadcrumb a { padding-block: 5px; }
.category-lead, .category-editorial { font-size: 17px; line-height: 1.7; }
.editorial-figure { margin: 24px 0 32px; }
.editorial-figure img { border-radius: var(--radius-card); }
.editorial-figure figcaption { font-size: 12px; line-height: 1.6; margin-top: 10px; }
.category-hero .editorial-figure figcaption { max-width: 65ch; }
.article-layout { grid-template-columns: minmax(0,790px) 230px; gap: 60px; }
.article-layout article { min-width: 0; font-size: 17px; }
.article-layout p, .article-layout li { line-height: 1.7; }
.article-layout article>p, .editorial-section-text p { max-width: var(--reading-width); }
.article-layout h1 { font-size: clamp(38px,4.2vw,58px); }
.article-layout .quick-answer { padding: 22px 24px; font-size: 17px; line-height: 1.65; border-radius: var(--radius-card); }
.article-layout .editorial-figure img { aspect-ratio: 16/9; }
.article-layout .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.article-layout .card-copy { padding: 18px; }
.article-layout .toc { font-size: 14px; line-height: 1.6; }
.article-layout .toc a { padding-block: 7px; }
.article-meta, .verification-note { font-size: 13px; line-height: 1.65; }
.tool-card, .schedule-controls, .site-search-dialog { border-radius: var(--radius-panel); background: var(--surface); border: 1px solid var(--line); }
.tool-card input:not([type=checkbox]), .tool-card select, .tool-card textarea, .schedule-controls select, .site-search-dialog input { min-height: 48px; font-size: 16px; border-radius: var(--radius-control); background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.tool-card label, .tool-card .checklist-item { line-height: 1.6; }
.tool-card input:not([type=checkbox]), .tool-card select, .tool-card textarea, .schedule-controls select, .site-search-dialog input, .directory-search input[type=search] { border-color: var(--control-line); }
.tool-card .checklist-item { padding-block: 12px; align-items: flex-start; }
.tool-card .checklist-item input { margin-top: 2px; }
.region-copy { padding: 22px 23px 12px; }
.region-copy .eyebrow { font-size: 11px; }
.region-copy p { font-size: 15px; line-height: 1.6; }
.region-actions { padding: 0 23px 18px; }
.region-actions a { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
.atlas-district { background: var(--surface); border-color: var(--line); }
.atlas-district .atlas-copy { padding: 38px; }
.atlas-copy small { font-size: 12px; color: var(--muted); }
.district-region-title { color: var(--muted); }
.district-region-links a { font-size: 13px; min-height: 44px; color: var(--text); border-color: var(--line); }
.district-region-links a:hover { background: var(--raised); border-color: var(--accent); }
.district-region-links span { color: var(--accent); }
.coming-strip { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.coming-strip p { font-size: 16px; line-height: 1.65; }
.site-footer { margin-top: var(--space-4); }
.site-footer small { font-size: 12px; line-height: 1.65; }
.site-results li a { border-radius: var(--radius-control); padding: 14px; }
.site-results li a:hover { background: var(--raised); }
.site-results .status-badge { font-size: 12px; }
.map-page .map-sidebar, .map-page .details-panel { background: var(--surface); color: var(--text); }
.map-page .details-panel { border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); padding: 22px; }
.map-page .map-summary, .overview-controls p, .map-region-info p, .panel-heading p, .panel-copy, .detail-photo-caption { font-size: 12px; line-height: 1.6; }
.map-page .map-tabs button, .map-page .details-panel .button { font-size: 12px; }
.map-page .search-wrap input, #panel-filters select, #panel-profile select, #private-note { font-size: 14px; }
.map-page .details-panel .explanation, .evidence-details { font-size: 13px; line-height: 1.6; }
.region-choice { border-radius: var(--radius-control); }
.map-page .place-row strong { font-size: 14px; }
.map-page .place-row small { font-size: 12px; }
.map-page .site-header .theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.map-page .site-footer { margin: 0; }
[data-theme=light] .region-map-card { color: #fff4e8; }
[data-theme=light] .region-map-card p { color: #fff4e8; }
@media(max-width:1200px) {
  .topic-grid, .entry-section .topic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .entry-section .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-layout { gap: 32px; grid-template-columns: minmax(0,1fr) 190px; }
}
@media(max-width:1000px) {
  .topic-grid, .directory-group .text-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .region-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .site-header { gap: 6px; padding-inline: 12px; }
  .header-tools { gap: 5px; }
  .mobile-map-link { display: none; }
  .theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .leonida-hero .hero-art { object-position: var(--mobile-focal-x) var(--mobile-focal-y)!important; }
  .hero-content .eyebrow { font-size: 10px; }
  .hero-intro { font-size: 16px; line-height: 1.65; }
  .hero-content .button { font-size: 14px; min-height: 48px; padding: 11px 14px; }
  .hero-content .button-row { flex-wrap: wrap; }
  .hero-content .button-row .button { flex: 1 1 145px; }
  .section-heading p { font-size: 15px; }
  .card-picture { aspect-ratio: 16/10; }
  .card-picture img, .region-tile img, .editorial-figure img { object-position: var(--mobile-focal-x) var(--mobile-focal-y)!important; }
  .card-copy { padding: 18px; }
  .card-copy strong { font-size: 18px; }
  .card-copy p { font-size: 15px; }
  .category-hero { gap: 24px; }
  .category-lead { font-size: 16px; }
  .category-hero .editorial-figure img { aspect-ratio: 16/10; }
  .category-text .category-hero-copy { padding-left: 18px; }
  .breadcrumb { font-size: 12px; }
  .article-layout { display: block; }
  .article-layout article { font-size: 16px; }
  .article-layout .quick-answer { font-size: 16px; padding: 20px; }
  .article-layout .topic-grid .illustrated-card:last-child:nth-child(odd) { grid-column: auto; }
  .article-layout .tool-card { padding: 20px; }
  .editorial-figure figcaption { font-size: 11px; }
  .region-tile img { aspect-ratio: 16/10; }
  .region-copy h3 { font-size: 29px; }
  .region-copy p { font-size: 14px; }
  .region-actions a { font-size: 13px; }
  .region-copy .eyebrow { font-size: 10px; }
  .atlas-district .atlas-copy { padding: 26px 22px; }
  .map-page .details-panel { padding: 18px; }
  .map-page .map-tabs button { font-size: 11px; }
  .map-page .search-wrap input, #panel-filters select, #panel-profile select, #private-note { font-size: 16px; }
  .map-page .map-bottom .button { font-size: 11px; }
  .map-page .map-attribution { font-size: 9px; line-height: 1.5; }
  .map-page .map-mobile-search { font-size: 14px; }
}
@media(max-width:599px) {
  .topic-grid, .entry-section .topic-grid, .article-layout .topic-grid, .directory-group .topic-grid, .region-grid { grid-template-columns: 1fr; gap: 20px; }
  .text-topic-grid, .directory-group .text-topic-grid { grid-template-columns: 1fr; gap: 10px; }
  .all-topics .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .all-topics .card-copy { padding: 14px 12px; }
  .all-topics .card-copy strong { font-size: 16px; }
  .all-topics .card-copy p { display: none; }
  .all-topics .card-copy .status-badge { font-size: 11px; }
  .all-topics .media-label { font-size: 9px; padding: 2px 5px; bottom: 6px; left: 6px; }
  .all-topics .card-arrow { display: none; }
  .region-copy { padding: 20px 22px 10px; }
  .region-actions { display: flex; padding: 0 22px 16px; }
  .site-results li a { flex-direction: column; gap: 8px; }
  .site-results .status-badge { max-width: 100%; }
  .text-topic-card strong { overflow-wrap: anywhere; }
  .article-layout .related-guides .topic-grid { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; }
}

/* Launch home: uncropped official artwork and practical editorial cards. */
.district-hero { width:min(1300px,92%); margin:36px auto 0; display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:center; }
.district-hero-copy { padding:24px 0; min-width:0; }
.district-hero h1 { font-size:clamp(44px,4.4vw,66px); line-height:1.05; margin:16px 0; }
.district-hero-intro { color:var(--muted); max-width:43ch; font-size:17px; }
.hero-art-wrap { margin:0; min-width:0; }
.district-hero-art { display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--radius-card); }
.hero-art-wrap figcaption { color:var(--muted); font-size:11px; text-align:right; margin-top:6px; }
.hero-find { display:flex; gap:8px; margin:24px 0 14px; }
.hero-find input { width:100%; min-width:0; border:1px solid var(--control-line); border-radius:8px; background:var(--surface); color:var(--text); padding:12px; font-size:16px; }
.hero-find .button { flex:none; padding-inline:14px; font-size:13px; }
.functional-card p { font-size:14px; line-height:1.65; color:var(--muted); margin:4px 0 0; }
.topic-card.functional-card { align-items:flex-start; padding:22px; border-top:2px solid var(--accent); }
.functional-card strong { font-size:18px; }
.entry-section .text-topic-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.future-topics { margin-top:40px; border-top:1px solid var(--line); padding:20px 0; color:var(--muted); }
.future-topics summary { cursor:pointer; min-height:44px; padding:8px 0; color:var(--text); }
.future-topics nav { display:flex; gap:12px 24px; flex-wrap:wrap; }
.future-topics nav a { padding-block:8px; }
.directory-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0; list-style:none; }
.directory-results a { display:flex; height:100%; border:1px solid var(--line); }
.search-result-copy { display:flex; flex-direction:column; gap:6px; min-width:0; }
.search-result-copy small { font-size:13px; color:var(--muted); line-height:1.55; font-weight:400; }
.site-results li a { align-items:flex-start; }
.schedule-conflict { border-left:3px solid var(--accent-warm); padding:16px 20px; background:var(--surface); border-radius:0 10px 10px 0; }
.schedule-conflict strong { display:block; margin-bottom:6px; }
.schedule-controls { grid-template-columns:1fr 1fr; }
.schedule-controls label { margin-top:8px; }
.schedule-controls select { width:100%; }
#schedule-result { grid-column:1/-1; }
.schedule-sources { display:flex; gap:12px 20px; flex-wrap:wrap; font-size:14px; }
.breadcrumb ol { flex-wrap:wrap; }
[hidden] { display:none!important; }
@media(max-width:1100px) { .district-hero { gap:24px; } .entry-section .text-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .district-hero { grid-template-columns:1fr; gap:0; margin-top:20px; }
 .hero-art-wrap { grid-row:1; }
 .district-hero-copy { padding:22px 0 0; }
 .district-hero h1 { font-size:44px; }
 .district-hero-intro { font-size:16px; }
 .hero-find { margin-top:20px; }
 .directory-results { grid-template-columns:1fr; }
 .schedule-controls { display:block; }
 .mobile-map-link { display:inline-flex; padding:8px; font-size:12px; min-height:44px; align-items:center; }
 .map-page .mobile-map-link { display:none; }
 .article-layout .editorial-figure img { aspect-ratio:16/9; }
}
@media(max-width:420px) { .entry-section .text-topic-grid { grid-template-columns:1fr; } .hero-find { flex-wrap:wrap; } .hero-find input { flex:1 1 100%; } .hero-find .button { width:100%; } }

/* Preserve the new scenes' composition after the shared article/mobile rules.
   The additional concept class keeps official media on its existing framing. */
.article-layout .editorial-figure.editorial-concept img,
.category-hero .editorial-figure.editorial-concept img {
  aspect-ratio: 8/5;
  object-fit: contain;
}

/* Authentic article media keeps the source image intact, including real UI captures. */
.article-layout .editorial-figure.article-media img,
.category-editorial .editorial-figure.article-media img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.article-media .media-credit{display:block;margin-top:4px}
.article-media figcaption{max-width:75ch}

/* Use the native image ratio for real media; portrait objects stay at a modest size. */
.editorial-figure.article-media,.editorial-figure.authentic-media{max-width:var(--media-max-width,100%);margin-inline:auto}
.article-layout .editorial-figure.authentic-media img,
.category-hero .editorial-figure.authentic-media img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.article-media .media-full-image{display:block;cursor:zoom-in}
.media-credit{display:block;margin-top:4px}
.media-enlarge{display:inline-block;margin-top:6px;font-size:12px;line-height:1.5}

/* Decorative arrows use native CSS strokes, independent of symbol-font coverage. */
.card-arrow,.text-topic-card>span[aria-hidden=true],.district-map-arrow{font-size:0!important}
.text-topic-card>span[aria-hidden=true]{position:relative;display:block;width:20px;height:20px;flex:none}
.card-arrow::before,.text-topic-card>span[aria-hidden=true]::before,.district-map-arrow::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translate(-50%,-50%)}
.card-arrow::after,.text-topic-card>span[aria-hidden=true]::after,.district-map-arrow::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(-45deg)}
.inline-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.article-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.article-media-grid .article-media{min-width:0;width:100%}
@media(max-width:599px){.article-media-grid{grid-template-columns:1fr}}