/* =========================================================
   Kumo 雲 — a teahouse above the clouds
   Washi paper · sumi ink · ma (negative space) · one season
   ========================================================= */

:root{
  /* paper + ink stay constant across seasons */
  --paper:      #efe8da;
  --paper-deep: #e7dfce;
  --paper-soft: #f5f0e6;
  --ink:        #2b2825;
  --ink-soft:   #55504a;
  --ink-faint:  #8a847a;
  --line:       #cfc6b3;
  --line-soft:  #ddd4c2;

  /* seasonal accent — overwritten by [data-season] + JS */
  --accent:      #b4552d;   /* autumn default */
  --accent-deep: #8f3f1e;
  --accent-wash: rgba(180,85,45,.05);

  --maxw: 1240px;
  --gut: clamp(1.25rem, 4vw, 4rem);

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.65,.02,.16,1);

  /* the seasonal cross-fade lives here */
  --fade: 900ms;
}

/* Season definitions ------------------------------------- */
[data-season="spring"]{ --accent:#c46b7e; --accent-deep:#a24f61; --accent-wash:rgba(196,107,126,.055); }
[data-season="summer"]{ --accent:#4e7c59; --accent-deep:#396044; --accent-wash:rgba(78,124,89,.05); }
[data-season="autumn"]{ --accent:#b4552d; --accent-deep:#8f3f1e; --accent-wash:rgba(180,85,45,.05); }
[data-season="winter"]{ --accent:#4c6079; --accent-deep:#38495e; --accent-wash:rgba(76,96,121,.06); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.72;
  overflow-x:hidden;
  letter-spacing:.005em;
  transition:background var(--fade) var(--ease), color var(--fade) var(--ease);
  -webkit-font-smoothing:antialiased;
}

/* Washi grain overlay ------------------------------------ */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* second, longer-fibre pass */
.grain::after{
  content:""; position:absolute; inset:0; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");
}
.season-wash{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 70% -10%, var(--accent-wash), transparent 60%);
  transition:background var(--fade) var(--ease);
}

/* Accessibility ------------------------------------------ */
.u-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:100;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  border-radius:2px; transform:translateY(-160%); transition:transform .25s var(--ease);
  font-family:var(--sans); font-size:.85rem; text-decoration:none;
}
.skip:focus{ transform:translateY(0); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

a{ color:inherit; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--gut);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line-soft);
  transition:background var(--fade) var(--ease), border-color var(--fade) var(--ease);
}
.nav__mark{ display:flex; align-items:baseline; gap:.5rem; text-decoration:none; margin-right:auto; }
.nav__kanji{ font-family:var(--serif); font-weight:700; color:var(--accent); font-size:1.5rem; line-height:1; transition:color var(--fade) var(--ease); }
.nav__word{ font-family:var(--serif); font-weight:600; letter-spacing:.28em; font-size:.82rem; text-transform:uppercase; }
.nav__links{ display:flex; gap:1.6rem; align-items:center; }
.nav__links a{ text-decoration:none; font-size:.86rem; letter-spacing:.02em; color:var(--ink-soft); position:relative; padding:.2rem 0; transition:color .3s var(--ease); }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:not(.nav__cta):hover::after{ transform:scaleX(1); }
.nav__cta{
  border:1px solid var(--line); border-radius:999px; padding:.32rem .95rem !important;
  color:var(--ink) !important; transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.nav__cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper) !important; }

.season{ display:flex; gap:.15rem; padding-left:1.1rem; border-left:1px solid var(--line-soft); }
.season__btn{
  font-family:var(--serif); font-size:1rem; line-height:1; cursor:pointer;
  width:2rem; height:2rem; display:grid; place-items:center;
  background:transparent; border:1px solid transparent; border-radius:50%;
  color:var(--ink-faint); transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.season__btn:hover{ color:var(--ink); transform:translateY(-1px); }
.season__btn[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); background:var(--accent-wash); }

/* =========================================================
   HERO / ARRIVAL
   ========================================================= */
.hero{
  position:relative; z-index:2;
  min-height:calc(100svh - 60px);
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:clamp(1rem,4vw,4rem);
  padding:clamp(2rem,6vh,5rem) var(--gut) 4rem;
}
.hero__stage{ position:relative; align-self:stretch; min-height:min(60vh,520px); display:flex; align-items:flex-end; justify-content:center; }
.hero__steam{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero__bowl{ position:relative; z-index:2; width:min(88%,440px); height:auto; }
.bowl-shadow{ fill:var(--ink); opacity:.06; }
.bowl-body,.bowl-rim,.bowl-tea,.bowl-foot{ stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.bowl-tea{ stroke:var(--accent); stroke-width:2.6; opacity:.9; transition:stroke var(--fade) var(--ease); }
.bowl-rim{ stroke-width:2.6; }

.hero__text{ position:relative; z-index:3; max-width:34rem; }
.hero__eyebrow{ font-family:var(--serif); color:var(--accent); letter-spacing:.3em; font-size:.82rem; margin:0 0 1.4rem; transition:color var(--fade) var(--ease); }
.hero__title{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(2.6rem,6.4vw,5rem); line-height:1.04; letter-spacing:-.01em;
  margin:0 0 1.5rem;
}
.hero__lede{ font-size:clamp(1rem,1.5vw,1.18rem); color:var(--ink-soft); margin:0 0 1.8rem; max-width:26rem; }
.haiku{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:clamp(1.02rem,1.5vw,1.22rem); line-height:1.9; color:var(--ink);
  border-left:2px solid var(--accent); padding-left:1.1rem; margin:0 0 2rem; max-width:24rem;
  white-space:pre-line; transition:border-color var(--fade) var(--ease), opacity .45s var(--ease);
}
.haiku.is-fading{ opacity:0; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.btn{
  display:inline-block; text-decoration:none; font-family:var(--sans); font-weight:500;
  font-size:.9rem; letter-spacing:.02em; padding:.8rem 1.5rem; border-radius:999px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:var(--accent); border-color:var(--accent); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ color:var(--paper); }
.btn--full{ width:100%; text-align:center; cursor:pointer; margin-top:.4rem; }

.vlabel{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--serif); letter-spacing:.28em; color:var(--ink-faint);
  font-size:.78rem; margin:0;
}
.vlabel--hero{ position:absolute; right:var(--gut); top:50%; transform:translateY(-50%); z-index:3; }

.hero__scroll{ position:absolute; left:var(--gut); bottom:1.6rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:.7rem; margin:0; }
.hero__scroll span{ width:1px; height:34px; background:var(--ink-faint); position:relative; overflow:hidden; }
.hero__scroll span::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateY(-100%); animation:scrolldrop 2.6s var(--slow) infinite; }
@keyframes scrolldrop{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* =========================================================
   SHARED SECTION FURNITURE
   ========================================================= */
main > section{ position:relative; z-index:2; }
.section-head{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,10vh,8rem) var(--gut) clamp(2rem,5vh,3.5rem); }
.section-head--split{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:end; }
.kicker{ font-family:var(--serif); color:var(--accent); letter-spacing:.24em; font-size:.8rem; margin:0 0 1.1rem; transition:color var(--fade) var(--ease); }
.kicker span{ margin-right:.5rem; }
.section-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3.3rem); line-height:1.14; letter-spacing:-.01em; margin:0;
}
.section-note{ color:var(--ink-soft); max-width:34rem; margin:1.4rem 0 0; font-size:1.02rem; }
.section-note em{ font-style:normal; color:var(--accent); transition:color var(--fade) var(--ease); }

/* reveal animation */
[reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[reveal].is-in{ opacity:1; transform:none; }

/* =========================================================
   CEREMONY
   ========================================================= */
.ceremony{ padding-bottom:clamp(3rem,8vh,6rem); }
.steps{
  list-style:none; margin:0 auto; padding:0 var(--gut);
  max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,5vw,5rem) clamp(2rem,6vw,7rem);
}
.step{ position:relative; padding-top:2.4rem; border-top:1px solid var(--line); }
.step__no{ position:absolute; top:2.2rem; right:0; font-family:var(--serif); font-size:.85rem; color:var(--ink-faint); letter-spacing:.1em; }
.step__ja{ font-family:var(--serif); font-size:2.4rem; font-weight:500; color:var(--accent); margin:0 0 .6rem; line-height:1; opacity:.85; transition:color var(--fade) var(--ease); }
.step__title{ font-family:var(--serif); font-weight:600; font-size:1.35rem; margin:0 0 .7rem; }
.step__body{ color:var(--ink-soft); margin:0; max-width:26rem; }

/* =========================================================
   MENU / TEAS
   ========================================================= */
.teas{ list-style:none; margin:0 auto; padding:0 var(--gut) clamp(3rem,7vh,6rem); max-width:var(--maxw); }
.tea{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto; align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.6rem,3.4vw,2.4rem) 0; border-top:1px solid var(--line);
}
.tea:last-child{ border-bottom:1px solid var(--line); }
.tea__name{ display:flex; flex-direction:column; gap:.15rem; }
.tea__ja{ font-family:var(--serif); font-size:1.6rem; color:var(--accent); line-height:1; transition:color var(--fade) var(--ease); }
.tea__name h3{ font-family:var(--serif); font-weight:600; font-size:1.28rem; margin:.35rem 0 0; }
.tea__sub{ font-size:.82rem; color:var(--ink-faint); letter-spacing:.02em; }
.tea__note{ color:var(--ink-soft); margin:0; font-size:1rem; max-width:24rem; }
.tea__specs{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); margin:0; }
.tea__specs div{ text-align:right; }
.tea__specs dt{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.tea__specs dd{ margin:.25rem 0 0; font-family:var(--serif); font-weight:600; font-size:1.02rem; white-space:nowrap; }
.tea__specs div:nth-child(2) dd{ color:var(--accent); transition:color var(--fade) var(--ease); }

/* =========================================================
   THE ROOM (SVG plan)
   ========================================================= */
.room{ background:var(--paper-soft); border-block:1px solid var(--line-soft); transition:background var(--fade) var(--ease); }
.room__figure{ max-width:1080px; margin:0 auto; padding:0 var(--gut) clamp(4rem,9vh,7rem); }
.room__svg{ width:100%; height:auto; display:block; overflow:visible; }
.rm-thin *, .rm-thin{ fill:none; stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.rm-heavy *, .rm-heavy{ fill:none; stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke; }
.rm-fill{ fill:var(--ink); opacity:.06; }
.rm-fill-soft{ fill:var(--accent); opacity:.1; }
.rm-half{ fill:var(--ink); opacity:.03; }
.rm-accent{ fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; transition:stroke var(--fade) var(--ease); }
.rm-accent-stroke{ fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke; transition:stroke var(--fade) var(--ease); }
.rm-lead{ stroke:var(--ink-faint); stroke-width:.75; stroke-dasharray:2 3; vector-effect:non-scaling-stroke; }
.rm-label text{ font-family:var(--serif); fill:var(--ink); font-size:14px; letter-spacing:.04em; }
.rm-label .rm-label-en{ font-family:var(--sans); fill:var(--ink-faint); font-size:10.5px; font-weight:300; letter-spacing:.01em; }
.room__figure figcaption{ text-align:center; margin-top:1.4rem; color:var(--ink-faint); font-family:var(--serif); font-size:.9rem; letter-spacing:.04em; }

/* =========================================================
   THE MOUNTAIN
   ========================================================= */
.mountain{ position:relative; overflow:hidden; }
.mountain__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut) clamp(4rem,10vh,8rem); }
.mountain__inner .section-head{ padding-left:0; padding-right:0; }
.vlabel--mtn{ position:absolute; left:clamp(.4rem,2vw,1.6rem); top:clamp(5rem,14vh,10rem); z-index:1; }
.mountain__steps{ display:grid; gap:1.5rem; max-width:40rem; }
.mstep{
  font-family:var(--serif); font-size:clamp(1.1rem,1.9vw,1.5rem); line-height:1.6; margin:0;
  color:var(--ink); padding-left:.2rem;
}
.mstep span{ color:var(--accent); font-weight:700; margin-right:.9rem; font-size:1.4em; transition:color var(--fade) var(--ease); }
.mountain__coda{ margin:2.6rem 0 0; color:var(--ink-soft); max-width:34rem; }

/* =========================================================
   RESERVATIONS
   ========================================================= */
.reserve{ padding:clamp(3rem,8vh,7rem) var(--gut) clamp(4rem,10vh,8rem); }
.reserve__card{
  max-width:640px; margin:0 auto; background:var(--paper-soft);
  border:1px solid var(--line); border-radius:4px;
  padding:clamp(2rem,5vw,3.4rem); box-shadow:0 30px 60px -40px rgba(43,40,37,.4);
  transition:background var(--fade) var(--ease), border-color var(--fade) var(--ease);
}
.reserve__card .kicker{ margin-bottom:.7rem; }
.reserve__card .section-title{ font-size:clamp(1.8rem,4vw,2.6rem); }
.reserve__note{ color:var(--ink-soft); margin:1.2rem 0 2rem; }
.reserve__form{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--wide{ grid-column:1 / -1; }
.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.field input,.field select{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:.75rem .85rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus,.field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.reserve__form .btn--full{ grid-column:1 / -1; }
.reserve__msg{ grid-column:1 / -1; margin:.2rem 0 0; min-height:1.2em; font-family:var(--serif); color:var(--accent); font-size:.98rem; transition:color var(--fade) var(--ease); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,6vh,4rem) var(--gut);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem 2rem;
  max-width:var(--maxw); margin:0 auto;
}
.foot__mark{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-weight:600; letter-spacing:.1em; font-size:.9rem; }
.foot__mark .nav__kanji{ font-size:1.7rem; }
.foot__lines{ margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
.foot__nav{ display:flex; flex-direction:column; gap:.4rem; text-align:right; }
.foot__nav a{ text-decoration:none; font-size:.88rem; color:var(--ink-soft); position:relative; transition:color .3s var(--ease); }
.foot__nav a:hover{ color:var(--accent); }
.foot__fine{ grid-column:1 / -1; margin:.5rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line-soft); color:var(--ink-faint); font-size:.8rem; letter-spacing:.03em; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .nav__links{ gap:1.1rem; }
  .hero{ grid-template-columns:1fr; min-height:auto; padding-top:clamp(1.5rem,4vh,3rem); }
  .hero__stage{ order:-1; min-height:46vh; }
  .vlabel--hero{ display:none; }
  .hero__scroll{ display:none; }
  .section-head--split{ grid-template-columns:1fr; }
  .tea{ grid-template-columns:1fr auto; grid-template-areas:"name specs" "note note"; row-gap:1rem; }
  .tea__name{ grid-area:name; }
  .tea__specs{ grid-area:specs; }
  .tea__note{ grid-area:note; }
}
@media (max-width:760px){
  .nav__links a:not(.nav__cta){ display:none; }
  .steps{ grid-template-columns:1fr; }
  .foot{ grid-template-columns:1fr; text-align:left; }
  .foot__nav{ text-align:left; flex-direction:row; gap:1.2rem; flex-wrap:wrap; }
}
@media (max-width:560px){
  :root{ --fade:700ms; }
  .season{ padding-left:.6rem; }
  .season__btn{ width:1.8rem; height:1.8rem; font-size:.92rem; }
  .reserve__form{ grid-template-columns:1fr; }
  .tea__specs{ gap:1.2rem; }
  .tea{ grid-template-columns:1fr; grid-template-areas:"name" "note" "specs"; }
  .tea__specs{ justify-content:flex-start; }
  .tea__specs div{ text-align:left; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [reveal]{ opacity:1; transform:none; }
  .hero__scroll span::after{ display:none; }
}