@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

:root {
  --paper: #fbf4e7;
  --ivory: #f8ecd4;
  --wine: #621920;
  --deep: #411016;
  --gold: #e8bf7e;
  --green: #273c32;
  --ink: #33231e;
  --muted: #655044;
  --line: #c7ae8d;
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Zen Kaku Gothic New", "Yu Gothic", Meiryo, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 1rem/1.9 var(--sans); }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .25em; }
:focus-visible { outline: 3px solid #996724; outline-offset: 5px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: .035em; }
h2 { color: var(--wine); font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.49; }
.skip { position: fixed; inset: .5rem auto auto .5rem; z-index: 3; padding: .5rem 1rem; background: white; transform: translateY(-160%); }
.skip:focus { transform: none; }
.wordmark { font: 700 1.18rem var(--serif); letter-spacing: .16em; text-decoration: none; }
.eyebrow, figcaption { font: 700 .7rem/1.6 Georgia, var(--sans); letter-spacing: .19em; }

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  row-gap: clamp(.65rem, 1.6vh, 1.05rem);
  margin-bottom: -16px;
  padding: clamp(1rem, 3vh, 1.8rem) 1rem 2.1rem;
  background:
    url("assets/hero-confetti.svg") left 4vw top 1.3rem / clamp(10rem, 21vw, 20rem) auto no-repeat,
    url("assets/hero-confetti.svg") right 3vw bottom 1.25rem / clamp(11rem, 24vw, 23rem) auto no-repeat,
    url("assets/paper-grain.svg"),
    radial-gradient(ellipse at 48% 24%, #dd3946, #bf2635 58%, #9e1c2b);
  background-blend-mode: normal, normal, soft-light, normal;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 16px) no-repeat,
    url("assets/cream-wave.svg") center bottom / 112px 17px repeat-x;
}
.hero-photo { position: relative; overflow: hidden; width: min(100%, 42rem, max(28rem, calc(100svh - 8.5rem))); aspect-ratio: 1; border: 2px solid #ffe6aa; border-radius: 1.15rem; box-shadow: 0 .5rem 1.4rem #64122166; }
.hero-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 53% 43%; }
.hero-photo::after { position: absolute; inset: 0; background: url("assets/hero-confetti.svg") left top / clamp(5.8rem, 14vw, 10rem) auto no-repeat, url("assets/hero-confetti.svg") right bottom / clamp(4.7rem, 10vw, 7.5rem) auto no-repeat; pointer-events: none; content: ""; }
.hero-date { position: relative; max-width: 100%; padding: .55rem clamp(1.65rem, 5vw, 2.4rem); border: 1px solid #e9b659; border-radius: 99rem; color: var(--wine); text-align: center; background: linear-gradient(#fffcf2, #ffe7b8); box-shadow: 0 .25rem .65rem #64122166, inset 0 0 0 2px #fff9e9; }
.hero-date::before, .hero-date::after { position: absolute; top: 50%; width: .7rem; height: .7rem; transform: translateY(-50%); background: #a76b25; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); content: ""; }
.hero-date::before { left: .65rem; }
.hero-date::after { right: .65rem; }
.hero-date time { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .15rem .75rem; font-size: clamp(.94rem, 2.5vw, 1.08rem); }
.hero-date b { font: 700 clamp(1.1rem, 3.15vw, 1.42rem)/1.4 var(--serif); }
.hero-date span { white-space: nowrap; }
.eyebrow { color: #795333; }
.eyebrow span { margin-right: .25em; }
.price-ribbon { display: inline-block; padding: .26rem 1.15rem; color: #fff7df; background: linear-gradient(102deg, #8c1823, #b3222d 55%, #861820); clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); font-weight: 700; font-size: .83rem; letter-spacing: .09em; line-height: 1.45; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .85rem; min-height: 50px; max-width: 100%; padding: .75rem 1.25rem; border-radius: 3px; font-weight: 700; line-height: 1.4; text-decoration: none; transition: background .18s; }
.button[hidden] { display: none; }

.section { width: min(100% - 3rem, 1050px); margin-inline: auto; }
.story-surface { position: relative; isolation: isolate; overflow: hidden; background: #f4e7ce url("assets/pale-wood.svg") center top / 510px auto; }
.story-surface::after { position: absolute; z-index: -1; right: clamp(-10rem, calc((100vw - 1350px) / 2), 3rem); top: -6.5rem; width: clamp(13rem, 23vw, 21rem); aspect-ratio: 1; transform: rotate(-18deg); background: url("assets/wreath.svg") center / contain no-repeat; content: ""; }
.story { display: grid; grid-template-columns: 1fr .85fr; grid-template-areas: "intro video" "details video"; gap: 1rem clamp(2rem, 7vw, 6rem); padding-block: clamp(3.25rem, 8vw, 6.3rem); }
.story-copy { grid-area: intro; align-self: end; }
.story-details { grid-area: details; align-self: start; }
.story h1 { margin: .75rem 0 1.3rem; color: var(--wine); font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.25; }
.story-details p + p { margin-top: 1rem; }
.story-video { grid-area: video; place-self: center; width: min(100%, 19rem); padding: .6rem; border: 1px solid #a45248; border-radius: .55rem; background: #fff5e2; box-shadow: .25rem .35rem 0 #a4524840; }
.story-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .5rem; margin: .1rem .12rem .5rem; color: var(--wine); font: 700 .86rem/1.5 var(--sans); }
.story-video figcaption span { color: var(--muted); font-size: .78rem; }
.story-player { position: relative; }
.story-player video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: .3rem; background: var(--ink); }
.video-play { position: absolute; bottom: 14%; left: 50%; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; transform: translateX(-50%); border: 2px solid #ffe7b8; border-radius: 50%; color: #fff9e9; background: #8c1a26; box-shadow: 0 .25rem 1rem #2a13155e; font-size: 1.25rem; cursor: pointer; }
.video-play:hover { background: #a92330; }
.video-play[hidden] { display: none; }
.experience { padding-bottom: clamp(2.1rem, 5vw, 3.8rem); border-bottom: 1px solid var(--line); }
.center { text-align: center; }
.center h2 { margin-top: .55rem; }
.lesson-banner { position: relative; isolation: isolate; margin-top: -.7rem; padding: clamp(2.7rem, 5.5vw, 4.4rem) .8rem; }
.lesson-banner::before, .lesson-banner::after { position: absolute; inset: 0; z-index: -1; content: ""; pointer-events: none; }
.lesson-banner::before { background: #bd8a47; clip-path: polygon(0 9%, 74% 0, 100% 12%, 100% 92%, 30% 100%, 0 88%); }
.lesson-banner::after { inset-block: 3px; background: url("assets/sparkles.svg") center / auto 117% repeat-x, linear-gradient(110deg, #7a1c23, #a12730 52%, #60151c); clip-path: polygon(0 9%, 74% 0, 100% 12%, 100% 92%, 30% 100%, 0 88%); }
.lesson-banner .eyebrow { color: #ffe0a1; }
.lesson-banner h2 { color: #fff8eb; }
.lesson-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); margin: 2rem 0 0; padding: 0; list-style: none; }
.lesson-list li { position: relative; isolation: isolate; padding: 1.3rem clamp(1rem, 2.3vw, 1.65rem) 1.15rem; }
.lesson-list li::before { position: absolute; inset: 0; z-index: -1; transform: rotate(-1.3deg); border: 1px solid #a45248; background: #fff3e8; box-shadow: .22rem .22rem 0 #a4524830; content: ""; }
.lesson-list li:nth-child(2)::before { transform: rotate(1.25deg); background: #f9ead7; }
.lesson-list li:nth-child(3)::before { transform: rotate(-.7deg); }
.number { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid #ab6f4a; border-radius: 50%; color: #8f2530; font: italic 1.12rem Georgia, serif; }
.lesson-list h3 { margin: .35rem 0 .75rem; font-size: 1.33rem; line-height: 1.5; color: var(--wine); text-wrap: balance; }
.lesson-list p { font-size: .98rem; }
.lesson-note { margin-top: 1.75rem; color: var(--muted); font-size: .84rem; text-align: center; }

.host { display: grid; grid-template-columns: .74fr 1.26fr; margin-block: clamp(3.25rem, 8vw, 6rem); border: 1px solid #d9bc8c; background: #fff5e7; }
.host-photo { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3.3rem); background: #f4e7ce url("assets/pale-wood.svg") center; }
.host-photo img { width: min(100%, 13rem); padding: .35rem; border: 1px solid #c5a573; background: #fffaf0; box-shadow: .3rem .45rem 0 #79533325; }
.host-copy { padding: clamp(1.75rem, 4vw, 3.5rem); }
.booking .eyebrow { color: var(--gold); }
.host h2 { margin-top: .45rem; font-size: clamp(1.7rem, 3.2vw, 2.48rem); }
.host-role { margin: .15rem 0 1.1rem; color: #795333; font-size: .9rem; }
.host-role ~ p + p { margin-top: .8rem; }

.questions { max-width: 780px; margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.faq-list { margin-top: 1.5rem; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .9rem 0; color: var(--wine); cursor: pointer; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+" / ""; font-size: 1.4rem; line-height: 1; }
details[open] summary::after { content: "−" / ""; }
details p { padding-bottom: 1rem; }

.booking {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.3rem) clamp(1rem, 4vw, 2.75rem) clamp(2.8rem, 6vw, 5rem);
  color: var(--paper);
  background:
    url("assets/sparkles.svg") center 1.5rem / min(98%, 920px) auto no-repeat,
    url("assets/paper-grain.svg"),
    radial-gradient(ellipse at 50% 10%, #226d53, #104b3b 52%, #0b392e);
  background-blend-mode: normal, soft-light, normal;
}
.booking::before { position: absolute; inset: -1px 0 auto; height: 17px; background: url("assets/cream-wave.svg") center top repeat-x; content: ""; }
.booking-inner { max-width: 970px; margin-inline: auto; }
.booking h2 { color: var(--paper); }
.booking h2 span { font-size: .78em; }
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1rem, 3.5vw, 2.5rem);
  margin: 2rem auto 0;
  padding: clamp(.9rem, 3.2vw, 2rem);
  border: 1px solid #d0a65c;
  border-radius: .8rem;
  color: var(--ink);
  background: linear-gradient(140deg, #fffdf5, #fff5df);
  box-shadow: 0 1.15rem 2.5rem #052c2496, inset 0 0 0 4px #e0bd7d62;
  overflow: hidden;
}
.ticket::before { position: absolute; z-index: 1; inset: 0 auto auto 0; width: clamp(7.1rem, 19vw, 11rem); aspect-ratio: 176/154; background: url("assets/gift-ribbon.svg") center / contain no-repeat; filter: drop-shadow(0 3px 2px #6a430f3d); pointer-events: none; content: ""; }
.ticket-photo { position: relative; align-self: stretch; min-height: 25rem; border: 1px solid #c79550; border-radius: .32rem; overflow: hidden; }
.ticket-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 54% 43%; }
.ticket-info { min-width: 0; }
.ticket dl > div { display: grid; grid-template-columns: 4.7em 1fr; align-items: baseline; gap: .4em; padding: .47rem 0; border-bottom: 1px solid #d9c5aa; }
.ticket dl > div:last-child { border: 0; }
.ticket dt { color: var(--wine); font-weight: 700; font-size: .92rem; }
.ticket dd { line-height: 1.6; }
.ticket-price { margin-top: .8rem; padding: .95rem .25rem .35rem; border-top: 1px dashed #c6a573; text-align: center; }
.offer-message { max-width: 29em; margin: 0 auto .85rem; font-size: .91rem; line-height: 1.65; text-wrap: pretty; }
.regular { margin-top: .35rem; color: var(--muted); font-size: 1rem; }
.regular s { position: relative; display: inline-block; font-size: 1.15em; font-weight: 700; text-decoration: none; }
.regular s::after { position: absolute; top: 50%; inset-inline: -.13em; height: 2px; transform: rotate(-12deg); border-radius: 1px; background: #a61b29; content: ""; }
.price { color: #a61b29; white-space: nowrap; }
.price strong { font: 700 clamp(4.65rem, 9vw, 6.85rem)/1.04 Georgia, var(--serif); letter-spacing: -.068em; }
.price strong span { margin-left: .1em; font: 700 .38em var(--serif); letter-spacing: 0; }
.price small { font-size: .8rem; }
.booking-status { margin: .2rem 0 .65rem; color: var(--muted); font-size: .86rem; text-align: center; }
.button-apply {
  position: relative;
  width: 100%;
  min-height: 62px;
  padding-inline: 2.3rem;
  border: 1px solid #c99538;
  border-radius: .4rem;
  color: #fff9ea;
  background: linear-gradient(#cf3442 0%, #b82132 48%, #a01424 52%, #92101e 100%);
  box-shadow: inset 0 0 0 2px #ffe1a54d, 0 4px 0 #73121e, 0 7px 13px #83142640;
  cursor: pointer;
  font: 700 clamp(1.05rem, 2.2vw, 1.29rem)/1.35 var(--sans);
  letter-spacing: .04em;
  transition: filter .18s, transform .18s;
}
.button-apply:enabled:hover { filter: brightness(1.12); }
.button-apply:enabled:active { transform: translateY(2px); }
.button-apply:disabled { border-color: #c9b6a1; color: #645446; background: #eadfce; box-shadow: none; cursor: not-allowed; }
.button-apply:disabled .apply-arrow { visibility: hidden; }
.apply-arrow { position: absolute; inset-inline-end: 1rem; color: #ffe1a5; }
.application-dialog { width: min(calc(100% - 2rem), 28rem); padding: 1.6rem; border: 1px solid #d0a65c; border-radius: .65rem; color: var(--ink); background: #fff7e6; text-align: center; }
.application-dialog::backdrop { background: #102820ba; }
.application-dialog h3 { color: var(--wine); }
.application-dialog p { margin: .65rem 0 .85rem; }
.calendar-button { color: white; background: var(--green); }
.dialog-close { margin-top: .5rem; border: 0; color: var(--wine); background: transparent; cursor: pointer; font-family: inherit; }
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.25rem; padding: 1.15rem clamp(1rem, 5vw, 4.5rem); color: var(--muted); font-size: .78rem; }

@media (max-width: 720px) {
  .hero { min-height: 100svh; grid-template-rows: 1fr auto; padding: .9rem .75rem 1.85rem; }
  .hero-photo { width: 100%; min-height: min(95vw, 26rem); aspect-ratio: auto; }
  .hero-photo img { object-position: 59% 48%; }
  .story, .host { grid-template-columns: minmax(0, 1fr); gap: 1.45rem; }
  .story-surface::after { right: -5.6rem; top: -6.4rem; }
  .story { grid-template-areas: "intro" "video" "details"; }
  .host { gap: 0; }
  .host-photo img { width: min(55%, 11rem); }
  .lesson-banner::after { background-size: 100% auto, auto; }
  .lesson-list { grid-template-columns: minmax(0, 1fr); margin-top: 1.3rem; }
  .lesson-list li { display: grid; grid-template-columns: 2.3rem 1fr; column-gap: .7rem; padding: .9rem .9rem 1rem; }
  .lesson-list h3 { align-self: center; margin: 0; font-size: 1.18rem; }
  .lesson-list h3 br { display: none; }
  .lesson-list p { grid-column: 2; margin-top: .3rem; }
  .lesson-note { text-align: left; margin-top: 1.2rem; }
}
@media (max-width: 760px) {
  .ticket { width: min(100%, 520px); grid-template-columns: minmax(0, 1fr); }
  .ticket-photo { min-height: 0; aspect-ratio: 1; }
}
@media (max-width: 360px) {
  .section { width: calc(100% - 2rem); }
  .ticket dl > div { grid-template-columns: 4.1em 1fr; }
  .price strong { font-size: clamp(3.92rem, 20vw, 4.1rem); }
  .price strong span { margin-left: .04em; font-size: .3em; }
  .price small { font-size: .68rem; letter-spacing: -.07em; }
  .button { padding-inline: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}