.portal-page { background: #f7f8f5; }
.portal-page .masthead { width: 94%; height: 78px; }
.atlas-heading { display: flex; justify-content: space-between; align-items: end; padding: 30px 3% 25px; gap: 30px; }
.atlas-heading .kicker { font-size: 9px; margin-bottom: 9px; }
.atlas-heading h1 { font-size: clamp(37px,4.7vw,70px); font-weight: 400; line-height: 1.08; letter-spacing: -.055em; }
.atlas-heading h1 span { display: inline-block; font-size: 13px; letter-spacing: .04em; margin-left: 26px; vertical-align: middle; }
.atlas-lead { font-size: 11px; color: var(--muted); line-height: 1.9; padding-bottom: 3px; }
.atlas-workspace { display: grid; grid-template-columns: minmax(0,1fr) 295px; margin-inline: 3%; border: 1px solid #d8ded7; background: #edf1eb; }
.atlas-map { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background-image: radial-gradient(#bac6b760 .8px,transparent .8px); background-size: 22px 22px; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; position: relative; z-index: 2; }
.region-picker { display: flex; align-items: center; gap: 12px; }
.region-picker>span { font-size: 8px; letter-spacing: .15em; color: #5f6f61; }
.region-picker select { max-width: 160px; padding: 12px 24px 12px 12px; font-size: 11px; background: #ffffffc7; border: 1px solid #d7dfd4; border-radius: 0; }
.zoom-controls { display: flex; gap: 5px; }
.zoom-controls button { height: 43px; min-width: 43px; font-size: 21px; background: #ffffffdc; border: 1px solid #d7dfd4; transition: background .2s; }
.zoom-controls button:last-child { font-size: 10px; padding: 0 13px; }
.zoom-controls button:disabled { cursor: default; }
.zoom-controls button:not(:disabled):hover { background: #253d32; color: white; }
.focus-owari { font-size: 11px; display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 43px; border: 1px solid #b8c7b9; border-radius: 25px; background: #f9fbf5; }
.focus-owari i, .open-status i { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.focus-owari:hover { background: #e0e9d9; }
.focus-owari[aria-pressed=true] { background: #253d32; color: white; }
.map-viewport { position: relative; width: 100%; min-height: 510px; height: calc(100svh - 365px); overflow: hidden; flex: 1; touch-action: pan-y; }
.map-viewport svg { width: 100%; height: 100%; position: absolute; inset: 0; display: block; touch-action: pan-y; user-select: none; }
.map-viewport.is-zoomed svg { cursor: grab; touch-action: none; }
.map-viewport.is-dragging svg { cursor: grabbing; }
.map-viewport[data-ready=true] svg { animation: map-arrive 1.1s cubic-bezier(.2,.8,.25,1) both; transform-origin: 58% 63%; }
.map-viewport.is-travelling { pointer-events: none; }
.map-loading { position: absolute; inset: 40% 8% auto; text-align: center; font-size: 12px; line-height: 1.9; color: #637364; }
.map-caption { min-height: 51px; padding: 16px 24px; border-top: 1px solid #d7dfd4; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: #526550; font-size: 10px; }
.legend { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 5px; height: 5px; border-radius: 50%; }
.ready-dot { background: var(--accent); }
.waiting-dot { background: #a8b5a6; margin-left: 12px; }
.atlas-location { position: absolute; bottom: 77px; left: 27px; pointer-events: none; display: flex; flex-direction: column; gap: 7px; color: #3b5341; }
.atlas-location>span:first-child { font-size: 12px; letter-spacing: .25em; }
.atlas-location>span:last-child { font-size: 10px; }
.province-label { cursor: pointer; outline: none; }
.province-label text { font-family: "Yu Gothic",Meiryo,sans-serif; font-size: 14px; fill: #4f6254; pointer-events: none; }
.province-label .label-bg { fill: #ffffff; fill-opacity: 0; stroke: none; }
.province-label:hover .label-bg, .province-label:focus .label-bg { fill-opacity: 1; stroke: #74846d; stroke-width: 1.3; }
.province-label.is-ready .label-bg { fill: var(--accent); fill-opacity: 1; stroke: #fff; stroke-width: 2; transition: fill .2s; }
.province-label.is-ready text { fill: white; font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.province-label.is-ready:hover .label-bg, .province-label.is-ready:focus .label-bg { fill: #203d2e; }
.map-pin { fill: var(--accent); stroke: white; stroke-width: 2; }
.map-pulse { fill: none; stroke: var(--accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: pin-signal 2.6s ease-out 3; }
.land-shape { opacity: .83; transition: opacity .25s, filter .25s; }
.land-shape.is-hovered { opacity: 1; filter: brightness(.88); stroke: #687e6a; stroke-width: 1.6; }
.land-shape.is-ready-land { fill: #a9402b !important; stroke: #fff; stroke-width: 1.5; opacity: 1; cursor: pointer; }
.route-label { cursor: pointer; outline: none; }
.route-label text { font-family: inherit; font-size: 20px; fill: #65755c; paint-order: stroke; stroke: #edf1eb; stroke-width: 6px; stroke-linejoin: round; }
.route-label:hover text, .route-label:focus text { fill: #a9402b; text-decoration: underline; }
.atlas-region { border-left: 1px solid #d8ded7; padding: 25px; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.region-kicker { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; letter-spacing: .09em; color: #687564; }
.open-status { display: flex; align-items: center; gap: 6px; }
.atlas-region-title { display: flex; align-items: baseline; gap: 16px; margin-top: 23px; }
.atlas-region-title h2 { font-size: 63px; line-height: 1.3; }
.atlas-region-title>span { font-size: 10px; letter-spacing: .2em; color: #81917d; }
.atlas-region-location { font-size: 10px; color: #6b7667; margin: 6px 0 22px; }
.spotlight { position: relative; display: block; overflow: hidden; background: #e9ebe5; }
.spotlight img { width: 100%; height: auto; aspect-ratio: 1.32; object-fit: cover; transform: scale(1.13); transition: transform .65s; }
.spotlight:hover img { transform: scale(1.2); }
.spotlight-arrow { position: absolute; right: 10px; bottom: 10px; background: #fff; width: 32px; height: 32px; display: grid; place-items: center; }
.spotlight.is-changing img { animation: spotlight-in .45s cubic-bezier(.2,.8,.25,1); }
.spotlight-info { margin: 15px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.spotlight-info p { font-size: 9px; color: #73806f; }
.spotlight-info h3 { font-size: 16px; margin-top: 7px; }
.spotlight-controls { display: flex; gap: 4px; }
.spotlight-controls button { width: 32px; min-height: 40px; border: 1px solid #dfe4dc; background: white; }
.spotlight-controls button:hover { background: #edf1eb; }
.atlas-region .solid-link { gap: 12px; background: #263d31; }
.atlas-region .solid-link:hover { background: #a9402b; }
.atlas-region-copy { font-size: 10px; line-height: 1.9; margin-top: 14px; color: #75806f; }
.province-search { margin-top: auto; padding-top: 25px; }
.province-search label { font-size: 10px; color: #65715e; display: block; margin-bottom: 8px; }
.province-search select { font-size: 11px; width: 100%; padding: 11px; border: 1px solid #d7dfd3; background: white; }
#selection-note { font-size: 10px; line-height: 1.9; color: #6a7464; padding-top: 10px; min-height: 34px; }
.portal-records { padding: 64px 3% 50px; }
.portal-records-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; }
.portal-records-heading h2 { font-size: 28px; margin-top: 12px; }
.portal-records-heading>p { font-size: 11px; color: #73806f; }
.portal-record-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.portal-record>div { overflow: hidden; background: #e5e9df; aspect-ratio: 1.6; }
.portal-record img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.13); transition: transform .7s; }
.portal-record:hover img { transform: scale(1.22); }
.portal-record .scan-poster, #spotlight-image { object-fit: contain; background: #f1f1ef; transform: none; }
.portal-record:hover .scan-poster { transform: scale(1.035); }
.portal-record>span { display: block; font-size: 9px; color: #6b7963; margin-top: 16px; }
.portal-record h3 { font-size: 17px; display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.portal-record b { font-size: 19px; font-weight: 400; }
.typographic-record { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.typographic-record>span { font-family: "Yu Mincho",serif; font-size: 78px; color: #5c6c5a; }
.typographic-record small { font-size: 8px; letter-spacing: .15em; color: #73806c; }
.portal-footer { margin-inline: 3%; padding: 26px 0; border-top: 1px solid #d8ded7; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 10px; color: #73806c; }
@keyframes map-arrive { from { opacity: 0; transform: scale(1.09) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pin-signal { from { transform: scale(.5); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }
@keyframes spotlight-in { from { opacity: .3; transform: scale(1.2) translateX(9px); } to { opacity: 1; transform: scale(1.13); } }
@media (max-width:1100px) {
  .atlas-heading h1 { font-size: 48px; }
  .atlas-heading h1 span { display: block; margin: 13px 0 0; }
  .atlas-workspace { grid-template-columns: minmax(0,1fr) 260px; }
  .atlas-region { padding: 21px; }
  .region-picker>span { display: none; }
  .map-toolbar { flex-wrap: wrap; padding: 17px 18px 0; }
  .focus-owari { order: 3; }
  .portal-record-grid { gap: 16px; }
}
@media (max-width:760px) {
  .portal-page .masthead { height: 71px; width: 90%; }
  .atlas-heading { padding: 28px 5% 24px; display: block; }
  .atlas-heading h1 { font-size: clamp(32px,8.8vw,53px); }
  .atlas-heading h1 span { margin-top: 12px; font-size: 12px; }
  .atlas-lead { margin-top: 17px; font-size: 10px; }
  .atlas-lead br { display: none; }
  .atlas-workspace { display: block; margin-inline: 0; border-inline: 0; }
  .map-toolbar { padding: 18px 5% 0; gap: 12px; }
  .region-picker select { max-width: 142px; font-size: 10px; }
  .zoom-controls button { min-width: 40px; height: 42px; }
  .focus-owari { margin-bottom: 2px; min-height: 38px; padding: 8px 13px; font-size: 10px; }
  .map-viewport { min-height: 320px; height: 45svh; flex: none; }
  .atlas-location { left: 5%; bottom: 91px; }
  .atlas-location>span:first-child { font-size: 9px; }
  .atlas-location>span:last-child { font-size: 9px; }
  .map-caption { padding: 15px 5%; min-height: 72px; font-size: 9px; gap: 10px; }
  .province-label.is-unavailable { display: none; }
  .is-zoomed .province-label.is-unavailable { display: block; }
  .route-label { display: none; }
  .is-zoomed .route-label { display: block; }
  .atlas-region { border-left: 0; border-top: 1px solid #d8ded7; padding: 25px 5% 30px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 20px; }
  .region-kicker { grid-column: 1/-1; margin-bottom: 8px; }
  .atlas-region-title { grid-column: 1; grid-row: 2; margin-top: 11px; gap: 10px; }
  .atlas-region-title h2 { font-size: 50px; }
  .atlas-region-title>span { font-size: 9px; }
  .atlas-region-location { grid-column: 1; grid-row: 3; font-size: 9px; margin: 5px 0 12px; }
  .spotlight { grid-column: 2; grid-row: 2/5; align-self: start; margin-top: 12px; }
  .spotlight img { aspect-ratio: 1; }
  .atlas-region-copy { grid-column: 1; grid-row: 4; font-size: 9px; margin: 0; }
  .spotlight-info { grid-column: 1/-1; grid-row: 5; margin: 20px 0 15px; }
  .atlas-region>.solid-link { grid-column: 1/-1; grid-row: 6; }
  .province-search { grid-column: 1/-1; padding-top: 22px; }
  .portal-records { padding: 40px 5%; }
  .portal-records-heading { display: block; margin-bottom: 23px; }
  .portal-records-heading h2 { font-size: 23px; }
  .portal-records-heading>p { margin-top: 14px; font-size: 10px; }
  .portal-record-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 15px; }
  .portal-record>div { aspect-ratio: 1.13; }
  .portal-record h3 { font-size: 13px; line-height: 1.8; }
  .portal-record>span { font-size: 8px; }
  .typographic-record>span { font-size: 63px; }
  .typographic-record small { font-size: 6px; }
  .portal-footer { margin-inline: 5%; font-size: 8px; flex-wrap: wrap; }
  .portal-footer>span { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .map-viewport[data-ready=true] svg, .map-pulse, .spotlight.is-changing img { animation: none; }
}
@media (min-width:761px) and (max-width:1000px) {
  .atlas-workspace { display: block; }
  .map-viewport { height: min(58svh,600px); min-height: 500px; flex: none; }
  .atlas-region { border-left: 0; border-top: 1px solid #d8ded7; display: grid; grid-template-columns: minmax(0,1fr) 240px; column-gap: 40px; }
  .region-kicker { grid-column: 1; grid-row: 1; }
  .atlas-region-title { grid-column: 1; grid-row: 2; margin-top: 18px; }
  .atlas-region-location { grid-column: 1; grid-row: 3; margin-bottom: 18px; }
  .spotlight { grid-column: 2; grid-row: 1/5; align-self: start; }
  .spotlight-info { grid-column: 2; grid-row: 5; margin: 16px 0 0; }
  .atlas-region>.solid-link { grid-column: 1; grid-row: 4; align-self: start; }
  .atlas-region-copy { grid-column: 1; grid-row: 5; }
  .province-search { grid-column: 1/-1; max-width: 380px; }
  .portal-record-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}