:root {
  --cream: #F6F1E6;
  --paper: #FFFDF8;
  --ink: #241E1B;
  --ink-soft: #5B5148;
  --indigo: #2B3A5C;
  --indigo-deep: #1B2540;
  --crimson: #A93226;
  --gold: #C9932E;
  --teal: #1F6E5C;
  --border: rgba(36, 30, 27, 0.12);
  --radius: 4px;
  --serif: 'Shippori Mincho', serif;
  --sans: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.wordmark-mark {
  /* the mark is a transparent PNG already in --crimson; width/height are also
     set as attributes so the header cannot shift while it loads */
  height: 28px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.wordmark-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
}

.site-nav {
  display: flex;
  gap: 24px;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.site-nav a:hover { color: var(--crimson); }

/* Hero */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  /* Narrow screens: the copy sits above the bathers, who occupy roughly 44-78%
     of the crop's height, so coverage is weighted to the top and clears before
     it reaches them. */
  background: linear-gradient(180deg,
    rgba(27,37,64,0.74) 0%,
    rgba(27,37,64,0.70) 42%,
    rgba(27,37,64,0.16) 60%,
    rgba(27,37,64,0.10) 100%);
}

@media (min-width: 900px) {
  .hero { align-items: flex-end; min-height: 560px; }
  /* The copy sits in a narrow left column and the bathers are centre-frame, so
     coverage is weighted left and clears by 60% width. Measured against the
     real pixels: all text clears AA with margin, and the tattoos read 58%
     brighter than under the old uniform scrim. */
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(27,37,64,0.72) 0%, rgba(27,37,64,0.64) 44%, rgba(27,37,64,0) 60%),
      linear-gradient(180deg, rgba(27,37,64,0) 0%, rgba(27,37,64,0.10) 40%, rgba(27,37,64,0.62) 100%);
  }
}

.hero-content {
  position: relative;
  padding-top: 60px;
  padding-bottom: 56px;
  color: #FFFDF8;
  /* it's a flex item, so it shrinks to fit unless given an explicit width;
     without this the copy ends up centred over the bathers */
  width: 100%;
  max-width: 1080px;
}

/* the copy sits in a narrow left column so it clears the bathers */
.hero-content > * { max-width: 470px; }

.hero-content h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.25;
  margin: 0 0 10px;
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 22px);
  margin: 0 0 18px;
  color: #F0D9A8;
}

.hero-tagline {
  font-size: 16px;
  color: rgba(255,253,248,0.88);
  margin: 0 0 28px;
}

.btn-primary {
  display: inline-block;
  background: var(--crimson);
  color: #FFFDF8;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
}

.btn-primary:hover { background: #8f291f; }

/* Explainer */
.explainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 10px;
}

.explainer h2 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 12px;
  line-height: 1.35;
}

.explainer p {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
}

/* Map section */
.map-section {
  background: var(--paper);
  padding: 64px 0 56px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.map-section h2 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 0 0 8px;
}

.section-lede {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 8px;
  max-width: 480px;
}

.map-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  position: relative;
}

.map-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.japan-map { width: 100%; height: auto; }

.landmass {
  fill: var(--cream);
  stroke: var(--indigo);
  stroke-width: 1.5;
}

/* invisible tap target: keeps the dot small while staying easy to hit,
   which matters as more regions are added and the map gets crowded */
.pin .hit { fill: transparent; stroke: none; }

.pin .dot {
  fill: var(--ink-soft);
  opacity: 0.55;
  stroke: var(--paper);
  stroke-width: 2;
  cursor: pointer;
}

.pin { cursor: pointer; }

/* Region labels. font-size is in viewBox units, so it scales with the map;
   the media query enlarges it to stay legible once the map shrinks. */
.pin text {
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 500;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  /* a label must never swallow a click aimed at a neighbouring dot */
  pointer-events: none;
}
.pin-active text { font-weight: 600; fill: var(--crimson); }
.pin:hover text { fill: var(--crimson); }

@media (max-width: 700px) {
  .pin text { font-size: 10px; stroke-width: 3.5px; }
}
.pin:focus .dot { outline: none; stroke: var(--gold); stroke-width: 2.5; }

.pin-active .dot {
  fill: var(--crimson);
  opacity: 1;
}

.map-popup {
  position: absolute;
  background: var(--indigo-deep);
  color: #FFFDF8;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  min-width: 150px;
  transform: translate(-50%, -110%);
  pointer-events: none;
  z-index: 5;
}

.map-popup-name {
  font-weight: 600;
  margin: 0 0 2px;
}

.map-popup-status {
  margin: 0;
  color: rgba(255,253,248,0.7);
}

.map-popup-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  pointer-events: auto;
}

.legend {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-soft);
}

.legend span { display: flex; align-items: center; gap: 6px; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-active { background: var(--crimson); }
.dot-soon { background: var(--ink-soft); opacity: 0.55; }

.region-list {
  margin-top: 32px;
  border-top: 1px solid var(--border);
}

.region-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  min-height: 44px;
}

.region-row.is-active { color: var(--ink); font-weight: 600; }
.region-row.is-active .region-status { color: var(--crimson); font-weight: 600; }
.region-row .region-status { color: var(--ink-soft); font-size: 13px; }

/* FAQ */
.faq { padding-top: 64px; padding-bottom: 72px; max-width: 720px; }

.faq h2 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 0 0 24px;
}

.faq-list { border-top: 1px solid var(--border); }

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}

.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before {
  content: '+';
  color: var(--crimson);
  font-weight: 700;
  margin-right: 10px;
}

.faq-item[open] summary::before { content: '−'; }

.faq-item p {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 12px 0 0;
}

/* Footer */
.site-footer {
  background: var(--indigo-deep);
  color: rgba(255,253,248,0.85);
  padding: 32px 0;
}

.footer-inner p { margin: 0 0 6px; font-size: 14px; }
.footer-sub { color: rgba(255,253,248,0.65); font-size: 13px; }
.footer-sub a { color: var(--gold); }

/* Responsive */
@media (max-width: 720px) {
  .explainer { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 40px; }
  .hero { min-height: 620px; }
  .hero-content { padding-top: 36px; padding-bottom: 36px; }
  .site-nav { display: none; }
}

/* --- Three ways in ---------------------------------------------------------
   Uses the existing palette tokens rather than the near-identical hexes in the
   brief, so the site keeps one set of colours instead of two that almost match.
   Each category carries the same accent as its group on the region pages. */
.ways {
  padding-top: 64px;
  padding-bottom: 8px;
}
.ways h2 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 6px 0 8px;
}

.ways-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (min-width: 760px) {
  .ways-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.way {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.way-media {
  background: var(--cream);
  line-height: 0;
  border-bottom: 3px solid var(--border);
}
.way-media img {
  width: 100%;
  /* the artwork is 2816x1536, so match its native 11:6 rather than crop it */
  aspect-ratio: 11 / 6;
  object-fit: cover;
  display: block;
}
.way-body { padding: 22px 22px 26px; }
.way-body h3 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 0 0 8px;
}
.way-body p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

/* category accents, matched to the region-page group stamps */
.way-open    .way-media { border-bottom-color: var(--teal); }
.way-seal    .way-media { border-bottom-color: var(--crimson); }
.way-private .way-media { border-bottom-color: var(--indigo); }
.way-open    .way-body h3 { color: var(--teal); }
.way-seal    .way-body h3 { color: var(--crimson); }
.way-private .way-body h3 { color: var(--indigo); }

/* ---------------------------------------------------------------------------
   In the cities

   The counterpart to the onsen-town map. No artwork exists for these yet, so
   the card leans on the one number that sells the section -- how many places
   ask you to cover nothing -- rather than on a photo well.
   --------------------------------------------------------------------------- */
.cities,
.towns {
  padding-top: 64px;
  padding-bottom: 8px;
}
.cities h2,
.towns h2 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 6px 0 8px;
}
.cities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (min-width: 760px) {
  .cities-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.city {
  background: var(--paper);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
/* Only the live card is a link, so only it gets the accent and the hover. */
.city.is-live { border-top-color: var(--teal); }
a.city:hover { border-color: var(--teal); }
a.city:hover .city-cta { text-decoration: underline; }

.city-status {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.city.is-live .city-status { color: var(--teal); }

.city h3 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 8px 0 14px;
}

.city-stat {
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.city-stat strong {
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  color: var(--teal);
}
.city:not(.is-live) .city-stat strong { color: var(--border); }
.city-stat span {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 11em;
}

.city-desc {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* pushed to the bottom so the three cards line their footers up regardless of
   how much description each one carries */
.city-cta {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--crimson);
}
.city-cta.is-muted { color: var(--ink-soft); font-weight: 500; }

/* ---------------------------------------------------------------------------
   How we check

   The verification work is the only thing here a blog listicle cannot copy, and
   it was invisible on the page meant to sell it. Deliberately plain: a section
   claiming rigour should not look decorated.
   --------------------------------------------------------------------------- */
.verify {
  padding-top: 64px;
  padding-bottom: 8px;
}
.verify h2 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 6px 0 8px;
  max-width: 30ch;
  text-wrap: balance;
}

.verify-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 40px;
}
@media (min-width: 760px) {
  .verify-list { grid-template-columns: repeat(2, 1fr); }
}
/* the rule reads as a checklist mark without needing an icon or an emoji */
.verify-list li {
  border-top: 2px solid var(--teal);
  padding-top: 14px;
}
.verify-list h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}
.verify-list p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

/* A worked example carries more weight than the four claims above it, so it
   gets the one piece of emphasis in the section. */
.verify-case {
  margin-top: 32px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--radius);
}
.verify-case p {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* City card artwork. Styled ahead of the images so dropping a file into
   images/cities/ and adding one <img> is the whole job. Same 11:6 as the
   "Three ways" cards on purpose -- the two grids sit close enough that a
   different crop would read as a mistake. */
.city-media {
  margin: -22px -22px 16px;
  background: var(--cream);
  line-height: 0;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.city-media img {
  width: 100%;
  /* height:auto is load-bearing. The markup carries width/height attributes so
     the browser reserves the right space before the image loads, but that
     height is a used value -- aspect-ratio is only consulted when height is
     auto, so without this the card renders at the image's full pixel height. */
  height: auto;
  aspect-ratio: 11 / 6;
  object-fit: cover;
  display: block;
}
/* the accent already lives on the card's top border, so artwork replaces it
   rather than stacking a second coloured rule above the image */
.city.is-live .city-media { border-bottom-color: var(--teal); }