/* =========================================================================
   YOIN — Shared Retreat  |  static styles
   Source: app/globals.css (Vinext prototype). Framework-free extraction.
   Changes from source:
     - removed  @import "tailwindcss" / "tw-animate-css" / "shadcn/tailwind.css"
     - removed  @custom-variant / @theme inline {}  (Tailwind v4 directives)
     - added    --font-display / --font-mincho-jp into :root (were set by next/font)
     - added    .menu-button base reset (was the shadcn <Button> primitive)
   Everything else is byte-for-byte the original cascade.
   ========================================================================= */

:root {
  /* fonts formerly provided by next/font/google on <body> */
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mincho-jp: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --background: #f0ede7;
  --foreground: #403d3c;
  --card: #f5f2ec;
  --card-foreground: #403d3c;
  --popover: #f0ede7;
  --popover-foreground: #403d3c;
  --primary: #403d3c;
  --primary-foreground: #f5f2ec;
  --secondary: #d9d2c8;
  --secondary-foreground: #403d3c;
  --muted: #dfd8ce;
  --muted-foreground: #79736e;
  --accent: #7b826f;
  --accent-foreground: #f5f2ec;
  --destructive: #9d4d42;
  --border: #8c8781;
  --input: #8c8781;
  --ring: #7b826f;
  --radius: 0;
}

/* NOTE: the source shipped a full ".dark" palette, but there is no dark-mode
   toggle and no prefers-color-scheme hook — YOIN is a deliberate single warm
   palette. Dead block removed. If dark mode is ever wanted, add it as
   @media (prefers-color-scheme: dark) { :root { ... } } and mirror in theme.json. */

* {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-mincho-jp), 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-feature-settings: 'palt' 1;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.hero-scroll {
  position: relative;
  height: 180svh;
  background: #cbc2b6;
}

.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #cbc2b6;
  color: #f8f5ef;
}

.hero-media,
.hero-image-fallback,
.hero-wash {
  position: absolute;
  inset: 0;
}

.hero-media,
.hero-image-fallback {
  top: -12vh;
  width: 100%;
  height: calc(100% + 24vh);
  transform: translate3d(0, var(--media-y, 0), 0) scale(var(--media-scale, 1.065));
  will-change: transform;
}

.hero-media {
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: center;
}

.hero-image-fallback {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/images/hero-retreat.png');
  background-image: image-set(
    url('/images/hero-retreat.webp') type('image/webp'),
    url('/images/hero-retreat.png') type('image/png')
  );
  animation: settle 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Scrim: the hero copy is near-white over a 4-shot video that includes some
   bright frames (foliage), so the original single soft wash let white text
   blow out. Add a centred radial pool under the copy + a deeper vertical
   gradient, kept soft to preserve the "minimal, not glossy" direction. */
.hero-wash {
  z-index: 2;
  background:
    radial-gradient(125% 78% at 50% 52%, rgb(34 30 25 / 34%) 0%, rgb(34 30 25 / 12%) 52%, transparent 78%),
    linear-gradient(180deg, rgb(58 53 46 / 30%) 0%, rgb(44 40 34 / 20%) 40%, rgb(38 35 30 / 34%) 100%);
  backdrop-filter: saturate(0.72) sepia(0.06);
}

.hero-curtain {
  position: absolute;
  z-index: 3;
  right: -20vw;
  bottom: -32vh;
  left: -20vw;
  height: 68vh;
  border-radius: 50% 50% 0 0;
  background: #f0ede7;
  transform: translate3d(0, var(--curtain-y, 100%), 0);
  will-change: transform;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  padding: 48px 4.2vw 0;
}

.brand {
  display: grid;
  width: 84px;
  justify-items: center;
  color: currentColor;
}

.brand-roof {
  display: block;
  width: 26px;
  height: 8px;
  margin-bottom: 6px;
  color: currentColor;
}

.brand-name {
  font-family: var(--font-display), serif;
  font-size: 15px;
  letter-spacing: 0.18em;
}

.brand-rule {
  display: block;
  width: 78px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  margin: 8px 0 5px;
}

.brand-sub {
  font-size: 6px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.visit-link {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-family: var(--font-display), serif;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.visit-link svg {
  width: 30px;
  height: 30px;
}

.menu-button {
  width: 96px !important;
  height: 96px !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: currentColor !important;
}

.menu-button:hover {
  background: rgb(240 237 231 / 15%) !important;
  transform: rotate(4deg);
}

.menu-button svg {
  width: 26px;
  height: 26px;
  stroke-width: 1;
}

.hero-copy {
  position: absolute;
  z-index: 5;
  inset: 50% auto auto 50%;
  width: min(86vw, 920px);
  transform: translate(-50%, calc(-50% + var(--copy-y, 0px)));
  opacity: var(--copy-opacity, 1);
  text-align: center;
  will-change: transform, opacity;
}

.eyebrow,
.hero-jp {
  margin: 0;
  font-family: var(--font-display), sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 10px rgb(26 23 19 / 30%);
}

.eyebrow {
  margin-bottom: 16px;
  font-family: var(--font-display), serif;
  font-size: 11px;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-mincho-jp), serif;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  line-break: strict;
  text-shadow: 0 1px 2px rgb(26 23 19 / 32%), 0 10px 44px rgb(26 23 19 / 24%);
  text-wrap: balance;
  word-break: keep-all;
}

.hero h1 span,
.concept-message h2 span,
.location-copy h2 span,
.section-heading h2 span,
.story-copy h2 span,
.membership-title h2 span,
.faq-heading h2 span,
.visit h2 span {
  display: block;
}

.hero-jp {
  margin-top: 42px;
  font-size: 12px;
}

.side-label {
  position: absolute;
  z-index: 6;
  top: 48%;
  margin: 0;
  font-family: var(--font-display), serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  opacity: 0.72;
}

.side-label-left {
  left: 1.8vw;
}

.side-label-right {
  right: 1.8vw;
}

.utility-bar {
  position: absolute;
  z-index: 10;
  right: 4.2vw;
  bottom: 0;
  left: 4.2vw;
  display: grid;
  min-height: 72px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgb(248 245 239 / 72%);
  font-family: var(--font-display), serif;
  font-size: 13px;
  letter-spacing: 0.025em;
  text-shadow: 0 1px 8px rgb(26 23 19 / 34%);
  opacity: var(--copy-opacity, 1);
}

.utility-bar p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.utility-bar p span {
  line-break: strict;
  text-wrap: balance;
  word-break: keep-all;
  white-space: nowrap;
}

.utility-bar svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.2;
}

.utility-meta {
  opacity: 0.86;
}

/* "JA / EN" is a label, not a control (there is no EN build). Read it as a
   state: current language lit, the other muted — no hover / pointer affordance. */
.language {
  cursor: default;
}

.language .lang-off {
  opacity: 0.5;
}

.menu-panel {
  position: absolute;
  z-index: 15;
  inset: 0;
  display: grid;
  align-content: center;
  background: #d8d0c4;
  color: #403d3c;
  padding: 120px 12vw 80px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2%);
  transition: opacity 420ms ease, transform 420ms ease;
}

.menu-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* メニューを開いても .site-header (z-index 20) は .menu-panel (z-index 15) の
   上に残る。ヘッダーは動画の上に置く前提の near-white なので、greige の
   パネルに重なると 1.4:1 まで落ち、とくに「閉じる」ボタンが見えなくなる。
   開いている間だけパネル側の墨色に反転させる。 */
.hero-scroll.menu-open .site-header {
  color: #403d3c;
}

.hero-scroll.menu-open .menu-button:hover {
  background: rgb(64 61 60 / 10%) !important;
}

/* 低い画面（横向きのスマホ、短いノートPC）でメニューが縦に収まらないと、
   .hero の overflow:hidden で下の項目ごと消える。はみ出す時だけ
   パネル内でスクロールできるようにし、上下の余白も詰める。 */
@media (max-height: 780px) {
  .menu-panel {
    align-content: start;
    overflow-y: auto;
    padding-top: 96px;
    padding-bottom: 40px;
  }

  .menu-note {
    margin-top: 32px;
  }
}

.menu-panel nav {
  display: grid;
  max-width: 820px;
}

.menu-panel nav a {
  display: flex;
  align-items: baseline;
  gap: 22px;
  border-bottom: 1px solid rgb(64 61 60 / 40%);
  padding: 8px 0;
}

.menu-panel nav a .menu-item-jp {
  font-family: var(--font-mincho-jp), 'Yu Mincho', serif;
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 300;
  line-height: 1.25;
}

.menu-panel nav a .menu-item-num,
.menu-panel nav a .menu-item-en {
  font-family: var(--font-display), sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
}

/* 英語ラベルは補助情報。和文より控えめに、行の右端へ。
   控えめさは「文字サイズ9px vs 和文36〜58px」で十分に出ているので、
   opacity は可読性が確保できる値に留める（0.6 = 2.9:1 で AA 不適合だった）。 */
.menu-panel nav a .menu-item-en {
  margin-left: auto;
  padding-left: 16px;
  opacity: 0.85;
  white-space: nowrap;
}

.menu-note {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  font-family: var(--font-display), sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
}

.concept {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #f0ede7;
  color: #403d3c;
  padding: 150px 4.2vw 90px;
}

.concept-arch {
  position: absolute;
  top: -28vw;
  left: 50%;
  width: 132vw;
  height: 62vw;
  border: 1px solid rgb(64 61 60 / 22%);
  border-radius: 50%;
  transform: translate3d(-50%, var(--arch-y, 0), 0);
  background: #ddd4c8;
}

.section-index,
.concept-grid {
  position: relative;
  z-index: 2;
}

.section-index {
  margin: 0 0 30vh;
  font-family: var(--font-display), sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.concept-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  border-top: 1px solid rgb(64 61 60 / 55%);
  border-bottom: 1px solid rgb(64 61 60 / 55%);
}

.concept-grid > div {
  min-height: 360px;
  padding: 48px;
}

.concept-grid > div:first-child {
  border-right: 1px solid rgb(64 61 60 / 55%);
}

.concept-label {
  margin: 0;
  font-family: var(--font-display), serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.concept-message {
  display: grid;
  align-content: center;
  grid-template-columns: 1fr 0.9fr;
  gap: 56px;
}

.concept-message h2 {
  margin: 0;
  font-family: var(--font-mincho-jp), serif;
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.045em;
  line-break: strict;
  word-break: keep-all;
}

/* 和文の本文段落: 単語の途中（「仕組み」→「仕組\nみ。」等）で改行されて
   1〜2文字だけが孤立するのを防ぐ。見出しに使っている組版と同じルール。 */
.concept-message p,
.location-jp,
.section-heading > p:last-child,
.story-copy > p:not(.section-index),
.membership-note p,
.faq-content p {
  line-break: strict;
  text-wrap: balance;
  word-break: keep-all;
}

.concept-message p {
  align-self: end;
  margin: 0;
  font-size: 13px;
  line-height: 2.15;
}

.location {
  display: grid;
  min-height: 148svh;
  grid-template-columns: 1.08fr 0.92fr;
  background: #d8d0c4;
}

.location-image {
  position: relative;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}

.location-image img,
.story img,
.retreat-parallax-stage > img {
  position: absolute;
  top: -10vh;
  left: 0;
  display: block;
  width: 100%;
  height: 120vh;
  object-fit: cover;
  transform: translate3d(0, var(--section-media-y, -7vh), 0) scale(1.02);
}

/* 写真の上に直接のる near-white キャプション。写真は管理画面から差し替えられる
   ため、明るい湖面／空に重なった瞬間にコントラストが 2.6:1 まで落ちていた。
   ヒーローの .eyebrow / .hero-jp と同じ影で最低限の可読性を担保する。 */
.location-image p {
  position: absolute;
  right: 28px;
  bottom: 26px;
  margin: 0;
  color: #f8f5ef;
  font-family: var(--font-display), serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgb(26 23 19 / 55%), 0 1px 12px rgb(26 23 19 / 40%);
  writing-mode: vertical-rl;
}

.location-copy {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  height: 100svh;
  min-height: 100svh;
  flex-direction: column;
  padding: 72px 5.5vw;
}

.location-copy .section-index {
  margin-bottom: auto;
}

.location-kicker {
  margin: 0 0 18px;
  font-family: var(--font-display), serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.location-copy h2,
.section-heading h2,
.story-copy h2,
.membership-title h2,
.faq-heading h2,
.visit h2 {
  margin: 0;
  font-family: var(--font-mincho-jp), serif;
  font-weight: 400;
  letter-spacing: 0.045em;
  line-break: strict;
  text-wrap: balance;
  word-break: keep-all;
}

.location-copy h2 {
  font-size: clamp(36px, 4.2vw, 62px);
  line-height: 1.42;
}

.location-jp {
  max-width: 430px;
  margin: 50px 0 70px auto;
  font-size: 13px;
  line-height: 2.2;
}

.location-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid rgb(64 61 60 / 55%);
}

.location-facts div {
  padding: 22px 14px 0 0;
}

.location-facts div + div {
  border-left: 1px solid rgb(64 61 60 / 55%);
  padding-left: 18px;
}

.location-facts dt {
  font-family: var(--font-mincho-jp), 'Yu Mincho', serif;
  font-size: 12px;
}

.location-facts dd {
  margin: 9px 0 0;
  font-size: 11px;
}

.how {
  min-height: 100svh;
  background: #403d3c;
  color: #f0ede7;
  padding: 92px 4.2vw 0;
}

.section-heading {
  display: grid;
  grid-template-columns: 0.55fr 1.5fr 0.72fr;
  align-items: end;
  gap: 60px;
  padding-bottom: 80px;
}

.section-heading .section-index {
  margin: 0;
}

.section-heading h2 {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.42;
}

.section-heading > p:last-child {
  margin: 0;
  font-size: 12px;
  line-height: 2;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgb(240 237 231 / 58%);
  border-bottom: 1px solid rgb(240 237 231 / 58%);
}

.steps-grid article {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  padding: 30px 28px;
}

.steps-grid article + article {
  border-left: 1px solid rgb(240 237 231 / 58%);
}

.steps-grid article > p:first-child {
  margin: 0 0 32px;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.steps-grid h3 {
  margin: 0 0 26px;
  font-family: var(--font-mincho-jp), 'Yu Mincho', serif;
  font-size: 30px;
  font-weight: 300;
}

.steps-grid article > p:last-child {
  margin: 0;
  font-size: 11px;
  line-height: 2;
}

.story {
  display: grid;
  min-height: 148svh;
  grid-template-columns: 0.82fr 1.18fr;
  background: #f0ede7;
}

.story-copy {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  padding: 80px 5vw 70px 4.2vw;
}

.story-copy .section-index {
  margin-bottom: auto;
}

.story-copy h2 {
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.45;
}

.story-copy > p:not(.section-index) {
  max-width: 390px;
  margin: 58px 0 40px auto;
  font-size: 13px;
  line-height: 2.2;
}

.story-copy a {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  border-bottom: 1px solid;
  padding-bottom: 7px;
  font-family: var(--font-mincho-jp), 'Yu Mincho', serif;
  font-size: 15px;
}

.story-copy a svg,
.visit-cta svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.2;
}

.story figure {
  position: relative;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
}

.story figcaption {
  position: absolute;
  right: 26px;
  bottom: 28px;
  color: #f8f5ef;
  font-family: var(--font-display), serif;
  font-size: 12px;
  text-shadow: 0 1px 3px rgb(26 23 19 / 55%), 0 1px 12px rgb(26 23 19 / 40%);
}

.membership {
  min-height: 100svh;
  background: #d8d0c4;
  padding: 90px 4.2vw;
}

.membership > .section-index {
  margin-bottom: 20vh;
}

.membership-title {
  display: grid;
  grid-template-columns: 0.7fr 1.6fr;
  align-items: end;
  gap: 40px;
  padding-bottom: 70px;
}

.membership-title > p {
  margin: 0;
  font-family: var(--font-display), serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.membership-title h2 {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.43;
}

.membership-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr;
  border-top: 1px solid rgb(64 61 60 / 58%);
  border-bottom: 1px solid rgb(64 61 60 / 58%);
}

.membership-grid dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}

.membership-grid dl div {
  min-height: 170px;
  padding: 25px 28px;
}

.membership-grid dl div:nth-child(2n) {
  border-left: 1px solid rgb(64 61 60 / 58%);
}

.membership-grid dl div:nth-child(n + 3) {
  border-top: 1px solid rgb(64 61 60 / 58%);
}

.membership-grid dt {
  font-family: var(--font-mincho-jp), 'Yu Mincho', serif;
  font-size: 13px;
}

.membership-grid dd {
  margin: 38px 0 0;
  font-family: var(--font-display), sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 62px);
}

.membership-note {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-left: 1px solid rgb(64 61 60 / 58%);
  padding: 34px;
}

.membership-note p {
  margin: 0 0 48px;
  font-size: 12px;
  line-height: 2.1;
}

/* 架空プロジェクトである旨の開示文。本文より控えめでよいが、読めないと
   開示の意味がない（9px / opacity .72 = 3.7:1 で AA 不適合だった）。 */
.membership-note small {
  display: block;
  font-size: 10px;
  line-height: 1.9;
  opacity: 0.88;
}

.faq {
  display: grid;
  min-height: 92svh;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 10vw;
  background: #f0ede7;
  padding: 100px 4.2vw;
}

.faq-heading .section-index {
  margin-bottom: 28vh;
}

.faq-heading h2 {
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.45;
}

.faq-list {
  align-self: end;
  border-top: 1px solid rgb(64 61 60 / 58%);
}

.faq-item {
  border-bottom: 1px solid rgb(64 61 60 / 58%);
}

.faq-trigger {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 82px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 20px 0 !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 300 !important;
  list-style: none;
  text-decoration: none !important;
}

.faq-trigger::-webkit-details-marker {
  display: none;
}

.faq-trigger::after {
  margin-left: auto;
  content: '+';
  font-family: var(--font-display), serif;
  font-size: 20px;
  font-weight: 300;
}

.faq-item[open] .faq-trigger::after {
  content: '−';
}

.faq-trigger > span {
  margin-right: 24px;
  font-family: var(--font-display), serif;
  font-size: 10px;
}

.faq-content {
  padding: 0 42px 28px 37px !important;
}

.faq-content p {
  margin: 0;
  font-size: 11px;
  line-height: 2;
}

/* 背景は元 #817c72。near-white の 9〜12px（section-index / kicker / CTA）が
   3.7:1 で AA 不適合だったため、同系のまま一段落として 4.6:1 を確保する。
   見出し（36px以上）は元の値でも基準を満たしていたので、変更は最小限。 */
.visit {
  display: flex;
  min-height: 100svh;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #736e67;
  color: #f5f2ec;
  padding: 100px 24px;
  text-align: center;
}

.visit .section-index {
  margin: 0 0 12vh;
}

.visit-kicker {
  margin: 0 0 20px;
  font-family: var(--font-display), serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.visit h2 {
  font-size: clamp(38px, 4.8vw, 66px);
  line-height: 1.42;
}

.visit-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 76px;
  border-bottom: 1px solid;
  padding-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: end;
  gap: 60px;
  background: #403d3c;
  color: #f0ede7;
  padding: 80px 4.2vw 32px;
}

.footer-brand .brand-name {
  font-size: 48px;
}

.footer-brand p,
.footer-note {
  margin: 12px 0 0;
  font-size: 9px;
  letter-spacing: 0.1em;
}

footer nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: 12px 30px;
  font-family: var(--font-mincho-jp), 'Yu Mincho', serif;
  font-size: 15px;
}

footer nav a {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

footer nav a .menu-item-jp {
  white-space: nowrap;
}

/* 同上。チャコール地の9pxで opacity 0.55 は 4.0:1 で AA 不適合だった。 */
footer nav a .menu-item-en {
  font-family: var(--font-display), sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  opacity: 0.72;
  white-space: nowrap;
}

/* will-change was set permanently on ~9 elements per parallax section, which
   forces a GPU layer for each for the whole page. Kept only on the hero
   (which animates every frame while sticky); the rest are composited on
   demand by the translate3d hint below. */

[data-parallax-section] .section-index {
  transform: translate3d(0, var(--section-index-y, 0), 0);
}

[data-parallax-section] h2 {
  transform: translate3d(0, var(--section-heading-y, 0), 0);
}

[data-parallax-section] .concept-label,
[data-parallax-section] .location-kicker,
[data-parallax-section] .location-jp,
[data-parallax-section] .section-heading > p:last-child,
[data-parallax-section] .story-copy > p:not(.section-index),
[data-parallax-section] .membership-title > p,
[data-parallax-section] .visit-kicker,
[data-parallax-section] .visit-cta {
  transform: translate3d(0, var(--section-body-y, 0), 0);
}

.retreat-parallax {
  position: relative;
  height: 165svh;
  background: #403d3c;
}

.retreat-parallax-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  color: #f8f5ef;
}

.retreat-parallax-wash {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgb(35 33 29 / 12%), rgb(35 33 29 / 42%));
}

.retreat-parallax-copy {
  position: absolute;
  z-index: 2;
  right: 4.2vw;
  bottom: 8vh;
  left: 4.2vw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  transform: translate3d(0, var(--section-stage-y, 0), 0);
}

.retreat-parallax-copy p,
.retreat-parallax-copy span {
  margin: 0;
}

.retreat-parallax-copy p {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(18px, 2.2vw, 34px);
  font-weight: 400;
  letter-spacing: 0.12em;
}

.retreat-parallax-copy span {
  font-size: 13px;
  letter-spacing: 0.06em;
}

.footer-note {
  white-space: nowrap;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.14);
  }
  to {
    opacity: 1;
    transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.08);
  }
}

/* ---------------------------------------------------------------------------
   Tablet / small-laptop (761–1024px). The source jumped straight from the
   desktop grid to the 760px phone layout, so iPad-portrait (768px) rendered
   the full desktop grid: .concept-message collapsed its body copy to a ~30px
   sliver, .steps-grid ran 4 columns at ~170px, the split sticky sections were
   cramped. This tier stacks the multi-column grids and un-sticks the split
   sections; the 760px block below still layers on phone sizing.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .concept {
    padding: 130px 4.2vw 80px;
  }

  .concept-grid {
    grid-template-columns: 1fr;
  }

  .concept-grid > div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgb(64 61 60 / 55%);
  }

  .concept-grid > div {
    min-height: auto;
    padding: 40px;
  }

  .concept-message {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .concept-message p {
    max-width: 46ch;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 60px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid rgb(240 237 231 / 58%);
  }

  .steps-grid article:nth-child(odd) {
    border-left: 0;
  }

  .membership-title {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .membership-grid {
    grid-template-columns: 1fr;
  }

  .membership-note {
    border-top: 1px solid rgb(64 61 60 / 58%);
    border-left: 0;
  }

  /* un-stick and stack the split sections so the copy has room to breathe */
  .location,
  .story {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .faq {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: 0;
  }

  .location-image,
  .story figure {
    position: relative;
    top: auto;
    height: 62svh;
    min-height: 0;
  }

  .location-copy,
  .story-copy {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding: 64px 5.5vw;
  }

  .location-image img,
  .story img,
  .retreat-parallax-stage > img {
    transform: none;
    top: 0;
    height: 100%;
  }

  .location-jp,
  .story-copy > p:not(.section-index),
  .story-copy a {
    margin-left: 0;
  }

  .section-index,
  .location-copy .section-index,
  .story-copy .section-index,
  .faq-heading .section-index,
  .membership > .section-index {
    margin-bottom: 12vh;
  }
}

@media (max-width: 760px) {
  .hero-scroll {
    height: 160svh;
  }

  .hero-media,
  .hero-image-fallback {
    top: -9vh;
    height: calc(100% + 18vh);
  }

  .hero-media {
    object-position: center;
  }

  .hero-image-fallback {
    background-image: url('/images/hero-retreat-mobile.png');
    background-image: image-set(
      url('/images/hero-retreat-mobile.webp') type('image/webp'),
      url('/images/hero-retreat-mobile.png') type('image/png')
    );
  }

  .site-header {
    padding: 24px 20px 0;
  }

  .brand {
    width: 52px;
  }

  .brand-roof {
    width: 22px;
    height: 7px;
    margin-bottom: 5px;
  }

  .brand-name {
    font-size: 12px;
  }

  .brand-rule {
    width: 32px;
  }

  .brand-sub,
  .visit-link span,
  .utility-meta,
  .side-label {
    display: none;
  }

  .header-actions {
    gap: 14px;
  }

  .visit-link svg {
    width: 24px;
    height: 24px;
  }

  .menu-button {
    width: 64px !important;
    height: 64px !important;
  }

  .hero-copy {
    width: calc(100% - 40px);
  }

  .hero h1 {
    font-size: clamp(32px, 9vw, 41px);
    line-height: 1.5;
    letter-spacing: 0.045em;
  }

  .hero-jp {
    margin-top: 32px;
  }

  .utility-bar {
    right: 20px;
    left: 20px;
    min-height: 60px;
    grid-template-columns: 1fr auto;
    font-size: 11px;
  }

  .menu-panel {
    padding: 110px 24px 60px;
  }

  .menu-panel nav a {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 22px;
    row-gap: 4px;
  }

  .menu-panel nav a .menu-item-num {
    grid-column: 1;
    grid-row: 1;
  }

  .menu-panel nav a .menu-item-jp {
    grid-column: 2;
    grid-row: 1;
    font-size: 36px;
  }

  .menu-panel nav a .menu-item-en {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
  }

  .menu-note {
    display: grid;
    gap: 10px;
  }

  .concept {
    padding: 100px 20px 60px;
  }

  .section-index {
    margin-bottom: 28vh;
  }

  .concept-grid,
  .concept-message {
    grid-template-columns: 1fr;
  }

  .concept-grid > div {
    min-height: auto;
    padding: 28px 0;
  }

  .concept-grid > div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgb(64 61 60 / 55%);
  }

  .concept-message {
    gap: 38px;
  }

  .location,
  .story,
  .faq {
    grid-template-columns: 1fr;
  }

  .location,
  .story {
    min-height: auto;
  }

  .location-image,
  .story figure {
    position: relative;
    top: auto;
    min-height: 68svh;
    height: 68svh;
  }

  .location-copy,
  .story-copy {
    position: relative;
    top: auto;
    min-height: auto;
    height: auto;
    padding: 70px 20px;
  }

  .location-copy .section-index,
  .story-copy .section-index {
    margin-bottom: 28vh;
  }

  .location-copy h2 {
    font-size: 36px;
  }

  .location-jp,
  .story-copy > p:not(.section-index),
  .story-copy a {
    margin-left: 0;
  }

  .location-facts {
    grid-template-columns: 1fr;
  }

  .location-facts div + div {
    border-top: 1px solid rgb(64 61 60 / 55%);
    border-left: 0;
    padding-left: 0;
  }

  .location-facts div {
    padding: 18px 0;
  }

  .how,
  .membership,
  .faq {
    padding: 72px 20px;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 54px;
  }

  .section-heading h2 {
    font-size: 37px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid article {
    min-height: 245px;
  }

  .steps-grid article + article {
    border-top: 1px solid rgb(240 237 231 / 58%);
    border-left: 0;
  }

  .story {
    display: flex;
    flex-direction: column-reverse;
  }

  /* .story figure が基本ルールから align-self: start を継承したまま。grid だった
     頃は縦位置の指定として無害だったが、直上でこのブレークポイントだけ .story を
     flex 化したことで意味が横軸に変わり、中身が position:absolute の img だけ
     （＝align-items:stretch を効かせないと幅0に潰れる）の figure が幅0になって
     いた（= 過ごし方セクションの写真が375px幅で完全に非表示になる不具合）。 */
  .story figure {
    align-self: stretch;
  }

  .retreat-parallax {
    height: 150svh;
  }

  .retreat-parallax-copy {
    right: 20px;
    bottom: 48px;
    left: 20px;
    display: grid;
    gap: 14px;
  }

  .retreat-parallax-copy p {
    max-width: 280px;
    font-size: 21px;
    line-height: 1.45;
  }

  .story-copy h2 {
    font-size: 36px;
  }

  .membership > .section-index {
    margin-bottom: 24vh;
  }

  .membership-title,
  .membership-grid,
  .membership-grid dl {
    grid-template-columns: 1fr;
  }

  .membership-title {
    gap: 30px;
  }

  .membership-title h2 {
    font-size: 36px;
  }

  .membership-grid dl div:nth-child(2n) {
    border-left: 0;
  }

  .membership-grid dl div + div {
    border-top: 1px solid rgb(64 61 60 / 58%);
  }

  .membership-note {
    border-top: 1px solid rgb(64 61 60 / 58%);
    border-left: 0;
  }

  .faq {
    gap: 80px;
  }

  .faq-heading .section-index {
    margin-bottom: 22vh;
  }

  .faq-heading h2 {
    font-size: 36px;
  }

  .visit {
    padding-right: 20px;
    padding-left: 20px;
  }

  .visit h2 {
    font-size: 36px;
  }

  footer {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 65px 20px 28px;
  }

  footer nav {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 見出しは word-break:keep-all（＝和文の連なりを途中で折らない）なので、
     「思い出だけを持ち帰る。」のような区切り文字を含まない11字は 36〜37px だと
     425px になり、375px 幅で横スクロールが出ていた（documentElement.scrollWidth
     = 445px）。フォントを画面幅に追従させ、意図した2行組を保ったまま収める。
     式は「最長の連なり11字 ×(1 + letter-spacing 0.045) が左右20pxの余白の内側に
     収まる」を直接書いたもの。44px は余白40px + 端数の逃げ。
     375px 幅で約28.8px、320px 幅でも破綻せず、458px 以上は上限の36pxに戻る。
     ここは他の個別指定より後に置いて必ず勝たせる。 */
  .location-copy h2,
  .section-heading h2,
  .story-copy h2,
  .membership-title h2,
  .faq-heading h2,
  .visit h2 {
    font-size: min(36px, (100vw - 44px) / 11.5);
  }

  /* タップ領域 44px の確保。見た目の位置は変えず、当たり判定だけ広げる。 */
  .visit-link {
    padding: 10px;
    margin: -10px;
  }

  .story-copy a {
    padding-top: 8px;
  }

  .visit-cta {
    padding-top: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-media,
  .hero-image-fallback,
  .hero-copy,
  .hero-curtain,
  .menu-panel,
  .menu-button {
    animation: none;
    transition: none;
  }

  /* ハンバーガーの hover で 4deg 回る演出だけ取りこぼしていた */
  .menu-button:hover {
    transform: none;
  }

  [data-parallax-section] .section-index,
  [data-parallax-section] h2,
  [data-parallax-section] .concept-label,
  [data-parallax-section] .location-kicker,
  [data-parallax-section] .location-jp,
  [data-parallax-section] .section-heading > p:last-child,
  [data-parallax-section] .story-copy > p:not(.section-index),
  [data-parallax-section] .membership-title > p,
  [data-parallax-section] .visit-kicker,
  [data-parallax-section] .visit-cta,
  .concept-arch,
  .location-image img,
  .story img,
  .retreat-parallax-stage > img,
  .retreat-parallax-copy {
    transform: none;
  }

  .concept-arch {
    transform: translateX(-50%);
  }

  .hero-media {
    display: none;
  }
}


/* base reset for the menu toggle (previously the @base-ui <Button> primitive;
   the visual rule .menu-button { ... !important } below still wins) */
.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

/* ---------------------------------------------------------------------------
   Additions (not in the source): skip link, a designed focus ring, selection.
   The source had no visible keyboard-focus style at all and no way to bypass
   the long scroll for keyboard / screen-reader users.
   --------------------------------------------------------------------------- */
/* スキップリンク。
   static/index.html では自前の <a class="skip-link"> を置いていたが、
   WordPress では ブロックテーマ向けにコアが
   <a class="skip-link screen-reader-text"> を自動出力する。コアは
   `.skip-link.screen-reader-text`(0,3,0) と `position:absolute !important` で
   当ててくるので、テーマ側の `.skip-link`(0,1,0) は丸ごと負けており、
   フォーカス時に WordPress 既定のグレーのチップが出ていた。
   表示／非表示の制御（clip-path）はコアに任せ、見た目だけ同じ強さで揃える。 */
/* (a) static/index.html 用: 自前の .skip-link を隠す／出す */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* (b) WordPress 用: 出し入れは コアの clip-path に任せ、色と余白だけ
   同じ強さ(0,3,0)で上書きしてサイトの配色に揃える。 */
.skip-link.screen-reader-text:focus {
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: normal;
  text-decoration: none;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* the hero sits on video/scrim — give its focus ring a solid backing colour */
.hero :where(a, button):focus-visible {
  outline-color: #f8f5ef;
}

/* ただしメニューを開いている間は地が greige になるので、その中の
   フォーカスリングは near-white のままだと見えない（1.4:1）。墨色へ戻す。 */
.menu-panel :where(a, button):focus-visible,
.hero-scroll.menu-open .site-header :where(a, button):focus-visible {
  outline-color: #403d3c;
}

::selection {
  background: rgb(123 130 111 / 32%);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}