:root {
  color: #2d211d;
  background: #fff7ec;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x:hidden; }
body { margin: 0; overflow-x:hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.site-shell {
  min-height: 100vh;
  background: linear-gradient(90deg, rgba(230,87,93,.08) 1px, transparent 1px), linear-gradient(rgba(230,87,93,.08) 1px, transparent 1px), #fff7ec;
  background-size: 28px 28px;
}
.top-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,247,236,.94);
  border-bottom: 2px solid #2d211d;
  backdrop-filter: blur(12px);
}
.top-nav a,.button,.active-place a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #2d211d;
  border-radius: 8px;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 3px 3px 0 #2d211d;
  background: #fff;
}
.language-toggle {
  display: inline-flex;
  gap: 3px;
  border: 2px solid #2d211d;
  border-radius: 999px;
  background: #fff;
  padding: 3px;
}
.language-toggle button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}
.language-toggle button.active { background: #d75763; color: #fff; }
.hero {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .78fr);
  align-items: center;
  gap: 36px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 30px;
}
.hero-copy { display: grid; gap: 18px; align-content: center; }
.label {
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 2px solid #d75763;
  border-radius: 999px;
  background: #fff;
  color: #b33847;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 900;
}
h1,h2,h3,p { overflow-wrap: anywhere; }
h1 { max-width: 780px; margin: 0; font-size: clamp(40px, 8vw, 88px); line-height: .98; }
h2 { margin: 0; font-size: clamp(30px, 5vw, 54px); line-height: 1.05; }
h3 { margin: 0; font-size: 22px; line-height: 1.28; }
.hero-copy>p:not(.label),.section-heading p,.talk-panel p,.step-card p,.active-place p { margin: 0; color: #5d4a43; line-height: 1.8; }
.hero-copy>p:not(.label) { max-width: 620px; font-size: 18px; }
.hero-actions,.active-links { display: flex; flex-wrap: wrap; gap: 12px; }
.button.primary { background: #d75763; color: #fff; }
.cover-preview { min-height: 560px; display: grid; place-items: center; }
.cover-image {
  width:min(100%, 390px);
  aspect-ratio:896 / 1200;
  object-fit:cover;
  border:4px solid #2d211d;
  border-radius:8px;
  background:#fff;
  box-shadow:14px 14px 0 #2d211d;
}
.book.legacy-cover { display:none; }
.book {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: .72;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 4px solid #2d211d;
  border-radius: 8px;
  padding: 28px;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.9) 0 10%, transparent 11%), linear-gradient(135deg, #4b2f77, #283a7b 48%, #784d8f);
  color: #fff;
  box-shadow: 14px 14px 0 #2d211d;
  overflow: hidden;
}
.book::before,.book::after { content:""; position:absolute; width:160px; height:160px; border:3px solid rgba(255,214,219,.8); border-radius:50%; }
.book::before { right:-42px; top:-38px; }
.book::after { left:-70px; bottom:26px; }
.book-title { position:relative; z-index:1; writing-mode:vertical-rl; justify-self:center; font-size:42px; font-weight:900; text-shadow:3px 3px 0 #2d211d; }
.book-subtitle { position:relative; z-index:1; justify-self:center; border:1px solid rgba(255,255,255,.65); padding:6px 10px; font-size:12px; font-weight:900; }
.qr-card { position:relative; z-index:1; align-self:end; justify-self:end; width:132px; display:grid; gap:8px; border:3px solid #2d211d; border-radius:8px; background:#fff; color:#2d211d; padding:10px; text-align:center; font-weight:800; }
.qr { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.qr span { aspect-ratio:1; border-radius:2px; background:#fff; }
.qr span.filled { background:#2d211d; }
.comic-section,.places-section,.manners-band { width:min(1180px, calc(100% - 32px)); margin:0 auto; }
.comic-section,.places-section { padding:44px 0; }
.section-heading { display:grid; gap:10px; max-width:100%; min-width:0; margin-bottom:18px; }
.section-heading p:not(.label) { width:100%; max-width:min(760px, 100%); box-sizing:border-box; white-space:normal; overflow-wrap:break-word; word-break:normal; }
.section-heading .map-note { display:block; width:100%; max-width:100%; box-sizing:border-box; border:2px dashed #d75763; border-radius:8px; background:rgba(255,255,255,.82); padding:10px 12px; font-size:14px; font-weight:800; }
.comic-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:14px; }
.comic-panel,.talk-panel,.step-card,.map-panel,.place-list-panel,.active-place,.manners-band { border:3px solid #2d211d; border-radius:8px; background:#fffdf8; box-shadow:5px 5px 0 #2d211d; }
.comic-panel { overflow:hidden; }
.comic-panel img { width:100%; height:100%; object-fit:cover; }
.comic-panel.wide { grid-row:span 2; }
.talk-panel { min-height:240px; display:grid; gap:14px; align-content:start; padding:20px; background:#fff; }
.talk-panel.accent { background:#fff0f1; }
.panel-number { width:46px; height:46px; display:grid; place-items:center; border:3px solid #2d211d; border-radius:50%; background:#d75763; color:#fff; font-size:25px; font-weight:900; }
.howto-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr); gap:16px; align-items:start; }
.howto-layout>img { border:3px solid #2d211d; border-radius:8px; box-shadow:5px 5px 0 #2d211d; }
.step-list { display:grid; gap:12px; }
.step-card { display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; padding:18px; }
.step-card>span { width:60px; height:60px; display:grid; place-items:center; border:3px solid #2d211d; border-radius:50%; background:#f3b34c; font-size:19px; font-weight:900; }
.step-card div { display:grid; gap:8px; }
.step-card small { color:#b33847; font-weight:900; }
.manners-band { display:grid; gap:18px; padding:22px; background:#fff; }
.manner-list { display:flex; flex-wrap:wrap; gap:10px; }
.manner-list span { border:2px solid #2d211d; border-radius:999px; background:#f7dfe2; padding:10px 14px; font-weight:900; }
.finder-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }
.map-panel { display:grid; gap:14px; padding:16px; background:#fff; }
.map-toolbar { display:flex; flex-wrap:wrap; gap:8px; }
.map-toolbar button { min-height:38px; border:2px solid #2d211d; border-radius:999px; background:#fff7ec; color:#2d211d; padding:8px 12px; font:inherit; font-size:13px; font-weight:900; cursor:pointer; }
.map-toolbar button.active { background:#d75763; color:#fff; }
.kyoto-map { position:relative; min-height:430px; border:3px solid #2d211d; border-radius:8px; background: radial-gradient(ellipse at 50% 58%, rgba(255,253,248,.9) 0 28%, transparent 29%), linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px), #dfeee3; background-size:auto,26px 26px,26px 26px,auto; overflow:hidden; }
.kyoto-map::before { content:""; position:absolute; inset:58px 90px 62px 96px; border:4px solid rgba(45,33,29,.34); border-radius:40% 43% 47% 42% / 33% 39% 48% 55%; background:rgba(255,250,238,.55); }
.kyoto-map::after { content:""; position:absolute; inset:98px 160px 86px 210px; border:2px dashed rgba(45,33,29,.24); border-radius:46% 39% 45% 41%; }
.major-road,.rail-line,.river { position:absolute; z-index:1; display:block; pointer-events:none; }
.major-road { border-radius:999px; background:rgba(255,255,255,.72); box-shadow:0 0 0 2px rgba(45,33,29,.16), inset 0 0 0 2px rgba(243,179,76,.55); }
.road-north-south { left:49%; top:17%; width:18px; height:67%; transform:rotate(3deg); }
.road-east-west { left:20%; top:58%; width:62%; height:16px; transform:rotate(-2deg); }
.road-higashiyama { right:18%; top:32%; width:14px; height:45%; transform:rotate(14deg); }
.rail-line { border-radius:999px; opacity:.9; }
.rail-line::after { content:""; position:absolute; inset:3px; border-radius:inherit; background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 8px, transparent 8px 16px); }
.jr-line { left:30%; bottom:82px; width:46%; height:10px; background:#d75763; transform:rotate(-5deg); }
.nara-line { left:48%; bottom:50px; width:29%; height:9px; background:#b4579d; transform:rotate(31deg); transform-origin:left center; }
.subway-line { left:52%; top:24%; width:8px; height:51%; background:#2f8c62; transform:rotate(2deg); }
.subway-line::after,.keihan-line::after { background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.95) 0 8px, transparent 8px 16px); }
.hankyu-line { left:18%; top:63%; width:35%; height:9px; background:#7d3f2a; transform:rotate(-12deg); }
.keihan-line { left:61%; top:35%; width:9px; height:47%; background:#3559a6; transform:rotate(9deg); }
.river { border-radius:58% 42% 48% 52% / 44% 57% 43% 56%; background:linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.75) 19% 28%, transparent 29% 100%), #78bfd3; box-shadow:0 0 0 2px rgba(255,255,255,.68), inset 6px 0 0 rgba(45,124,157,.2); }
.kamogawa { left:55%; top:38%; width:15px; height:52%; transform:rotate(4deg); clip-path:polygon(48% 0,94% 11%,63% 28%,86% 45%,55% 62%,76% 82%,40% 100%,0 92%,32% 76%,12% 57%,36% 41%,14% 22%); }
.kamogawa-upper { left:49%; top:14%; width:13px; height:31%; transform:rotate(-18deg); opacity:.9; clip-path:polygon(48% 0,96% 16%,64% 34%,88% 52%,58% 73%,72% 100%,24% 94%,0 76%,34% 58%,12% 38%,42% 21%); }
.takanogawa { left:60%; top:13%; width:12px; height:35%; transform:rotate(30deg); opacity:.88; clip-path:polygon(48% 0,100% 18%,66% 34%,92% 52%,54% 72%,70% 100%,20% 94%,0 76%,34% 58%,12% 38%,42% 22%); }
.katsuragawa { left:18%; top:36%; width:14px; height:55%; transform:rotate(-18deg); clip-path:polygon(45% 0,100% 14%,62% 31%,88% 48%,55% 68%,70% 100%,25% 96%,0 78%,35% 62%,12% 43%,42% 24%); }
.transport-label,.city-block,.map-label { position:absolute; z-index:2; border:2px solid rgba(45,33,29,.72); border-radius:999px; background:rgba(255,255,255,.92); padding:3px 7px; font-size:11px; font-weight:900; }
.jr-label { left:70%; bottom:64px; color:#b33847; }
.nara-label { left:68%; bottom:24px; color:#8c3c7d; }
.subway-label { left:53%; top:24%; color:#2f8c62; }
.hankyu-label { left:22%; top:68%; color:#7d3f2a; }
.keihan-label { left:66%; top:40%; color:#3559a6; }
.city-block.station { left:39%; bottom:62px; border-radius:8px; background:#fff; padding:7px 12px 7px 28px; font-size:14px; box-shadow:3px 3px 0 #2d211d; }
.city-block.station::before { content:"駅"; position:absolute; left:6px; top:50%; width:18px; height:18px; display:grid; place-items:center; border-radius:4px; background:#d75763; color:#fff; font-size:10px; transform:translateY(-50%); }
.palace { left:42%; top:43%; background:#eef5ff; }
.arashiyama { left:44px; bottom:104px; background:#fff4c4; }
.map-label.east { right:36px; top:54px; }
.map-label.west { left:42px; bottom:100px; }
.map-pin { position:absolute; z-index:3; width:46px; height:46px; display:grid; place-items:center; border:3px solid #2d211d; border-radius:50%; background:#fffdf8; box-shadow:3px 3px 0 rgba(45,33,29,.9); transform:translate(-50%,-50%); cursor:pointer; padding:0; }
.map-pin::after { content:""; position:absolute; left:50%; bottom:-9px; width:13px; height:13px; border-right:3px solid #2d211d; border-bottom:3px solid #2d211d; background:#fffdf8; transform:translateX(-50%) rotate(45deg); }
.map-pin.shrine { border-color:#e9472e; }
.map-pin.temple { border-color:#7b522d; }
.map-pin span { position:relative; z-index:1; width:38px; height:38px; display:block; border-radius:0; background-color:transparent; filter:none; transform:none; }
.map-pin.active { background:#fff1be; }
.map-pin.active::after { background:#fff1be; }
.map-pin.active span { transform:scale(1.12); }
.place-list-panel { display:grid; gap:10px; padding:12px; background:#fff; max-height:700px; overflow:auto; }
.place-row { display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; width:100%; border:2px solid #2d211d; border-radius:8px; background:#fffdf8; padding:12px; text-align:left; font:inherit; cursor:pointer; }
.place-row .place-type { grid-row:span 2; }
.place-row strong { font-size:18px; }
.place-row small { color:#5d4a43; font-weight:800; }
.place-row.selected { background:#fff0f1; box-shadow:inset 0 0 0 3px #d75763; }
.active-place { position:relative; display:grid; gap:8px; padding:16px; background:#fffdf8; box-shadow:none; }
.sheet-close { display:none; }
.sheet-grip { display:none; }
.place-type { width:max-content; display:inline-flex; align-items:center; gap:6px; border:2px solid #2d211d; border-radius:999px; background:#f3b34c; padding:4px 9px; font-size:13px; font-weight:900; }
.place-icon { position:relative; display:inline-block; flex:0 0 auto; width:22px; height:22px; background:center / contain no-repeat; }
.place-icon.shrine { background-image:url("./shrine-icon.png"); }
.place-icon.temple { background-image:url("./temple-icon.png"); }
.map-pin .place-icon { width:38px; height:38px; background-size:contain; }
.map-pin .place-icon.shrine { background-position:center 54%; }
.map-pin .place-icon.temple { background-position:center 52%; }
.place-icon.shrine::before {
  content:"";
  position:absolute;
  left:1px;
  top:2px;
  width:20px;
  height:7px;
  background:#e9472e;
  border-radius:8px 8px 3px 3px;
  clip-path:polygon(0 0,18% 22%,50% 34%,82% 22%,100% 0,92% 76%,65% 100%,35% 100%,8% 76%);
  box-shadow:0 6px 0 -2px #e9472e;
}
.place-icon.shrine::after {
  content:"";
  position:absolute;
  left:5px;
  top:10px;
  width:12px;
  height:9px;
  border-left:4px solid #e9472e;
  border-right:4px solid #e9472e;
  border-bottom:3px solid #6d3f2b;
  border-radius:0 0 2px 2px;
}
.place-icon.temple::before {
  content:"";
  position:absolute;
  left:1px;
  top:3px;
  width:20px;
  height:9px;
  background:#7b522d;
  border-radius:2px 2px 8px 8px;
  clip-path:polygon(8% 62%,20% 50%,31% 24%,69% 24%,80% 50%,92% 62%,100% 70%,88% 100%,12% 100%,0 70%);
  box-shadow:0 -3px 0 -1px #6f4828;
}
.place-icon.temple::after {
  content:"";
  position:absolute;
  left:4px;
  top:12px;
  width:14px;
  height:7px;
  background:
    linear-gradient(90deg,#7b522d 0 3px,transparent 3px 6px,#7b522d 6px 8px,transparent 8px 11px,#7b522d 11px 14px),
    linear-gradient(#b99462 0 100%);
  border-radius:1px 1px 3px 3px;
}
.place-icon.shrine::before,
.place-icon.shrine::after,
.place-icon.temple::before,
.place-icon.temple::after { content:none; display:none; }
.footer { display:flex; justify-content:space-between; gap:16px; width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:34px 0; font-weight:900; }
.footer p { margin:0; }
@media (max-width: 980px) {
  .hero,.comic-grid,.howto-layout,.finder-layout { grid-template-columns:1fr; }
  .hero { min-height:auto; }
  .cover-preview { min-height:460px; }
  .comic-panel.wide { grid-row:auto; }
}
@media (max-width: 620px) {
  .top-nav { justify-content:flex-start; overflow-x:auto; }
  .hero,.comic-section,.places-section,.manners-band,.footer { width:min(100% - 20px, 1180px); }
  .hero { padding-top:28px; gap:22px; }
  .hero-copy>p:not(.label) { font-size:16px; }
  .cover-preview { min-height:390px; }
  .book { width:min(100%,300px); padding:22px; box-shadow:8px 8px 0 #2d211d; }
  .book-title { font-size:34px; }
  .step-card { grid-template-columns:1fr; }
  .kyoto-map { min-height:330px; }
  .section-heading p:not(.label) { max-width:100%; }
  .map-pin { width:38px; height:38px; }
  .map-pin::after { bottom:-8px; width:10px; height:10px; }
  .map-pin span,
  .map-pin .place-icon { width:31px; height:31px; }
  .active-place {
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:30;
    max-height:min(72vh, 560px);
    overflow:auto;
    padding:28px 16px 16px;
    border:3px solid #2d211d;
    border-radius:16px 16px 10px 10px;
    background:#fffdf8;
    box-shadow:0 -4px 0 #2d211d, 0 16px 40px rgba(45,33,29,.28);
    transform:translateY(calc(100% + 28px));
    opacity:0;
    pointer-events:none;
    transition:transform .24s ease, opacity .2s ease;
  }
  .active-place.sheet-open {
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .sheet-grip {
    display:block;
    position:absolute;
    top:9px;
    left:50%;
    width:48px;
    height:5px;
    border-radius:999px;
    background:#d6c5bb;
    transform:translateX(-50%);
  }
  .sheet-close {
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:2px solid #2d211d;
    border-radius:50%;
    background:#fff;
    color:#2d211d;
    box-shadow:2px 2px 0 #2d211d;
    font:inherit;
    font-size:22px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
  }
  .active-place h3 { padding-right:42px; }
  .active-links { display:grid; grid-template-columns:1fr; }
  .active-links a { width:100%; }
  .footer { flex-direction:column; }
}