:root {
  --forest: #143c34;
  --forest-dark: #0e2e28;
  --ink: #173c34;
  --ink-soft: #56665f;
  --paper: #f6eedc;
  --paper-light: #fffaf0;
  --paper-deep: #e8dcc5;
  --coral: #df6f54;
  --coral-dark: #b94f3c;
  --blue: #4c8eaf;
  --green: #8da674;
  --line: rgba(23, 60, 52, 0.2);
  --shadow: 0 18px 42px rgba(21, 48, 40, 0.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 12px;
  padding: 8px 14px;
  color: white;
  background: var(--forest);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding: 0 clamp(24px, 4.6vw, 74px);
  color: var(--paper-light);
  background: var(--forest-dark);
  border-bottom: 3px solid #31564a;
  box-shadow: 0 5px 0 rgba(14, 46, 40, 0.24);
}

.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  background: #d9e7cf;
  border: 2px solid #99b287;
  border-radius: 50%;
}
.brand-mark img { width: 48px; height: 48px; object-fit: contain; }
.brand-name { display: grid; gap: 1px; line-height: 1; }
.brand-name strong {
  font-family: Georgia, "Songti SC", serif;
  font-size: 24px;
  letter-spacing: 0;
}
.brand-name small { font-size: 12px; color: rgba(255,255,255,.67); }

.site-nav { display: flex; align-items: center; gap: clamp(24px, 3.2vw, 52px); font-size: 14px; }
.site-nav > a:not(.nav-ticket) { position: relative; padding: 14px 0; }
.site-nav > a:not(.nav-ticket)::after {
  content: "";
  position: absolute;
  inset: auto 0 6px;
  height: 2px;
  background: #e9c28d;
  transform: scaleX(0);
  transition: transform 160ms ease;
}
.site-nav > a:hover::after, .site-nav > a:focus-visible::after { transform: scaleX(1); }
.nav-ticket {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #c7a977;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px #d9c7a7;
}
.nav-ticket::before, .nav-ticket::after,
.ticket::before, .ticket::after, .platform-ticket::before, .platform-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 18px;
  background: currentColor;
  border-radius: 0 12px 12px 0;
  transform: translateY(-50%);
  opacity: .13;
}
.nav-ticket::before, .ticket::before, .platform-ticket::before { left: -1px; }
.nav-ticket::after, .ticket::after, .platform-ticket::after { right: -1px; transform: translateY(-50%) rotate(180deg); }
.nav-ticket svg { width: 19px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--paper-light);
  background: transparent;
  border: 0;
}

.hero {
  position: relative;
  min-height: min(700px, calc(84vh - 88px));
  padding: clamp(80px, 9vh, 108px) clamp(24px, 10vw, 158px) 110px;
  background: #6a8e54 url("assets/town-hero.png") center 66% / cover no-repeat;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 8px;
  background: var(--paper);
  clip-path: polygon(0 70%, 1% 25%, 2% 74%, 3% 28%, 4% 72%, 5% 20%, 6% 68%, 7% 30%, 8% 70%, 9% 20%, 10% 75%, 11% 28%, 12% 70%, 13% 20%, 14% 73%, 15% 25%, 16% 70%, 17% 20%, 18% 76%, 19% 28%, 20% 70%, 21% 20%, 22% 74%, 23% 25%, 24% 70%, 25% 20%, 26% 76%, 27% 25%, 28% 70%, 29% 20%, 30% 74%, 31% 25%, 32% 70%, 33% 20%, 34% 74%, 35% 25%, 36% 70%, 37% 20%, 38% 76%, 39% 25%, 40% 70%, 41% 20%, 42% 74%, 43% 25%, 44% 70%, 45% 20%, 46% 74%, 47% 25%, 48% 70%, 49% 20%, 50% 76%, 51% 25%, 52% 70%, 53% 20%, 54% 74%, 55% 25%, 56% 70%, 57% 20%, 58% 74%, 59% 25%, 60% 70%, 61% 20%, 62% 76%, 63% 25%, 64% 70%, 65% 20%, 66% 74%, 67% 25%, 68% 70%, 69% 20%, 70% 74%, 71% 25%, 72% 70%, 73% 20%, 74% 76%, 75% 25%, 76% 70%, 77% 20%, 78% 74%, 79% 25%, 80% 70%, 81% 20%, 82% 74%, 83% 25%, 84% 70%, 85% 20%, 86% 76%, 87% 25%, 88% 70%, 89% 20%, 90% 74%, 91% 25%, 92% 70%, 93% 20%, 94% 74%, 95% 25%, 96% 70%, 97% 20%, 98% 76%, 99% 25%, 100% 70%, 100% 100%, 0 100%);
}

.arrival-board {
  position: relative;
  width: min(470px, 100%);
  padding: 34px 40px 38px;
  background: var(--paper);
  border: 1px solid #cdbb97;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(96, 77, 49, .24), 8px 12px 0 rgba(74, 54, 28, .22), var(--shadow);
  transform: rotate(-.5deg);
}
.arrival-board::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px dashed rgba(73, 64, 43, .22);
  pointer-events: none;
}
.board-pin {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  width: 22px;
  height: 22px;
  background: #c29b42;
  border: 3px solid #eed78c;
  border-radius: 50%;
  box-shadow: 0 4px 5px rgba(40, 32, 17, .3);
}
.board-label { margin: 0 0 10px; font-size: 10px; color: var(--coral-dark); letter-spacing: .16em; }
.arrival-board h1 {
  margin: 0;
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(44px, 4.2vw, 65px);
  line-height: .98;
  letter-spacing: 0;
}
.arrival-board h1 span {
  display: block;
  margin-top: 17px;
  font-family: "Songti SC", "STSong", serif;
  font-size: .55em;
}
.board-rule { width: 100%; height: 1px; margin: 25px 0 19px; background: var(--line); }
.board-copy { margin: 0; font-size: 15px; line-height: 1.9; }
.town-stamp {
  position: absolute;
  right: 27px;
  bottom: 24px;
  display: grid;
  width: 76px;
  height: 76px;
  place-content: center;
  color: rgba(197, 81, 57, .72);
  border: 3px double currentColor;
  border-radius: 50%;
  text-align: center;
  transform: rotate(11deg);
}
.town-stamp strong { font-family: Georgia, serif; font-size: 16px; line-height: 1; }
.town-stamp small { margin-top: 4px; font-size: 7px; letter-spacing: .08em; }

.hero-actions { display: flex; gap: 12px; margin-top: 28px; margin-left: -26px; }
.ticket {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 58px;
  padding: 0 25px;
  border: 2px solid var(--forest);
  font-size: 16px;
  box-shadow: 5px 6px 0 rgba(17, 51, 43, .25);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.ticket:hover { transform: translateY(-2px); box-shadow: 7px 9px 0 rgba(17, 51, 43, .22); }
.ticket img { width: 36px; height: 36px; object-fit: contain; }
.ticket svg { width: 19px; }
.ticket-light { color: var(--forest); background: var(--paper-light); }
.ticket-dark { color: var(--paper-light); background: var(--forest); border-color: #e0c28a; box-shadow: inset 0 0 0 4px var(--forest), inset 0 0 0 5px rgba(255,255,255,.25), 5px 6px 0 rgba(17, 51, 43, .25); }
.hero-scroll {
  position: absolute;
  z-index: 2;
  bottom: 27px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 12px;
  transform: translateX(-50%);
  text-shadow: 0 1px 2px rgba(255,255,255,.8);
}
.hero-scroll svg { width: 20px; }

.paper-section { position: relative; background: var(--paper); }
.life-section { padding: 64px clamp(24px, 7vw, 112px) 105px; }
.section-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: 90px;
  max-width: 1240px;
  margin: 0 auto 50px;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 17px;
  color: var(--coral-dark);
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
}
.section-label span { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.section-label.light { justify-content: center; color: #e3b780; }
.section-intro h2, .create-heading h2, .download-heading h2 {
  margin: 0;
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.28;
  letter-spacing: 0;
}
.section-intro > p { margin: 0 0 8px; color: var(--ink-soft); font-size: 15px; }

.town-diary {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 270px;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  max-width: 1320px;
  margin: 0 auto;
}
.route-column { display: grid; gap: 35px; align-self: stretch; align-content: center; }
.route-note {
  position: relative;
  padding: 22px 18px 25px;
  background: #eadfc7;
  border: 1px solid #cabc9c;
  box-shadow: 3px 5px 10px rgba(67, 53, 31, .12);
  transform: rotate(-4deg);
}
.route-note::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 35%;
  width: 55px;
  height: 15px;
  background: rgba(190, 160, 111, .44);
  transform: rotate(3deg);
}
.route-note > p { margin: 0 0 18px; font-family: "STKaiti", "KaiTi", serif; font-size: 17px; text-align: center; }
.route-line { position: relative; display: grid; gap: 17px; }
.route-line::before { content: ""; position: absolute; top: 15px; bottom: 15px; left: 11px; border-left: 1px dashed var(--coral); }
.route-line span { position: relative; display: flex; align-items: center; gap: 9px; font-size: 11px; }
.route-line svg { z-index: 1; width: 22px; height: 22px; padding: 4px; color: var(--coral-dark); background: #eadfc7; }
.hand-note { margin: 0; color: #6f6759; font-family: "STKaiti", "KaiTi", serif; font-size: 20px; line-height: 1.6; text-align: center; transform: rotate(-5deg); }
.photo {
  position: relative;
  padding: 14px 14px 42px;
  background: var(--paper-light);
  border: 1px solid #d9ccb2;
  box-shadow: 0 15px 35px rgba(62, 48, 28, .17);
  transform: rotate(-1.25deg);
}
.paper-clip {
  position: absolute;
  z-index: 3;
  top: -20px;
  left: 6%;
  width: 29px;
  height: 66px;
  border: 3px solid #7b725e;
  border-radius: 16px;
  transform: rotate(8deg);
}
.paper-clip::after { content: ""; position: absolute; inset: 5px; border: 2px solid #9d9279; border-radius: 12px; border-bottom-color: transparent; }
.photo img { width: 100%; aspect-ratio: 1.43; object-fit: cover; object-position: center top; }
.photo p { position: absolute; right: 18px; bottom: 10px; margin: 0; color: #796a55; font-family: "STKaiti", "KaiTi", serif; font-size: 13px; }
.photo-pin {
  position: absolute;
  z-index: 2;
  top: -12px;
  right: 18%;
  width: 20px;
  height: 20px;
  background: var(--blue);
  border: 3px solid #86bdd5;
  border-radius: 50%;
  box-shadow: 2px 4px 5px rgba(22, 55, 69, .3);
}
.capability-notes { display: grid; gap: 20px; }
.capability-note {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 13px;
  min-height: 130px;
  padding: 26px 23px 22px;
  background: var(--paper-light);
  border: 1px solid #d4c7aa;
  box-shadow: 4px 6px 13px rgba(67, 53, 31, .13);
}
.capability-note:nth-child(1) { transform: rotate(1.2deg); }
.capability-note:nth-child(2) { transform: rotate(-.7deg); }
.capability-note:nth-child(3) { transform: rotate(1deg); }
.note-pin { position: absolute; top: -9px; right: 18%; width: 17px; height: 17px; background: #bd8e2f; border: 2px solid #e9cb70; border-radius: 50%; box-shadow: 0 3px 4px rgba(64,48,18,.25); }
.capability-note > svg { width: 30px; color: #64854e; }
.capability-note h3 { margin: 0 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 21px; line-height: 1.25; }
.capability-note p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }

.create-section { padding: 108px clamp(24px, 7vw, 112px) 120px; color: var(--paper-light); background: var(--forest); }
.create-heading { width: min(700px, 100%); margin: 0 auto 58px; text-align: center; }
.create-heading > p:last-child { margin: 20px 0 0; color: rgba(255,255,255,.65); }
.workshop-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; gap: 130px; max-width: 1300px; margin: 0 auto; }
.workshop-sheet { position: relative; min-width: 0; padding: 35px 36px 34px; color: var(--ink); background: var(--paper-light); border: 1px solid #cdbb97; box-shadow: 10px 12px 0 rgba(2, 23, 19, .23), var(--shadow); }
.room-workshop { transform: rotate(-.8deg); }
.skin-workshop { margin-top: 55px; transform: rotate(.7deg); }
.workshop-sheet > .board-pin { top: -11px; left: 30px; }
.workshop-header { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: start; margin-bottom: 24px; }
.workshop-number { color: var(--coral); font-family: Georgia, serif; font-size: 36px; line-height: 1; border-right: 1px solid var(--coral); }
.workshop-header h3 { margin: 0 0 6px; font-family: Georgia, "Songti SC", serif; font-size: 26px; line-height: 1.3; }
.workshop-header p { margin: 0; color: var(--ink-soft); font-family: "STKaiti", "KaiTi", serif; font-size: 16px; }
.workshop-image { height: 385px; overflow: hidden; }
.workshop-image img { width: 100%; height: 100%; object-fit: cover; }
.workshop-stamp { position: absolute; right: 27px; top: 27px; display: grid; width: 62px; height: 62px; place-content: center; color: rgba(77,111,64,.46); border: 2px double currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 9px; line-height: 1.25; text-align: center; transform: rotate(9deg); }
.workshop-stamp.coral { top: auto; bottom: 20px; color: rgba(200,85,62,.58); }
.process-note { position: absolute; z-index: 4; top: 43%; left: 51.5%; width: 205px; padding: 23px 22px; color: var(--ink); background: #eee4ce; border: 1px solid #c9b995; box-shadow: 4px 6px 12px rgba(1,19,16,.26); transform: translate(-50%,-50%) rotate(-3deg); }
.process-note::before { content: ""; position: absolute; top: -7px; left: 30%; width: 68px; height: 16px; background: rgba(199,166,108,.65); transform: rotate(5deg); }
.process-note strong { color: var(--coral); font-family: "STKaiti", "KaiTi", serif; font-size: 20px; }
.process-note p { margin: 10px 0 6px; font-family: "STKaiti", "KaiTi", serif; font-size: 13px; line-height: 1.75; }
.process-note svg { width: 30px; margin-left: auto; color: var(--coral); }
.skin-process { position: relative; display: grid; grid-template-columns: .9fr 1.15fr; align-items: end; min-height: 385px; padding: 34px 32px 18px; background: #eee6d4; overflow: hidden; }
.skin-process::after { content: ""; position: absolute; left: 15%; right: 10%; bottom: 6%; height: 12%; background: rgba(35,74,61,.11); border-radius: 50%; }
.skin-sample, .skin-result { position: relative; z-index: 2; display: grid; justify-items: center; align-items: end; height: 100%; }
.skin-sample img { width: 72%; margin-bottom: 22px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(29,62,50,.14)); }
.skin-result img { width: 62%; max-height: 285px; object-fit: contain; filter: drop-shadow(0 10px 7px rgba(29,62,50,.14)); }
.spark { position: absolute; z-index: 3; color: #fff8d2; font-size: 34px; }
.spark-a { top: 18%; right: 15%; }
.spark-b { top: 35%; left: 13%; font-size: 21px; }
.workshop-closing { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 72px 0 0; color: rgba(255,255,255,.78); font-family: "STKaiti", "KaiTi", serif; font-size: 17px; text-align: center; }
.workshop-closing span { width: 48px; height: 1px; background: #c9a06b; }

.download-section {
  position: relative;
  display: grid;
  min-height: 760px;
  padding: 78px 24px 84px;
  place-items: center;
  background: #6a8e54 url("assets/town-hero.png") center 56% / cover no-repeat;
}
.download-section::before { content: ""; position: absolute; inset: 0; background: rgba(14,46,40,.16); }
.download-board { position: relative; z-index: 1; width: min(720px, 100%); padding: 42px 50px 34px; background: var(--paper); border: 1px solid #bda77c; box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 8px rgba(91,72,43,.2), 9px 12px 0 rgba(47,36,20,.3), var(--shadow); }
.download-board::before { content: ""; position: absolute; inset: 15px; border: 1px dashed rgba(85,67,40,.22); pointer-events: none; }
.download-board > .board-pin { top: -12px; }
.download-heading { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 92px; gap: 22px; align-items: center; padding-bottom: 24px; border-bottom: 1px dashed #aa9777; }
.download-heading .section-label { margin-bottom: 10px; }
.download-heading h2 { font-size: clamp(34px, 3.3vw, 48px); }
.system-hint { min-height: 20px; margin: 9px 0 0; color: var(--ink-soft); font-size: 12px; }
.download-stamp { display: grid; width: 86px; height: 86px; place-content: center; color: rgba(196,79,55,.72); border: 3px double currentColor; border-radius: 50%; font-family: Georgia, serif; text-align: center; transform: rotate(10deg); }
.download-stamp strong { font-size: 11px; }
.download-stamp small { margin-top: 4px; font-size: 7px; letter-spacing: .07em; }
.web-pass { position: relative; z-index: 1; display: grid; grid-template-columns: 30px 1fr 25px; align-items: center; min-height: 68px; margin: 24px 0 20px; padding: 0 28px; color: white; background: var(--coral); border: 2px solid var(--coral-dark); box-shadow: 4px 5px 0 rgba(142,65,47,.24); font-size: 19px; text-align: center; transition: transform 150ms ease; }
.web-pass:hover { transform: translateY(-2px); }
.web-pass svg { width: 21px; }
.platform-list { position: relative; z-index: 1; border-top: 1px dashed #ad9c7d; }
.platform-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 17px;
  min-height: 93px;
  padding: 14px 18px;
  background: var(--paper-light);
  border: 1px solid #cdbb97;
  border-top: 0;
  transition: transform 150ms ease, background-color 150ms ease;
}
.platform-ticket:hover, .platform-ticket.recommended { z-index: 1; background: #fff5df; transform: translateX(-7px); }
.platform-mark { display: grid; width: 46px; height: 46px; place-items: center; color: white; background: var(--forest); border-radius: 50%; }
.platform-mark svg { width: 21px; }
.platform-ticket > span:nth-child(2) { display: grid; gap: 2px; }
.platform-ticket strong { font-family: Georgia, sans-serif; font-size: 18px; }
.platform-ticket small { color: var(--ink-soft); font-size: 11px; }
.platform-action { display: flex; align-items: center; gap: 7px; color: var(--coral-dark); font-size: 12px; }
.platform-action svg { width: 17px; }
.download-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; margin: 16px 0 0; color: #756a58; font-size: 10px; }
.download-note svg { width: 15px; }

.site-footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 32px; padding: 28px clamp(24px, 4.6vw, 74px); color: rgba(255,255,255,.6); background: var(--forest-dark); font-size: 11px; }
.footer-brand { color: var(--paper-light); }
.footer-brand .brand-mark { width: 40px; height: 40px; }
.footer-brand .brand-mark img { width: 35px; height: 35px; }
.footer-brand .brand-name strong { font-size: 17px; }
.site-footer p { margin: 0; }

@media (max-width: 940px) {
  .site-header { height: 72px; padding: 0 20px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-mark img { width: 39px; height: 39px; }
  .brand-name strong { font-size: 20px; }
  .nav-toggle { display: grid; }
  .site-nav {
    position: absolute;
    inset: 72px 0 auto;
    display: grid;
    gap: 0;
    padding: 10px 20px 20px;
    color: var(--ink);
    background: var(--paper);
    border-bottom: 2px solid var(--forest);
    box-shadow: var(--shadow);
    transform: translateY(-140%);
    transition: transform 180ms ease;
  }
  .nav-open .site-nav { transform: translateY(0); }
  .site-nav > a:not(.nav-ticket) { padding: 14px 2px; border-bottom: 1px dashed #bfae8d; }
  .nav-ticket { justify-content: center; margin-top: 12px; background: var(--paper-light); }
  .hero { min-height: 720px; padding: 72px 24px 110px; background-position: 60% 64%; }
  .arrival-board { width: min(470px, calc(100% - 16px)); }
  .hero-actions { margin-left: 0; }
  .section-intro { grid-template-columns: 1fr; gap: 24px; }
  .town-diary { grid-template-columns: 1fr; gap: 46px; }
  .route-column { grid-template-columns: minmax(220px, .6fr) 1fr; align-items: center; }
  .route-note { width: min(280px, 100%); }
  .capability-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .capability-note { grid-template-columns: 34px 1fr; min-height: 150px; padding: 23px 17px 19px; }
  .capability-note > svg { width: 25px; }
  .workshop-layout { grid-template-columns: 1fr; gap: 42px; max-width: 680px; }
  .skin-workshop { margin-top: 0; }
  .process-note { position: relative; top: auto; left: auto; width: min(360px, 90%); margin: -12px auto; transform: rotate(-2deg); }
  .process-note svg { transform: rotate(90deg); }
  .download-section { min-height: 700px; padding: 70px 24px; }
}

@media (max-width: 560px) {
  .brand-name small { display: none; }
  .site-header { height: 66px; }
  .site-nav { top: 66px; }
  .hero { min-height: 660px; padding: 52px 18px 105px; background-position: 55% 64%; }
  .arrival-board { width: 100%; padding: 28px 27px 31px; }
  .arrival-board h1 { font-size: clamp(40px, 12vw, 50px); }
  .board-copy { padding-right: 60px; font-size: 13px; }
  .board-copy br { display: none; }
  .town-stamp { right: 19px; bottom: 19px; width: 66px; height: 66px; }
  .hero-actions { display: grid; margin-top: 23px; }
  .ticket { width: 100%; min-height: 54px; font-size: 15px; }
  .hero-scroll { bottom: 23px; }
  .life-section { padding: 58px 18px 76px; }
  .create-section { padding: 78px 18px 86px; }
  .download-section { min-height: 720px; padding: 56px 12px; background-position: 55% center; }
  .section-intro { margin-bottom: 50px; }
  .section-intro h2, .create-heading h2, .download-heading h2 { font-size: 34px; }
  .route-column { grid-template-columns: 1fr; gap: 20px; }
  .route-note { width: 82%; margin: 0 auto; }
  .hand-note { display: none; }
  .photo { padding: 9px 9px 34px; }
  .photo img { aspect-ratio: 1.15; }
  .capability-notes { grid-template-columns: 1fr; gap: 18px; }
  .capability-note { grid-template-columns: 42px 1fr; min-height: 120px; padding: 24px 21px 20px; }
  .workshop-sheet { padding: 28px 19px 22px; }
  .workshop-header { grid-template-columns: 44px 1fr; gap: 13px; margin-bottom: 20px; }
  .workshop-number { font-size: 29px; }
  .workshop-header h3 { padding-right: 26px; font-size: 22px; }
  .workshop-header p { font-size: 14px; }
  .workshop-stamp { display: none; }
  .workshop-image { height: 260px; }
  .skin-process { grid-template-columns: .9fr 1.15fr; min-height: 290px; padding: 26px 14px 14px; }
  .skin-sample img { width: 85%; }
  .skin-result img { width: 74%; max-height: 215px; }
  .process-note { width: 84%; padding: 20px; }
  .workshop-closing { gap: 8px; margin-top: 48px; font-size: 14px; }
  .workshop-closing span { width: 24px; }
  .download-board { padding: 31px 22px 25px; }
  .download-heading { grid-template-columns: 1fr; gap: 0; }
  .download-heading h2 { font-size: 30px; white-space: nowrap; }
  .download-stamp { display: none; }
  .web-pass { min-height: 61px; padding: 0 19px; font-size: 16px; }
  .platform-ticket { grid-template-columns: 45px 1fr auto; gap: 11px; min-height: 94px; padding: 14px 10px; }
  .platform-mark { width: 40px; height: 40px; }
  .platform-action span { display: none; }
  .download-note { align-items: flex-start; }
  .site-footer { grid-template-columns: 1fr; gap: 8px; padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}