/* ============================================================
   HARAKAMA — editorial / omotenashi (light, warm, serif)
   Reference language: akaneyajapan.com  ·  brand: Harakama
   ============================================================ */

:root{
  --paper:    #f4efe6;   /* warm cream background      */
  --paper-2:  #ece4d5;   /* deeper cream panel         */
  --ink:      #211b14;   /* warm near-black text       */
  --ink-soft: #6c5f4d;   /* muted secondary            */
  --accent:   #925a2c;   /* amber-rust — AA (4.9:1) on cream for small text */
  --accent-2: #c48f4f;   /* brighter ember — decorative on dark only */
  --line:     rgba(33,27,20,.16);
  --maxw:     1320px;
  --pad:      clamp(20px, 4.5vw, 64px);
  --ease:     cubic-bezier(.22,1,.36,1);
}

@property --sc{ syntax:"<number>"; inherits:false; initial-value:1.22; }

*{ box-sizing:border-box; margin:0; padding:0; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"EB Garamond", Georgia, serif;
  font-weight:400;
  font-size:1.06rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
::selection{ background:var(--accent); color:var(--paper); }

/* ---------- accessibility ---------- */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-100px; left:var(--pad); z-index:300;
  background:var(--ink); color:var(--paper); padding:.8em 1.4em; border-radius:2px;
  font-family:"EB Garamond",serif; font-size:.85rem; letter-spacing:.1em;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:1rem; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:1px; }
.nav--light :focus-visible, .hero :focus-visible{ outline-color:var(--paper); }

/* ---------- shared type ---------- */
.label{
  font-family:"EB Garamond", serif;
  font-size:.74rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
}
.label span{ color:var(--ink-soft); }

h2,h3{ font-family:"Cormorant Garamond", serif; font-weight:400; letter-spacing:.005em; }

.wordmark{
  font-family:"Cormorant Garamond", serif;
  font-weight:500; letter-spacing:.34em; text-transform:uppercase;
  text-align:center; font-size:1.25rem; color:var(--ink);
}

.loc{ font-family:"EB Garamond", serif; font-style:italic; color:var(--ink-soft); }

/* reveal-img wrapper — curtain wipe + slow settle (not a plain fade) */
.ri{ position:relative; overflow:hidden; background:var(--paper-2); }
.ri img{ width:100%; height:100%; object-fit:cover; --sc:1.22; transform:translate3d(0,var(--py,0),0) scale(var(--sc)); will-change:transform; transition:--sc 1.8s var(--ease); }
.ri::before{                              /* the curtain */
  content:""; position:absolute; inset:0; z-index:1; background:var(--paper-2);
  transform-origin:bottom; transform:scaleY(1);
  transition:transform 1.05s var(--ease);
}
[data-reveal].in .ri img, .ri.in img{ --sc:1.07; }   /* keep headroom so parallax never exposes an edge */
[data-reveal].in .ri::before, .ri.in::before{ transform:scaleY(0); }

/* headline line-mask reveal */
.mask{ overflow:hidden; }
.mask > span{ display:block; transform:translateY(115%); transition:transform 1.05s var(--ease) .05s; }
.in .mask > span, [data-reveal].in.mask > span, .mask.in > span{ transform:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:1.5rem var(--pad);
  transition:padding .5s var(--ease), background .5s var(--ease);
}
.nav.scrolled{ padding-block:1rem; }
.nav.scrolled.nav--dark{ background:rgba(244,239,230,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

.nav__toggle{ justify-self:start; display:flex; flex-direction:column; gap:6px; width:30px; height:18px; justify-content:center; background:none; border:0; cursor:pointer; }
.nav__toggle span{ display:block; width:100%; height:1.5px; transition:background .5s var(--ease), transform .45s var(--ease); }

.nav__brand{ justify-self:center; display:block; }
.nav__mark{ width:42px; height:auto; transition:opacity .5s var(--ease), transform .6s var(--ease); }
.nav__brand:hover .nav__mark{ transform:translateY(-2px); }
.nav__mark--dark{ position:absolute; top:0; left:0; }
.nav__brand{ position:relative; width:42px; height:50px; }
.nav__mark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.nav__brand:hover .nav__mark{ transform:translate(-50%,calc(-50% - 2px)); }

.nav__reserve{
  justify-self:end; font-family:"EB Garamond",serif; font-size:.82rem;
  letter-spacing:.22em; text-transform:uppercase; position:relative; padding-bottom:3px;
}
.nav__reserve::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav__reserve:hover::after{ transform:scaleX(1); transform-origin:left; }

/* color states */
.nav--light{ color:var(--paper); }
.nav--light .nav__toggle span{ background:var(--paper); }
.nav--light .nav__mark--light{ opacity:1; }
.nav--light .nav__mark--dark{ opacity:0; }
.nav--dark{ color:var(--ink); }
.nav--dark .nav__toggle span{ background:var(--ink); }
.nav--dark .nav__mark--light{ opacity:0; }
.nav--dark .nav__mark--dark{ opacity:1; }

/* ============================================================
   MENU OVERLAY (left panel)
   ============================================================ */
.overlay{ position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none; }
.overlay.open{ visibility:visible; pointer-events:auto; }
.overlay::before{ content:""; position:absolute; inset:0; background:rgba(20,16,11,.28); opacity:0; transition:opacity .6s var(--ease); }
.overlay.open::before{ opacity:1; }

.overlay__panel{
  position:absolute; inset:0 auto 0 0; width:min(560px,100%);
  background:var(--paper); transform:translateX(-100%);
  transition:transform .7s var(--ease); overflow:hidden;
  box-shadow:0 0 80px rgba(0,0,0,.18);
}
.overlay.open .overlay__panel{ transform:none; }
.overlay__scroll{ height:100%; overflow-y:auto; padding:clamp(2.2rem,5vw,4rem) clamp(2rem,4.5vw,4rem); display:flex; flex-direction:column; }

.overlay__close{ position:absolute; top:1.6rem; left:var(--pad); z-index:2; width:26px; height:26px; background:none; border:0; cursor:pointer; }
.overlay__close span{ position:absolute; top:50%; left:0; width:100%; height:1.5px; background:var(--ink); }
.overlay__close span:nth-child(1){ transform:rotate(45deg); }
.overlay__close span:nth-child(2){ transform:rotate(-45deg); }

.overlay__title{ font-family:"Cormorant Garamond",serif; font-weight:500; letter-spacing:.3em; font-size:1.4rem; margin-top:2.4rem; }
.overlay__sub{ margin-top:.5rem; }

.overlay__nav{ display:flex; flex-direction:column; margin-top:2.6rem; }
.overlay__nav a{ padding:.55rem 0; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); transition:padding-left .4s var(--ease); }
.overlay__nav a:hover{ padding-left:.6rem; }
.overlay__nav .big{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.2; }
.overlay__nav a:hover .big{ color:var(--accent); }
.overlay__nav .loc{ font-size:.82rem; letter-spacing:.04em; text-align:right; }

.overlay__finest{ margin-top:2.4rem; }
.overlay__list{ list-style:none; margin-top:1rem; columns:2; }
.overlay__list li{ padding:.32rem 0; font-size:1.02rem; }

.overlay__foot{ margin-top:auto; padding-top:2.4rem; }
.overlay__links{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.overlay__links a{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; position:relative; }
.overlay__links a:hover{ color:var(--accent); }
.overlay__lang{ margin-top:1.4rem; font-size:.8rem; letter-spacing:.16em; color:var(--ink-soft); }
.overlay__lang .on{ color:var(--ink); }
.overlay__lang a:hover{ color:var(--accent); }

/* ============================================================
   HERO (video)
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:breathe 26s ease-in-out infinite alternate; }
@keyframes breathe{ from{ transform:scale(1.03); } to{ transform:scale(1.12); } }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(15,11,7,.5) 0%, transparent 24%, transparent 50%, rgba(15,11,7,.7) 100%); }
.hero__caption{ position:absolute; left:0; right:0; bottom:clamp(4rem,12vh,8rem); text-align:center; color:var(--paper); padding-inline:var(--pad); text-shadow:0 1px 24px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.45); }
.hero__eyebrow{ font-family:"Shippori Mincho",serif; font-size:.86rem; letter-spacing:.32em; color:rgba(244,239,230,.85); }
.hero__tagline{
  font-family:"Cormorant Garamond",serif; font-weight:300; font-style:italic;
  font-size:clamp(2.8rem,7vw,5.4rem); line-height:1.04; margin:.35rem 0 .7rem;
  opacity:0; transform:translateY(12px);
  animation:heroTagline 3.6s var(--ease) 1.1s forwards;
}
@keyframes heroTagline{ to{ opacity:1; transform:none; } }
.hero__line{ font-family:"EB Garamond",serif; font-weight:400; font-style:normal;
  font-size:clamp(.82rem,1.4vw,1rem); letter-spacing:.26em; text-transform:uppercase;
  color:rgba(244,239,230,.9); margin-top:.2rem; }
.hero__scroll{ position:absolute; left:50%; bottom:1.8rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--paper); }
.hero__scroll span{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; }
.hero__scroll i{ width:1px; height:42px; background:linear-gradient(var(--paper),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--accent-2); animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ to{ transform:translateY(320%); } }

/* ============================================================
   STATEMENT — staggered panels
   ============================================================ */
.stmt{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:start;
  padding:clamp(5rem,12vh,10rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.stmt__a{ position:relative; }
.stmt__a .ri{ aspect-ratio:3/4; }
.stmt__a .ri::after{ content:""; position:absolute; inset:0; z-index:2;
  background:radial-gradient(120% 90% at 50% 50%, rgba(8,5,3,.62) 0%, rgba(8,5,3,.34) 55%, rgba(8,5,3,.5) 100%); }
.stmt__quote{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  padding:2.5rem; text-align:center; color:#fff;
  font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(1.45rem,2.5vw,2.15rem); line-height:1.5;
  text-shadow:0 1px 28px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
}
.stmt__quote span{ display:block; max-width:20ch; }
.stmt__quote em{ color:#f3dcb4; }
.stmt__b{ position:relative; margin-top:clamp(4rem,16vh,12rem); }
.stmt__b .ri{ aspect-ratio:4/5; }
.stmt__b .ri::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 40%, rgba(8,5,3,.55) 100%); }
.stmt__links{ position:absolute; right:clamp(1.2rem,3vw,2.4rem); top:50%; transform:translateY(-50%); z-index:2; display:flex; flex-direction:column; gap:1.4rem; text-align:right; text-shadow:0 1px 16px rgba(0,0,0,.7); }
.stmt__links a{ color:#fff; font-family:"Cormorant Garamond",serif; font-size:clamp(1.2rem,2vw,1.7rem); position:relative; }
.stmt__links a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--paper); transform:scaleX(.3); transform-origin:left; transition:transform .45s var(--ease); opacity:.6; }
.stmt__links a:hover::after{ transform:scaleX(1); }

/* ============================================================
   ORIGIN BAND — 3 pillars over dark image
   ============================================================ */
.origin{ position:relative; min-height:74vh; display:flex; align-items:center; overflow:hidden; }
.origin__bg{ position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform; transform:translate3d(0,var(--py,0),0); }
.origin__scrim{ position:absolute; inset:0; background:radial-gradient(110% 100% at 50% 50%, rgba(10,7,4,.58) 0%, rgba(10,7,4,.66) 100%); }
.origin__row{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:5rem var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; color:var(--paper);
  text-shadow:0 2px 22px rgba(0,0,0,.6); }
.origin__kanji{ font-family:"Shippori Mincho",serif; font-size:1.6rem; color:rgba(244,239,230,.42); display:block; margin-bottom:1rem; }
.origin__row h3{ font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:.06em; }
.origin__row .loc{ color:rgba(244,239,230,.82); margin-top:.2rem; }

/* ============================================================
   ABOUT — centered image + narrow text
   ============================================================ */
.about{ padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.about .wordmark{ margin-bottom:clamp(2.5rem,6vw,4rem); }
.about__media{ max-width:760px; margin-inline:auto; }
.about__media .ri{ aspect-ratio:4/3; }
.about__text{ max-width:50ch; margin:clamp(2.5rem,6vw,4rem) auto 0; text-align:center; }
.about__text p+p{ margin-top:1.3rem; }
.about__text em{ font-style:italic; }

/* ============================================================
   STORY (Philosophy) — two images + narrow text
   ============================================================ */
.story{ padding:clamp(4rem,9vh,7rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.story__imgs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.4rem); align-items:start; }
.story__img--1 .ri{ aspect-ratio:4/5; }
.story__img--2{ margin-top:clamp(3rem,10vh,7rem); }
.story__img--2 .ri{ aspect-ratio:3/4; }
.story__text{ max-width:54ch; margin:clamp(3rem,7vw,5rem) auto 0; text-align:center; }
.story__lead{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.4; margin:1.2rem 0 1.6rem; }
.story__lead em{ color:var(--accent); }

/* ============================================================
   MENU
   ============================================================ */
.menu{ background:var(--paper-2); padding:clamp(5rem,12vh,9rem) var(--pad); }
.menu__head{ max-width:var(--maxw); margin-inline:auto; }
.menu__head h2{ font-size:clamp(2.6rem,6vw,4.2rem); margin:.6rem 0 .8rem; }
.menu__note{ max-width:60ch; color:var(--ink-soft); }
.menu__cols{ max-width:var(--maxw); margin:clamp(2.5rem,6vw,4rem) auto 0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,6rem); }
.menu__col>div+div{ margin-top:2.6rem; }
.menu__group{ padding-bottom:1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--line); }
.menu__group em{ color:var(--ink-soft); font-style:normal; text-transform:none; letter-spacing:.06em; }
.menu__list{ list-style:none; }
.menu__list li{ display:flex; align-items:baseline; gap:.6rem; padding:.55rem 0; }
.menu__list .n{ font-size:1.12rem; }
.menu__list .n em{ color:var(--ink-soft); font-size:.92em; }
.menu__list .dot{ flex:1; border-bottom:1px dotted rgba(33,27,20,.26); transform:translateY(-4px); }
.menu__list .p{ font-family:"Cormorant Garamond",serif; font-size:1.2rem; color:var(--accent); }
.menu__fine{ max-width:var(--maxw); margin:3rem auto 0; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }

/* ============================================================
   THE COURSE — 5-movement tasting menu
   ============================================================ */
.course{ padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.course__head{ max-width:720px; margin-inline:auto; text-align:center; }
.course__title{ margin:.7rem 0 1.1rem; }
.course__note{ color:var(--ink-soft); max-width:54ch; margin-inline:auto; }
.course__flow{ list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  margin:clamp(3rem,7vw,5rem) 0; border-block:1px solid var(--line); }
.course__flow li{ display:flex; flex-direction:column; gap:.55rem; padding:2.1rem 1.1rem; text-align:center; border-left:1px solid var(--line); }
.course__flow li:first-child{ border-left:0; }
.course__flow .num{ font-family:"Shippori Mincho",serif; font-size:1.5rem; color:var(--accent); line-height:1; }
.course__flow .nm{ font-family:"Cormorant Garamond",serif; font-size:clamp(1.2rem,1.8vw,1.5rem); }
.course__flow .d{ font-size:.84rem; line-height:1.5; color:var(--ink-soft); }
.course__flow .is-main{ background:rgba(146,90,44,.07); }
.course__flow .is-main .nm{ color:var(--accent); font-style:italic; }

.course__choose{ display:block; text-align:center; margin:0 0 clamp(2rem,5vw,3rem); }
.kama-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.8rem,3vw,2.8rem); }
.kama{ position:relative; }
.kama .ri{ aspect-ratio:4/3; margin-bottom:1.1rem; }
.kama__tag{ position:absolute; top:.9rem; left:.9rem; z-index:4; background:rgba(244,239,230,.93);
  color:var(--accent); font-family:"EB Garamond",serif; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; padding:.45em .85em; }
.kama__jp{ font-family:"Shippori Mincho",serif; font-size:.8rem; letter-spacing:.06em; color:var(--accent); }
.kama__name{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.08; margin:.15rem 0 .2rem; }
.kama__origin{ font-family:"EB Garamond",serif; font-style:italic; color:var(--ink-soft); font-size:.95rem; }
.kama__desc{ font-size:1rem; margin-top:.7rem; max-width:40ch; }
.kama__th{ font-size:.82rem; color:var(--ink-soft); margin-top:.55rem; }

/* ============================================================
   FAQ — "Good to know"
   ============================================================ */
.faq{ padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.faq__head{ text-align:center; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.faq__head .h-display{ margin-top:.5rem; }
.faq__list{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3rem) clamp(2.5rem,6vw,5rem); }
.faq__item{ border-top:1px solid var(--line); padding-top:1.4rem; }
.faq__item h3{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(1.35rem,2.1vw,1.75rem); line-height:1.2; margin-bottom:.55rem; }
.faq__item p{ color:var(--ink-soft); max-width:48ch; }

/* ============================================================
   CONTACT — closing staggered panels
   ============================================================ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:start;
  padding:clamp(5rem,12vh,10rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.contact__a{ position:relative; }
.contact__a .ri{ aspect-ratio:4/5; }
.contact__a .ri::after{ content:""; position:absolute; inset:0; z-index:2;
  background:radial-gradient(120% 90% at 50% 50%, rgba(8,5,3,.6) 0%, rgba(8,5,3,.32) 55%, rgba(8,5,3,.5) 100%); }
.contact__copy{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem;
  color:#fff; font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(1.55rem,2.6vw,2.25rem); line-height:1.5;
  text-shadow:0 1px 28px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5); }
.contact__copy span{ display:block; max-width:18ch; }
.contact__copy em{ color:#f3dcb4; }
.contact__b{ position:relative; margin-top:clamp(4rem,16vh,12rem); }
.contact__b .ri{ aspect-ratio:3/4; }
.contact__b .ri::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,5,3,.85) 0%, rgba(8,5,3,.5) 38%, transparent 68%); }
.contact__info{ position:absolute; left:50%; bottom:clamp(1.5rem,4vw,3rem); transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; gap:1rem; text-align:center; color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.7); }
.contact__info a{ font-family:"Cormorant Garamond",serif; font-size:clamp(1.2rem,2vw,1.6rem); position:relative; }
.contact__info a::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-3px; width:24px; height:1px; background:rgba(244,239,230,.7); transition:width .45s var(--ease); }
.contact__info a:hover::after{ width:100%; }
.contact__hours{ font-family:"EB Garamond",serif; font-size:.84rem; letter-spacing:.03em; line-height:1.7;
  color:rgba(244,239,230,.85); margin-top:.8rem; padding-top:1rem; border-top:1px solid rgba(244,239,230,.28); max-width:24ch; }
.contact__hours em{ display:inline-block; margin-top:.15rem; color:rgba(244,239,230,.62); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ text-align:center; padding:clamp(4rem,9vh,7rem) var(--pad) 3rem; }
.footer__logo{ width:clamp(110px,16vw,165px); margin:0 auto 1.4rem; }
.footer__tag{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.5rem; color:var(--ink); }
.footer__social{ display:flex; gap:1.9rem; justify-content:center; flex-wrap:wrap; margin-top:1.7rem;
  font-family:"EB Garamond",serif; font-size:.84rem; letter-spacing:.2em; text-transform:uppercase; }
.footer__social a{ position:relative; padding-bottom:3px; }
.footer__social a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.footer__social a:hover{ color:var(--accent); }
.footer__social a:hover::after{ transform:scaleX(1); transform-origin:left; }
.footer__links{ display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.footer__links a:hover{ color:var(--accent); }

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(26px); filter:blur(5px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay:calc(var(--rd,0) * .12s); }
[data-reveal].in{ opacity:1; transform:none; filter:blur(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:880px){
  .nav{ padding:1.05rem var(--pad); }
  .nav__reserve{ display:none; }
  .nav__toggle{ width:44px; height:44px; padding:13px 7px; }      /* 44px tap target */
  .nav__brand{ width:40px; height:44px; }
  .overlay__close{ width:44px; height:44px; top:1rem; }

  /* STATEMENT + CONTACT — phone-specific: text moves BELOW the image as ink-on-cream
     (overlaying serif on a small photo is the #1 way cheap sites collapse) */
  .stmt, .contact{ grid-template-columns:1fr; gap:0; padding-block:clamp(3.5rem,10vh,6rem); }
  .stmt__a, .contact__a{ display:flex; flex-direction:column; position:static; }
  .stmt__b, .contact__b{ margin-top:clamp(3rem,9vw,4.5rem); }
  .stmt__a .ri, .contact__a .ri{ aspect-ratio:5/6; }
  .stmt__a .ri::after, .contact__a .ri::after{ display:none; }     /* drop the dark scrim */
  .stmt__quote, .contact__copy{
    position:static; inset:auto; color:var(--ink); justify-content:flex-start;
    text-align:left; padding:1.5rem 0 0; font-size:clamp(1.5rem,5.5vw,1.9rem); text-shadow:none;
  }
  .stmt__links, .contact__info{ text-shadow:none; }
  .stmt__b .ri::after, .contact__b .ri::after{ display:none; }
  .stmt__quote span, .contact__copy span{ max-width:32ch; }
  .stmt__quote em, .contact__copy em{ color:var(--accent); }

  /* vertical link stacks → a row beneath the image, in ink */
  .stmt__links, .contact__info{
    position:static; transform:none; flex-direction:row; flex-wrap:wrap; gap:1.6rem;
    text-align:left; padding-top:1.3rem; align-items:baseline;
  }
  .stmt__links a, .contact__info a{ color:var(--ink); font-size:1.2rem; }
  .contact__hours{ flex-basis:100%; color:var(--ink-soft); border-top-color:var(--line); margin-top:.4rem; }
  .contact__hours em{ color:var(--ink-soft); }
  .stmt__links a::after, .contact__info a::after{ background:var(--accent); left:0; transform:scaleX(1); width:100%; opacity:.4; }
  .contact__info a::after{ bottom:-3px; }

  /* ORIGIN — phone-specific: a divided list (腹釜 · Place · element), not 3 centred pillars */
  .origin{ min-height:auto; }
  .origin__row{ grid-template-columns:1fr; gap:0; padding-block:clamp(3rem,9vh,5rem); }
  .origin__row article{
    display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:1rem;
    padding:1.5rem 0; border-top:1px solid rgba(244,239,230,.22); text-align:left;
  }
  .origin__row article:first-child{ border-top:0; }
  .origin__kanji{ margin:0; font-size:1.05rem; }
  .origin__row h3{ font-size:clamp(1.6rem,7vw,2.1rem); }
  .origin__row .loc{ margin:0; }

  .story__imgs{ grid-template-columns:1fr; gap:1rem; }
  .story__img--2{ margin-top:0; }
  .story__img--1 .ri, .story__img--2 .ri{ aspect-ratio:5/6; }
  .menu__cols{ grid-template-columns:1fr; }
  .faq__list{ grid-template-columns:1fr; }
  /* course → vertical on phone */
  .course__flow{ grid-auto-flow:row; grid-template-columns:1fr; }
  .course__flow li{ border-left:0; border-top:1px solid var(--line); flex-direction:row; align-items:baseline; gap:1rem; text-align:left; padding:1.3rem 0; }
  .course__flow li:first-child{ border-top:0; }
  .course__flow .num{ flex:0 0 1.4em; }
  .course__flow .nm{ flex:0 0 auto; min-width:8.5rem; }
  .course__flow .d{ flex:1; }
  .kama-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .kama .ri{ aspect-ratio:5/4; }
  .overlay__list{ columns:1; }
  .overlay__nav a{ padding:.7rem 0; }
  .overlay__nav .loc{ display:none; }                              /* declutter */
  .footer__links{ gap:1.2rem 1.6rem; }
}
@media(max-width:520px){
  body{ font-size:1.02rem; }
  .hero__caption{ bottom:clamp(3rem,9vh,5rem); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::after,*::before{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
  .ri img{ transform:none; }
  .ri::before{ transform:scaleY(0); }
  .mask > span{ transform:none; }
  .hero__tagline{ opacity:1; transform:none; }
  .hero__video{ animation:none; }
}