@import url("./tokens.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-lg)); }
body { margin: 0; min-width: 20rem; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.nb { display: inline-block; white-space: nowrap; }
:where(a, button, input, select, textarea):focus-visible { outline: var(--border); outline-color: var(--color-text); outline-offset: var(--space-xs); }

.site-header { position: sticky; top: 0; z-index: 20; height: var(--header-height); border-bottom: var(--border); background: var(--color-base); }
.header-inner { width: var(--container); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.brand { display: inline-flex; align-items: baseline; gap: var(--space-xs); font-family: var(--font-jp-disp); font-size: var(--step-2); font-weight: 700; letter-spacing: var(--tracking-heading); white-space: nowrap; }
.brand small { font-family: var(--font-en); font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-en); text-transform: uppercase; }
.global-nav { display: flex; align-items: center; gap: var(--space-md); font-size: var(--step--1); font-weight: 700; white-space: nowrap; }
.global-nav a { border-bottom: var(--border); border-color: transparent; transition: var(--transit); }
.global-nav a[aria-current="page"], .global-nav a:hover { border-color: var(--color-main); }
.header-book { display: inline-flex; min-height: var(--cta-height); align-items: center; justify-content: center; padding-inline: var(--space-md); border: var(--border); border-color: var(--color-cta); background: var(--color-cta); color: var(--color-text); font-weight: 700; white-space: nowrap; transition: var(--transit); }
.header-book::before { content: ""; inline-size: var(--space-xs); block-size: var(--space-xs); border-radius: var(--pill); background: currentColor; }

.inner { width: var(--container); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-pad-m); }
.section--compact { padding-block: var(--section-pad-s); }
.section--large { padding-block: var(--section-pad-l); }
.section--pale { background: var(--color-main-pale); }
.section--main { background: var(--color-main); }
.section--ink { background: var(--color-text); color: var(--color-base); }
.section--ink h2, .section--ink h3 { color: var(--color-base); }
.section-title { display: grid; gap: var(--space-sm); align-items: end; }
.section-title--split { grid-template-columns: minmax(0, 1fr) minmax(16rem, .8fr); }
.section-kicker { display: flex; align-items: center; gap: var(--space-sm); margin: 0; font-family: var(--font-en); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-en); text-transform: uppercase; }
.section-kicker::after { content: ""; flex: 1; min-inline-size: var(--space-xl); border-top: var(--border); }
.section-title h1, .section-title h2 { margin: 0; font-size: var(--step-4); }
.section-title h1 { font-size: var(--step-5); }
.section-title p { margin: 0; }
.section-lead { margin: var(--space-lg) 0 0; font-size: var(--step-1); font-weight: 500; }
.intentional-break { display: inline-block; }
.wave-divider { display: block; width: min(10rem, 32vw); margin-block: var(--space-md); }

.hero { position: relative; isolation: isolate; min-height: max(43rem, 86svh); overflow: clip; background: var(--color-main-pale); }
.hero__scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__town { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__wash { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-base) 20%, transparent); }
.hero__float { position: absolute; pointer-events: none; animation: hero-float var(--float-dur) var(--float-ease) infinite alternate; }
.hero__cloud { top: 6vw; right: 3vw; width: 16vw; animation-delay: -1s; }
.hero__tree { right: -1vw; bottom: -4vw; width: 24vw; animation-delay: -2s; }
.hero__bird { top: 19vw; left: 53vw; width: 7vw; animation-delay: -3s; }
.hero__content { width: var(--container); min-height: max(43rem, 86svh); margin-inline: auto; display: grid; align-content: end; padding-block: var(--section-pad-l); }
.hero__copy {
  max-width: 47rem;
  padding: var(--space-xl);
  background: color-mix(in srgb, var(--color-base) 68%, transparent);
  backdrop-filter: blur(3px);
}
.hero__eyebrow { margin: 0 0 var(--space-sm); font-family: var(--font-en); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-en); text-transform: uppercase; }
.hero__title { margin: 0; font-size: var(--step-6); line-height: 1.18; }
.hero__title span { display: block; white-space: nowrap; }
.hero__text { margin: var(--space-md) 0 0; font-size: var(--step-1); }
@keyframes hero-float { from { transform: translateY(0); } to { transform: translateY(calc(var(--space-xs) * -1)); } }

.lead-block { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-3xl); align-items: end; }
.lead-block__copy { margin: 0; font-size: var(--step-1); }
.lead-block__note { margin: 0; padding-inline-start: var(--space-md); border-inline-start: var(--border); border-color: var(--color-main); }

.menu-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-3xl); }
.menu-group { border-top: var(--border); padding-top: var(--space-lg); }
.menu-group--adult { border-color: var(--color-adult); }
.menu-group--kids { border-color: var(--color-kids); }
.menu-group--care { border-color: var(--color-gray-care); }
.menu-group h3 { margin: 0; font-size: var(--step-2); }
.menu-group__tag { display: inline-block; position: relative; margin-block: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-accent); font-size: var(--step--1); font-weight: 700; }
.menu-group__tag::after { content: ""; position: absolute; inset: auto auto calc(var(--space-xs) * -1) var(--space-md); border: var(--space-xs) solid transparent; border-top-color: var(--color-accent); }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding-block: var(--space-md); border-bottom: var(--border); }
.price-list img { width: var(--space-xl); }
.price-list strong { font-size: var(--step-1); }
.price-list span { display: block; font-size: var(--step--1); }
.price-list b { font-family: var(--font-en); font-size: var(--step-2); font-weight: 700; white-space: nowrap; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-lg); border-bottom: var(--border); border-color: var(--color-main); font-weight: 700; transition: var(--transit); }
.text-link::after { content: "→"; transition: var(--transit); }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: var(--space-3xl) 0 0; padding: 0; border-top: var(--border); border-bottom: var(--border); }
.flow__item { padding: var(--space-lg); border-inline-end: var(--border); }
.flow__item:last-child { border: 0; }
.flow__num { display: block; font-family: var(--font-en); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-en); }
.flow__item img { width: min(100%, var(--space-4xl)); margin-block: var(--space-md); }
.flow__item h3 { margin: 0; font-size: var(--step-1); }
.flow__item p { margin: var(--space-xs) 0 0; font-size: var(--step--1); }

.map-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--space-3xl); align-items: center; }
.map-layout__image { position: relative; border: var(--border); background: var(--color-base); }
.map-layout__image img { width: 100%; }
.map-label { position: absolute; padding: var(--space-xs) var(--space-sm); background: var(--color-accent); font-size: var(--step--1); font-weight: 700; }
.map-label--kids { inset: 45% 5% auto auto; }
.map-label--entry { inset: auto auto 7% 50%; transform: translateX(-50%); }
.map-label--toilet { inset: 10% 5% auto auto; }
.feature-list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.feature-list li { display: grid; grid-template-columns: var(--space-lg) 1fr; gap: var(--space-sm); padding-block: var(--space-md); border-top: var(--border); }
.feature-list li::before { content: "●"; color: var(--color-main); font-size: var(--step--1); }

.staff-preview { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--space-3xl); align-items: end; }
.staff-preview__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.staff-preview__card { min-width: 0; padding-bottom: var(--space-sm); border-bottom: var(--border); }
.staff-preview__card img { width: 100%; border-radius: var(--radius); background: var(--color-main-pale); }
.staff-preview__card--warm img { background: var(--color-accent); }
.staff-preview__card p { margin: var(--space-sm) 0 var(--space-xs); font-size: var(--step--1); font-weight: 700; letter-spacing: normal; }
.staff-preview__card h3 { margin: 0; font-size: var(--step-1); }
.staff-preview__card small { display: block; margin-top: var(--space-xs); font-size: var(--step--1); }
.staff-preview > .text-link { grid-column: 2; justify-self: start; margin-top: calc(var(--space-lg) * -1); }

.quote-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-3xl); }
.sample-note { margin: 0; color: var(--color-base); font-size: var(--step--1); }
.quote-list { list-style: none; margin: 0; padding: 0; }
.quote-list li { padding-block: var(--space-lg); border-top: var(--border); border-color: var(--color-main-pale); }
.quote-list li:last-child { border-bottom: var(--border); border-color: var(--color-main-pale); }
.quote-list p { margin: 0; font-size: var(--step-1); }
.quote-list small { display: block; margin-top: var(--space-xs); color: var(--color-main-pale); }

.notice-list { list-style: none; margin: var(--space-3xl) 0 0; padding: 0; border-top: var(--border); }
.notice-list li { display: grid; grid-template-columns: minmax(6rem, .3fr) minmax(7rem, .35fr) 1fr; gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--border); }
.notice-list time { font-family: var(--font-en); font-size: var(--step--1); font-weight: 700; }
.notice-list span { font-size: var(--step--1); font-weight: 700; }

.access-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-3xl); }
.access-panel { padding: var(--space-xl); border: var(--border); background: var(--color-base); }
.access-panel h3 { margin: 0; font-size: var(--step-2); }
.info-table { margin: var(--space-md) 0 0; }
.info-table div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-sm); padding-block: var(--space-sm); border-top: var(--border); }
.info-table div:last-child { border-bottom: var(--border); }
.info-table dt { font-weight: 700; }
.info-table dd { margin: 0; }

.booking { background: var(--color-main-pale) url("../assets/booking-background.png") center / cover no-repeat; }
.booking__panel { width: var(--container); margin-inline: auto; padding: var(--section-pad-m); background: var(--color-base); }
.booking-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: var(--space-3xl); align-items: start; }
.booking-options { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.booking-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); border: var(--border); background: var(--color-base); font-weight: 700; transition: var(--transit); }
.booking-option--line { border-color: var(--color-main); }
.booking-option--phone { border-color: var(--color-cta); }
.booking-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.form-field { display: grid; gap: var(--space-xs); }
.form-field--wide { grid-column: 1 / -1; }
.form-field label { font-size: var(--step--1); font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: var(--space-sm); border: 1px solid var(--color-line-form); border-radius: 0; background: var(--color-base); color: var(--color-text); }
.form-field textarea { min-height: calc(var(--space-4xl) * 1.4); resize: vertical; }
.check-row { grid-column: 1 / -1; display: flex; gap: var(--space-xs); align-items: start; font-size: var(--step--1); }
.form-submit { grid-column: 1 / -1; min-height: var(--cta-height); border: var(--border); border-color: var(--color-cta); background: var(--color-cta); color: var(--color-text); font-weight: 700; }
.form-note { grid-column: 1 / -1; margin: 0; font-size: var(--step--1); }
.booking-hours { margin: var(--space-md) 0 0; padding-block: var(--space-sm); border-block: var(--border); font-size: var(--step--1); font-weight: 700; }

.menu-page-intro { padding-block: var(--section-pad-m); border-bottom: var(--border); }
.menu-page-intro__grid { width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 1fr .9fr; gap: var(--space-3xl); align-items: end; }
.menu-page-intro h1, .staff-page-intro h1, .access-panel h1 { margin: 0; font-size: var(--step-4); }
.access-panel h1 { font-size: var(--step-3); }
.menu-page-intro h1 + p { margin: var(--space-md) 0 0; font-size: var(--step-1); }
.menu-page-quick { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: var(--border); border-bottom: var(--border); }
.menu-page-quick div { padding: var(--space-md); border-inline-end: var(--border); }
.menu-page-quick div:last-child { border: 0; }
.menu-page-quick dt { font-size: var(--step--1); font-weight: 700; }
.menu-page-quick dd { margin: var(--space-sm) 0 0; font-family: var(--font-en); font-size: var(--step-1); font-weight: 700; white-space: nowrap; }

.staff-page-intro { padding-block: var(--section-pad-m); background: var(--color-main-pale); }
.staff-page-intro__head { display: grid; grid-template-columns: 1fr .8fr; gap: var(--space-3xl); align-items: end; }
.staff-page-intro__head > p { margin: 0; font-size: var(--step-1); }
.staff-page-intro__faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-3xl); }
.staff-page-intro__faces img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--color-base); object-fit: cover; object-position: center top; }
.staff-page-intro__faces img:nth-child(even) { background: var(--color-accent); }

.access-page-intro { padding-block: var(--section-pad-m); }
.access-page-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-3xl); align-items: stretch; }
.access-page-layout > *, .access-grid > * { min-width: 0; }
.access-map { display: grid; grid-template-rows: 1fr auto; border: var(--border); background: var(--color-main-pale); overflow: hidden; }
.access-map iframe { width: 100%; min-height: 100%; border: 0; }
.access-map__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); border-top: var(--border); background: var(--color-base); font-weight: 700; }
.access-panel > p:not(.section-kicker) { margin: var(--space-md) 0 0; }

.page-hero { padding-block: var(--section-pad-l) var(--section-pad-m); background: var(--color-main-pale); }
.page-hero__inner { width: var(--container); margin-inline: auto; }
.page-hero h1 { margin: 0; font-size: var(--step-5); }
.page-hero p { margin: var(--space-md) 0 0; font-size: var(--step-1); }
.menu-detail { display: grid; grid-template-columns: minmax(13rem, .45fr) 1fr; gap: var(--space-3xl); padding-block: var(--space-2xl); border-top: var(--border); }
.menu-detail:last-child { border-bottom: var(--border); }
.menu-detail__head { display: grid; gap: var(--space-sm); align-content: start; }
.menu-detail__head img { width: var(--space-4xl); }
.menu-detail__head h2 { margin: 0; font-size: var(--step-3); }
.menu-detail__lines { list-style: none; margin: 0; padding: 0; }
.menu-detail__lines li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); padding-block: var(--space-md); border-top: var(--border); }
.menu-detail__lines li:last-child { border-bottom: var(--border); }
.menu-detail__lines p { grid-column: 1 / -1; margin: 0; font-size: var(--step--1); }

.staff-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: var(--space-2xl); }
.staff-profile { display: grid; grid-template-columns: clamp(12rem, 20vw, 17rem) minmax(0, 1fr); gap: clamp(var(--space-xl), 5vw, var(--space-4xl)); align-items: center; padding-top: var(--space-xl); border-top: var(--border); }
.staff-profile__art { aspect-ratio: 4 / 5; background: var(--color-main-pale); border-radius: var(--radius); overflow: hidden; }
.staff-profile__art--warm { background: var(--color-accent); }
.staff-profile__art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.staff-profile h3 { margin: 0; font-size: var(--step-2); }
.staff-role { margin: var(--space-xs) 0; font-size: var(--step--1); font-weight: 700; }
.staff-profile p { margin: var(--space-sm) 0 0; }
.staff-meta { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--border); font-size: var(--step--1); }

.recruit-band { padding-block: var(--section-pad-m); background: var(--color-accent); }
.recruit-band__inner { width: var(--container); margin-inline: auto; display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.recruit-band h2 { margin: 0; font-size: var(--step-3); }

.footer { padding: var(--section-pad-s) 0 calc(var(--section-pad-s) + var(--cta-height)); border-top: var(--border); background: var(--color-base); }
.footer__inner { width: var(--container); margin-inline: auto; }
.footer__town { width: min(100%, 52rem); margin: 0 auto var(--space-xl); }
.footer__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); padding-top: var(--space-lg); border-top: var(--border); }
.footer__name { margin: 0; font-family: var(--font-jp-disp); font-size: var(--step-2); font-weight: 700; }
.footer__info, .footer__demo { margin: var(--space-xs) 0 0; font-size: var(--step--1); }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-sm); font-size: var(--step--1); font-weight: 700; }
.mobile-cta { display: none; }

@media (hover: hover) and (pointer: fine) {
  .header-book:hover, .form-submit:hover { border-color: var(--color-text); }
  .booking-option:hover { outline: var(--border); outline-color: var(--color-main); }
  .text-link:hover::after { transform: translateX(var(--arrow-shift)); }
}

@media (max-width: 56rem) {
  .global-nav { gap: var(--space-sm); }
  .hero__wash { background: color-mix(in srgb, var(--color-base) 20%, transparent); }
  .hero__cloud { width: 22vw; }
  .hero__tree { width: 30vw; }
  .hero__bird { width: 10vw; }
  .menu-groups, .flow { grid-template-columns: repeat(2, 1fr); }
  .flow__item:nth-child(2) { border-inline-end: 0; }
  .flow__item:nth-child(-n + 2) { border-bottom: var(--border); }
  .map-layout, .access-grid, .booking-grid { grid-template-columns: 1fr; }
  .menu-page-intro__grid, .staff-page-intro__head, .access-page-layout { grid-template-columns: 1fr; }
  .access-map iframe { min-height: 26rem; }
  .staff-preview, .quote-layout { grid-template-columns: 1fr; }
  .staff-preview > .text-link { grid-column: auto; margin-top: 0; }
}

@media (max-width: 43rem) {
  html { scroll-padding-top: var(--header-height); }
  .site-header { height: var(--header-height); }
  .header-inner { min-height: 100%; flex-wrap: nowrap; gap: var(--space-sm); }
  .brand { flex: 0 0 auto; font-size: var(--step-1); }
  .brand small { display: none; }
  .global-nav { order: initial; width: auto; min-width: 0; flex: 1; gap: var(--space-sm); overflow-x: auto; padding: 0; border: 0; }
  .global-nav a { flex: 0 0 auto; }
  .header-book { display: none; }
  .section-title--split, .lead-block, .quote-layout { grid-template-columns: 1fr; }
  .section-title h1, .page-hero h1 { font-size: var(--step-4); }
  .hero { display: flex; flex-direction: column; min-height: 0; overflow: visible; background: var(--color-base); }
  .hero__scene { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 16 / 9; }
  .hero__town { object-fit: cover; object-position: center; }
  .hero__wash { background: color-mix(in srgb, var(--color-base) 20%, transparent); }
  .hero__float { display: none; }
  .hero__content { width: var(--container); min-height: 0; margin-inline: auto; padding: 0; display: block; }
  .hero__copy { max-width: none; padding: var(--space-xl) 0; background: transparent; backdrop-filter: none; }
  .hero__title { font-size: var(--step-5); }
  .hero__cloud { top: 7vw; width: 30vw; }
  .hero__tree { right: -7vw; bottom: 26vw; width: 38vw; }
  .hero__bird { top: 28vw; left: 64vw; width: 12vw; }
  .menu-groups, .flow { grid-template-columns: 1fr; }
  .staff-preview__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .menu-page-quick { grid-template-columns: 1fr; }
  .menu-page-quick div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); border-inline-end: 0; border-bottom: var(--border); }
  .menu-page-quick div:last-child { border-bottom: 0; }
  .menu-page-quick dd { margin: 0; }
  .staff-page-intro__faces { grid-template-columns: repeat(2, 1fr); }
  .access-map iframe { min-height: 16rem; }
  .flow__item { border-inline-end: 0; border-bottom: var(--border); }
  .flow__item:last-child { border-bottom: 0; }
  .flow__item:nth-child(-n + 2) { border-bottom: var(--border); }
  .price-list li { grid-template-columns: var(--space-xl) 1fr; }
  .price-list b { grid-column: 2; }
  .notice-list li { grid-template-columns: 1fr; gap: var(--space-xs); }
  .booking__panel { padding: var(--section-pad-s) var(--space-md); }
  .booking-form { grid-template-columns: 1fr; }
  .form-field--wide, .check-row, .form-submit, .form-note { grid-column: auto; }
  .menu-detail, .staff-profile { grid-template-columns: 1fr; }
  .menu-detail__head img { width: var(--space-3xl); }
  .staff-profile__art { width: min(100%, 16rem); }
  .info-table div { grid-template-columns: 1fr; gap: var(--space-xs); }
  .recruit-band__inner, .footer__grid { display: grid; grid-template-columns: 1fr; }
  .footer__nav { justify-content: start; }
  .mobile-cta { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); min-height: var(--cta-height); border-top: var(--border); background: var(--color-base); }
  .mobile-cta a { display: grid; place-items: center; border-inline-end: var(--border); font-size: var(--step--1); font-weight: 700; }
  .mobile-cta a:last-child { border: 0; }
  .mobile-cta__book { background: var(--color-cta); color: var(--color-text); }
  .mobile-cta__line { background: var(--color-main); color: var(--color-text); }
}

.booking-grid--single { grid-template-columns: minmax(0, 1fr); }
.mobile-cta--phone { grid-template-columns: minmax(0, 1fr); }