:root {
  --paper: #f3eee5;
  --paper-deep: #e9e1d5;
  --ink: #241d19;
  --muted: #746a62;
  --accent: #a55e45;
  --line: rgba(36, 29, 25, .18);
  --white: #fffaf2;
  --serif: "Cormorant Garamond", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Yu Gothic", sans-serif;
  --site-width: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; font-weight: 300; line-height: 2; }
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin-top: 0; }
h1, h2, h3 { margin-bottom: 0; font-family: var(--serif); font-weight: 500; line-height: .94; }
button { color: inherit; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.content-section { width: min(var(--site-width), calc(100% - 96px)); margin-inline: auto; }
.section-label { margin-bottom: 30px; color: var(--accent); font-size: .68rem; font-weight: 500; letter-spacing: .27em; line-height: 1.5; }
.section-label.light { color: #d7b39f; }
.text-button { display: inline-flex; align-items: center; gap: 52px; padding: 12px 0 9px; border-bottom: 1px solid currentColor; font-family: var(--serif); font-size: .82rem; font-weight: 600; letter-spacing: .17em; text-decoration: none; transition: color .3s, gap .3s; }
.text-button:hover { gap: 62px; color: var(--accent); }
.text-button.light { color: var(--white); }.text-button.light:hover { color: #d7b39f; }

/* Header */
.site-header { height: 94px; position: relative; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { width: min(var(--site-width), calc(100% - 96px)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: baseline; gap: 8px; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: .16em; line-height: 1; text-decoration: none; }
.brand span { color: var(--accent); font-size: .56rem; letter-spacing: .25em; }
.global-nav { display: flex; gap: 44px; align-items: center; }
.global-nav a { position: relative; padding: 9px 0; font-family: var(--serif); font-size: .78rem; font-weight: 600; letter-spacing: .19em; text-decoration: none; }
.global-nav a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.global-nav a:hover::after, .global-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; }
.nav-toggle > span:not(.sr-only) { display: block; width: 100%; height: 1px; margin: 6px 0; background: var(--ink); transition: transform .3s, opacity .3s; }

/* Home */
.home-hero { min-height: calc(100vh - 94px); position: relative; display: flex; align-items: center; overflow: hidden; color: var(--white); background: #33261e; }
.home-hero-image, .home-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero-image { object-fit: cover; object-position: center; }
.home-hero-shade { background: linear-gradient(90deg, rgba(24,17,13,.74) 0%, rgba(24,17,13,.42) 38%, rgba(24,17,13,.04) 72%); }
.home-hero-content { width: min(var(--site-width), calc(100% - 96px)); position: relative; z-index: 1; margin-inline: auto; padding: 80px 0; }
.home-hero h1 { margin-bottom: 34px; font-size: clamp(4.8rem, 9.3vw, 9rem); font-weight: 400; letter-spacing: -.025em; }
.home-hero-content > p:not(.section-label) { margin-bottom: 40px; font-size: .98rem; line-height: 2.2; }
.hero-scroll { position: absolute; right: max(48px, calc((100vw - var(--site-width)) / 2)); bottom: 0; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: var(--serif); font-size: .58rem; letter-spacing: .25em; }
.hero-scroll span { width: 1px; height: 65px; display: block; background: rgba(255,255,255,.65); }
.intro { padding: 180px 0; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(70px, 10vw, 150px); }
.intro-copy h2, .section-heading h2, .story-lead h2, .access-route h2, .map-heading h2 { font-size: clamp(3.9rem, 7vw, 6.9rem); letter-spacing: -.025em; }
.lead-ja { margin: 55px 0 24px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 1.3rem; line-height: 2; }
.intro-copy > p:not(.section-label):not(.lead-ja) { max-width: 470px; margin-bottom: 35px; color: var(--muted); }
.intro-image-wrap { position: relative; margin-bottom: 0; padding-bottom: 32px; }
.intro-image-wrap::before { content: ""; position: absolute; right: -32px; bottom: 0; width: 78%; height: 78%; background: var(--accent); }
.intro-image-wrap img { width: 100%; aspect-ratio: 4 / 5; position: relative; object-fit: cover; }
.intro-image-wrap figcaption { position: relative; margin: 18px 0 0; color: var(--muted); font-family: var(--serif); font-size: .75rem; font-style: italic; letter-spacing: .06em; }
.favorites-section { background: var(--paper-deep); }
.favorites-inner { padding: 160px 0; }
.section-heading { margin-bottom: 75px; display: flex; justify-content: space-between; align-items: end; gap: 60px; }
.section-heading .section-label { margin-bottom: 25px; }
.section-heading > p { margin-bottom: 10px; color: var(--muted); }
.favorite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.product-card a { display: block; text-decoration: none; }
.product-image { aspect-ratio: 1 / 1.12; position: relative; overflow: hidden; background: #d8cdc0; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.product-card:hover .product-image img { transform: scale(1.035); filter: brightness(.93); }
.product-image span { width: 42px; height: 42px; position: absolute; top: 0; left: 0; display: grid; place-items: center; color: var(--paper); background: var(--ink); font-family: var(--serif); font-size: .72rem; }
.product-info { padding: 25px 0 12px; display: flex; justify-content: space-between; align-items: end; gap: 20px; border-bottom: 1px solid var(--line); }
.product-kind { margin-bottom: 8px; color: var(--accent); font-family: var(--serif); font-size: .65rem; font-weight: 600; letter-spacing: .16em; }
.product-info h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 400; line-height: 1.5; }
.price { margin-bottom: 3px; font-family: var(--serif); font-size: 1.1rem; }
.product-description { margin: 15px 0 0; color: var(--muted); font-size: .82rem; }
.center-link { margin-top: 70px; text-align: center; }
.outline-button { min-width: 220px; display: inline-block; padding: 17px 30px; border: 1px solid var(--ink); font-family: var(--serif); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-decoration: none; transition: color .3s, background .3s; }
.outline-button:hover { color: var(--paper); background: var(--ink); }
.visit-section { min-height: 610px; padding: 110px max(48px, calc((100vw - var(--site-width)) / 2)); display: grid; grid-template-columns: 1fr .5fr; align-items: end; gap: 80px; color: var(--white); background: var(--accent); }
.visit-copy h2 { margin-bottom: 40px; font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 400; }
.visit-copy > p:not(.section-label) { margin-bottom: 38px; }
.visit-details { padding-bottom: 4px; border-top: 1px solid rgba(255,255,255,.35); }
.visit-details p { margin: 0; padding: 18px 0; display: flex; justify-content: space-between; gap: 30px; border-bottom: 1px solid rgba(255,255,255,.35); font-family: var(--serif); font-size: 1.05rem; }
.visit-details span { font-size: .63rem; letter-spacing: .18em; }

/* Inner pages */
.page-hero { min-height: 510px; padding: 110px max(48px, calc((100vw - var(--site-width)) / 2)); display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 80px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(6.4rem, 13vw, 12rem); font-weight: 400; letter-spacing: -.045em; }
.page-intro { margin-bottom: 18px; color: var(--muted); font-size: .95rem; }

/* Menu */
.menu-page { padding: 100px 0 160px; }
.filter-bar { margin-bottom: 100px; display: flex; gap: 9px; flex-wrap: wrap; }
.filter-button { min-width: 118px; padding: 12px 24px; background: transparent; border: 1px solid var(--line); font-family: var(--serif); font-size: .7rem; font-weight: 600; letter-spacing: .17em; cursor: pointer; transition: color .25s, background .25s, border-color .25s; }
.filter-button:hover, .filter-button.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.menu-group { padding: 80px 0; display: grid; grid-template-columns: .65fr 1.35fr; gap: 80px; border-top: 1px solid var(--line); }
.menu-group[hidden] { display: none; }
.menu-group-title h2 { font-size: clamp(4.3rem, 7vw, 6.4rem); }
.menu-row { padding: 25px 0; display: grid; grid-template-columns: 1fr auto; gap: 30px; border-bottom: 1px solid var(--line); }
.menu-row:first-child { padding-top: 0; }.menu-row h3 { margin-bottom: 8px; font-family: var(--sans); font-size: .96rem; font-weight: 400; line-height: 1.5; }
.menu-row h3 span { margin-left: 10px; color: var(--accent); font-family: var(--serif); font-size: .58rem; letter-spacing: .12em; }
.menu-row p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }
.menu-row strong { font-family: var(--serif); font-size: 1rem; font-weight: 500; }
.menu-caution { margin: 20px 0 0; color: var(--muted); font-size: .72rem; }

/* Story */
.story-lead { padding: 170px 0; display: grid; grid-template-columns: .45fr 1fr; gap: 90px; }
.story-lead > div { max-width: 720px; }.story-lead > div > p:not(.lead-ja) { max-width: 620px; color: var(--muted); }
.story-image { width: min(1460px, calc(100% - 48px)); height: min(72vw, 820px); position: relative; margin: 0 auto; overflow: hidden; }
.story-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.76); }
.story-image > p { max-width: 840px; position: absolute; left: 8%; bottom: 8%; margin: 0; color: var(--white); font-family: "Yu Mincho", serif; font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1.8; }
.values { padding: 160px 0; }.value-list { border-top: 1px solid var(--line); }
.value-item { padding: 45px 0; display: grid; grid-template-columns: 80px .8fr 1fr; gap: 50px; align-items: start; border-bottom: 1px solid var(--line); }
.value-item > span { color: var(--accent); font-family: var(--serif); }.value-item h3 { font-size: clamp(2rem, 4vw, 3.25rem); }.value-item p { max-width: 430px; margin-bottom: 0; color: var(--muted); }
.facts-section { padding: 150px 0; color: var(--white); background: var(--ink); }.facts-section .content-section { width: min(var(--site-width), calc(100% - 96px)); }
.facts-section .section-heading > p { color: #bdb1a8; }.facts-section .section-heading h2 { color: var(--white); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
.facts-grid > div { min-height: 255px; padding: 28px; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.facts-grid dt { color: #d7b39f; font-family: var(--serif); font-size: .62rem; letter-spacing: .17em; }.facts-grid dd { height: calc(100% - 35px); margin: 0; display: flex; flex-direction: column; justify-content: space-between; }.facts-grid strong { font-family: var(--serif); font-size: clamp(2.5rem, 4.2vw, 4rem); font-weight: 400; }.facts-grid span { color: #bdb1a8; font-size: .76rem; }

/* Access */
.access-content { padding: 160px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 130px; }
.access-info h2 { margin-bottom: 50px; font-size: clamp(3.4rem, 6vw, 5.8rem); }.access-info dl { margin-bottom: 28px; border-top: 1px solid var(--line); }
.access-info dl > div { padding: 24px 0; display: grid; grid-template-columns: 155px 1fr; border-bottom: 1px solid var(--line); }
.access-info dt { color: var(--accent); font-family: var(--serif); font-size: .65rem; font-weight: 600; letter-spacing: .16em; }.access-info dd { margin: 0; }.access-info dd span { color: var(--muted); font-size: .8rem; }.fiction-note { color: var(--muted); font-size: .7rem; }
.access-route { padding-top: 110px; }.access-route h2 { margin-bottom: 48px; }.access-route > p:not(.section-label) { max-width: 480px; margin-bottom: 24px; color: var(--muted); }
.map-section { padding: 125px 0 60px; background: var(--paper-deep); }.map-heading { margin-bottom: 60px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.map-frame { width: min(1460px, calc(100% - 48px)); height: 620px; margin-inline: auto; background: #d8d0c6; }.map-frame iframe { width: 100%; height: 100%; display: block; border: 0; filter: grayscale(1) sepia(.16) contrast(.92); }
.map-credit { margin-top: 15px; color: var(--muted); font-size: .66rem; }.map-credit a { text-underline-offset: 3px; }

/* Footer */
.site-footer { padding: 90px max(48px, calc((100vw - var(--site-width)) / 2)) 28px; color: #d8ccc1; background: #191411; }
.footer-main { padding-bottom: 85px; display: grid; grid-template-columns: 1fr auto auto; gap: clamp(70px, 10vw, 150px); }
.footer-brand { color: var(--white); font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: .8; letter-spacing: -.02em; text-decoration: none; }
.tagline { margin: 28px 0 0; color: #8f8279; font-family: var(--serif); font-size: .9rem; font-style: italic; letter-spacing: .08em; }
.footer-label { margin-bottom: 20px; color: #a77d68; font-family: var(--serif); font-size: .6rem; letter-spacing: .2em; }.footer-hours p:not(.footer-label) { margin-bottom: 2px; font-family: var(--serif); font-size: .9rem; }.footer-social { display: flex; flex-direction: column; align-items: flex-start; }.footer-social a { margin-bottom: 6px; font-family: var(--serif); font-size: .86rem; text-decoration: none; }.footer-social a:hover { color: var(--white); }
.footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255,255,255,.12); }.footer-bottom p { margin: 0; color: #786d66; font-size: .62rem; }
.back-to-top { width: 50px; height: 50px; position: fixed; right: 24px; bottom: 24px; z-index: 80; display: grid; place-items: center; color: var(--paper); background: var(--ink); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; opacity: 0; visibility: hidden; transform: translateY(12px); cursor: pointer; transition: opacity .3s, visibility .3s, transform .3s, background .3s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }.back-to-top:hover { background: var(--accent); }

/* Enhancement: content is visible unless JavaScript adds the class */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.65,.3,1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .content-section, .header-inner { width: calc(100% - 48px); }.site-header { height: 76px; }.brand { font-size: 1.05rem; }.nav-toggle { display: block; position: relative; z-index: 102; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.nav-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }.nav-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .global-nav { position: fixed; inset: 0; z-index: 101; padding: 120px 24px 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--paper); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }.global-nav.is-open { opacity: 1; visibility: visible; }.global-nav a { font-size: 1.4rem; }
  .home-hero { min-height: calc(100svh - 76px); }.home-hero-content { width: calc(100% - 48px); }.home-hero h1 { font-size: clamp(4rem, 16vw, 7rem); }.hero-scroll { right: 24px; }.home-hero-image { object-position: 62% center; }
  .intro { padding: 110px 0; grid-template-columns: 1fr; gap: 70px; }.intro-copy { max-width: 620px; }.intro-image-wrap { width: 85%; margin-left: auto; }.intro-image-wrap::before { right: -20px; }
  .favorites-inner { padding: 110px 0; }.section-heading { margin-bottom: 55px; align-items: start; flex-direction: column; gap: 24px; }.favorite-grid { gap: 16px; }.product-info { align-items: start; flex-direction: column; gap: 8px; }.price { margin: 0; }
  .visit-section { min-height: 570px; padding: 85px 24px; grid-template-columns: 1fr; }.visit-details { max-width: 480px; }
  .page-hero { min-height: 430px; padding: 90px 24px 60px; grid-template-columns: 1fr; gap: 45px; }.page-hero h1 { font-size: clamp(5.5rem, 22vw, 9rem); }
  .menu-page { padding: 75px 0 110px; }.filter-bar { margin-bottom: 65px; }.menu-group { grid-template-columns: 1fr; gap: 50px; }
  .story-lead { padding: 110px 0; grid-template-columns: 1fr; gap: 35px; }.story-image { width: calc(100% - 24px); }.values { padding: 110px 0; }.value-item { grid-template-columns: 50px 1fr; }.value-item p { grid-column: 2; }.facts-section { padding: 110px 0; }.facts-grid { grid-template-columns: 1fr 1fr; }
  .access-content { padding: 110px 0; grid-template-columns: 1fr; gap: 80px; }.access-route { padding-top: 0; }.map-section { padding-top: 95px; }.map-frame { width: calc(100% - 24px); height: 500px; }
  .footer-main { grid-template-columns: 1fr 1fr; }.footer-main > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 14px; }.content-section, .header-inner { width: calc(100% - 36px); }.section-label { margin-bottom: 20px; }.home-hero-content { width: calc(100% - 36px); padding-bottom: 110px; }.home-hero-shade { background: linear-gradient(90deg, rgba(24,17,13,.78), rgba(24,17,13,.3)); }.home-hero h1 { font-size: clamp(3.8rem, 19vw, 5.6rem); }.home-hero-content > p:not(.section-label) br { display: none; }
  .intro { padding: 90px 0; }.intro-copy h2, .section-heading h2, .story-lead h2, .access-route h2, .map-heading h2 { font-size: 3.65rem; }.intro-image-wrap { width: calc(100% - 12px); }.lead-ja { margin-top: 38px; font-size: 1.12rem; }
  .favorites-inner { padding: 90px 0; }.favorite-grid { grid-template-columns: 1fr; gap: 55px; }.product-info { flex-direction: row; align-items: end; }.product-image { aspect-ratio: 1 / 1; }.center-link { margin-top: 55px; }
  .visit-section { padding: 75px 18px; }.visit-copy h2 { font-size: 4.1rem; }.visit-details p { font-size: .9rem; }
  .page-hero { min-height: 360px; padding: 70px 18px 50px; gap: 32px; }.page-hero h1 { font-size: 5.3rem; }.menu-page { padding-top: 55px; }.filter-bar { gap: 6px; }.filter-button { min-width: 0; flex: 1 1 calc(50% - 6px); }.menu-group { padding: 60px 0; }.menu-row { gap: 15px; }.menu-group-title h2 { font-size: 4rem; }
  .story-lead { padding: 90px 0; }.story-image { width: 100%; height: 75svh; }.story-image > p { left: 24px; right: 24px; bottom: 40px; }.values { padding: 90px 0; }.value-item { padding: 35px 0; grid-template-columns: 35px 1fr; gap: 25px; }.value-item h3 { font-size: 2.25rem; }.facts-section .content-section { width: calc(100% - 36px); }.facts-grid { grid-template-columns: 1fr; }.facts-grid > div { min-height: 200px; }
  .access-content { padding: 90px 0; }.access-info dl > div { grid-template-columns: 1fr; gap: 8px; }.map-heading { align-items: start; flex-direction: column; }.map-frame { width: 100%; height: 430px; }
  .site-footer { padding: 70px 18px 22px; }.footer-main { padding-bottom: 60px; grid-template-columns: 1fr; gap: 50px; }.footer-main > div:first-child { grid-column: auto; }.footer-bottom { flex-direction: column; gap: 8px; }.back-to-top { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .reveal { opacity: 1; transform: none; }
}
