/* Leaflet overlays are sized in cqw, not vw: their boxes are percentages of
   the replica, and since the column is capped at 1024px (2026-09-11) the
   viewport and the column are no longer the same width. 1vw and 1cqw were
   equal on a full-bleed 1440px window, so the full-bleed look is unchanged.
   Dialogs and the floating spot card stay viewport-relative on purpose. */
/* Desktop/tablet boundary: the leaflet (desktop composition) holds down to
   1001px and the semantic composition takes over at 1000px and below. It was
   1201/1200 until 2026-09-10; the designer found the hand-off to the middle
   layout came too early when narrowing a desktop window. The leaflet is sized
   in container units, so between 1000 and 1200px it simply renders smaller:
   its 9pt body copy is 8.8px at 1000px (10.5px at 1200). Every `1000px` /
   `1001px` media query, the picture `<source>` and the matchMedia in
   presentation.js are this one boundary; change them together. */
:root {
  --exact-ink: #173f34;
  --exact-paper: #fffdf5;
  --exact-coral: #ef6b58;
  /* Sampled from the grey the team mocked up on 2026-09-16 (IMG_2879): the
     side margins there average exactly this, and white in the same screenshot
     is still #FFFFFF, so it is a real choice and not a colour shift. Slightly
     darker than the top bar, which is how their example reads. */
  --exact-margin: #cccecd;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.exact-source {
  min-width: 0;
  background: #fff;
  scroll-behavior: smooth;
}

.exact-source .site-header,
.exact-source .source-replica ~ section,
.exact-source > footer {
  display: none;
}

.exact-source main {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  background: #fff;
}

.source-replica {
  position: relative;
  width: 100%;
  isolation: isolate;
  background: #fff;
}

.source-replica > picture {
  display: block;
}

.source-replica__art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  animation: exact-art-in .5s ease-out both;
}

.source-replica__nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.source-replica__nav a {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  color: transparent;
  font-size: inherit;
  line-height: 1;
  pointer-events: auto;
  border-radius: 0;
  transition: background-color .18s ease, box-shadow .18s ease, backdrop-filter .18s ease;
}

.source-replica__nav a:hover {
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
  -webkit-backdrop-filter: brightness(1.1) saturate(1.03);
  backdrop-filter: brightness(1.1) saturate(1.03);
}

.source-replica__nav a:focus-visible,
.source-event-hit:focus-visible,
.source-map-hits button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--exact-coral);
}

.source-event-hit {
  position: absolute;
  z-index: 4;
  left: 63.2%;
  top: .3%;
  width: 36.5%;
  height: 5.85%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.source-event-hit:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.source-event-poster {
  position: absolute;
  left: 85.99%;
  top: .569%;
  z-index: 2;
  width: 11.05%;
  height: auto;
  pointer-events: none;
  transform: rotate(8.507deg) scale(1.001);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.2, .7, .2, 1);
}

.source-update-copy {
  position: absolute;
  z-index: 3;
  left: 7%;
  top: 9.68%;
  width: 32.5%;
  margin: 0;
  color: #111;
  font-family: var(--body);
  font-size: clamp(9px, .95cqw, 40px);
  font-weight: 700;
  line-height: 1.55;
  pointer-events: none;
}

.source-contact-email {
  position: absolute;
  z-index: 3;
  left: 10.55%;
  top: 30.61%;
  width: 23.4%;
  height: .55%;
  display: flex;
  align-items: center;
  isolation: isolate;
  color: #000;
  font-family: Arial, "Noto Sans JP", sans-serif;
  font-size: clamp(8px, 1.5cqw, 64px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  pointer-events: none;
}

.source-contact-email::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #dae5a0;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 85% 100%, 0 100%);
}

/* The desktop replica is a supplied raster artwork, so replace its baked-in
   misspelled chapter labels with live, scalable text. */
.source-chapter-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.source-chapter-labels span {
  position: absolute;
  left: 6.15%;
  top: var(--y);
  width: 11.5%;
  height: .42%;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-image: var(--source-art-url, none);
  background-position: 24.86% var(--patch-y);
  background-repeat: no-repeat;
  background-size: 869.565% auto;
  color: #fff;
  font-family: var(--body);
  font-size: clamp(10px, 1.17cqw, 30px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
}

.source-chapter-labels span::after {
  content: attr(data-label);
}

/* The four section kickers in the artwork carry the same misspelling. They
   sit on flat colour, so the patch samples the clean area to their right. */
.source-chapter-labels span.is-section {
  left: 6.3%;
  width: 12%;
  height: .42%;
  background-position: 20.45% var(--patch-y);
  background-size: 833.333% auto;
  color: #111;
  font-size: clamp(14px, 1.83cqw, 48px);
}

/* The poster used to grow 2.5% on hover. Emphasis never changes size here, and
   compositing the scaled poster re-rasterised the hero copy, which read as the
   title shivering. The capsule's own colour change is the whole hover now. */

.source-anchor {
  position: absolute;
  left: 0;
  top: var(--y);
  width: 1px;
  height: 1px;
  scroll-margin-top: 0;
}

.source-john-cleanup {
  position: absolute;
  left: 6.09%;
  top: 37.93%;
  z-index: 2;
  width: 15.1%;
  height: 2.7%;
  background: #fff;
  pointer-events: none;
}

.source-john-portrait {
  position: absolute;
  left: 7.48%;
  top: 37.99%;
  z-index: 3;
  width: 12.33%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

.source-john-portrait img {
  position: absolute;
  left: -62%;
  top: -69%;
  display: block;
  width: 192%;
  max-width: none;
  height: auto;
}

.source-john-socials {
  position: absolute;
  left: 28.25%;
  top: 38.54%;
  transform: translateY(-8px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: clamp(3px, .45vw, 19px);
}

.source-john-social {
  position: relative;
  height: clamp(14px, 2.45vw, 105px);
  padding: 0 clamp(5px, .8cqw, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .42vw, 18px);
  box-sizing: border-box;
  border: clamp(1px, .12vw, 5px) solid #080808;
  border-radius: 999px;
  font-family: var(--body);
  font-size: clamp(5px, .72cqw, 31px);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}

.source-john-social::before,
.source-map-pin::before,
.source-map-hits button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
}

.source-john-social svg {
  width: clamp(7px, 1.05vw, 45px);
  height: clamp(7px, 1.05vw, 45px);
  flex: none;
}

.source-john-social span {
  display: block;
  line-height: 1;
  transform: translateY(-.06em);
}

.source-john-social--instagram {
  background: #f1f1f1;
  color: #080808;
}

.source-john-social--instagram svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.source-john-social--instagram .source-john-social__dot {
  fill: currentColor;
  stroke: none;
}

.source-john-social--youtube {
  border-color: #ed0033;
  background: #ed0033;
  color: #fff;
}

.source-john-social--youtube svg {
  fill: currentColor;
}

.source-john-social--instagram:hover { background: #fff; }

.source-john-social--youtube:hover {
  border-color: #ff3157;
  background: #ff3157;
}

.source-john-social:focus-visible {
  outline: clamp(1px, .14vw, 6px) solid #080808;
  outline-offset: clamp(1px, .14vw, 6px);
}

.source-member-character-cleanup {
  position: absolute;
  z-index: 2;
  width: 14.42%;
  height: 2.62%;
  background: #fff;
  pointer-events: none;
}

.source-member-character-cleanup--churui {
  left: 79.58%;
  top: 45.43%;
}

.source-member-character-cleanup--ainu {
  left: 32.02%;
  top: 52.95%;
}

/* Keep one circular clip; an in-flow percentage-height image can leave
   the wrapper taller than the photo during browser zoom. */
.source-member-character {
  position: absolute;
  z-index: 3;
  width: 12.33%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

.source-member-character--churui {
  left: 80.63%;
  top: 45.24%;
}

.source-member-character--ainu {
  left: 33.07%;
  top: 52.76%;
}

.source-member-character img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exact-source .member-row figure.member-team-figure {
  background: #e5eaec;
}

.exact-source .member-row figure.member-team-figure--ainu {
  background: #eceae7;
}

.exact-source .member-row figure .member-team-photo {
  border-radius: inherit;
}

/* The three member comments are baked into the artwork, so the 忠類 wording the
   team sent on 2026-09-16 could not be corrected in place. They approved a
   different face and size provided the three match each other, so all three are
   re-set here rather than leaving one paragraph in a face the other two lack.
   Geometry is the leaflet PDF's own (1024 x 4882.02pt): each block keeps its
   left edge and the 25pt line pitch. Type is 18.2pt rather than the artwork's
   20pt because Illustrator's 文字ツメ packs that 20pt to an 18.4pt average
   advance; at a full 20pt the 忠類 last line would run under the member photo.
   Line breaks are explicit and never reflow. z-index 2 keeps these beneath the
   photos at 3, the same layer the baked-silhouette cleanup spans use. */
/* The leaflet spells the owner's name ジョン ウイヒョン 隊員; the semantic layout
   and the owner himself use ジョン・ウィヒョン隊員. Same treatment as the member
   comments: cover the baked run and set it again, 18.2pt to sit with them, 700
   to stand in for the artwork's Bold. The two other names stay as the artwork
   has them, so this one loses the leaflet's space before 隊員 — that spelling is
   the one the owner chose on 2026-09-16. */
.source-member-name-cleanup {
  position: absolute;
  z-index: 2;
  left: 22.0703%;
  top: 39.2665%;
  width: 19.5313%;
  height: 0.5121%;
  background: #fff;
  pointer-events: none;
}

.source-member-name {
  position: absolute;
  z-index: 2;
  left: 22.3994%;
  top: 39.1987%;
  margin: 0;
  color: #000;
  font-family: var(--body), sans-serif;
  font-weight: 700;
  font-size: 1.7773cqw;
  line-height: 1.3736;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.source-member-comment-cleanup {
  position: absolute;
  z-index: 2;
  background: #fff;
  pointer-events: none;
}

.source-member-comment {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: #000;
  font-family: var(--body), sans-serif;
  /* 500, not 400: the page loads Noto Sans JP from 500 up, and pulling a 400
     face in for these three paragraphs also re-rendered every other default
     weight on the page — 24 places at 900px, 27 at 390px, the footer copy the
     most visible. The three blocks matching each other is what the team asked
     for, and 500 does that without touching anything else. */
  font-weight: 500;
  font-size: 1.7773cqw;
  line-height: 1.3736;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.source-member-comment-cleanup--john {
  left: 7.3730%;
  top: 36.4296%;
  width: 41.0645%;
  height: 1.5362%;
}

.source-member-comment--john {
  left: 7.6152%;
  top: 36.3751%;
}

.source-member-comment-cleanup--churui {
  left: 47.4609%;
  top: 43.7012%;
  width: 46.2891%;
  height: 2.0483%;
}

.source-member-comment--churui {
  left: 47.7041%;
  top: 43.6467%;
}

.source-member-comment-cleanup--ainu {
  left: 6.4453%;
  top: 50.9277%;
  width: 47.2656%;
  height: 2.5604%;
}

.source-member-comment--ainu {
  left: 6.6621%;
  top: 50.8732%;
}


.source-member-sns-photos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.source-member-sns-photo {
  position: absolute;
  width: 32.87%;
  height: 4.35%;
  overflow: hidden;
  border-radius: 13% 13% 0 0 / 20% 20% 0 0;
}

.source-member-sns-photo--churui {
  left: 7.8%;
  top: 41.63%;
}

.source-member-sns-photo--ainu {
  left: 61.45%;
  top: 49.15%;
}

.source-member-sns-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.source-member-sns-photo--churui img {
  object-position: center;
}

.source-member-sns-photo--ainu img {
  object-position: center;
}

.source-member-sns-body {
  position: absolute;
  width: 32.87%;
  height: 2.93%;
  background: #fff;
  border-radius: 0 0 13% 13% / 0 0 30% 30%;
}

.source-member-sns-body--churui {
  left: 7.8%;
  top: 45.97%;
}

.source-member-sns-body--ainu {
  left: 61.45%;
  top: 53.49%;
}

.source-member-sns-copy {
  position: absolute;
  width: 23%;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: #050806;
  font-family: var(--body);
  font-size: clamp(7px, 1.62cqw, 69px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .01em;
}

.source-member-sns-copy strong {
  font: inherit;
}

.source-member-sns-copy--churui {
  left: 15.35%;
  top: 46.53%;
}

.source-member-sns-copy--ainu {
  left: 69%;
  top: 54.05%;
}

/* Same pill as ジョン隊員's Instagram button; the pill sets its own size, so
   the gap above is in cqw (the old text link's 0.9em at 0.82em of 1.62cqw). */
.source-member-sns-copy .source-member-sns-handle {
  align-self: flex-start;
  margin-top: 1.2cqw;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .source-john-social {
    transition: none;
  }
}

.source-case-photos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.source-case-title-fix {
  position: absolute;
  z-index: 4;
  left: 44.45%;
  top: 24.94%;
  width: 14.1%;
  height: .72%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #dae6a0;
  background-image: var(--source-art-url, none);
  background-position: 92.8% 24.26%;
  background-repeat: no-repeat;
  background-size: 709.22% auto;
  color: #000;
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(10px, 2.45cqw, 104px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.source-case-arrow-fix {
  position: absolute;
  left: 68.7%;
  top: 26.85%;
  width: 3.8%;
  height: 1.35%;
  background-image: var(--source-art-url, none);
  background-position: 82.83% 24.42%;
  background-repeat: no-repeat;
  background-size: 2631.58% auto;
}

.source-case-arrow-fix::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-top: clamp(6px, .55vw, 24px) solid transparent;
  border-bottom: clamp(6px, .55vw, 24px) solid transparent;
  border-left: clamp(9px, .8vw, 34px) solid #000;
  transform: translate(-42%, -50%);
}

.source-case-photo {
  position: absolute;
  top: 25.83%;
  width: 24.42%;
  height: 3.52%;
  object-fit: cover;
}

.source-case-photo--before { left: 45.12%; }
.source-case-photo--after { left: 72.33%; }

.source-case-cleanup {
  position: absolute;
  top: 29.938%;
  width: 21.092%;
  height: 1.229%;
  object-fit: fill;
}

.source-case-cleanup--before { left: 44.528%; }
.source-case-cleanup--after { left: 71.83%; }

.source-case-copy {
  position: absolute;
  top: 30.02%;
  width: 24.42%;
  min-height: 1.18%;
  margin: 0;
  padding: .08% .3% .14%;
  display: flex;
  align-items: flex-start;
  background: transparent;
  color: #050806;
  font-family: var(--body);
  font-size: clamp(4px, .92cqw, 39px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .01em;
}

.source-case-copy--before { left: 45.12%; }
.source-case-copy--after { left: 72.33%; }

.case-controls {
  display: flex;
  align-items: center;
}

.case-controls button {
  display: grid;
  place-items: center;
  padding: 0 0 .08em;
  border: 2px solid #111;
  border-radius: 50%;
  background: rgba(255, 253, 245, .94);
  color: #111;
  font-family: Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.case-controls button:is(:hover, :focus-visible) {
  background: #111;
  color: #fff;
  transform: scale(1.08);
}

.case-controls button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--exact-coral);
}

.case-controls > span {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: #111;
  font-family: var(--body);
  font-weight: 900;
  white-space: nowrap;
}

.source-case-controls {
  position: absolute;
  z-index: 5;
  left: 59%;
  top: 31.25%;
  width: 24%;
  justify-content: center;
  gap: clamp(6px, .8vw, 20px);
  pointer-events: auto;
}

.source-case-controls button {
  width: clamp(22px, 2.25vw, 58px);
  height: clamp(22px, 2.25vw, 58px);
  font-size: clamp(17px, 1.7cqw, 42px);
}

.source-case-controls > span {
  min-width: clamp(54px, 5.2vw, 126px);
  min-height: clamp(22px, 2.1vw, 52px);
  padding: 0 .5em;
  align-items: center;
  border: 2px solid #111;
  border-radius: 999px;
  background: rgba(255, 253, 245, .94);
  font-size: clamp(9px, 1.05cqw, 26px);
}

[data-case-study].is-changing [data-case-before],
[data-case-study].is-changing [data-case-after],
[data-case-study].is-changing [data-case-before-copy],
[data-case-study].is-changing [data-case-after-copy] {
  opacity: .35;
}

[data-case-before],
[data-case-after],
[data-case-before-copy],
[data-case-after-copy] {
  transition: opacity .18s ease;
}

.exact-source .akiya .case-study > .case-controls {
  grid-column: 1 / -1;
  justify-self: end;
  gap: 8px;
}

.exact-source .akiya .case-study > .case-controls button {
  width: 34px;
  height: 34px;
  font-size: 25px;
}

.exact-source .akiya .case-study > .case-controls > span {
  min-width: 62px;
  font-size: 11px;
}

.source-social-photos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.source-social-photo-frame {
  position: absolute;
  top: 59.25%;
  width: 27.62%;
  height: 4.7%;
  overflow: hidden;
  border-radius: 15% 15% 0 0;
}

.source-social-photo-frame--one {
  left: 5.62%;
}

.source-social-photo-frame--two {
  left: 36.28%;
}

.source-social-photo-frame--three {
  left: 66.93%;
}

.source-social-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transform-origin: center;
  transition: transform .48s cubic-bezier(.2, .7, .2, 1);
}

.source-social-photo--one {
  object-position: center;
}

.source-social-photo--two {
  object-position: center;
}

.source-social-photo--three {
  object-position: center;
}

.source-replica:has(.source-social-trigger--one:is(:hover, :focus-visible)) .source-social-photo--one,
.source-replica:has(.source-social-trigger--two:is(:hover, :focus-visible)) .source-social-photo--two,
.source-replica:has(.source-social-trigger--three:is(:hover, :focus-visible)) .source-social-photo--three {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .source-social-photo,
  .source-event-poster {
    transition: none;
  }
}

.source-social-body {
  position: absolute;
  top: 63.94%;
  width: 27.62%;
  height: 2.55%;
  background: #fff;
  border-radius: 0 0 15% 15% / 0 0 27.65% 27.65%;
}

.source-social-copy {
  position: absolute;
  top: 64.39%;
  width: 27.62%;
  margin: 0;
  padding: 0 1.55%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #050806;
  font-family: var(--body);
  font-size: clamp(7px, 1.7cqw, 72px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: .01em;
  white-space: nowrap;
}

.source-social-copy strong {
  font-weight: 800;
}

.source-social-body--one,
.source-social-copy--one {
  left: 5.62%;
}

.source-social-body--two,
.source-social-copy--two {
  left: 36.28%;
}

.source-social-body--three,
.source-social-copy--three {
  left: 66.93%;
}

.source-map-hits {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.source-map-cleanup {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.source-map-cleanup i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: block;
  /* The source JPEG carries a CMYK-derived ICC profile. This sRGB value is
     tuned to the rendered map green so the cleanup layer disappears into it. */
  background: #96cb7d;
}

.source-map-redesign {
  position: absolute;
  left: 0;
  top: 70.25%;
  z-index: 4;
  width: 100%;
  height: 26.5%;
  overflow: hidden;
  background: #96cb7d;
  color: var(--exact-ink);
  font-family: var(--body);
  pointer-events: none;
}

.source-map-redesign::before {
  content: "";
  position: absolute;
  left: 3.8%;
  right: 3.8%;
  top: 0;
  height: clamp(1px, .15vw, 3px);
  background: rgba(23, 63, 52, .34);
}

.source-map-redesign__stage {
  position: absolute;
  left: 22.25%;
  top: 1.6%;
  width: 55.5%;
  height: 96.6%;
}

.source-map-redesign__heading {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.1%;
  border-bottom: clamp(1px, .12vw, 2px) solid rgba(23, 63, 52, .34);
  color: var(--exact-ink);
  font-size: clamp(7px, .92cqw, 14px);
  font-weight: 900;
  letter-spacing: .12em;
}

.source-map-redesign__heading span {
  display: flex;
  align-items: center;
  gap: clamp(3px, .35vw, 6px);
  color: rgba(23, 63, 52, .68);
  font-size: .86em;
  letter-spacing: .04em;
  white-space: nowrap;
}

.source-map-redesign__heading small em {
  margin-left: clamp(5px, .65vw, 10px);
  color: rgba(23, 63, 52, .62);
  font-size: .72em;
  font-style: normal;
  letter-spacing: .04em;
}

.source-map-redesign__heading span b,
.source-map-redesign__heading span i {
  color: var(--exact-coral);
  font-style: normal;
}

.source-map-redesign__heading span i {
  margin-left: clamp(3px, .35vw, 6px);
  color: var(--exact-ink);
}

.source-map-redesign__canvas {
  position: absolute;
  left: 50%;
  top: 6.5%;
  width: 125%;
  aspect-ratio: 620 / 900;
  transform: translateX(-50%);
}

.source-map-redesign__canvas svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.source-map-landmark {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 clamp(2px, .28vw, 4px) clamp(2px, .45vw, 7px) rgba(23, 63, 52, .16));
}

.source-map-landmark--pirari {
  left: 67%;
  top: 18.5%;
  width: 8.5%;
  transform: translate(-50%, -50%);
}

.source-map-landmark--naumann {
  left: 51%;
  top: 68.5%;
  width: 18%;
  transform: translate(-50%, -50%);
}

.source-map-route-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.source-map-redesign__canvas > svg:first-child .map-route-shield {
  opacity: 0;
}

/* Between the museum and the hotel, left of the hotel pin: at 51%/85.8% it
   sat under the hotel pin and label and could not be read. */
.source-map-nearby {
  position: absolute;
  left: 40.5%;
  top: 84.4%;
  z-index: 2;
  padding: clamp(2px, .25cqw, 4px) clamp(4px, .45cqw, 7px);
  border-radius: 999px;
  background: rgba(255, 253, 244, .88);
  color: rgba(23, 63, 52, .72);
  font-size: clamp(6px, .68cqw, 10px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.source-map-redesign__land {
  fill: #cae98a;
  stroke: var(--exact-ink);
  stroke-width: 4;
  stroke-linejoin: round;
}

.source-map-redesign__road {
  fill: none;
  stroke: #fffdf4;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 13;
}

.source-map-redesign__river {
  fill: none;
  stroke: #2d8faf;
  stroke-width: 7;
  stroke-linecap: round;
}

.source-map-redesign__canvas text {
  fill: var(--exact-ink);
  font-family: var(--body);
  font-size: 19px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #cae98a;
  /* Land-coloured halo: wide enough that the road dash visibly stops short
     of 忠類 (at 8px its end still touched 類). */
  stroke-width: 14px;
  stroke-linejoin: round;
}

.map-route-shield {
  pointer-events: none;
}

.map-route-shield circle {
  fill: #176f9d;
  stroke: #fffdf4;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.source-map-redesign__canvas .map-route-shield text,
.source-map-route-overlay .map-route-shield text,
.map-shape .map-route-shield text,
.mobile-map-route-overlay .map-route-shield text {
  fill: #fff;
  stroke: none;
  paint-order: normal;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 900;
  dominant-baseline: middle;
}

.source-map-redesign__canvas .map-route-shield--wide text,
.source-map-route-overlay .map-route-shield--wide text,
.map-shape .map-route-shield--wide text,
.mobile-map-route-overlay .map-route-shield--wide text {
  font-size: 10px;
}

.mobile-map-route-overlay { display: none; }

.source-map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(5px, .6vw, 10px);
  border: 0;
  background: transparent;
  color: var(--exact-ink);
  font-family: var(--body);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.source-map-pin--left {
  flex-direction: row-reverse;
}

.source-map-pin--naumann {
  transform: translate(calc(-100% + clamp(9px, 1.1vw, 18px)), -50%);
}

.source-map-pin--hotel {
  transform: translate(calc(0px - clamp(9px, 1.1vw, 18px)), -50%);
}

.source-map-pin i {
  position: relative;
  width: clamp(18px, 2.2vw, 36px);
  aspect-ratio: 1;
  flex: none;
  display: block;
  box-sizing: border-box;
  border: clamp(2px, .24vw, 4px) solid #fffdf4;
  border-radius: 50%;
  background: var(--exact-coral);
  box-shadow: 0 0 0 clamp(1px, .16vw, 3px) var(--exact-ink);
  transition: background-color .12s ease, box-shadow .25s ease;
}

.source-map-pin span {
  padding: clamp(3px, .38cqw, 7px) clamp(5px, .7cqw, 12px);
  border: clamp(1px, .1vw, 2px) solid rgba(23, 63, 52, .22);
  border-radius: 999px;
  background: #fffdf4;
  font-size: clamp(7px, .92cqw, 14px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .12s ease;
}

.source-map-pin:hover i,
.source-map-pin:focus-visible i,
.source-map-pin.active i {
  background: var(--exact-coral);
}

.source-map-pin.active {
  z-index: 21;
}

.source-map-pin.active i {
  box-shadow: 0 0 0 clamp(1px, .16vw, 3px) var(--exact-ink), 0 0 0 clamp(6px, .75vw, 13px) rgba(239, 107, 88, .3);
}

.source-map-pin:hover span,
.source-map-pin:focus-visible span,
.source-map-pin.active span {
  background: #f3c84d;
}

.source-map-pin:focus-visible {
  outline: clamp(2px, .2vw, 4px) solid #fff;
  outline-offset: clamp(2px, .25vw, 5px);
  border-radius: 999px;
}

/* The spot card lives outside .source-map-redesign, not inside it. The band
   clips its own contents (the map canvas is far taller than the band), and
   until 2026-09-16 that clip cut the card off mid-sentence whenever the band
   bottom sat above the card bottom — the cut the team reported. The slot
   repeats the band's box exactly, so the px offsets presentation.js measures
   against the band still land on the same pixel, and sits one layer above it
   so the card can run over the section below at its current size. */
.source-map-redesign__panel-slot {
  position: absolute;
  left: 0;
  top: 70.25%;
  z-index: 5;
  width: 100%;
  height: 26.5%;
  pointer-events: none;
}

.source-map-hits button {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(20px, 2.25vw, 34px);
  aspect-ratio: 1;
  border: clamp(2px, .22vw, 4px) solid rgba(255, 255, 255, .96);
  border-radius: 50%;
  background: var(--exact-coral);
  box-shadow: 0 0 0 clamp(2px, .2vw, 3px) rgba(23, 63, 52, .72);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.source-map-hits button:hover,
.source-map-hits button.active {
  background: #f3c84d;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .96), 0 0 0 7px var(--exact-coral);
  transform: translate(-50%, -50%) scale(1.16);
}

.source-maku-replacement {
  position: absolute;
  z-index: 3;
  left: 53.6%;
  top: 33.82%;
  width: 42.7%;
  height: 7.45%;
  overflow: hidden;
  background: #eed270;
  pointer-events: none;
}

.source-maku-brand {
  position: absolute;
  z-index: 3;
  left: 12.5%;
  top: 25%;
  width: 28%;
  display: grid;
  justify-items: center;
  color: #173f34;
  text-align: center;
}

.source-maku-icon {
  width: 72%;
  height: auto;
  border: clamp(2px, .35vw, 6px) solid rgba(255, 255, 255, .94);
  border-radius: 23%;
  background: #fff;
  box-shadow: 0 clamp(3px, .55vw, 10px) clamp(7px, 1.2vw, 20px) rgba(23, 63, 52, .23);
}

.source-maku-brand strong {
  margin-top: 7%;
  font-size: clamp(14px, 1.55cqw, 29px);
  line-height: 1;
  letter-spacing: .08em;
}

.source-maku-brand span {
  margin-top: 5%;
  font-size: clamp(7px, .65cqw, 12px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .06em;
}

.source-maku-store-links {
  width: 100%;
  margin-top: 9%;
  display: grid;
  gap: clamp(5px, .55vw, 10px);
  pointer-events: auto;
}

.source-maku-store-links a {
  min-height: clamp(28px, 2.25vw, 44px);
  padding: 0 clamp(9px, .85cqw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid #173f34;
  border-radius: 999px;
  background: #173f34;
  color: #fff;
  line-height: 1;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.source-maku-store-links a b {
  font-size: clamp(8px, .72cqw, 13px);
  letter-spacing: .02em;
}

.source-maku-store-links a:hover {
  background: #fff;
  color: #173f34;
  transform: translateY(-1px);
}

.source-maku-store-links a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.source-maku-showcase {
  position: absolute;
  z-index: 4;
  top: 6.5%;
  right: 13%;
  height: 87%;
  aspect-ratio: 1284 / 2778;
}

.source-maku-device,
.mobile-maku-device {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: clamp(3px, .34vw, 6px) solid #173f34;
  border-radius: 12% / 5.5%;
  background: #f6f2e7;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  box-shadow: 0 clamp(8px, 1vw, 18px) clamp(15px, 2vw, 34px) rgba(23, 63, 52, .3);
}

.source-maku-device:focus-visible,
.mobile-maku-device:focus-visible {
  outline: 3px solid #ef6b58;
  outline-offset: 4px;
}

.source-maku-device img,
.mobile-maku-device img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: translateX(7%);
  transition: opacity .55s ease, transform .55s ease;
}

.source-maku-device img.is-active,
.mobile-maku-device img.is-active {
  opacity: 1;
  transform: none;
}

.mobile-app-download {
  margin-top: 20px;
  padding: 12px;
  display: grid;
  gap: 12px;
  border: 0;
  border-radius: 18px;
  background: #f3d45e;
}

.mobile-app-identity {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
}

.mobile-app-identity img {
  width: 58px;
  height: auto;
  border-radius: 14px;
}

.mobile-app-identity span { min-width: 0; }

.mobile-app-identity small,
.mobile-app-identity strong { display: block; }

.mobile-app-identity small {
  overflow: hidden;
  font-size: 9px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-identity strong {
  margin-top: 3px;
  font-size: 15px;
}

.mobile-app-store-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-app-store-links a {
  min-height: 52px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #173f34;
  color: #fff;
  line-height: 1.1;
}

.mobile-app-store-links a strong {
  font-size: 14px;
}

.mobile-app-store-links a:hover { transform: translateY(-1px); }

.mobile-app-store-links a:focus-visible {
  outline: 3px solid #ef6b58;
  outline-offset: 3px;
}

.mobile-maku-showcase { display: none; }

.source-maku-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.source-maku-decor__dots {
  fill: #ef941c;
}

.source-maku-decor__hills path:first-child {
  fill: #8cae43;
}

.source-maku-decor__hills path:last-child {
  fill: #4f7f2a;
}

.source-maku-decor__river {
  fill: none;
  stroke: #2e83aa;
  stroke-width: 11;
  stroke-linecap: round;
}

.source-maku-decor__rays {
  fill: none;
  stroke: #ef941c;
  stroke-width: 11;
  stroke-linecap: round;
}

.source-action-hits {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.source-action-hits :is(button, a) {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: transparent;
  font-size: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.source-action-hits :is(button, a):hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.source-action-hits :is(button, a):focus-visible {
  outline: 2px solid rgba(239, 107, 88, .82);
  outline-offset: -2px;
}

.exact-source .exact-place-panel,
.exact-source .exact-place-panel[data-position] {
  position: absolute !important;
  z-index: 20;
  inset: var(--panel-y, 6%) auto auto var(--panel-x, 63.1%) !important;
  width: 29.2%;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: clamp(14px, 2.4vw, 38px);
  background: var(--exact-paper);
  box-shadow: 0 clamp(6px, .8vw, 12px) clamp(16px, 2.4vw, 36px) rgba(23, 63, 52, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none !important;
  transform-origin: left center;
  translate: -8px 0;
  transition: opacity .18s ease, translate .18s ease, visibility .18s;
}

.exact-source .exact-place-panel[data-position="left"] {
  translate: 8px 0;
}

.exact-source .exact-place-panel::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--tail-width, 28px));
  top: 0;
  /* 2px longer than the gap so the base tucks under the card's edge; ending
     exactly on it left a 1px hairline of map showing at fractional offsets. */
  width: calc(var(--tail-width, 28px) + 2px);
  height: 100%;
  display: block;
  background: var(--exact-paper);
  clip-path: polygon(
    100% calc(var(--tail-base-y, 55%) - clamp(9px, 1vw, 14px)),
    0 var(--tail-tip-y, 42%),
    100% calc(var(--tail-base-y, 55%) + clamp(9px, 1vw, 14px))
  );
  pointer-events: none;
}

.exact-source .exact-place-panel[data-position="left"]::after {
  left: auto;
  right: calc(-1 * var(--tail-width, 28px));
  clip-path: polygon(
    0 calc(var(--tail-base-y, 55%) - clamp(9px, 1vw, 14px)),
    100% var(--tail-tip-y, 42%),
    0 calc(var(--tail-base-y, 55%) + clamp(9px, 1vw, 14px))
  );
}

.exact-source .exact-place-panel[data-position="right"]::after {
  left: calc(-1 * var(--tail-width, 28px));
  right: auto;
  clip-path: polygon(
    100% calc(var(--tail-base-y, 55%) - clamp(9px, 1vw, 14px)),
    0 var(--tail-tip-y, 42%),
    100% calc(var(--tail-base-y, 55%) + clamp(9px, 1vw, 14px))
  );
}

.exact-source .exact-place-panel[data-position="left"] {
  transform-origin: right center;
}

.exact-source .exact-place-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none !important;
  translate: 0 0;
}

.exact-place-panel__close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--exact-paper);
  color: var(--exact-ink);
  font: 900 22px/1 sans-serif;
  cursor: pointer;
  display: none;
}

.exact-source .event-dialog > img {
  object-fit: contain;
  object-position: center;
  background: var(--exact-paper);
}

.exact-source .event-dialog > button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  display: grid;
  place-items: center;
  outline: none;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
}

.exact-source .event-dialog > button::before,
.exact-source .event-dialog > button::after {
  content: "";
  grid-area: 1 / 1;
  width: 19px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.exact-source .event-dialog > button::after {
  transform: rotate(-45deg);
}

.exact-source .event-dialog > button:focus-visible {
  /* The dialog autofocuses this button when it opens, so a filled focus state
     read as a permanent green circle. Keep the white disc and show focus with
     a ring instead. */
  outline: 3px solid var(--exact-ink);
  outline-offset: 3px;
}

.source-info-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 36px 38px 34px;
  border: 7px solid var(--exact-paper);
  border-radius: 8px 50px 8px 50px;
  background: var(--exact-paper);
  color: var(--exact-ink);
  box-shadow: 10px 12px 0 rgba(23, 63, 52, .82);
}

.source-info-dialog::backdrop {
  background: rgba(10, 39, 32, .58);
  backdrop-filter: blur(3px);
}

.source-info-dialog[open] {
  animation: exact-dialog-in .2s ease-out both;
}

.source-info-dialog > button:first-child {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #e9f0ba;
  color: var(--exact-ink);
  font: 900 23px/1 sans-serif;
  cursor: pointer;
}

.source-info-dialog small {
  color: var(--exact-coral);
  font: 800 12px/1.2 "Noto Sans JP", sans-serif;
  letter-spacing: .16em;
}

.source-info-dialog h2 {
  margin: 12px 0 10px;
  font: 900 clamp(24px, 5vw, 34px)/1.3 "Noto Sans JP", sans-serif;
}

.source-info-dialog p {
  margin: 0;
  font: 500 15px/1.8 "Noto Sans JP", sans-serif;
}

.source-info-dialog__dismiss {
  display: block;
  width: 100%;
  margin-top: 26px;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--exact-ink);
  color: #fff;
  font: 800 14px/1 "Noto Sans JP", sans-serif;
  cursor: pointer;
}

/* One large photo with two thumbnails, like the team's printed leaflet.
   --gallery-thumb sets the thumbnail row height; the large slot spans two. */
.place-gallery-grid {
  --gallery-thumb: clamp(80px, 8.6vw, 120px);
  --gallery-gap: clamp(2px, .25vw, 4px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-auto-rows: var(--gallery-thumb);
  gap: var(--gallery-gap);
  background: var(--exact-paper);
}

.place-panel .place-gallery-grid {
  transition: opacity .2s ease;
}

.place-panel .place-gallery-grid.is-swapping {
  opacity: 0;
  transition: none;
}

.place-gallery-grid[data-count="1"] {
  grid-template-columns: 1fr;
}

.place-gallery-grid[data-count="1"],
.place-gallery-grid[data-count="2"] {
  grid-auto-rows: calc(var(--gallery-thumb) * 2 + var(--gallery-gap));
}

.place-panel .place-gallery-main {
  position: relative;
  grid-row: span 2;
  min-height: calc(var(--gallery-thumb) * 2 + var(--gallery-gap));
  overflow: hidden;
  background: #e6e0cc;
}

.place-gallery-grid[data-count="1"] .place-gallery-main,
.place-gallery-grid[data-count="2"] .place-gallery-main {
  grid-row: auto;
}

.place-panel .place-gallery-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .2s ease;
}

.place-panel .place-gallery-main img.is-entering {
  opacity: 0;
}

.place-panel .place-gallery-thumb {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #e6e0cc;
  cursor: pointer;
}

.place-panel .place-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity .2s ease;
}

.place-panel .place-gallery-thumb:hover img,
.place-panel .place-gallery-thumb:focus-visible img {
  opacity: 1;
}

.place-panel .place-gallery-thumb:focus-visible {
  outline: 2px solid var(--exact-coral);
  outline-offset: -2px;
}

.exact-source .exact-place-panel .place-media {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 2.4vw, 38px) clamp(14px, 2.4vw, 38px) 0 0;
}

.exact-source .exact-place-panel .place-copy {
  padding: clamp(12px, 1.45vw, 22px);
  border-radius: 0 0 clamp(14px, 2.4vw, 38px) clamp(14px, 2.4vw, 38px);
  background: var(--exact-paper);
}

.exact-source .exact-place-panel .place-copy h3 {
  margin: clamp(5px, .7vw, 10px) 0;
  font-size: clamp(15px, 1.65vw, 25px);
  line-height: 1.28;
}

.exact-source .exact-place-panel .place-copy > p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(8px, .86vw, 13px);
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.exact-source .exact-place-panel .place-copy dl {
  margin: clamp(10px, 1.4vw, 20px) 0 clamp(6px, .8vw, 12px);
}

.exact-source .exact-place-panel .place-copy dl div {
  grid-template-columns: 30% 1fr;
  padding: clamp(4px, .55vw, 8px) 0;
}

.place-verification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.place-verification em {
  color: #17775f;
  font-size: clamp(7px, .72vw, 11px);
  font-style: normal;
  font-weight: 900;
}

.place-verification a {
  color: var(--exact-ink);
  font-size: clamp(7px, .72vw, 11px);
  font-weight: 900;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.place-verification a:hover,
.place-verification a:focus-visible {
  color: var(--exact-coral);
}

.place-verification a[hidden] {
  display: none;
}

.exact-place-panel[data-verified="false"] .place-verification em {
  color: #9b5d25;
}

.place-panel .place-nav {
  margin-top: clamp(10px, 1.1vw, 16px);
  padding-top: clamp(8px, .9vw, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(23, 63, 52, .16);
}

.place-panel .place-nav button {
  min-height: 36px;
  padding: 0 clamp(6px, .7vw, 10px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--exact-ink);
  font-family: var(--body);
  font-size: clamp(9px, .85vw, 13px);
  font-weight: 900;
  cursor: pointer;
  transition: color .15s ease;
}

.place-panel .place-nav button:hover,
.place-panel .place-nav button:focus-visible {
  color: var(--exact-coral);
}

.place-panel .place-nav button:focus-visible {
  outline: 2px solid var(--exact-coral);
  outline-offset: 2px;
}

.place-panel .place-nav span {
  color: rgba(23, 63, 52, .62);
  font-size: clamp(8px, .75vw, 11px);
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.exact-source .exact-place-panel.pinned .exact-place-panel__close {
  display: block;
}

@media (max-width: 720px) {
  .source-event-hit {
    left: 68%;
    width: 30%;
  }

  .source-map-hits button {
    width: 22px;
  }

  .source-map-redesign__heading small em,
  .source-map-redesign__heading span {
    display: none;
  }

  .source-replica__nav a:hover,
  .source-event-hit:hover,
  .source-action-hits :is(button, a):hover {
    transform: none;
  }

  .source-info-dialog {
    padding: 32px 25px 26px;
    border-radius: 8px 36px 8px 36px;
  }

  .exact-source .exact-place-panel,
  .exact-source .exact-place-panel[data-position] {
    position: fixed !important;
    inset: auto 12px 14px 12px !important;
    width: auto;
    max-height: min(70svh, 560px);
    overflow: auto;
    transform: none !important;
  }

  .exact-source .exact-place-panel.open {
    transform: none !important;
  }

  .exact-source .exact-place-panel::after { display: none; }
  .exact-place-panel__close { display: block; }

  .exact-source .exact-place-panel .place-gallery-grid { --gallery-thumb: 90px; }
  .exact-source .exact-place-panel .place-copy { padding: 15px 18px 18px; }
  .exact-source .exact-place-panel .place-copy h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .source-replica__art { animation: none; }
  .exact-source .exact-place-panel,
  .source-replica__nav a,
  .source-event-hit,
  .source-map-hits button,
  .source-map-pin i,
  .source-map-pin span,
  .source-action-hits :is(button, a),
  .source-maku-icon,
  .source-maku-device img,
  .mobile-maku-device img,
  .place-panel .place-gallery-main img,
  .place-panel .place-gallery-thumb img,
  .place-panel .place-gallery-grid,
  .place-panel .place-nav button { transition: none; }
  .exact-source .exact-place-panel,
  .exact-source .exact-place-panel[data-position] { translate: 0 0; }

}

@keyframes exact-art-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes exact-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile presentation: keep the desktop artwork intact, but unfold its
   chapters into a readable, tap-first vertical field guide. */
@media (max-width: 720px) {
  body.exact-source {
    min-width: 0;
    overflow-x: hidden;
    background: var(--illustration-paper);
    color: var(--illustration-ink);
  }

  .exact-source .source-replica { display: none; }

  .exact-source .site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    height: 64px;
    padding: 0 18px;
    display: flex;
    border-bottom: 1px solid rgba(32, 63, 55, .18);
    background: rgba(247, 240, 221, .95);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .exact-source .site-header .brand b { font-size: 13px; }
  .exact-source .site-header .menu-button { width: 44px; height: 44px; }
  .exact-source .site-header nav {
    inset: 64px 0 auto;
    height: calc(100dvh - 64px);
    gap: 0;
    padding: 36px 24px;
    justify-content: center;
    background: rgba(247, 240, 221, .98);
  }
  .exact-source .site-header nav a {
    width: min(300px, 100%);
    min-height: 58px;
    display: grid;
    place-items: center;
    border-bottom: 1px solid rgba(32, 63, 55, .24);
    font-size: 18px;
  }

  .exact-source .source-replica ~ section { display: block; }
  .exact-source > footer { display: grid; }
  .exact-source .section { scroll-margin-top: 64px; }

  .exact-source .hero {
    min-height: 0;
    display: block;
    overflow: hidden;
  }
  .exact-source .hero-scene { min-height: min(690px, calc(100svh - 64px)); }
  .exact-source .hero-scene > img { object-position: 72% center; }
  .exact-source .chapter-nav {
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 14px;
    width: auto;
    gap: 5px;
  }
  .exact-source .chapter-nav__title {
    margin-bottom: 2px;
    padding: 8px 12px;
    font-size: 10px;
  }
  .exact-source .chapter-nav a { min-height: 50px; }
  .exact-source .chapter-nav small {
    margin-left: 8px;
    font-size: 8px;
  }
  .exact-source .chapter-nav a > span {
    display: none;
  }
  .exact-source .chapter-nav b {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px 8px 34px;
    display: flex;
    align-items: center;
    font-size: 15px;
    line-height: 1.25;
  }
  .exact-source .chapter-nav b::before { left: 11px; width: 15px; }
  .exact-source .chapter-nav::after { display: none; }
  .exact-source .hero-event {
    top: 16px;
    right: 26px;
    width: 220px;
    height: 92px;
    padding: 12px 61px 11px 17px;
  }
  .exact-source .hero-event::after {
    right: -30px;
    top: -8px;
    width: 82px;
    height: 108px;
  }
  .exact-source .hero-event span { font-size: 7px; }
  .exact-source .hero-event b { font-size: 12px; }
  .exact-source .hero-event small { font-size: 8px; }
  .exact-source .hero-lockup { padding: 38px 14px 46px; }
  .exact-source .hero-copy h1 {
    font-size: clamp(31px, 9.5vw, 40px);
    letter-spacing: -.12em;
  }
  .exact-source .hero-copy > b { font-size: 10px; }

  .exact-source .akiya,
  .exact-source .members,
  .exact-source .social,
  .exact-source .map-section {
    padding: 72px 20px 82px;
  }
  .exact-source .section-heading > p,
  .exact-source .chapter-kicker { font-size: 12px; }
  .exact-source .section-heading h2 {
    margin-top: 7px;
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.16;
    letter-spacing: -.055em;
  }
  .exact-source .section-heading > span {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.75;
  }

  .exact-source .akiya { border-radius: 0 0 58px 0; }
  .exact-source .akiya-layout { display: block; }
  .exact-source .akiya-copy h2 {
    font-size: clamp(32px, 9.4vw, 39px);
    line-height: 1.2;
  }
  .exact-source .akiya-copy h2 small { font-size: 15px; }
  .exact-source .akiya-copy > p,
  .exact-source .akiya-copy .akiya-prompt {
    font-size: 15px;
    line-height: 1.8;
  }
  .exact-source .akiya-copy dl { margin-top: 18px; }
  .exact-source .akiya-copy dl div {
    padding: 12px 0;
    border-bottom: 1px solid rgba(32, 63, 55, .25);
  }
  .exact-source .akiya-copy dd span { font-size: 12px; }
  .exact-source .akiya-copy dd b { margin-top: 3px; font-size: 24px; }
  .exact-source .matching-note { margin-top: 24px; }
  .exact-source .matching-note b { font-size: 13px; }
  .exact-source .matching-note > span { width: 86px; height: 66px; font-size: 9px; }
  .exact-source .akiya-pig-house { width: min(62%, 220px); margin: 22px auto 10px; }
  .exact-source .akiya-contact-card {
    padding: 22px 20px;
    border: 2px solid var(--illustration-ink);
    border-radius: 28px 8px 28px 8px;
    background: rgba(255, 253, 244, .72);
  }
  .exact-source .akiya-contact-card > small { font-size: 10px; }
  .exact-source .akiya-contact-card > strong { font-size: 24px; }
  .exact-source .akiya-contact-card > p { margin: 10px 0; font-size: 12px; }
  .exact-source .akiya-contact-card > div { display: grid; gap: 8px; }
  .exact-source .akiya-contact-card a {
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--illustration-coral);
    color: #fff;
    font-size: 15px;
  }
  .exact-source .akiya-contact-card em,
  .exact-source .akiya-contact-card > span { font-size: 11px; }
  .exact-source .support-center { width: min(330px, 92%); margin: 34px auto 28px; }
  .exact-source .support-center img { border-width: 7px; }
  .exact-source .support-center figcaption { font-size: 11px; }
  .exact-source .akiya .case-study {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .exact-source .akiya .case-study > div:first-child { grid-column: auto; }
  .exact-source .akiya .case-study > div:first-child p { font-size: 12px; }
  .exact-source .akiya .case-study > div:first-child h3 { font-size: 26px; }
  .exact-source .akiya .case-photo { border-radius: 24px; }
  .exact-source .akiya .case-study figcaption { font-size: 12px; }
  .exact-source .akiya .case-arrow { display: none; }

  .exact-source .member-row,
  .exact-source .member-row.reverse {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 42px;
  }
  .exact-source .member-row figure {
    min-height: 330px;
    border-width: 7px;
  }
  .exact-source .member-row figure img { min-height: 330px; }
  .exact-source .member-row > div,
  .exact-source .member-row.reverse > div {
    padding: 34px 24px;
    border-radius: 42px 12px;
  }
  .exact-source .member-row > div > small { font-size: 10px; }
  .exact-source .member-row h3 { margin: 8px 0 14px; font-size: 34px; }
  .exact-source .member-row p { font-size: 15px; line-height: 1.8; }
  .exact-source .member-row dl {
    grid-template-columns: 82px 1fr;
    margin: 24px 0;
  }
  .exact-source .member-row dt { font-size: 10px; }
  .exact-source .member-row dd { font-size: 12px; }
  .exact-source .mobile-maku-showcase {
    width: min(230px, 66%);
    margin: 24px auto 18px;
    display: grid;
    gap: 10px;
  }
  .exact-source .mobile-maku-device {
    width: 100%;
    height: auto;
    aspect-ratio: 1284 / 2778;
    border-width: 4px;
    border-radius: 24px;
  }
  .exact-source .mobile-maku-showcase > p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--illustration-ink);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
  }
  .exact-source .member-social-links {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .exact-source .member-social-links a {
    min-height: 48px;
    margin: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: var(--illustration-ink);
    color: #fff;
    font-size: 9px;
  }
  .exact-source .member-social-links strong { font-size: 13px; }
  .exact-source .resource-link--button {
    width: 100%;
    min-height: 52px;
    cursor: pointer;
    border-right: 0;
    border-left: 0;
    background: transparent;
    color: inherit;
    text-align: left;
  }
  .exact-source .confirm-note { font-size: 10px; line-height: 1.6; }

  .exact-source .social { border-radius: 0 54px 0 0; }
  .exact-source .social-list {
    margin-top: 36px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .exact-source .social-list article {
    display: flex;
    flex-direction: column;
    border-radius: 48px 48px 18px 18px;
  }
  .exact-source .social-list img { height: 230px; min-height: 0; }
  .exact-source .social-list article > div { padding: 24px 22px 28px; }
  .exact-source .social-list small { font-size: 10px; }
  .exact-source .social-list h3 { margin: 8px 0 18px; font-size: 24px; line-height: 1.35; }
  .exact-source .social-post-link {
    min-height: 48px;
    padding: 0 15px;
    align-self: stretch;
    border: 0;
    border-radius: 999px;
    background: var(--illustration-ink);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
  }

  .exact-source .map-section { padding-left: 16px; padding-right: 16px; }
  .exact-source .map-layout { margin-top: 34px; }
  .exact-source .map-stage { min-height: 720px; }
  .exact-source .map-shape { width: 100%; filter: none; }
  .exact-source .map-stage > .map-shape .map-route-shield { visibility: hidden; }
  .exact-source .mobile-map-route-overlay {
    position: absolute;
    z-index: 6;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
    overflow: visible;
    pointer-events: none;
  }
  .exact-source .map-shape > path:first-child { fill: #d7ea86; stroke-width: 5; }
  .exact-source .map-road { stroke-width: 13; }
  .exact-source .map-river { stroke-width: 8; }
  .exact-source .map-label { font-size: 23px; }
  .exact-source .mobile-map-landmark {
    position: absolute;
    z-index: 2;
    display: block;
    height: auto;
    pointer-events: none;
    object-fit: contain;
  }
  .exact-source .mobile-map-landmark--pirari {
    left: 64%;
    top: 16%;
    width: min(21%, 120px);
  }
  .exact-source .mobile-map-landmark--naumann {
    left: 60%;
    top: 84%;
    width: min(20%, 90px);
  }
  .exact-source .mobile-map-nearby {
    position: absolute;
    z-index: 4;
    left: 52%;
    top: 87%;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 253, 244, .9);
    font-size: 9px;
    font-weight: 900;
    transform: translateX(-50%);
  }
  .exact-source .map-pin {
    z-index: 5;
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }
  .exact-source .map-pin i {
    width: 34px;
    height: 34px;
    border: 4px solid #fffdf4;
    border-radius: 50%;
    background: #ef6b58;
    box-shadow: 0 0 0 2px var(--illustration-ink), 0 4px 9px rgba(0, 0, 0, .18);
    transform: none;
    transition: box-shadow .25s ease;
  }
  .exact-source .map-pin i::after { display: none; }
  .exact-source .map-pin:hover i,
  .exact-source .map-pin:focus-visible i,
  .exact-source .map-pin.active i {
    transform: none;
    box-shadow: 0 0 0 2px var(--illustration-ink), 0 0 0 10px rgba(239, 107, 88, .3), 0 4px 9px rgba(0, 0, 0, .18);
  }
  .exact-source .map-pin.featured i { background: #ef6b58; }
  .exact-source .map-pin span {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    margin: 0;
    padding: 5px 9px;
    display: block;
    border: 1px solid rgba(32, 63, 55, .24);
    border-radius: 999px;
    background: rgba(255, 253, 244, .96);
    font-size: 10px;
    line-height: 1;
    transform: translateY(-50%);
  }
  .exact-source .map-pin--label-left span {
    right: calc(100% + 6px);
    left: auto;
  }
  .exact-source .map-pin[data-place="naumann"] { left: 37%; }
  .exact-source .map-pin[data-place="glamping"] { left: 73%; }
  .exact-source .map-section .place-panel,
  .exact-source .map-section .place-panel[data-position] {
    position: fixed !important;
    z-index: 110;
    inset: auto 12px 12px !important;
    width: auto;
    max-height: min(72svh, 610px);
    margin: 0;
    overflow: auto;
    border-width: 5px;
    border-radius: 28px 10px 28px 10px;
    box-shadow: 0 18px 55px rgba(14, 45, 37, .32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .exact-source .map-section .place-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .exact-source .map-section .place-gallery-grid { --gallery-thumb: 96px; }
  .exact-source .map-section .place-copy { padding: 18px 20px 22px; }
  .exact-source .map-section .place-copy > small { font-size: 9px; }
  .exact-source .map-section .place-copy h3 { font-size: 24px; }
  .exact-source .map-section .place-copy > p { font-size: 13px; }
  .exact-source .map-section .place-copy dt { font-size: 9px; }
  .exact-source .map-section .place-copy dd { font-size: 11px; }
  .exact-source .map-section .place-nav button { min-height: 44px; font-size: 13px; }
  .exact-source .map-section .place-nav span { font-size: 10px; }
  .exact-source .mobile-place-panel__close {
    position: absolute;
    z-index: 5;
    right: 10px;
    top: 10px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 253, 244, .94);
    cursor: pointer;
    font-size: 24px;
  }
  .exact-source .local-notes { margin-top: 50px; }
  .exact-source .local-notes small { font-size: 10px; }
  .exact-source .local-notes h3 { font-size: 31px; }
  .exact-source .local-notes li { padding: 15px 0; }
  .exact-source .local-notes b { font-size: 14px; }
  .exact-source .local-notes span { font-size: 13px; }

  .exact-source .contact {
    min-height: 560px;
    padding: 80px 22px;
    display: flex;
  }
  .exact-source .contact > p { font-size: 10px; }
  .exact-source .contact h2 { font-size: 38px; }
  .exact-source .contact > span { font-size: 15px; line-height: 1.8; }
  .exact-source .contact button {
    min-height: 52px;
    padding: 0 22px;
    font-size: 14px;
  }
  .exact-source > footer {
    min-height: 150px;
    padding: 34px 22px;
    grid-template-columns: 1fr;
    gap: 10px;
    font-size: 11px;
  }

  .exact-source .event-dialog[open],
  .exact-source .source-info-dialog[open] { width: calc(100% - 24px); }
  .exact-source .event-dialog > img {
    height: auto;
    aspect-ratio: 1132 / 1600;
    object-position: center;
  }
  .exact-source .event-dialog h2 { font-size: 32px; }
  .exact-source .event-dialog p,
  .exact-source .source-info-dialog p { font-size: 14px; }
  .exact-source .source-info-dialog__dismiss { min-height: 48px; }
  .exact-source .toast {
    width: calc(100% - 28px);
    bottom: 14px;
    font-size: 12px;
    text-align: center;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .exact-source .map-section .place-panel,
  .exact-source .map-pin i,
  .exact-source .site-header nav { transition: none; }
}

/* Keep the update panel above the title artwork's foreground trees. */
@media (max-width: 1000px) {
  .exact-source .chapter-nav {
    z-index: 5;
  }
}

/* Mobile source-faithful correction.
   Preserve the desktop leaflet's art direction; only reflow its columns. */
@media (max-width: 720px) {
  body.exact-source {
    background: var(--illustration-paper);
  }

  .exact-source .site-header,
  .exact-source .contact {
    display: none !important;
  }

  .exact-source .section {
    scroll-margin-top: 0;
  }

  .exact-source .hero-scene {
    min-height: 540px;
    background: #2ba7d8;
  }

  .exact-source .hero-scene > img {
    object-position: 67% center;
  }

  .exact-source .chapter-nav {
    left: 12px;
    right: auto;
    top: 118px;
    bottom: auto;
    width: clamp(220px, 58vw, 320px);
    gap: 2px;
  }

  .exact-source .chapter-nav__title {
    margin-bottom: 3px;
    padding: 7px 11px;
    background: var(--illustration-ink);
    font-size: 8px;
  }

  .exact-source .chapter-nav a {
    min-height: 60px;
  }

  .exact-source .chapter-nav small {
    margin: 0 0 1px 8px;
    font-size: 8px;
  }

  .exact-source .chapter-nav a > span {
    display: block;
    margin: 0 0 2px 8px;
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .exact-source .chapter-nav b {
    min-height: 47px;
    padding: 9px 11px 9px 34px;
    font-size: min(18px, 4.2vw);
    line-height: 1.22;
  }

  .exact-source .chapter-nav b::before {
    left: 11px;
    width: 17px;
  }

  .exact-source .chapter-nav::after {
    display: none;
  }

  .exact-source .chapter-update {
    min-height: 0;
    margin-top: 2px;
    padding: 16px 14px;
    border: 1px solid rgba(32, 63, 55, .15);
    background: rgba(255, 255, 255, .88);
    color: #111;
  }

  .exact-source .chapter-update strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
  }

  .exact-source .chapter-update span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
  }

  .exact-source .hero-event {
    top: 16px;
    right: 55px;
    width: 205px;
    height: 86px;
    padding: 11px 59px 10px 16px;
    background: #ff1717;
  }

  .exact-source .hero-event::before {
    content: "";
    position: absolute;
    right: -43px;
    top: 1px;
    width: 85px;
    height: 84px;
    border-radius: 50%;
    background: #ff1717;
  }

  .exact-source .hero-event::after {
    right: -35px;
    top: -9px;
    width: 80px;
    height: 104px;
  }

  .exact-source .hero-event span { font-size: 6px; }
  .exact-source .hero-event b { margin: 3px 0; font-size: 12px; }
  .exact-source .hero-event small { font-size: 7px; }

  .exact-source .hero-lockup {
    aspect-ratio: 4267 / 870;
    padding: 0;
    overflow: visible;
    background: var(--illustration-paper) url("../assets/presentation/hero-lockup-mobile-exact.webp") center / cover no-repeat;
  }

  .exact-source .hero-lockup::before {
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 4267 / 320;
    border-radius: 0;
    background: url("../assets/presentation/hero-lockup-top-mobile-exact.webp?v=2") center / 100% 100% no-repeat;
    transform: translateY(-78.125%);
  }

  .exact-source .hero-lockup::after {
    content: "";
    position: absolute;
    left: 44.53%;
    top: 0;
    width: 55.47%;
    aspect-ratio: 2367 / 220;
    background: url("../assets/presentation/hero-lockup-check-mobile-exact.webp") center / 100% 100% no-repeat;
    transform: translateY(-68.18%);
  }

  .exact-source .hero-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .exact-source .akiya,
  .exact-source .members,
  .exact-source .social,
  .exact-source .map-section {
    position: relative;
    z-index: 1;
    overflow: visible;
    padding: 58px 18px 66px;
  }

  .exact-source .members::before,
  .exact-source .social::before,
  .exact-source .map-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: -38px;
    width: 100%;
    height: 54px;
    pointer-events: none;
  }

  .exact-source .members::before {
    background: var(--illustration-yellow);
    clip-path: ellipse(78% 100% at 64% 100%);
  }

  .exact-source .social::before {
    background: #efb3a3;
    clip-path: ellipse(82% 100% at 38% 100%);
  }

  .exact-source .map-section::before {
    background: var(--illustration-green);
    clip-path: ellipse(80% 100% at 66% 100%);
  }

  .exact-source .section-heading > p,
  .exact-source .chapter-kicker {
    margin-bottom: 4px;
    color: #111;
    font-size: 10px;
    font-style: italic;
  }

  .exact-source .section-heading h2 {
    margin: 0;
    color: #0b1511;
    font-size: clamp(31px, 8.8vw, 38px);
    line-height: 1.12;
    letter-spacing: -.05em;
  }

  .exact-source .section-heading > span {
    margin-top: 10px;
    color: #14241d;
    font-size: 12px;
    line-height: 1.65;
  }

  .exact-source .akiya {
    border-radius: 0;
    background: var(--illustration-leaf);
  }

  .exact-source .akiya-copy h2 {
    margin-bottom: 15px;
    font-size: clamp(28px, 8vw, 37px);
  }

  .exact-source .akiya-copy h2 small { font-size: 14px; }

  .exact-source .akiya-copy > p,
  .exact-source .akiya-copy .akiya-prompt {
    font-size: 12px;
    line-height: 1.72;
  }

  .exact-source .akiya-copy dl { margin-top: 12px; }
  .exact-source .akiya-copy dl div { padding: 5px 0; border: 0; }
  .exact-source .akiya-copy dd span { font-size: 9px; }
  .exact-source .akiya-copy dd b { font-size: 22px; }

  .exact-source .matching-note {
    margin-top: 17px;
    align-items: center;
  }

  .exact-source .matching-note b { font-size: 10px; }
  .exact-source .matching-note > span { width: 74px; height: 56px; font-size: 8px; }
  .exact-source .akiya-pig-house { width: min(48%, 180px); margin: 10px auto 4px; }

  .exact-source .akiya-contact-card {
    padding: 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .exact-source .akiya-contact-card > strong { font-size: 19px; }
  .exact-source .akiya-contact-card > p { font-size: 9px; }
  .exact-source .akiya-contact-card > div { display: flex; }
  .exact-source .akiya-contact-card a {
    min-height: 0;
    padding: 0;
    display: inline;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 11px;
  }

  .exact-source .support-center {
    width: min(290px, 82%);
    margin: 30px auto 22px;
  }

  .exact-source .support-center img { border-width: 9px; }

  .exact-source .akiya .case-study {
    grid-template-columns: 1fr 18px 1fr;
    gap: 8px;
  }

  .exact-source .akiya .case-study > div:first-child { grid-column: 1 / -1; }
  .exact-source .akiya .case-study > div:first-child h3 { font-size: 15px; }
  .exact-source .akiya .case-photo { border-radius: 0; }
  .exact-source .akiya .case-arrow {
    display: block;
    padding-bottom: 37px;
    font-size: 15px;
  }

  .exact-source .members {
    background: var(--illustration-yellow);
  }

  .exact-source .member-row,
  .exact-source .member-row.reverse {
    gap: 12px;
    margin-top: 30px;
  }

  .exact-source .member-row figure {
    width: min(300px, 88%);
    min-height: 280px;
    margin: 0 auto;
    border-width: 7px;
  }

  .exact-source .member-row figure img { min-height: 280px; }

  .exact-source .member-row > div,
  .exact-source .member-row.reverse > div {
    padding: 28px 22px;
    border-radius: 48px 10px 48px 10px;
    background: var(--illustration-paper);
  }

  .exact-source .member-row h3 {
    margin: 4px 0 10px;
    font-size: 30px;
  }

  .exact-source .member-row p { font-size: 12px; line-height: 1.7; }
  .exact-source .member-row dl { margin: 18px 0; }

  .exact-source .member-row .member-sns-card,
  .exact-source .member-row.reverse .member-sns-card {
    order: 2;
    width: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 38px 38px 12px 12px;
    background: #fff;
  }

  .exact-source .member-row .member-sns-card img {
    width: 100%;
    height: 210px;
    min-height: 0;
    object-fit: cover;
  }

  .exact-source .member-sns-card figcaption {
    padding: 18px 20px 20px;
    display: grid;
    color: #0b1511;
    line-height: 1.3;
  }

  .exact-source .member-sns-card figcaption span { font-size: 10px; }
  .exact-source .member-sns-card figcaption strong { font-size: 18px; }

  .exact-source .mobile-app-download {
    border: 2px solid var(--illustration-ink);
    border-radius: 8px;
    background: transparent;
  }

  .exact-source .member-social-links a {
    border-radius: 6px;
    background: var(--illustration-ink);
  }

  .exact-source .social {
    border-radius: 0;
    background: #efb3a3;
  }

  .exact-source .social-list {
    margin-top: 28px;
    gap: 16px;
  }

  .exact-source .social-list article {
    border-radius: 38px 38px 12px 12px;
    background: #fff;
  }

  .exact-source .social-list img { height: 220px; }
  .exact-source .social-list article > div { padding: 20px 20px 24px; }
  .exact-source .social-list h3 { margin: 5px 0 14px; font-size: 21px; }
  .exact-source .social-post-link {
    min-height: 44px;
    border-radius: 4px;
    background: var(--illustration-ink);
  }

  .exact-source .map-section {
    padding-right: 14px;
    padding-left: 14px;
    background: var(--illustration-green);
  }

  .exact-source .mobile-map-legend {
    margin-top: 20px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(32, 63, 55, .4);
    color: var(--illustration-ink);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.4;
  }

  .exact-source .mobile-map-legend span { display: grid; }
  .exact-source .mobile-map-legend small { font-size: 6px; letter-spacing: 0; }
  .exact-source .mobile-map-legend b { font-size: 7px; white-space: nowrap; }

  .exact-source .map-layout { margin-top: 24px; }
  .exact-source .map-stage { min-height: 680px; }
  .exact-source .map-shape > path:first-child { fill: #d7ea86; }

  .exact-source .local-notes {
    margin-top: 42px;
    padding-top: 28px;
  }

  .exact-source .local-notes h3 { font-size: 27px; }

  .exact-source > footer {
    min-height: 96px;
    padding: 28px 18px;
    display: grid;
    background: #17634e;
    font-size: 10px;
  }
}

/* At laptop and tablet widths, the fixed leaflet would reduce essential copy
   below a readable size. Use the existing semantic composition instead, while
   preserving the exact artwork for presentation-sized desktop displays. */
@media (min-width: 721px) and (max-width: 1000px) {
  .exact-source .source-replica {
    display: none;
  }

  .exact-source .source-replica ~ section {
    display: block;
  }

  /* This block already meant to hide the invented CONTACT section between 721
     and 1000px, but `.exact-source .source-replica ~ section` above scores one
     element higher and won, so the section kept showing. That is the block the
     team circled on 2026-09-08 as "the previous one appears" when a desktop
     browser is narrowed. Matching the sibling combinator settles it. */
  .exact-source .source-replica ~ section.contact {
    display: none;
  }

  .exact-source > footer {
    display: grid;
  }

  .exact-source .chapter-nav {
    top: clamp(118px, 14vw, 150px);
    width: min(525px, 52vw);
  }

  .exact-source .chapter-nav::after {
    display: none;
  }

  .exact-source .akiya-copy h2 {
    font-size: clamp(30px, 3.4vw, 40px);
  }

  .exact-source .member-social-links {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .exact-source .member-social-links a {
    min-height: 44px;
    min-width: 132px;
    margin: 0;
    padding: 7px 14px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: var(--illustration-ink);
    color: #fff;
    font-size: 10px;
    text-decoration: none;
  }

  .exact-source .member-social-links strong { font-size: 13px; }

  .exact-source .chapter-update {
    min-height: clamp(76px, 9vw, 96px);
    margin-top: 5px;
    padding: 12px 14px;
    border: 1px solid rgba(40, 74, 55, .16);
    background: rgba(255, 255, 255, .84);
    color: #111;
  }

  .exact-source .chapter-update strong,
  .exact-source .chapter-update span {
    display: block;
  }

  .exact-source .chapter-update strong {
    font-size: 11px;
    line-height: 1.2;
  }

  .exact-source .chapter-update span {
    margin-top: 8px;
    font-size: clamp(10px, 1.15vw, 13px);
    font-weight: 700;
    line-height: 1.5;
  }

  .exact-source .hero-event {
    top: clamp(20px, 2.8vw, 34px);
    right: clamp(50px, 7vw, 84px);
    width: clamp(240px, 30vw, 340px);
    height: clamp(94px, 11vw, 128px);
    padding: 14px 64px 13px 20px;
    background: #ff1717;
  }

  /* Continue the capsule behind the overhanging poster at tablet widths. */
  .exact-source .hero-event::before {
    content: "";
    position: absolute;
    top: 0;
    right: -48px;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ff1717;
    pointer-events: none;
  }

  .exact-source .hero-event::after {
    right: -42px;
    top: -12px;
    width: clamp(82px, 10vw, 106px);
    height: clamp(112px, 13vw, 142px);
  }

  .exact-source .hero-event span {
    font-size: clamp(8px, .9vw, 10px);
    white-space: nowrap;
  }

  .exact-source .hero-event b {
    font-size: clamp(14px, 1.7vw, 19px);
  }

  .exact-source .hero-event small {
    font-size: clamp(8px, .95vw, 11px);
  }

  .exact-source .mobile-map-landmark {
    position: absolute;
    z-index: 2;
    display: block;
    height: auto;
    pointer-events: none;
    object-fit: contain;
  }

  .exact-source .mobile-map-landmark--pirari {
    left: 58%;
    top: 7%;
    width: 23%;
  }

  .exact-source .mobile-map-landmark--naumann {
    left: 40%;
    top: 66%;
    width: 30%;
  }

  .exact-source .mobile-map-route-overlay {
    position: absolute;
    z-index: 6;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
    overflow: visible;
    pointer-events: none;
  }

  .exact-source .mobile-map-nearby {
    position: absolute;
    z-index: 4;
    left: 52%;
    top: 87%;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 253, 244, .9);
    font-size: 11px;
    font-weight: 900;
    transform: translateX(-50%);
  }

  /* Keep the title artwork continuous with both the fixed desktop leaflet
     and the source-faithful mobile composition. The live-text lockup used in
     this range clipped the check mark and changed shape while resizing. */
  .exact-source .hero-lockup {
    aspect-ratio: 4267 / 870;
    padding: 0;
    overflow: visible;
    background: var(--illustration-paper) url("../assets/presentation/hero-lockup-mobile-exact.webp") center / cover no-repeat;
  }

  .exact-source .hero-lockup::before {
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 4267 / 320;
    border-radius: 0;
    background: url("../assets/presentation/hero-lockup-top-mobile-exact.webp?v=2") center / 100% 100% no-repeat;
    transform: translateY(-78.125%);
  }

  .exact-source .hero-lockup::after {
    content: "";
    position: absolute;
    left: 44.53%;
    top: 0;
    width: 55.47%;
    aspect-ratio: 2367 / 220;
    background: url("../assets/presentation/hero-lockup-check-mobile-exact.webp") center / 100% 100% no-repeat;
    transform: translateY(-68.18%);
  }

  .exact-source .hero-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .exact-source :is(
    .chapter-nav small,
    .chapter-nav a > span,
    .hero-event span,
    .hero-event small,
    .section-heading > p,
    .chapter-kicker,
    .akiya-copy dd span,
    .matching-note > span,
    .akiya-contact-card > small,
    .akiya-contact-card > span,
    .support-center figcaption,
    .akiya .case-photo small,
    .akiya .case-study figcaption,
    .member-row > div > small,
    .member-row dt,
    .resource-link small,
    .social-list small,
    .place-media > span,
    .place-copy > small,
    .place-copy dt,
    .place-copy em,
    .local-notes small
  ) {
    font-size: 11px;
  }

  .exact-source :is(
    .section-heading > span,
    .akiya-copy > p,
    .member-row p,
    .place-copy > p,
    .local-notes span
  ) {
    font-size: 15px;
  }

  .exact-source :is(
    .akiya-copy .akiya-prompt,
    .akiya-contact-card > p,
    .akiya-contact-card a,
    .akiya-contact-card em,
    .member-row dd,
    .resource-link,
    .social-list a,
    .social-post-link,
    .map-pin span,
    .place-copy dd,
    .place-verification a,
    .local-notes b
  ) {
    font-size: 13px;
  }

  .exact-source > footer {
    font-size: 12px;
  }
}

/* Mobile reading sizes. Keep the desktop artwork and tablet composition intact. */
@media (max-width: 720px) {
  .exact-source .hero-scene {
    display: grid;
    gap: 1.25rem;
    min-height: 540px;
    padding: 16px 12px 40px;
  }

  /* In-flow copy lets enlarged text push the title artwork down safely. */
  .exact-source .hero-event {
    position: relative;
    order: -1;
    justify-self: end;
    inset: auto;
    width: min(100%, 24rem);
    height: auto;
    min-height: 8rem;
    padding: 16px 94px 16px 22px;
  }
  .exact-source .hero-event::before { display: none; }
  .exact-source .hero-event::after {
    right: 8px;
    top: 12px;
    width: 72px;
    height: 102px;
  }
  .exact-source .hero-event span,
  .exact-source .hero-event small { font-size: .75rem; line-height: 1.5; }
  .exact-source .hero-event b { margin: 6px 0; font-size: 1rem; line-height: 1.5; }

  .exact-source .chapter-nav {
    position: relative;
    inset: auto;
    width: min(100%, max(16.5rem, 74%));
    gap: 10px;
  }
  .exact-source .chapter-nav__title { font-size: .875rem; line-height: 1.5; }
  .exact-source .chapter-nav small,
  .exact-source .chapter-nav a > span {
    width: fit-content;
    max-width: 100%;
    margin-left: 0;
    padding: 2px 8px;
    background: rgba(23, 63, 52, .92);
    font-size: .75rem;
    line-height: 1.5;
    white-space: normal;
    text-shadow: none;
  }
  .exact-source .chapter-nav b { font-size: 1rem; line-height: 1.5; }
  .exact-source .chapter-update strong { font-size: 1rem; line-height: 1.5; }
  .exact-source .chapter-update span { font-size: .875rem; line-height: 1.7; }

  .exact-source :is(
    .section-heading > span, .akiya-copy > p, .akiya-copy .akiya-prompt,
    .member-row p, .map-section .place-copy > p, .local-notes span,
    .event-dialog p, .source-info-dialog p
  ) { font-size: 1rem; line-height: 1.75; }

  .exact-source :is(
    .akiya-copy dd span, .matching-note b, .akiya-contact-card > p,
    .akiya-contact-card > span, .akiya-contact-card em, .member-row dd,
    .member-social-links a, .member-social-links strong, .resource-link,
    .mobile-app-store-links a, .mobile-app-store-links a strong,
    .social-post-link, .map-section .place-copy dd,
    .place-verification a, .map-section .place-nav button, .local-notes b
  ) { font-size: .875rem; line-height: 1.6; }

  .exact-source :is(
    .section-heading > p, .chapter-kicker, .matching-note > span,
    .akiya-contact-card > small, .support-center figcaption,
    .akiya .case-photo small, .akiya .case-study figcaption,
    .akiya .case-study > .case-controls > span, .member-row > div > small,
    .member-row dt, .mobile-app-identity small, .mobile-maku-showcase > p,
    .resource-link small, .confirm-note, .member-sns-card figcaption span,
    .social-list small, .mobile-map-legend, .mobile-map-legend small,
    .mobile-map-legend b, .mobile-map-nearby, .map-section .place-media > span,
    .map-section .place-copy > small, .map-section .place-copy dt,
    .map-section .place-copy em, .map-section .place-nav span, .local-notes small
  ) { font-size: .75rem; line-height: 1.5; }

  .exact-source .matching-note { flex-wrap: wrap; gap: 12px; }
  .exact-source .matching-note > span { width: auto; height: auto; min-width: 6rem; padding: 14px; }
  .exact-source .akiya-contact-card > div { align-items: center; }
  .exact-source .akiya-contact-card a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1rem;
  }
  .exact-source .akiya-contact-card > span { color: var(--illustration-ink); overflow-wrap: anywhere; }
  .exact-source .akiya .case-study > div:first-child h3 { font-size: 1.25rem; }
  .exact-source .akiya .case-photo small { max-width: calc(100% - 12px); white-space: normal; }
  .exact-source .akiya .case-study > .case-controls button { width: 44px; height: 44px; }
  .exact-source .member-row dl { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .exact-source .member-row dd { overflow-wrap: anywhere; }
  .exact-source .mobile-app-identity { grid-template-columns: 48px minmax(0, 1fr); }
  .exact-source .mobile-app-identity img { width: 48px; }
  .exact-source .mobile-app-identity small { overflow: visible; white-space: normal; }
  .exact-source .mobile-app-identity strong { font-size: 1rem; }
  .exact-source .mobile-app-store-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
  /* auto-fill keeps an empty track, so a member with one account gets the
     same button width as a member with two instead of a full-width bar. */
  .exact-source .member-social-links { grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); }
  .exact-source .resource-link { flex-wrap: wrap; gap: 8px; }
  .exact-source .resource-link small { white-space: normal; }
  .exact-source .mobile-map-legend { flex-wrap: wrap; }
  .exact-source .mobile-map-legend b { white-space: normal; }
  /* Keep the fixed details sheet above the following notes section. */
  .exact-source .map-layout { z-index: 2; }
  .exact-source .map-pin span {
    max-width: min(7rem, 27vw);
    font-size: .75rem;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .exact-source .place-verification { flex-wrap: wrap; gap: 8px; }
  .exact-source .place-verification a { display: inline-flex; align-items: center; min-height: 44px; }
  .exact-source .map-section .place-nav button { min-width: 44px; }
  .exact-source > footer { font-size: .75rem; }
  .exact-source > footer a { font-size: .875rem; }
}

/* Tablet (721–1000px) corrections found in the 2026-09-05 review:
   the spot card opened below the fold, the member portrait stretched into an
   ellipse, pin labels overlapped, and the map legend rendered unstyled. */
@media (min-width: 721px) and (max-width: 1000px) {
  .exact-source .member-row figure {
    width: min(100%, 300px);
    min-height: 0;
    margin: auto;
    aspect-ratio: 1;
    align-self: center;
  }
  .exact-source .member-row figure img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }

  .exact-source .mobile-map-legend {
    margin-top: 26px;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    border-top: 1px solid rgba(32, 63, 55, .4);
    color: var(--illustration-ink);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.4;
  }
  .exact-source .mobile-map-legend span { display: flex; align-items: baseline; gap: 12px; }
  .exact-source .mobile-map-legend small { font-size: 9px; font-weight: 700; letter-spacing: 0; }
  .exact-source .mobile-map-legend b { font-size: 10px; white-space: nowrap; }

  .exact-source .map-pin span {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    margin: 0;
    padding: 6px 10px;
    display: block;
    border: 1px solid rgba(32, 63, 55, .24);
    border-radius: 999px;
    background: rgba(255, 253, 244, .96);
    font-size: 12px;
    line-height: 1;
    transform: translateY(-50%);
  }
  .exact-source .map-pin--label-left span {
    right: calc(100% + 8px);
    left: auto;
  }
  .exact-source .map-pin[data-place="naumann"] { left: 40%; }
  .exact-source .map-pin[data-place="glamping"] { left: 64%; }

  /* Open the spot card as a fixed sheet so a tap always shows a result. */
  .exact-source .map-section .place-panel,
  .exact-source .map-section .place-panel[data-position] {
    position: fixed !important;
    z-index: 110;
    inset: auto 24px 24px auto !important;
    width: min(440px, calc(100% - 48px));
    max-height: min(78svh, 680px);
    margin: 0;
    overflow: auto;
    border-width: 6px;
    border-radius: 28px 10px 28px 10px;
    box-shadow: 0 18px 55px rgba(14, 45, 37, .32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .exact-source .map-section .place-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .exact-source .mobile-place-panel__close {
    position: absolute;
    z-index: 5;
    right: 10px;
    top: 10px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 253, 244, .94);
    cursor: pointer;
    font-size: 24px;
  }
}

@media (min-width: 721px) and (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .exact-source .map-section .place-panel { transition: none; }
}

/* The forced break after 、 in spot titles leaves one-character orphans on
   narrow screens; let the title wrap naturally there. */
@media (max-width: 720px) {
  .exact-source .place-title-break { display: none; }
}


/* Hero pilot (2026-09-05): the team's leaflet text is live HTML placed at the
   PDF coordinates. 1cqw = 10.24pt of the 1024pt-wide source page. */
.source-replica { container-type: inline-size; }
.source-hero-title,
.source-hero-update-label,
.source-hero-menu a small,
.source-hero-menu a span,
.source-hero-menu a b,
.source-event-hit small,
.source-event-hit b,
.source-event-hit em {
  position: absolute;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
.source-hero-title {
  z-index: 3;
  left: var(--x);
  top: var(--y);
  color: #fff;
  font: 900 2.539cqw/1 var(--body), sans-serif;
  letter-spacing: .012em;
  pointer-events: none;
}
.source-hero-update-label {
  z-index: 3;
  left: var(--x);
  top: var(--y);
  color: #000;
  font: 700 1.172cqw/1 var(--body), sans-serif;
  pointer-events: none;
}
.source-hero-menu a {
  left: 5.742%;
  top: var(--top);
  width: 37.549%;
  height: var(--h);
  overflow: visible;
  color: #000;
  border-radius: 0;
}
.source-hero-menu a:hover,
.source-hero-menu a:focus-visible { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Subtle hover: brighten the coloured bar slightly instead of underlining. */
.source-hero-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--bar-top);
  height: var(--bar-h);
  background: rgba(255, 255, 255, 0);
  transition: background-color .18s ease;
  pointer-events: none;
}
.source-hero-menu a:hover::before { background: rgba(255, 255, 255, .32); }
@media (prefers-reduced-motion: reduce) {
  .source-hero-menu a::before { transition: none; }
}
.source-hero-menu a small {
  left: 0.664cqw;
  top: var(--y);
  color: #fff;
  font: italic 700 1.318cqw/1 Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
}
.source-hero-menu a span {
  left: 0.664cqw;
  top: var(--y);
  color: #fff;
  font: 900 1.855cqw/1 var(--body), sans-serif;
  letter-spacing: .01em;
}
.source-hero-menu a b {
  left: 0.664cqw;
  top: var(--y);
  color: #000;
  font: 900 3.047cqw/1 var(--body), sans-serif;
  letter-spacing: .02em;
}
.source-hero-menu a b i {
  display: inline-block;
  width: 2.441cqw;
  font-style: normal;
  font-size: .8em;
  vertical-align: .04em;
}
.source-event-hit small,
.source-event-hit b,
.source-event-hit em {
  left: calc(var(--x) - 63.2cqw);
  top: calc(var(--y) - 1.4303cqw); /* button top is .3% of the page height */
  color: #fff;
  font-family: var(--body), sans-serif;
  font-style: normal;
  font-weight: 700;
  text-align: left;
  pointer-events: none;
}
.source-event-hit small { font-size: 1.172cqw; }
.source-event-hit b { font-size: 1.855cqw; }
.source-event-hit em { font-size: 1.270cqw; }

/* A1 Gothic headings are the leaflet's own glyph outlines (from the team PDF),
   inlined as SVG so the heading face matches the design exactly on every
   device without a web-font licence. Text is exposed via role="img"/aria-label. */
.a1-text {
  display: block;
  height: 1em;
  overflow: visible;
  fill: currentColor;
}
.source-hero-menu a b .a1-text,
.source-hero-menu a span .a1-text,
.source-hero-title .a1-text { height: 1em; }
@media (max-width: 1000px) {
  .exact-source .chapter-nav__title .a1-text,
  .exact-source .chapter-nav b .a1-text,
  .exact-source .chapter-nav a > span .a1-text { height: 1em; max-width: 100%; }
  .exact-source .chapter-nav b { letter-spacing: 0; }
}

/* The SNS cards now carry real posts from the 協力隊 Instagram, so the former
   placeholder button is an anchor. Keep the pill shape and let the whole card
   be the click target while only the anchor stays in the accessibility tree. */
.exact-source .social-list article { position: relative; }
.exact-source .social-post-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.exact-source .social-post-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.exact-source .social-list article:hover .social-post-link,
.exact-source .social-post-link:focus-visible {
  background: var(--illustration-coral, #ef6b58);
}
.exact-source .social-post-link:focus-visible {
  outline: 3px solid var(--illustration-ink);
  outline-offset: 3px;
}

/* Event capsule at tablet and phone widths (2026-09-07 review).
   The poster hung past the capsule's right edge, and with three lines the last
   one fell outside the pill's bottom-left curve. Seat the poster inside the
   capsule like the desktop leaflet, centre the copy vertically, and keep the
   leaflet's indent on the closing line. */
@media (min-width: 721px) and (max-width: 1000px) {
  .exact-source .hero-event {
    right: clamp(28px, 4.5vw, 64px);
    width: clamp(316px, 40vw, 430px);
    height: clamp(118px, 13.5vw, 150px);
    padding: 0 clamp(106px, 12.5vw, 134px) 0 clamp(26px, 3.2vw, 38px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .exact-source .hero-event::before { display: none; }
  .exact-source .hero-event::after {
    right: clamp(4px, .8vw, 10px);
    top: 50%;
    width: clamp(94px, 11.2vw, 120px);
    height: auto;
    aspect-ratio: 960 / 1357;
    transform: translateY(-52%) rotate(7deg);
  }
  .exact-source .hero-event small { margin-left: 2em; }
}

@media (max-width: 720px) {
  .exact-source .hero-event {
    min-height: 8.5rem;
    padding: 0 clamp(98px, 27vw, 120px) 0 clamp(24px, 7vw, 34px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .exact-source .hero-event::after {
    right: clamp(14px, 4.5vw, 24px);
    top: 50%;
    width: clamp(76px, 21vw, 92px);
    height: auto;
    aspect-ratio: 960 / 1357;
    transform: translateY(-52%) rotate(7deg);
  }
  .exact-source .hero-event small { margin-left: 2em; }
}

/* Tablet map geometry (2026-09-07 review).
   The map artwork is capped at 610px but the stage stayed full width, so every
   percentage coordinate was measured against a box up to 1065px wide: the two
   landmark illustrations grew with the window (52% of the map at 1000px against
   14% on a phone), the pins drifted right of the artwork, and the base SVG's
   route shields were never hidden, so they doubled up with the overlay's.
   Give the stage the map's own width, as the phone layout already does. */
@media (min-width: 721px) and (max-width: 1000px) {
  .exact-source .map-stage {
    width: min(610px, 100%);
    margin-inline: auto;
  }
  .exact-source .map-shape { width: 100%; }
  .exact-source .map-stage > .map-shape .map-route-shield { visibility: hidden; }

  .exact-source .mobile-map-landmark--pirari {
    left: 64%;
    top: 16%;
    width: min(21%, 120px);
  }
  .exact-source .mobile-map-landmark--naumann {
    left: 60%;
    top: 84%;
    width: min(20%, 90px);
  }
}

/* Phone map labels (2026-09-07 review).
   Each label is absolutely positioned against its 44px pin with
   right/left: calc(100% + Npx), so shrink-to-fit had no room left and the
   "Mobile reading sizes" `white-space: normal` collapsed every label to one
   character per line. Give the label a max-content basis and cap its width so
   enlarged text still wraps instead of overflowing the map. */
@media (max-width: 720px) {
  .exact-source .map-pin span {
    width: max-content;
    max-width: min(9rem, 40vw);
  }

  /* With readable label widths the 忠類 pair pushed their labels off both
     edges. The two facilities are a 3-minute walk apart, so drawing them
     closer together on this simplified guide map is also more truthful. */
  .exact-source .map-pin[data-place="naumann"] { left: 44%; }
  .exact-source .map-pin[data-place="glamping"] { left: 64%; }
}

/* Case-study controls (2026-09-07 review).
   On the desktop leaflet the ‹ 1/3 › row sits centred under the two photos.
   Below 1000px it was pinned to the top right of the block, so move it to the
   end of the grid and give the counter the leaflet's pill. */
@media (max-width: 1000px) {
  .exact-source .akiya .case-study > .case-controls {
    order: 1;
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 12px;
    gap: 12px;
  }
  .exact-source .akiya .case-study > .case-controls > span {
    min-width: 4.5em;
    min-height: 2.2em;
    padding: 0 .6em;
    align-items: center;
    border: 2px solid #111;
    border-radius: 999px;
    background: rgba(255, 253, 245, .94);
  }
}

/* Map illustrations, overlap clean-up (2026-09-07 review).
   Measured at 390px: the elephant sat on top of the 236 route badge and the
   徒歩約3分 label, and the tower crossed the ピラ・リ label. Sizes are kept;
   only the anchors move, the elephant into the clear corner below the 忠類
   labels and the tower down under its own label with its base over the map. */
@media (max-width: 1000px) {
  .exact-source .mobile-map-landmark--pirari {
    left: 58%;
    top: 19%;
  }
  .exact-source .mobile-map-landmark--naumann {
    left: 78%;
    top: 85%;
  }
}

/* Ribbon hover, unified on colour (2026-09-07).
   The phone and tablet chapter ribbons slid sideways on hover
   (`.chapter-nav a:hover { transform: translateX(...) }`), while the desktop
   hero brightens its colour bar. Emphasis here is colour only: elements keep
   their size and position, so the ribbons now brighten by the same amount and
   nothing moves under the finger on a touch screen. */
@media (max-width: 1000px) {
  .exact-source .chapter-nav a:hover,
  .exact-source .chapter-nav a:focus-visible {
    transform: none;
  }
  .exact-source .chapter-nav b {
    transition: background-image .18s ease;
  }
  .exact-source .chapter-nav a:hover b,
  .exact-source .chapter-nav a:focus-visible b {
    background-image: linear-gradient(rgba(255, 255, 255, .32), rgba(255, 255, 255, .32));
  }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .exact-source .chapter-nav b { transition: none; }
}

/* Ribbon width (2026-09-07 review).
   The ribbons took their width from the chapter nav container, so more than
   half of each bar was empty at 700–1150px (57% at 700px against 2.4% in the
   leaflet). Size them to their content instead, with a shared minimum equal to
   the longest title (特定の任務に着く隊員！ = 11.006em of the A1 Gothic sprite)
   plus the ribbon padding, so all four stay the same length as on the leaflet
   and the longest one nearly fills its bar. */
@media (max-width: 1000px) {
  .exact-source .chapter-nav b {
    width: max-content;
    max-width: 100%;
    min-width: calc(11.05em + var(--ribbon-pad, 56px));
  }
}

@media (max-width: 720px) {
  .exact-source .chapter-nav b { --ribbon-pad: 49px; }
}

/* Event dialog close button (2026-09-07 review).
   The button drew its ✕ with two pseudo-elements placed at grid cell 1/1 while
   still carrying a font-size:0 "×" text node. That text became a second,
   auto-placed grid row, so the stretched rows split the button in half and the
   cross was centred in the top half only. The text is now a visually hidden
   span (absolutely positioned, so not a grid item); `place-content: center`
   keeps the cross centred even if a stray item appears again. */
.exact-source .event-dialog > button {
  place-content: center;
}

/* Event poster on phones (2026-09-07): the poster sat too close to the
   capsule's right edge. Move it inward and widen the capsule's right padding
   by the same amount so the copy keeps its clearance. */
@media (max-width: 720px) {
  .exact-source .hero-event {
    padding-right: clamp(112px, 31vw, 140px);
  }
  .exact-source .hero-event::after {
    right: clamp(24px, 7.5vw, 38px);
  }
}

/* Map collisions seen on a real phone recording (2026-09-07, 402px):
   the 十勝ヒルズ pin covered 24px of the 本町・札内 place name, and the
   ホテルアルコ label sat on the 236 route badge. Move the pin west (it is west
   of the town centre anyway) and slide the badge up the road. */
@media (max-width: 720px) {
  .exact-source .map-pin[data-place="hills"] { left: 33%; }
}

/* Tablet: the 徒歩約3分 badge covered the 忠類 place name almost entirely
   (31×22px overlap at 900px). The SVG letterboxes differently here than on a
   phone, so drop the badge below the name. */
@media (min-width: 721px) and (max-width: 1000px) {
  .exact-source .mobile-map-nearby { top: 91%; }
}

/* One coordinate system for the map (2026-09-07).
   The pins are positioned as a percentage of `.map-stage`, but the drawing was
   letterboxed inside it (79px of dead space top and bottom on a phone, and a
   horizontal offset on tablet), so the same percentage pointed at a different
   place on the artwork per breakpoint. That is why 十勝川流域 rendered above the
   town shape entirely and every earlier placement fix had to be done twice.
   Giving the stage the drawing's own aspect ratio removes the dead space and
   makes stage % identical to viewBox %, so one set of numbers is correct
   everywhere and each pin can be put on the feature it names. */
@media (max-width: 1000px) {
  .exact-source .map-stage {
    min-height: 0;
    height: auto;
    aspect-ratio: 620 / 900;
  }
  .exact-source .map-shape { width: 100%; height: 100%; }

  .exact-source .map-pin[data-place="hills"]    { left: 32.3%; top: 14.4%; }
  .exact-source .map-pin[data-place="birch"]    { left: 34.7%; top: 25.6%; }
  .exact-source .map-pin[data-place="river"]    { left: 62.1%; top: 10.0%; }
  .exact-source .map-pin[data-place="pirari"]   { left: 64.5%; top: 23.9%; }
  .exact-source .map-pin[data-place="naumann"]  { left: 42.7%; top: 84.4%; }
  .exact-source .map-pin[data-place="glamping"] { left: 62.1%; top: 84.4%; }

  .exact-source .mobile-map-nearby { left: 52%; top: 94%; }
  .exact-source .mobile-map-landmark--pirari  { left: 60%; top: 30%; }
  .exact-source .mobile-map-landmark--naumann { left: 74%; top: 88%; }
}

/* Spot cards, 2026-09-08 revision requested by the team.
   Location details are dropped in favour of a practical note ("一歩進んだ情報"),
   so the card now ends with an optional highlighted tip and its photo. */
.place-note {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.place-note[hidden] { display: none; }
.place-note p {
  margin: 0;
  color: var(--exact-ink);
  font-weight: 900;
  line-height: 1.55;
}
.place-note figure {
  margin: 0;
  /* Enlarged on the team's 2026-09-08 sheet ("make the photo about this big"):
     roughly a third of the card instead of a quarter, so the hare and the
     elephant read at a glance. The text column narrows to make room. */
  width: clamp(96px, 11vw, 176px);
  aspect-ratio: 1;
  overflow: hidden;
  background: #e6e0cc;
}
.place-note[data-shape="circle"] figure { border-radius: 50%; }
.place-note figure[hidden] { display: none; }
.place-note figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Four photos: the main image spans the three stacked thumbnails. */
.place-gallery-grid[data-count="4"] .place-gallery-main {
  grid-row: span 3;
  min-height: calc(var(--gallery-thumb) * 3 + var(--gallery-gap) * 2);
}

/* Highlighter on the three vacant-house lines, as marked up on the team's
   2026-09-08 sheet. Live text below 1000px; on the desktop leaflet the lines
   are part of the artwork, so a multiply-blended bar sits over them instead.
   `width: fit-content` is what keeps the mark the width of the words: the <b>
   is a block, so without it the bar ran the whole column and read as a stray
   rule below the line (the team's 09-08 note, "long underbar"). */
.exact-source .akiya-copy dd b {
  width: fit-content;
  max-width: 100%;
  background-image: linear-gradient(transparent 45%, #ffe33f 45%);
  background-repeat: no-repeat;
}

.source-akiya-marks {
  /* No z-index: a stacking context here would isolate the bars from the
     artwork and `multiply` would paint solid yellow over the lettering. */
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.source-akiya-marks span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 1.5cqw;
  background: #ffe33f;
  mix-blend-mode: multiply;
}

/* Gallery tiles open a lightbox instead of rearranging themselves under the
   cursor (2026-09-08). The main tile is a button now, so it needs the same
   reset the thumbnails already have. */
.place-panel .place-gallery-main {
  padding: 0;
  border: 0;
  cursor: pointer;
}
.place-panel .place-gallery-main img { transition: opacity .2s ease; }
.place-panel .place-gallery-main:hover img,
.place-panel .place-gallery-main:focus-visible img,
.place-panel .place-gallery-thumb:hover img,
.place-panel .place-gallery-thumb:focus-visible img {
  opacity: 1;
  filter: brightness(1.06);
}
.place-panel .place-gallery-main:focus-visible,
.place-panel .place-gallery-thumb:focus-visible {
  outline: 3px solid var(--exact-coral);
  outline-offset: -3px;
}

.photo-dialog {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.photo-dialog::backdrop {
  background: rgba(10, 37, 31, .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.photo-dialog img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 32px);
  object-fit: contain;
  background: var(--exact-paper);
}
.photo-dialog--fit { width: fit-content; }
.photo-dialog--fit img { width: auto; max-width: calc(100vw - 32px); }
.photo-dialog > button {
  position: absolute;
  z-index: 3;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-content: center;
  border: 1px solid;
  border-radius: 50%;
  background: var(--exact-paper);
  color: var(--exact-ink);
  cursor: pointer;
}
.photo-dialog > button::before,
.photo-dialog > button::after {
  content: "";
  grid-area: 1 / 1;
  width: 19px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.photo-dialog > button::after { transform: rotate(-45deg); }
.photo-dialog > button:focus-visible {
  outline: 3px solid var(--exact-ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .place-panel .place-gallery-main img,
  .place-panel .place-gallery-thumb img { transition: none; }
}

/* Desktop map illustrations, 2026-09-08. The seventh pin landed on the elephant
   (its label overlapped by 128px) and the tower crossed its own ピラ・リ label;
   this map keeps its own landmark anchors, which the 09-07 phone pass did not
   touch. Move both clear. */
.source-map-landmark--pirari { top: 17%; }
.source-map-landmark--naumann {
  left: 78%;
  top: 68%;
  width: 15%;
}

/* 2026-09-25: after the 236 badge moved up the road, the east bulge above
   忠類 is clear, so the elephant goes back onto the land there, as in the
   team's leaflet, standing over its own town and a size up (15% -> 17%, the
   largest that clears every pin, label and badge by 6px). */
.source-map-landmark--naumann {
  left: 66%;
  top: 77%;
  width: 17%;
}

/* Two photos below the copy, larger than a gallery thumbnail. The team asked on
   2026-09-08 to bring these "down where they stand out"; the wider left cell
   carries the one they singled out. Same column rhythm and gap as the gallery
   above, so the card reads as one grid rather than two. */
.place-feature {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-auto-rows: clamp(110px, 12vw, 175px);
  gap: clamp(2px, .25vw, 4px);
}
.place-feature[hidden] { display: none; }
.place-feature__item {
  position: relative;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #e6e0cc;
  cursor: pointer;
}
.place-feature__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .2s ease;
}
.place-feature__item:hover img,
.place-feature__item:focus-visible img { filter: brightness(1.06); }
.place-feature__item:focus-visible { outline: 3px solid var(--exact-coral, #e2624a); outline-offset: -3px; }

/* The team's 2026-09-08 sheet gives every pin its full name, and breaks the
   three long ones over two lines exactly as written here. `white-space: nowrap`
   still honours an explicit <br>, so only the leading and centring change. */
.source-map-pin span:has(br),
.map-pin span:has(br) {
  line-height: 1.28;
  text-align: center;
}

/* Sheet 4 of the team's 2026-09-08 revision pastes the night glamping frame over
   the card at exactly 4:3 — 204.2 x 153.1pt, its full uncropped shape — which is
   what "トリミングこれくらいでないと、解らない！" is asking for. A viewport clamp
   cannot hold that shape, because the card's width does not track the viewport's.
   So the thumbnail row is derived from the card's own width instead: two rows that
   add up to a 4:3 lead cell. `.place-media` already had `position: relative`, so
   making it the query container changes nothing for the badge inside it. The same
   change shortens the 十勝ヒルズ gallery, which the sheet marks 「こっちは小さくても良い」. */
.place-panel .place-media { container-type: inline-size; }
.place-panel .place-gallery-grid {
  --gallery-thumb: calc(22.5cqw - 0.725 * var(--gallery-gap));
}

/* The field-note photo opens the lightbox like every other photo on the card.
   The button fills the figure, so the circle mask and the square note both keep
   their exact shape; only the focus ring has to follow the figure's radius. */
.place-note__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: inherit;
}
.place-note__zoom img { transition: opacity .2s ease; }
.place-note__zoom:hover img,
.place-note__zoom:focus-visible img { filter: brightness(1.06); }
.place-note__zoom:focus-visible {
  outline: 3px solid var(--exact-coral, #e2624a);
  outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
  .place-note__zoom img { transition: none; }
}

/* The team's leaflet carries an 「イメージ写真（仮）」 badge at the foot of each
   case photo; the artwork's own is masked by `.source-case-cleanup`, so the live
   badge takes that slot. It now names the building, which is what the team asked
   for on 2026-09-09 while the per-property write-ups are still outstanding:
   「コメントもらってないので、画像名入れておいてください」. */
.source-case-note {
  position: absolute;
  top: 28.936%;
  z-index: 3;
  padding: .12cqw .55cqw .18cqw;
  border-radius: 999px;
  background: rgba(32, 63, 55, .88);
  color: #fffdf4;
  font-family: var(--body);
  font-size: .74cqw;
  font-weight: 900;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
.source-case-note--before { left: 45.9%; }
.source-case-note--after { left: 73.1%; }

/* Sticky menu bar, from the team's 2026-09-10 printout. Their design repeats a
   grey bar between chapters; they asked for it at the top of the page, following
   the scroll. A raster cannot stick, so this is live markup. Shown from 721px up:
   the phone keeps its own header, which the team already accepted. Hover lowers
   opacity to 70%, with no current-section underline or colour change.
   The bar is 48px, and the leaflet anchors carry the same
   scroll margin so a jump lands just under it. */
.source-topbar { display: none; }
@media (min-width: 721px) {
  .exact-source .source-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 44px);
    height: 48px;
    padding: 0 clamp(16px, 3vw, 48px);
    background: #d6d6d1;
    color: var(--exact-ink);
    font: 800 13px/1 var(--body), sans-serif;
  }
  .exact-source .source-topbar__brand {
    margin-right: auto;
    font-size: 14px;
    letter-spacing: .02em;
  }
  .exact-source .source-topbar a,
  .exact-source .source-topbar button {
    padding: 8px 2px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s ease;
  }
  @media (hover: hover) {
    .exact-source .source-topbar :is(a, button):hover { opacity: .7; }
  }
  .exact-source .source-topbar a:focus-visible,
  .exact-source .source-topbar button:focus-visible {
    outline: 2px solid var(--exact-ink);
    outline-offset: 2px;
  }
  .exact-source .source-anchor,
  .exact-source #top,
  .exact-source #main { scroll-margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .exact-source .source-topbar a,
  .exact-source .source-topbar button { transition: none; }
}

/* about-us footer, from the team's 2026-09-10 printout. One <footer> serves
   every width. On the desktop leaflet the artwork's old bottom band (the
   previous クレジットスペース line, from 96.75% down = 3.25% of the height,
   15.51% of the width) is clipped away and the footer is pulled up over that
   space, so it can be as tall as its four lines need instead of being clamped
   to the band. Green is the band's own colour, so the join is invisible. */
@media (min-width: 1001px) {
  .exact-source .source-replica {
    clip-path: inset(0 0 3.25% 0);
    margin-bottom: -15.51%;
  }
}
.exact-source > footer.site-footer {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 0;
  margin: 0;
  /* The content column is centred by the padding, not by each child, so the
     heading and the body share one left edge as on the printout. */
  padding: clamp(28px, 4vw, 64px) max(var(--pad, 24px), calc((100% - var(--max, 1320px)) / 2)) clamp(22px, 3vw, 44px);
  background: #106340;
  color: #fffdf4;
  font-family: var(--body), sans-serif;
  scroll-margin-top: 48px;
}
.exact-source > footer.site-footer small { display: block; font-size: clamp(12px, 1vw, 15px); font-weight: 800; letter-spacing: .04em; }
.exact-source > footer.site-footer p { margin: 10px 0 0; max-width: 46em; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.8; }
.exact-source > footer.site-footer .site-footer__contact { margin-top: clamp(20px, 2.2vw, 36px); max-width: none; text-align: center; }
.exact-source > footer.site-footer .site-footer__credit { margin-top: clamp(24px, 2.6vw, 44px); max-width: none; text-align: center; font-size: clamp(11px, .85vw, 13px); opacity: .92; }
.exact-source > footer.site-footer a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.exact-source > footer.site-footer a:hover { color: #ffe33f; }

/* Leaflet column, from the designer's 2026-09-11 note: at full window width the
   page ran so tall that the hero title was cut by the first fold and a menu
   jump landed with its section cut top and bottom. The leaflet scales with its
   container, so capping the column brings more of each chapter into one screen.
   1024px is set by the hero: the title 幕別町に協力隊！ ends at 71.3% of the
   column width, so 0.713 × 1024 + the 48px bar ends at 778px and clears an
   ~800px laptop viewport (1060 left it 4px short). 1024 is also the leaflet's
   native width (the source page is 1024pt), so on the column 1pt of the
   design is 1px and the artwork renders 1:1.
   The cap sits on <main>, the replica's parent, so the replica's negative
   bottom margin (a % of its containing block) keeps matching the clipped band.
   The bar and the footer stay full-bleed and align their content to the
   column. Side margins carry --exact-margin. */
@media (min-width: 1001px) {
  /* Side margins: a light grey, asked for by the team on 2026-09-16, so the
     leaflet column reads as a sheet laid on a surface rather than bleeding
     into the browser. Warm rather than neutral to sit with --exact-paper. */
  .exact-source { background: var(--exact-margin); }
  .exact-source > main {
    max-width: 1024px;
    margin-inline: auto;
  }
  .exact-source .source-topbar,
  .exact-source > footer.site-footer {
    padding-left: max(var(--pad, 24px), calc((100% - 1024px) / 2));
    padding-right: max(var(--pad, 24px), calc((100% - 1024px) / 2));
  }
}

/* Poster detail: quiet full-screen viewer above the existing event dialog. */
.exact-source .event-poster-link { position:relative; display:block; align-self:center; cursor:zoom-in; color:#fff; }
.event-poster-link img { display:block; width:100%; height:auto; }
.event-poster-link span { position:absolute; right:12px; bottom:12px; padding:8px 12px; background:#173c33; font-size:12px; line-height:1.4; }
.event-poster-link:focus-visible { outline:3px solid #173c33; outline-offset:-3px; }
.event-dialog.empty .event-poster-link { display:none; }
.poster-viewer { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100dvh; max-height:none; padding:0; border:0; background:#202724; color:#fff; overflow:hidden; }
.poster-viewer[open] { display:flex; flex-direction:column; }
.poster-viewer::backdrop { background:#202724; }
.poster-viewer__toolbar { display:flex; flex-shrink:0; gap:8px; align-items:center; padding:12px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); }
.poster-viewer__toolbar button { min-width:44px; min-height:44px; padding:8px 14px; border:1px solid #748079; border-radius:4px; background:transparent; color:inherit; font:inherit; font-size:14px; cursor:pointer; }
.poster-viewer__toolbar button:last-child { margin-left:auto; }
.poster-viewer__toolbar button:disabled { opacity:.35; cursor:default; }
.poster-viewer :focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.poster-viewer__help { margin:0; padding:0 16px 10px; font-size:12px; color:#cbd3cd; }
.poster-viewer__stage { position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; cursor:zoom-in; user-select:none; }
.poster-viewer__stage.is-zoomed { cursor:grab; }
.poster-viewer__stage.is-dragging { cursor:grabbing; }
.poster-viewer__stage img { position:absolute; left:0; top:0; max-width:none; max-height:none; transform-origin:0 0; pointer-events:none; }

/* Team annotated map, 2026-09-11: blue pins specify new red-dot positions.
   Anchor the dot itself, independently of label width. */
.source-map-pin { transform:translate(-50%, -50%); }
.source-map-pin span { position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); white-space:nowrap; }
.source-map-pin--left span { left:auto; right:calc(100% + 8px); }
.source-map-pin[data-place="cafe"] span { right:auto; left:calc(100% + 8px); }
@media (max-width:1000px) {
  .exact-source .map-pin[data-place="hills"] { left:29.4%; top:21.5%; }
  .exact-source .map-pin[data-place="birch"] { left:30.6%; top:16.8%; }
  .exact-source .map-pin[data-place="river"] { left:50.6%; top:4.2%; }
  .exact-source .map-pin[data-place="pirari"] { left:57.7%; top:13.2%; }
  .exact-source .map-pin[data-place="naumann"] { left:45.5%; top:89.1%; }
  .exact-source .map-pin[data-place="glamping"] { left:48.7%; top:85.5%; }
  .exact-source .map-pin[data-place="cafe"] { left:52.4%; top:94%; }
  .exact-source .map-pin[data-place="cafe"] span { right:auto; left:calc(100% + 8px); white-space:normal; width:100px; line-height:1.35; }
  .exact-source .map-pin[data-place="glamping"] span { white-space:normal; width:100px; line-height:1.35; }
}
@media (max-width:720px) {
  /* Close-by destinations remain distinct at phone scale; tap areas stay 44px. */
  .exact-source .map-pin i { width:24px; height:24px; border-width:3px; }
  .exact-source .map-pin[data-place="cafe"] span { width:132px; }
  .exact-source .mobile-map-nearby { left:36%; top:96.5%; }
}
/* Readable update notice inside the capped desktop leaflet. */
@media (min-width:1001px) {
  .source-hero-update-label { font-size:1.758cqw; }
  .source-update-copy { top:45cqw; font-size:1.367cqw; line-height:1.45; }
}
/* One persistent navigation on phone/tablet, with all five actions visible. */
@media (max-width:1000px) {
  .exact-source .site-header { display:none !important; }
  .exact-source .source-topbar {
    position:sticky;
    top:0;
    z-index:90;
    display:grid;
    grid-template-columns:repeat(5, auto);
    align-items:center;
    justify-content:space-between;
    gap:0 6px;
    height:76px;
    padding:0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    background:#d6d6d1;
    color:var(--exact-ink);
    font:800 11px/1 var(--body), sans-serif;
  }
  .exact-source .source-topbar a,
  .exact-source .source-topbar button {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
  }
  .exact-source .source-topbar .source-topbar__brand {
    grid-column:1 / -1;
    justify-content:flex-start;
    min-height:32px;
    font-size:13px;
  }
  .exact-source .source-topbar :is(a, button):focus-visible { outline:2px solid var(--exact-ink); outline-offset:2px; }
  .exact-source .section,
  .exact-source #main,
  .exact-source > footer.site-footer { scroll-margin-top:84px; }
}
/* Keep consultation copy and its illustration together in the semantic layout. */
.akiya-details, .akiya-side-art { display:contents; }
.akiya-side-art__bubble { display:none; }
@media (max-width:1000px) {
  .exact-source .akiya-details {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    column-gap:10px;
    align-items:start;
    margin:12px 0 20px;
  }
  .exact-source .akiya-details > dl { grid-column:1; margin:0; }
  .exact-source .akiya-details .matching-note { grid-column:1; margin-top:14px; }
  .exact-source .akiya-side-art {
    grid-column:2;
    grid-row:1 / 3;
    display:flex;
    flex-direction:column;
    align-items:center;
    align-self:center;
    gap:12px;
    min-width:0;
  }
  .exact-source .akiya-side-art__bubble {
    display:grid;
    place-content:center;
    width:100px;
    min-height:70px;
    padding:10px;
    border-radius:50%;
    background:var(--illustration-coral);
    color:#fffdf4;
    font-size:12px;
    font-weight:900;
    line-height:1.4;
    text-align:center;
    transform:rotate(-6deg);
  }
  .exact-source .akiya-side-art .akiya-pig-house { width:100%; max-width:260px; margin:0; }
  .exact-source .akiya-details dd b { font-size:clamp(18px, 4.9vw, 26px); }
  .exact-source .akiya-details dd span { overflow-wrap:anywhere; }
}
@media (max-width:1000px) {
  .exact-source .akiya-details { grid-template-columns:minmax(0, 1fr) 36%; column-gap:8px; container-type:inline-size; }
  .exact-source .akiya-details dd b {
    display:inline-block;
    max-width:none;
    font-size:clamp(16px, 5.4cqw, 25px);
    white-space:nowrap;
    text-wrap:nowrap;
  }
  .exact-source .akiya-side-art .akiya-pig-house { width:100%; max-width:180px; }
  .exact-source .akiya-side-art__bubble { width:100%; max-width:100px; min-height:56px; padding:8px 4px; font-size:10px; }
}

@media (max-width:1000px) {
  .exact-source .akiya-side-art { align-self:end; padding-bottom:8px; }
}

@media (max-width:720px) {
  .exact-source .akiya-side-art { transform:translate(-12px, -34px); }
  .exact-source .akiya-side-art .akiya-pig-house { width:114%; max-width:205px; }
}
/* Compact phone event capsule, with poster and copy kept inside the pill. */
@media (max-width:720px) {
  .exact-source .hero-event {
    width:min(100%, 300px);
    min-height:112px;
    padding:10px 100px 10px 22px;
  }
  .exact-source .hero-event::after { width:clamp(72.2px, 19.95vw, 87.4px); right:12px; top:calc(50% + 4px); }
  .exact-source .hero-event span,
  .exact-source .hero-event small { font-size:11px; line-height:1.4; }
  .exact-source .hero-event b { font-size:14px; line-height:1.4; margin:5px 0; }
}
/* Chapter 4 films: a separate reading beat after the map. */
.exact-source .source-replica ~ section.chapter-videos {
  display:block;
  padding:88px 6.3% 72px;
  background:#96cb7d;
  color:var(--exact-ink);
  font-family:var(--body), sans-serif;
}
.chapter-videos h2 { margin:0 0 28px; font-size:clamp(24px, 3vw, 32px); font-weight:900; line-height:1.4; letter-spacing:.02em; }
.chapter-videos__grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; }
.chapter-video { display:block; min-width:0; color:inherit; text-decoration:none; }
.chapter-video__thumbnail { position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; border:4px solid var(--exact-ink); border-radius:20px; background:var(--exact-ink); }
.chapter-video__thumbnail img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.42); }
.chapter-video__play { position:absolute; inset:0; margin:auto; width:56px; height:56px; display:grid; place-items:center; padding-left:3px; border:2px solid #fffdf4; border-radius:50%; background:#173f34; color:#fffdf4; font-size:23px; }
.chapter-video h3 { margin:14px 0 0; font-size:18px; line-height:1.5; font-weight:800; }
.chapter-video:focus-visible { outline:3px solid var(--exact-ink); outline-offset:6px; border-radius:20px; }
@media (hover:hover) { .chapter-video:hover .chapter-video__play { background:#fffdf4; color:var(--exact-ink); } }
.video-dialog { position:fixed; inset:0; margin:auto; width:min(1120px, calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 24px); padding:16px; border:0; border-radius:12px; background:#17231d; color:#fffdf4; overflow:auto; }
.video-dialog::backdrop { background:rgba(8,24,16,.88); }
.video-dialog__bar { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.video-dialog__bar h2 { margin:0; font:800 16px/1.5 var(--body), sans-serif; }
.video-dialog__bar button { margin-left:auto; flex:none; min-height:44px; padding:8px 14px; border:1px solid #9da99f; border-radius:6px; background:transparent; color:inherit; font:700 14px/1.4 var(--body), sans-serif; cursor:pointer; }
.video-dialog__player { width:100%; aspect-ratio:16 / 9; max-height:calc(100dvh - 160px); background:#000; }
.video-dialog__player iframe { display:block; width:100%; height:100%; border:0; }
.video-dialog__external { display:inline-block; padding:12px 0 0; color:inherit; font:14px/1.5 var(--body), sans-serif; text-underline-offset:3px; }
.video-dialog :focus-visible { outline:2px solid #fffdf4; outline-offset:3px; }
@media (max-width:1000px) {
  .exact-source .source-replica ~ section.chapter-videos { background:var(--illustration-green); padding:96px 24px 56px; }
}
@media (max-width:720px) {
  .chapter-videos__grid { grid-template-columns:1fr; gap:28px; }
  .chapter-videos h2 { margin-bottom:24px; font-size:24px; }
  .chapter-video h3 { font-size:17px; }
  .video-dialog { width:100%; height:100dvh; max-height:none; padding:16px; border-radius:0; }
  .video-dialog[open] { display:flex; flex-direction:column; justify-content:center; }
  .video-dialog__bar { flex:none; }
  .video-dialog__bar h2 { font-size:14px; }
  .video-dialog__player { flex:none; }
}
@media (min-width:1001px) {
  /* Remove only the old empty tail below the map before the new film section.
     The clip used to sit on .source-replica, but clip-path applies to the whole
     subtree, so it also sliced the floating spot card — the cut the team
     reported on 2026-09-16. Only two things actually paint in the tail: the
     artwork bitmap and the map band's own green. Each is clipped on its own, at
     the same line, so the card (a sibling of the band, outside both) survives.
     6.5% of the replica is 3.25% of it again, which is 12.264% of the band. */
  .exact-source .source-replica {
    clip-path:none;
    margin-bottom:-31.02%;
    /* The clip used to hide this white too. The negative margin pulls the film
       section up under the replica's last 6.5%, and the artwork is opaque
       everywhere above the tail, so the replica needs no fill of its own. */
    background:transparent;
  }
  .exact-source .source-replica > picture { clip-path:inset(0 0 6.5% 0); }
  /* 12.264% would land the band's edge on the artwork's, and two anti-aliased
     edges on the same fractional pixel left a visible hairline. 12.15% runs the
     band ~1.5px past the join instead; it is the same green as the film section
     underneath, so the overlap cannot be seen and the artwork edge is covered. */
  .exact-source .source-map-redesign { clip-path:inset(0 0 12.15% 0); }
  .chapter-videos .local-notes { display:none; }
}
@media (max-width:1000px) {
  .exact-source .map-section { padding-bottom:0; }
  .chapter-videos .local-notes { margin-top:48px; }
}
/* A single small greeting on hover; only the poster moves. */
@keyframes leaflet-poster-greeting {
  0%, 100% { transform:rotate(8.507deg) scale(1.001); }
  50% { transform:rotate(12.507deg) scale(1.001); }
}
@keyframes responsive-poster-greeting {
  0%, 100% { transform:translateY(-52%) rotate(7deg); }
  50% { transform:translateY(-52%) rotate(11deg); }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .source-replica:has(.source-event-hit:hover) .source-event-poster {
    animation:leaflet-poster-greeting 450ms ease-in-out 1;
  }
  .exact-source .hero-event:hover::after {
    animation:responsive-poster-greeting 450ms ease-in-out 1;
  }
}

/* Restore the sky/capsule beneath the poster already printed in the leaflet. */
.source-event-backdrop {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  z-index:1;
  pointer-events:none;
}

/* Phone/tablet consultation copy breaks only between whole phrases, so a
   narrow column never leaves one kana (る, い！) alone on the next line.
   inline-block still wraps inside a phrase if it is wider than the column. */
.exact-source .akiya-copy .phrase {
  display:inline-block;
  font:inherit;
  line-height:inherit;
}
/* The sticky phone/tablet bar is 76px tall; stopping exactly under it keeps
   the previous section from peeking through an 8px strip. */
@media (max-width:1000px) {
  .exact-source .section,
  .exact-source #main,
  .exact-source > footer.site-footer { scroll-margin-top:76px; }
}

/* Team map artwork, 2026-09-26 (map260924.ai from the team).
   The drawing replaces the hand-built SVG map on every layout. It was exported
   into the same 620:900 frame the canvas and the phone stage already use, with
   the team's orange pins taken out, so the pins are the live buttons laid exactly
   where the team drew them (their --x/--y in the HTML were measured from the .ai).
   The artwork carries its own place names; phones get a copy without them
   (they would be ~8px) and keep the readable label chips instead.
   The unlabeled pin beside 札内駅 in the team file is left out until the team
   says which place it is. */
.team-map-art,
.team-map-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin) {
  --pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 21.33 27.51'%3E%3Cpath d='M19.33 9.66C19.33 15 9.66 25.51 9.66 25.51S0 15 0 9.66a9.66 9.66 0 0 1 19.33 0Z' fill='%23eb6100' stroke='%23fff' stroke-width='1.4'/%3E%3Ccircle cx='9.66' cy='9.66' r='4.1' fill='%23fff'/%3E%3C/svg%3E");
  --pin-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 21.33 27.51'%3E%3Cpath d='M19.33 9.66C19.33 15 9.66 25.51 9.66 25.51S0 15 0 9.66a9.66 9.66 0 0 1 19.33 0Z' fill='%23173f34' stroke='%23fff' stroke-width='1.4'/%3E%3Ccircle cx='9.66' cy='9.66' r='4.1' fill='%23f3c84d'/%3E%3C/svg%3E");
  left: var(--x);
  top: var(--y);
  z-index: 5;
  width: var(--w, 3.4%);
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 21.33 / 27.51;
  display: block;
  padding: 0;
  transform: translate(-50%, -50%);
}
.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
}
.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin) i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--pin) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(23, 63, 52, .28));
  transform: none;
  transition: none;
}
.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin) i::after { display: none; }
.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin):is(:hover, :focus-visible, .active) i {
  background-image: var(--pin-on);
  box-shadow: none;
  transform: none;
}
.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin)[data-place="glamping"] { --w: 3.9%; }
.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin)[data-place="naumann"]  { --w: 3.9%; }
.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin)[data-place="cafe"]     { --w: 3.9%; }

/* The drawn place names stand in for the chips on wider layouts. */
.exact-source :is(.source-map-redesign__canvas, .map-stage) > :is(.source-map-pin, .map-pin) span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 720px) {
  /* Pins stay tappable at phone scale; the art itself has no names here. */
  .exact-source .map-stage > .map-pin { width: max(var(--w, 3.4%), 17px); }
  .exact-source .map-stage > .map-pin span {
    left: calc(100% + 5px);
    right: auto;
    top: 50%;
    width: auto;
    height: auto;
    padding: 4px 8px;
    overflow: visible;
    clip: auto;
    border: 1px solid rgba(32, 63, 55, .24);
    border-radius: 999px;
    background: rgba(255, 253, 244, .96);
    color: var(--exact-ink);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
    transform: translateY(-50%);
  }
  .exact-source .map-stage > .map-pin--label-left span { left: auto; right: calc(100% + 5px); }
  .exact-source .map-stage > .map-pin:is(:hover, :focus-visible, .active) span { background: #f3c84d; }
  /* The three 忠類 pins sit within ~16px of each other: hotel label up-left,
     museum label down-left, cafe label to the right. */
  .exact-source .map-stage > .map-pin[data-place="glamping"] span { left: auto; right: calc(100% + 5px); transform: translateY(-100%); }
  .exact-source .map-stage > .map-pin[data-place="naumann"] span { left: auto; right: calc(100% + 5px); transform: translateY(-5%); }
  .exact-source .map-stage > .map-pin[data-place="cafe"] span { left: calc(100% + 5px); right: auto; width: auto; white-space: nowrap; }
  /* ~18px apart, so 44px tap areas would swallow each other's pins;
     the label chips (part of each button) carry the rest of the target. */
  .exact-source .map-stage > .map-pin:is([data-place="glamping"], [data-place="naumann"], [data-place="cafe"])::before { width: 30px; height: 30px; }
}

/* Chapter 4 spot photos, 2026-09-26 (team leaflet IMG_3591): the map steps
   down to the middle and two photo columns flank it, left = the three
   shared-ticket facilities and 十勝ヒルズ, right = the three lookout spots and
   ととろーど. Photos of places that have a pin are buttons that open that pin's
   card; the orange dot before their name is the same orange as the pins. */
.spot-card { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--exact-ink); font: inherit; text-align: left; }
button.spot-card { cursor: pointer; }
.spot-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: rgba(23, 63, 52, .12); }
.spot-card > span:last-child, .spot-card figcaption { font-weight: 900; line-height: 1.35; }
button.spot-card > span:last-child::before { content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .38em; border-radius: 50%; background: #eb6100; vertical-align: .06em; }
@media (hover: hover) { button.spot-card:hover > span:last-child { color: #c24f00; } }
button.spot-card:focus-visible { outline: 3px solid var(--exact-ink); outline-offset: 4px; border-radius: 8px; }
.spot-card__collage, .spot-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.spot-card__collage img, .spot-card__pair img { aspect-ratio: 4 / 3; border-radius: 3px; }
.spot-card__frame { position: relative; display: block; }
.spot-card__frame img.spot-card__tower { position: absolute; right: -2%; bottom: -4%; width: 34%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: none; filter: drop-shadow(0 2px 3px rgba(23, 63, 52, .25)); }
.spot-guide__lead { margin: 0; font-weight: 800; line-height: 1.6; }

@media (min-width: 1001px) {
  .source-map-redesign__stage { left: 4%; width: 92%; }
  .source-map-redesign__canvas { width: 60%; }
  .spot-guides--mobile { display: none; }
  .spot-guides--desktop { position: absolute; inset: 5.4% 0 auto; pointer-events: none; }
  .spot-guides--desktop .spot-guide { position: absolute; top: 0; width: 23.5%; display: grid; gap: 1.05cqw; pointer-events: auto; }
  .spot-guides--desktop .spot-guide--culture { left: 0; }
  .spot-guides--desktop .spot-guide--views { right: 0; }
  .spot-guides--desktop .spot-guide__lead { font-size: clamp(9px, 1.02cqw, 13px); }
  .spot-guides--desktop .spot-card { gap: .45cqw; font-size: clamp(9px, 1.08cqw, 14px); }
  .spot-guides--desktop .spot-guide__lead + .spot-card, .spot-guides--desktop .spot-card + .spot-guide__lead { margin-top: .3cqw; }
}
@media (max-width: 1000px) {
  .spot-guides--desktop { display: none; }
  .spot-guides--mobile { width: min(100%, 610px); margin: 40px auto 0; display: grid; gap: 40px; }
  .spot-guides--mobile .spot-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; align-items: start; }
  .spot-guides--mobile .spot-guide__lead { grid-column: 1 / -1; font-size: 15px; }
  .spot-guides--mobile .spot-card { font-size: 13px; }
  .spot-guides--mobile .spot-card--wide, .spot-guides--mobile .spot-card:has(.spot-card__collage), .spot-guides--mobile .spot-guide--culture > .spot-card:last-child { grid-column: 1 / -1; }
}

/* Two cards under the films: residents' sunsets by mail, and the MAKU app's
   ウコニアㇱ playable here. Same frame and type as the film cards above. */
.chapter-extras { margin-top: 44px; }
.extra-card { display: grid; align-content: start; justify-items: start; min-width: 0; }
.extra-card__visual { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin: 0; padding: 0; border: 4px solid var(--exact-ink); border-radius: 20px; background: var(--exact-ink); }
/* Example sunsets cross-fade in place; a tap opens the one showing. Only
   opacity changes, so nothing in the frame grows or slides. */
/* The incoming photo fades in on top while the outgoing one stays opaque
   underneath until it is covered, so the dark frame never shows through. */
.extra-card__visual--sunset img { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 50%); opacity: 0; transition: opacity 0s linear 1.2s; }
.extra-card__visual--sunset img.is-current { z-index: 1; opacity: 1; transition: opacity 1.2s ease; }
@media (prefers-reduced-motion: reduce) { .extra-card__visual--sunset img { transition: none; } }
.extra-card__visual--sunset, .extra-card__visual--game { cursor: pointer; }
.extra-card__visual--game img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The game card says what it opens, so it doesn't read as a third film:
   the films' ink-and-paper colours, but a worded pill instead of the ▶ disc. */
.extra-card__play-label { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; min-height: 48px; padding: 10px 24px; transform: translate(-50%, -50%); border: 2px solid #fffdf4; border-radius: 999px; background: #173f34; color: #fffdf4; font: 800 16px/1.3 var(--body), sans-serif; white-space: nowrap; }
@media (hover: hover) { .extra-card__visual--game:hover .extra-card__play-label { background: #fffdf4; color: var(--exact-ink); } }
.extra-card__visual--sunset:focus-visible, .extra-card__visual--game:focus-visible, .extra-card__action:focus-visible { outline: 3px solid var(--exact-ink); outline-offset: 6px; }
.extra-card h3 { margin: 14px 0 0; font-size: 18px; font-weight: 800; line-height: 1.5; }
.extra-card p { margin: 6px 0 0; font-size: 15px; line-height: 1.8; }
.extra-card__action { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 8px 20px; border: 2px solid var(--exact-ink); border-radius: 999px; background: var(--exact-ink); color: #fffdf4; font: 800 15px/1.4 var(--body), sans-serif; text-decoration: none; cursor: pointer; }
@media (hover: hover) { .extra-card__action:hover { background: #fffdf4; color: var(--exact-ink); } }
.extra-card small { display: block; margin-top: 12px; font-size: 12px; line-height: 1.7; color: rgba(23, 63, 52, .78); }
.extra-card__stores { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.extra-card__stores a { display: inline-flex; align-items: center; min-height: 44px; color: var(--exact-ink); font-size: 14px; font-weight: 800; text-underline-offset: 3px; }
.extra-card__stores a::after { content: " ↗"; white-space: pre; }

/* ウコニアㇱ sheet: the MAKU app's game screen (UkoniasGameView) on the web.
   Colours, sizes and type follow the app's Theme.swift and SwiftUI styles
   (caption 12, subheadline 15, headline 17, title2 22); the board scales from
   the app's 330-point square through --u. */
.uk-sheet {
  --uk-ink: #141714; --uk-paper: #f5f2e8; --uk-snow: #fafaf5; --uk-green: #216b4a; --uk-secondary: rgba(60, 60, 67, .6);
  --uk-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  position: fixed; inset: 0; width: min(430px, calc(100% - 32px)); height: min(900px, calc(100dvh - 32px)); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  background: var(--uk-paper); color: var(--uk-ink); font-family: var(--uk-font); -webkit-font-smoothing: antialiased;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.uk-sheet[open] { display: flex; flex-direction: column; }
.uk-sheet::backdrop { background: rgba(8, 24, 16, .62); }
.uk-sheet [hidden] { display: none !important; }
.uk-sheet:focus { outline: none; }
.uk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.uk-nav { position: relative; flex: none; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 76px; }
.uk-nav h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.uk-nav button { position: absolute; top: 50%; right: 8px; min-height: 44px; padding: 0 10px; transform: translateY(-50%); border: 0; background: none; color: var(--uk-green); font: 700 15px/1 var(--uk-font); cursor: pointer; }
.uk-scroll { flex: 1; display: grid; align-content: start; gap: 18px; padding: 8px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.uk-head { display: grid; gap: 9px; }
.uk-kicker { margin: 0; color: var(--uk-green); font-size: 12px; font-weight: 900; line-height: 1.3; }
.uk-title { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.3; }
.uk-intro { margin: 0; color: var(--uk-secondary); font-size: 15px; line-height: 1.45; }
.uk-surface { padding: 16px; border-radius: 8px; background: var(--uk-snow); }
.uk-play { display: grid; gap: 14px; }
.uk-modes { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(245, 242, 232, .76); }
.uk-modes button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 10px 8px; border: 0; border-radius: 999px; background: rgba(245, 242, 232, .76); color: rgba(20, 23, 20, .76); font: 900 12px/1 var(--uk-font); cursor: pointer; }
.uk-modes button[aria-pressed="true"] { background: var(--uk-ink); color: #fff; }
.uk-modes svg { width: 13px; height: 13px; fill: currentColor; }
.uk-status { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(245, 242, 232, .76); container-type: inline-size; }
.uk-status__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); }
.uk-status__icon svg { width: 16px; height: 16px; fill: currentColor; }
/* One line like the app, shrinking to 78% before it would wrap. */
.uk-status p { margin: 0; overflow: hidden; font-size: clamp(11.7px, calc((100cqw - 46px) / var(--chars, 20)), 15px); font-weight: 700; line-height: 34px; white-space: nowrap; text-overflow: ellipsis; }
.uk-stage { position: relative; container-type: inline-size; }
.uk-board { --u: calc(min(100cqw, 330px) / 330); position: relative; width: min(100cqw, 330px); aspect-ratio: 1; margin: 0 auto; }
.uk-board__soil { position: absolute; inset: 0; width: 100%; height: 100%; }
.uk-hole, .uk-stick { position: absolute; margin: 0; padding: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
.uk-hole { display: grid; place-items: center; width: max(44px, calc(var(--u) * 52)); height: max(44px, calc(var(--u) * 52)); transform: translate(-50%, -50%); cursor: pointer; }
.uk-hole svg { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.uk-hole__pit { fill: url(#uk-pit); stroke: #3d1f0d; stroke-width: 1.1; transform-box: fill-box; transform-origin: center; transition: transform .24s cubic-bezier(.3, 1.35, .5, 1); }
.uk-hole__ring { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 4; opacity: 0; transition: opacity .18s ease; }
.uk-hole.is-target .uk-hole__pit { transform: scale(1.125, 1.133); }
.uk-hole.is-target .uk-hole__ring { opacity: 1; }
.uk-hole:disabled, .uk-stick:disabled { cursor: default; }
.uk-stick { z-index: 1; width: calc(var(--u) * 44); height: calc(var(--u) * 76); cursor: pointer; transition: left .24s ease-in-out, top .24s ease-in-out; }
.uk-stick.is-lifted { z-index: 2; }
.uk-stick svg { display: block; width: 100%; height: 100%; transition: transform .1s ease-out; }
.uk-stick:active:not(:disabled) svg { transform: scale(.98); }
.uk-stick__lift { transition: transform .24s cubic-bezier(.3, 1.4, .5, 1); }
.uk-stick.is-lifted .uk-stick__lift { transform: translateY(-8px); }
.uk-stick.is-lifted .uk-stick__wood { filter: url(#uk-stick-shadow-lifted); }
.uk-hole:focus-visible, .uk-stick:focus-visible { outline: 2px solid var(--uk-ink); outline-offset: -4px; border-radius: 10px; }
.uk-start { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 22px; opacity: 0; visibility: hidden; transform: scale(.94); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.uk-start.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .26s cubic-bezier(.3, 1.3, .5, 1); }
.uk-start__card { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 250px; padding: 18px; border-radius: 20px; background: #fdf8eb; box-shadow: 0 0 0 1px rgba(20, 23, 20, .1), 0 9px 16px rgba(0, 0, 0, .14); text-align: center; }
.uk-start__sticks { position: relative; width: 108px; height: 70px; }
.uk-roll { position: absolute; top: 50%; left: 50%; width: 27.28px; height: 47.12px; margin: -23.56px 0 0 -13.64px; transition: transform .76s ease-in-out; }
.uk-roll svg { display: block; width: 100%; height: 100%; }
.uk-roll--blue { transform: translate(-24px, 4px) rotate(-42deg); }
.uk-roll--red { transform: translate(24px, 4px) rotate(43deg); }
.is-rolling .uk-roll--blue { transform: translate(20px, -2px) rotate(510deg); }
.is-rolling .uk-roll--red { transform: translate(-20px, 2px) rotate(-510deg); }
.uk-start__copy { display: grid; gap: 5px; }
.uk-start__title { font-size: 17px; font-weight: 900; line-height: 1.3; }
.uk-start__message { color: var(--uk-secondary); font-size: 12px; font-weight: 600; line-height: 1.4; }
.uk-start__button { width: 100%; min-height: 44px; padding: 12px; border: 0; border-radius: 999px; background: var(--uk-ink); color: #fff; font: 900 15px/1.2 var(--uk-font); cursor: pointer; }
.uk-start__result { padding: 7px 11px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 12px; font-weight: 900; }
.uk-victory { position: absolute; top: 12px; left: 50%; z-index: 3; display: grid; justify-items: center; gap: 8px; width: min(246px, calc(100% - 24px)); padding: 14px 18px; border-radius: 18px; background: rgba(250, 250, 245, .74); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 10px 18px rgba(0, 0, 0, .16); text-align: center; transform: translateX(-50%); animation: uk-arrive .26s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes uk-arrive { from { opacity: 0; transform: translateX(-50%) scale(.92); } }
.uk-victory__mark { position: relative; display: grid; place-items: center; width: 100%; height: 48px; }
.uk-victory__mark i { position: absolute; top: 50%; left: 50%; translate: -50% -50%; border-radius: 50%; background: rgba(184, 135, 92, .78); opacity: .82; }
.uk-victory__mark i.is-rod { background: color-mix(in srgb, var(--rod) 72%, transparent); }
.uk-victory__mark i.is-soft { filter: blur(.6px); }
.uk-victory__mark b { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--rod); box-shadow: 0 6px 14px color-mix(in srgb, var(--rod) 28%, transparent); }
.uk-victory__mark svg { width: 22px; height: 22px; fill: #fff; }
.uk-victory__title { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.3; }
.uk-victory__message { margin: 0; color: var(--uk-secondary); font-size: 12px; font-weight: 600; line-height: 1.4; }
.uk-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uk-legend__item { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; background: rgba(245, 242, 232, .76); color: rgba(20, 23, 20, .82); font-size: 12px; font-weight: 700; }
.uk-legend__item svg { flex: none; width: 20.24px; height: 34.96px; }
.uk-reset { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px; border: 0; border-radius: 999px; background: rgba(33, 107, 74, .12); color: var(--uk-green); font: 700 15px/1.2 var(--uk-font); cursor: pointer; }
.uk-reset svg { width: 16px; height: 16px; }
.uk-notes { display: grid; gap: 12px; }
.uk-notes h3 { margin: 0; color: var(--uk-secondary); font-size: 12px; font-weight: 900; line-height: 1.3; }
.uk-notes ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.uk-notes li { position: relative; padding-left: 15px; }
.uk-notes li::before { content: ""; position: absolute; top: 8px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--uk-green); }
.uk-notes li, .uk-notes p { margin: 0; color: rgba(20, 23, 20, .86); font-size: 15px; line-height: 1.45; }
.uk-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 32px; color: var(--uk-green); font-size: 15px; font-weight: 700; text-decoration: none; }
.uk-link svg { width: 18px; height: 18px; fill: currentColor; }
.uk-link--video { color: #ba3d2e; }
.uk-notes ul + .uk-link { margin-top: 4px; }
.uk-sheet button:focus-visible, .uk-link:focus-visible { outline: 2px solid var(--uk-ink); outline-offset: 2px; }
.uk-play.is-still *, .uk-play.is-still { transition: none !important; animation: none !important; }
@media (max-width: 720px) {
  .uk-sheet { width: 100%; height: 100dvh; border-radius: 0; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  /* Tablet: the two groups side by side, like the leaflet's two columns. */
  .spot-guides--mobile { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .spot-guides--mobile .spot-guide { grid-template-columns: 1fr; gap: 12px; }
  .spot-guides--mobile .spot-guide__lead { font-size: 14px; }
}