:root {
  --ts-canvas: #f5f0e7;
  --ts-surface: #faf8f3;
  --ts-sepia: #8a6a4a;
  --ts-brown: #59483b;
  --ts-ink: #302a25;
  --ts-muted: #746b63;
  --ts-line: #d8cec0;
  --ts-focus: #276a72;
  --ts-heading: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --ts-body: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ts-canvas); color: var(--ts-ink); font-family: var(--ts-body); text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 3px; }

.site-header { position: relative; z-index: 20; background: rgb(250 248 243 / 0.96); border-bottom: 1px solid var(--ts-line); }
.site-header__inner { min-height: 76px; padding-inline: clamp(20px, 4vw, 48px); gap: 28px; }
.site-brand { flex: 0 1 auto; margin: 0; font-family: var(--ts-heading); font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; }
.site-brand a { color: var(--ts-ink); text-decoration: none; }
.site-nav { margin-left: auto; }
.site-nav .wp-block-navigation-item { border: 1px solid transparent; border-radius: 999px; transition: background-color 180ms ease, border-color 180ms ease; }
.site-nav .wp-block-navigation-item:hover { background: #f0e7da; border-color: var(--ts-line); }
.site-nav a { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 11px; text-decoration: none; }
.site-nav .current-menu-item { background: var(--ts-brown); border-color: var(--ts-brown); }
.site-nav .current-menu-item a { color: #fff; }
.site-header__action { flex: 0 0 auto; }

.site-main { min-height: 60vh; }
.page-hero, .single-hero { padding: clamp(64px, 10vw, 128px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.single-hero .wp-block-post-featured-image { margin-top: 40px; }
.wp-block-post-content { padding-inline: 20px; padding-bottom: clamp(72px, 10vw, 128px); }

.home-hero { min-height: min(78vh, 760px) !important; }
.home-hero__content { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.home-hero__content h1 { max-width: 760px; margin-inline: 0; text-shadow: 0 2px 24px rgb(0 0 0 / 0.45); }
.home-hero__actions { margin-top: 30px; }
.home-hero .is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; background: rgb(48 42 37 / 0.24); }

.home-news { padding: 30px clamp(20px, 4vw, 48px); background: var(--ts-surface); border-bottom: 1px solid var(--ts-line); }
.home-news__inner { display: grid; grid-template-columns: minmax(130px, .25fr) 1fr; gap: 24px 48px; align-items: start; }
.home-news h2 { margin: 8px 0 0; letter-spacing: .14em; }
.home-news h2 span { display: block; margin-top: 5px; color: var(--ts-muted); font: 400 .78rem var(--ts-body); letter-spacing: .06em; }
.home-news__query .wp-block-post-template { margin: 0; padding: 0; }
.home-news__query .wp-block-post { list-style: none; }
.home-news__row { gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--ts-line); }
.home-news__row time { min-width: 86px; color: var(--ts-muted); font-size: .86rem; }
.home-news__row h3 { margin: 0; font-family: var(--ts-body); font-weight: 500; }
.home-news__row a { color: var(--ts-ink); text-decoration: none; }

.home-section { padding: clamp(72px, 10vw, 128px) clamp(20px, 4vw, 48px); }
.home-section > .alignwide { margin-inline: auto; }
.home-section .wp-block-columns { gap: clamp(36px, 7vw, 96px); }
.editorial-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.home-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.home-menu-grid > * { margin-block-start: 0 !important; }
.menu-cover { height: clamp(340px, 36vw, 520px); min-height: 0 !important; }
.menu-cover .wp-block-cover__image-background { width: 100%; height: 100%; object-fit: cover; }
.menu-cover h2 { margin: 0; }
.menu-cover h2 a { color: #fff; text-decoration: none; text-shadow: 0 2px 18px rgb(0 0 0 / 0.5); }
.menu-cover h2 a::after { content: ""; display: block; width: 56px; margin: 14px auto 0; border-bottom: 1px solid currentColor; }

.home-reservation { background-position: center 58%; }
.home-reservation .wp-block-group { gap: 32px; padding-inline: 20px; }
.home-reservation .is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; }
.home-event__query .wp-block-post-template { margin: 0; padding: 0; }
.home-event__query .wp-block-post { list-style: none; }
.access-note { height: 100%; padding: clamp(32px, 5vw, 64px); background: var(--ts-surface); border-top: 1px solid var(--ts-line); border-bottom: 1px solid var(--ts-line); }
.home-guide__cards { margin-top: clamp(32px, 5vw, 56px); gap: clamp(22px, 3vw, 38px) !important; }
.home-guide__cards .wp-block-column { overflow: hidden; background: var(--ts-canvas); border: 1px solid var(--ts-line); }
.home-guide__cards figure { margin: 0; }
.home-guide__cards img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-guide__cards h3, .home-guide__cards p { margin-inline: 22px; }
.home-guide__cards p:last-child { margin-bottom: 24px; }

.site-footer { padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 48px); }
.site-footer a { color: #fff; }
.site-footer__brand { font-family: var(--ts-heading); font-size: 1.2rem; }
.site-footer__nav { margin-bottom: 32px; }

.story-grid, .event-list, .editorial-list { padding: 0 20px clamp(72px, 10vw, 128px); }
.story-card { height: 100%; padding-bottom: 32px; border-bottom: 1px solid var(--ts-line); }
.story-card .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.event-row, .editorial-row { padding-block: 36px; border-bottom: 1px solid var(--ts-line); }
.event-row { gap: clamp(24px, 5vw, 64px); }
.back-link { padding: 0 20px 80px; }
.event-single, .story-single { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.event-single .wp-block-post-featured-image img, .story-single .wp-block-post-featured-image img { width: 100%; max-height: 680px; object-fit: cover; }
.event-single + .tsunagu-detail-list, .story-single ~ .tsunagu-detail-list { width: min(760px, calc(100% - 40px)); margin: 0 auto clamp(36px, 6vw, 64px); }
.event-single ~ .wp-block-post-content, .story-single ~ .wp-block-post-content { width: min(760px, calc(100% - 40px)); margin-inline: auto; padding-inline: 0; }
.event-single ~ .back-link, .story-single ~ .back-link { width: min(760px, calc(100% - 40px)); margin-inline: auto; padding-inline: 0; }
.tsunagu-editorial-page { width: min(1120px, 100%); }
.tsunagu-editorial-page > .wp-block-image:first-child img { width: 100%; max-height: 620px; object-fit: cover; }
.tsunagu-story-columns { margin-block: clamp(48px, 8vw, 96px); gap: clamp(32px, 6vw, 80px); }
.tsunagu-story-columns img { aspect-ratio: 4 / 3; object-fit: cover; }
.tsunagu-editorial-page .wp-block-quote { margin-block: clamp(48px, 7vw, 80px); padding: 28px clamp(22px, 5vw, 52px); border-left: 3px solid var(--ts-sepia); background: var(--ts-surface); font-family: var(--ts-heading); font-size: 1.25rem; }
.tsunagu-menu-cards { align-items: stretch; margin-block: clamp(36px, 6vw, 68px); gap: clamp(20px, 3vw, 36px) !important; }
.tsunagu-menu-card { padding-bottom: 24px; background: var(--ts-surface); border: 1px solid var(--ts-line); }
.tsunagu-menu-card figure { margin: 0; }
.tsunagu-menu-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tsunagu-menu-card h3, .tsunagu-menu-card p { margin-inline: 20px; }
.tsunagu-menu-card .tsunagu-price { font-weight: 700; color: var(--ts-brown); }
.tsunagu-drink-list { padding: 24px clamp(20px, 4vw, 42px); background: var(--ts-surface); border-block: 1px solid var(--ts-line); }

.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.wp-block-button__link:hover { background: var(--ts-brown); color: #fff; }
.is-style-outline > .wp-block-button__link { border: 1px solid var(--ts-brown); color: var(--ts-brown); background: transparent; }

.is-reveal-ready .tsunagu-reveal { opacity: 0; transform: translateY(12px); transition: opacity 420ms cubic-bezier(.2,.7,.2,1), transform 420ms cubic-bezier(.2,.7,.2,1); }
.is-reveal-ready .tsunagu-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 960px) {
  .site-header__inner { min-height: 68px; }
  .site-header__action { display: none; }
  .home-menu-grid { grid-template-columns: 1fr; }
  .menu-cover { height: 54vw; }
  .story-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .site-header__inner { padding-inline: 20px; }
  .site-brand { max-width: calc(100vw - 92px); white-space: normal; line-height: 1.35; }
  .home-hero { min-height: 72vh !important; align-items: end; }
  .home-hero__content { padding-bottom: 56px; }
  .home-hero__content h1 { font-size: clamp(2.35rem, 12vw, 3.6rem) !important; }
  .home-hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .home-hero__actions .wp-block-button, .home-hero__actions .wp-block-button__link { width: 100%; }
  .home-hero__actions .wp-block-button:nth-child(2) { order: -1; grid-column: 1 / -1; }
  .home-section { padding-block: 72px; }
  .home-section .wp-block-columns { gap: 32px; }
  .home-about .wp-block-column:first-child, .home-takeout .wp-block-column:first-child { order: 1; }
  .home-about .wp-block-column:last-child, .home-takeout .wp-block-column:last-child { order: 0; }
  .home-news__inner { grid-template-columns: 1fr; gap: 10px; }
  .home-news__row { display: grid; gap: 4px; }
  .menu-cover { height: 86vw; }
  .home-reservation .wp-block-group { align-items: flex-start; }
  .story-grid .wp-block-post-template { grid-template-columns: 1fr; }
  .site-footer .wp-block-columns { gap: 40px; }
}

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