/* ===== self-hosted OFL fonts ===== */
@font-face{
  font-family:"Shippori Mincho B1";
  src:url("fonts/shippori-mincho-b1-regular-subset.woff2") format("woff2");
  font-style:normal; font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Shippori Mincho B1";
  src:url("fonts/shippori-mincho-b1-semibold-subset.woff2") format("woff2");
  font-style:normal; font-weight:600; font-display:swap;
}
@font-face{
  font-family:"Zen Kaku Gothic New";
  src:url("fonts/zen-kaku-gothic-new-regular-subset.woff2") format("woff2");
  font-style:normal; font-weight:400; font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("fonts/eb-garamond-latin-variable-subset.woff2") format("woff2");
  font-style:normal; font-weight:400 500; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin-variable-subset.woff2") format("woff2");
  font-style:normal; font-weight:400 500; font-display:swap;
}

/* ===== tokens ===== */
@font-face{
  font-family:"Noto Serif SC";
  src:url("fonts/noto-serif-sc-subset.woff2") format("woff2");
  font-style:normal; font-weight:400 600; font-display:swap;
}
@font-face{
  font-family:"Noto Sans SC";
  src:url("fonts/noto-sans-sc-subset.woff2") format("woff2");
  font-style:normal; font-weight:400 600; font-display:swap;
}
:root{
  --paper:#F7F4EE;
  --paper-high:#FBF9F4;
  --info-field:#F5F0E4;
  --sumi-ink:#2B2925;
  --sumi-mid:#55504A;
  --sumi-faint:#6E675D;
  --amber-ink:#8A5A14;
  --amber-line:rgba(169,117,44,.55);
  --amber-halo:rgba(247,226,189,.35);
  --cherry-bud:#CDB5AF;
  --cherry-ink:#7E5F58;
  --hairline:#DCD5C9;

  --font-display:"Shippori Mincho B1","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
  --font-latin-serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --font-latin-sans:Inter,"Helvetica Neue",Arial,"Hiragino Sans",sans-serif;

  --fs-display1:clamp(2.625rem, 1.6rem + 4.3vw, 6.5rem);
  --fs-display2:clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --fs-breath:clamp(1.75rem, 1.3rem + 2.1vw, 3.375rem);
  --fs-lead:clamp(1.125rem, 1rem + 0.55vw, 1.375rem);

  --gutter:clamp(20px, 9.6px + 2.667vw, 48px); /* 20 @390 / 32 @768 / 48 @1440 */
  --content-max:1216px;
  --angle:3.5deg;
  --ease:cubic-bezier(.22,.61,.36,1);
  --head-h:52px;
}
@media (min-width:900px){ :root{ --head-h:72px; } }

/* ===== base ===== */
*{ margin:0; padding:0; box-sizing:border-box; border-radius:0; }
html{ overflow-x:clip; scroll-padding-top:calc(var(--head-h) + 12px); }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  overflow-x:clip;
  background:var(--paper);
  color:var(--sumi-ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:2.05;
  letter-spacing:.02em;
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-spacing-trim:space-first;
}
main{ display:block; }
img{ display:block; width:100%; height:100%; object-fit:cover; }
.asset-placeholder{
  display:block; width:100%; height:100%;
  background:#E8E1D6;
  box-shadow:inset 0 0 0 1px rgba(110,103,93,.12);
}
a{ color:inherit; text-decoration:none; }
p a, dd a{ color:var(--sumi-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:var(--amber-ink); transition:color .2s var(--ease); }
p a:hover, dd a:hover{ color:var(--amber-ink); }
:focus-visible{ outline:2px solid var(--amber-ink); outline-offset:3px; }
a[href^="tel:"]{ display:inline-flex; align-items:center; min-height:44px; }
section{ scroll-margin-top:calc(var(--head-h) + 12px); }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; }
h1,h2{ text-wrap:balance; }
p,dd,figcaption{ text-wrap:pretty; }
@supports (word-break:auto-phrase){
  h1,h2,p,dd,figcaption{ word-break:auto-phrase; }
}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.container{
  max-width:var(--content-max); margin-inline:auto; padding-inline:var(--gutter);
  position:relative; z-index:2; /* text paints above the light line; the line stays visible through transparent areas */
}
.num{ font-family:var(--font-latin-sans); font-variant-numeric:tabular-nums; letter-spacing:.04em; }

/* 12-col editorial grid (desktop only; block flow below 900px) */
.g{ display:block; }
@media (min-width:900px){
  .g{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; }
}

/* ===== skip link ===== */
.skip{
  position:absolute; z-index:20; left:16px; top:0;
  background:var(--paper-high); color:var(--sumi-ink);
  padding:12px 20px; font-size:.8125rem; letter-spacing:.1em;
  border:1px solid var(--hairline);
  transform:translateY(calc(-100% - 8px));
  transition:transform .2s var(--ease);
}
.skip:focus-visible{ transform:translateY(12px); }

/* ===== light line (signature device) =====
   1px warm core + 96px halo falling below; always rotated 3.5deg.
   aria-hidden decorative; static without JS / under reduced motion. */
.light-line{
  position:absolute; z-index:1; pointer-events:none;
  left:-20vw; width:140vw; height:1px;
  background:var(--amber-line);
  transform:rotate(var(--angle));
}
.light-line::after{
  content:""; position:absolute; top:1px; left:0; right:0; height:96px;
  background:linear-gradient(to bottom, var(--amber-halo), rgba(247,226,189,0));
}

/* ===== header ===== */
.site-head{
  position:sticky; top:0; z-index:10;
  height:var(--head-h);
  background:var(--paper);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gutter);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.site-head.scrolled{ border-bottom-color:var(--hairline); }
.wordmark{ font-family:var(--font-display); font-size:1.125rem; letter-spacing:.2em; font-weight:600; }
.wordmark a{ display:inline-block; padding:10px 4px; text-decoration:none; }
.head-nav{ display:flex; align-items:center; gap:28px; }
.head-nav a{
  font-size:.8125rem; letter-spacing:.14em; color:var(--sumi-mid);
  padding:14px 2px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:underline; text-decoration-color:transparent;
  text-decoration-thickness:1px; text-underline-offset:6px;
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.head-nav a:hover{ color:var(--amber-ink); text-decoration-color:var(--amber-ink); }
.head-nav .nav-reserve{ color:var(--sumi-ink); text-decoration-color:var(--amber-ink); }
.head-nav .nav-reserve:hover{ color:var(--amber-ink); }
@media (min-width:900px) and (max-width:1120px){
  .head-nav{ gap:16px; }
}
@media (max-width:899.98px){
  .head-nav{ gap:4px; }
  .head-nav a{ padding:14px 6px; }
  .head-nav a:not(.nav-info):not(.nav-reserve){ display:none; } /* keep access and reservation available while scrolling */
}

/* ===== hero — 昼の光 ===== */
.hero{ position:relative; overflow:clip; background:var(--paper-high); }
.hero-anchors{ display:flex; flex-wrap:wrap; column-gap:6px; margin:4px 0 20px; }
.hero-anchors a{
  font-size:.8125rem; letter-spacing:.12em; color:var(--sumi-mid);
  padding:13px 8px; min-height:44px; display:inline-flex; align-items:center;
}
.hero-anchors a:hover{ color:var(--amber-ink); }
.hero-type{
  position:relative; z-index:2;
  padding:20px var(--gutter) 0;
  background:linear-gradient(93.5deg, var(--paper-high), rgba(247,226,189,.16));
}
.eyebrow{
  font-family:var(--font-latin-serif); font-size:.8125rem;
  letter-spacing:.22em; color:var(--sumi-mid); line-height:1.4;
}
.hero h1{
  font-size:var(--fs-display1); line-height:1.18; letter-spacing:.14em;
  margin-top:16px; font-weight:600;
}
.hero .lead{
  font-family:var(--font-display); font-size:var(--fs-lead);
  letter-spacing:.06em; line-height:1.9; margin-top:24px;
}
.hero .support{
  font-size:.875rem; line-height:1.95; color:var(--sumi-mid);
  max-width:24em; margin-top:12px;
}
.cta-block{
  display:flex; flex-direction:column; align-items:flex-start;
  width:max-content; max-width:100%; margin-top:24px;
}
.cta{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:1rem; letter-spacing:.08em; color:var(--sumi-ink);
  padding:10px 2px; min-height:44px;
  text-decoration:none;
  border-bottom:2px solid var(--amber-ink);
  transition:color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cta:hover{ color:var(--amber-ink); background-color:var(--amber-halo); box-shadow:0 1px 0 0 var(--amber-ink); }
.cta .ext{ font-size:.75em; transform:translateY(-.15em); }
.cta-destination{
  margin-top:8px; font-size:.75rem; line-height:1.6;
  letter-spacing:.06em; color:var(--sumi-faint);
}
.hero-line{ position:relative; display:block; margin:0 0 -2px; z-index:1; }
.hero-media{ position:relative; z-index:2; }
@media (max-width:899.98px){
  .hero-media{ z-index:0; } /* lets the line's halo spill onto the image top — light entering */
}
.hero-figure .frame{ aspect-ratio:3/4; overflow:hidden; }
.hero-figure img{ object-position:50% 42%; }

@media (min-width:900px){
  .hero{
    display:grid; grid-template-columns:minmax(480px,42%) 1fr;
    height:calc(100vh - var(--head-h));
    height:calc(100svh - var(--head-h));
    min-height:640px;
  }
  .hero-anchors{ display:none; }
  .hero-type{
    display:flex; flex-direction:column; justify-content:center;
    padding:48px 56px 40px max(48px, calc((100vw - var(--content-max)) / 2 + 48px));
  }
  .hero h1{
    font-size:var(--fs-display1);
    letter-spacing:.05em;
  }
  .hero .support{ font-size:.9375rem; margin-top:16px; }
  .hero-type .cta-block{ margin-top:40px; }
  .hero-line{ position:absolute; top:66%; margin:0; } /* extends the photographed counter edge; retune if hero image is replaced */
  .hero-media{ height:100%; }
  .hero-figure{ height:100%; }
  .hero-figure .frame{ aspect-ratio:auto; height:100%; }
  .hero-figure img{ object-position:50% 42%; }
}

/* ===== figures (shared) ===== */
figure{ position:relative; z-index:2; }
.frame{ overflow:hidden; background:var(--hairline); }
.cap{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-top:10px; font-size:.75rem; letter-spacing:.04em;
  color:var(--sumi-faint); line-height:1.7;
}

/* ===== opening — 昼という時間 ===== */
.opening{ padding-block:clamp(64px, 8vw, 144px); }
.opening h2{ font-size:var(--fs-display2); letter-spacing:.08em; line-height:1.4; }
.opening p{ max-width:34em; margin-top:32px; }
.opening .margin-note{
  display:flex; gap:16px; align-items:baseline;
  border-top:1px solid var(--hairline); padding-top:12px; margin-top:48px;
  font-size:.8125rem; letter-spacing:.14em; color:var(--sumi-faint); line-height:1.6;
}
@media (min-width:900px){
  .opening-body{ grid-column:3/9; }
  .opening .margin-note{ grid-column:10/13; margin-top:12px; align-self:start; flex-direction:column; gap:6px; }
}

/* ===== 三心 — three breaths, one sentence ===== */
.sanshin{ position:relative; overflow:clip; padding-block:clamp(72px, 8vw, 144px); }
.sanshin .tint{
  position:absolute; inset:12% 0 10% 0; z-index:0; pointer-events:none;
  background:linear-gradient(93.5deg, rgba(205,181,175,.14), rgba(205,181,175,0) 65%);
}
.line-sanshin{ top:48%; }
.sanshin .container{ position:relative; z-index:2; }
.sanshin h2{ font-size:var(--fs-display2); letter-spacing:.08em; line-height:1.4; }
.sanshin-open{ margin-top:32px; color:var(--sumi-mid); }
.breaths{ margin-top:clamp(40px, 4vw, 64px); }
.breath{ display:flex; align-items:flex-start; gap:clamp(16px, 2vw, 28px); }
.breath-label{
  writing-mode:vertical-rl; font-size:1.25rem; letter-spacing:.5em;
  font-weight:500; color:var(--sumi-mid); padding-top:.4em;
}
.breath-phrase{
  font-family:var(--font-display); font-size:var(--fs-breath);
  line-height:1.5; letter-spacing:.06em; font-weight:500; text-wrap:wrap;
}
.phrase-unit{ white-space:nowrap; }
.b2 .breath-phrase{ color:var(--cherry-ink); }
.b1{ margin-left:0; }
.b2{ margin-top:48px; margin-left:12%; }
.b3{ margin-top:56px; margin-left:24%; }
.sanshin-close{ max-width:34em; margin-top:48px; }
@media (max-width:679.98px){
  .b2{ margin-left:4%; }
  .b3{ margin-left:6%; }
}
@media (min-width:680px) and (max-width:899.98px){
  .hero-figure .frame{ aspect-ratio:3/4; max-width:540px; margin-inline:auto; }
  .hero-figure img{ object-position:50% 48%; }
  .b2{ margin-top:56px; }
  .b3{ margin-top:64px; }
}
@media (min-width:900px){
  .b1,.b2,.b3{ margin-left:0; }
  .b1{ grid-column:2/8; grid-row:1; }
  .b2{ grid-column:4/10; grid-row:2; margin-top:88px; }
  .b3{ grid-column:6/13; grid-row:3; margin-top:112px; }
  .sanshin-header{ display:block; grid-column:2/9; }
  .sanshin-close{ margin-top:72px; margin-left:calc(100% / 12 * 1); }
}

/* ===== 空間 ===== */
.space{ position:relative; overflow:clip; padding-block:clamp(64px, 7vw, 128px) 0; }
.line-space{ bottom:26%; top:auto; }
.space-text h2{ font-size:var(--fs-display2); letter-spacing:.08em; line-height:1.4; }
.space-text p{ max-width:34em; margin-top:32px; }
.space .band{ margin-top:clamp(40px, 5vw, 80px); }
.space .band .frame{ aspect-ratio:4/3; }
.space .band img{ object-position:45% 62%; }
.space .band figcaption{ padding-inline:var(--gutter); }
@media (min-width:900px){
  .space-text{ grid-column:2/8; }
  .space .band .frame{ aspect-ratio:21/9; }
  .space .band img{ object-position:50% 68%; }
  .space .band figcaption{ max-width:var(--content-max); margin-inline:auto; padding-inline:48px; }
}

/* ===== 刻家 — the time before and after the counter ===== */
.tokiya{
  position:relative; padding-block:clamp(56px, 6vw, 104px);
  background:var(--paper-high);
}
.tokiya-inner{
  padding-block:clamp(32px, 4vw, 56px);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.tokiya-name{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--font-display); color:var(--cherry-ink);
  letter-spacing:.22em; line-height:1.4;
}
.tokiya-name span{ font-size:1.25rem; font-weight:600; }
.tokiya-name small{
  font-family:var(--font-body); font-size:.6875rem;
  letter-spacing:.16em; color:var(--sumi-faint);
}
.tokiya-text{ margin-top:32px; }
.tokiya h2{ font-size:var(--fs-display2); letter-spacing:.08em; line-height:1.45; }
.tokiya-text p{ max-width:38em; margin-top:28px; }
@media (min-width:900px){
  .tokiya-name{
    grid-column:2/4; align-self:start; justify-self:start;
    writing-mode:vertical-rl; align-items:center; gap:16px;
  }
  .tokiya-name small{ writing-mode:vertical-rl; }
  .tokiya-text{ grid-column:5/11; margin-top:0; }
}

/* ===== 鮨 — craft ===== */
.craft{ position:relative; overflow:clip; padding-block:clamp(80px, 9vw, 160px) clamp(64px, 7vw, 128px); }
.line-craft{ top:30%; }
.craft h2{ font-size:var(--fs-display2); letter-spacing:.08em; line-height:1.4; }
.craft-text p{ max-width:34em; margin-top:32px; }
.craft-text .course-intro{font-family:var(--font-display);font-size:1.125rem;line-height:1.8;}
.craft-sourcing{display:grid;gap:24px;margin-top:clamp(40px,6vw,80px);max-width:980px;}
.fig-nigiri .frame{ aspect-ratio:3/2; }
.fig-nigiri img{ object-position:50% 55%; }
.craft-text{ position:relative; z-index:2; background:var(--paper); margin-top:0; }
.craft-bottom{ margin-top:clamp(48px, 6vw, 96px); }
.fig-shari .frame{ aspect-ratio:3/2; }
.fig-shari img{ object-position:38% 32%; }
.fig-roll{ margin-top:56px; margin-left:12%; }
.fig-roll .frame{ aspect-ratio:3/2; }
.fig-roll img{ object-position:46% 38%; }
@media (min-width:900px){
  .fig-nigiri{ grid-column:1/6; grid-row:1; }
  .fig-nigiri .frame{ aspect-ratio:3/2; }
  .fig-nigiri img{ object-position:50% 50%; }
  .craft-text{ grid-column:3/11; grid-row:1; align-self:center; margin-top:0; }
  .fig-shari{ grid-column:6/13; grid-row:1; }
  .fig-shari .cap{ padding-left:40%; }
  .fig-roll{ grid-column:3/8; grid-row:2; margin-top:-24px; margin-left:0; } /* rises into the empty left part of the shari caption row only */
  .fig-roll .frame{ aspect-ratio:4/3; }
  .fig-roll img{ object-position:46% 40%; }
  .craft-sourcing{grid-template-columns:1fr 1fr;gap:48px;margin-left:calc(100% / 12);}
}

.drinks{background:var(--paper-high);padding-block:clamp(48px,6vw,88px);}
.drinks h2{font-size:var(--fs-display2);line-height:1.4;letter-spacing:.08em;}
.drinks p{max-width:42em;margin-top:28px;}
@media(min-width:900px){.drinks-body{grid-column:3/11;}}

/* ===== 店主 ===== */
.chef{ position:relative; overflow:clip; padding-block:clamp(64px, 7vw, 128px); }
.line-chef{ top:20%; }
.chef-text{ position:relative; z-index:2; background:var(--paper); }
.chef-role{
  font-size:.8125rem; letter-spacing:.22em; color:var(--sumi-faint); line-height:1.6;
}
.chef h2{ font-size:var(--fs-display2); letter-spacing:.12em; line-height:1.4; margin-top:10px; }
.chef-text p:not(.chef-role){ max-width:34em; margin-top:32px; }
.fig-chef{ margin-top:56px; }
.fig-chef .frame{ aspect-ratio:3/4; }
.fig-chef img{ object-position:50% 50%; }
@media (min-width:900px){
  .chef-text{ grid-column:2/7; align-self:center; }
  .fig-chef{ grid-column:8/13; margin-top:0; }
  .fig-chef .frame{ aspect-ratio:3/4; }
  .fig-chef img{ object-position:50% 50%; }
}

/* ===== editorial gallery ===== */
.gallery{ padding-block:clamp(64px, 8vw, 144px) clamp(64px, 7vw, 128px); }
.fig-flowers .frame{ aspect-ratio:16/9; }
.fig-flowers img{ object-position:50% 50%; }
.fig-preparation{ margin-top:64px; margin-left:12%; }
.fig-preparation .frame{ aspect-ratio:3/4; }
.fig-preparation img{ object-position:48% 45%; }
@media (min-width:900px){
  .fig-flowers{ grid-column:2/7; grid-row:1; align-self:end; }
  .fig-preparation{ grid-column:8/12; grid-row:1; margin-top:-64px; margin-left:0; }
  .fig-preparation img{ object-position:50% 45%; }
}

/* ===== 店舗情報 — level, straight, calm ===== */
.information{ background:var(--info-field); padding-block:clamp(64px, 6vw, 96px); }
.info-field{ max-width:720px; margin-inline:auto; }
.information h2{ font-size:var(--fs-display2); letter-spacing:.12em; line-height:1.4; }
.info-list{ margin-top:48px; display:grid; grid-template-columns:1fr; row-gap:24px; }
.info-list > div{ display:grid; grid-template-columns:1fr; row-gap:4px; }
.info-list dt{
  font-size:.8125rem; letter-spacing:.2em; color:var(--sumi-faint); line-height:1.6;
}
.info-list dd{ font-size:.9375rem; line-height:1.9; }
.info-date{
  margin-top:48px; padding-top:16px; border-top:1px solid var(--hairline);
  font-size:.75rem; letter-spacing:.04em; color:var(--sumi-faint); line-height:1.7;
}
@media (min-width:900px){
  .info-list{ row-gap:20px; }
  .info-list > div{ grid-template-columns:9em 1fr; column-gap:24px; align-items:baseline; }
}

/* ===== 予約 ===== */
.reservation{ position:relative; overflow:clip; padding-block:clamp(64px, 7vw, 120px); }
.line-resv{ top:22%; }
.resv-inner{
  position:relative; z-index:2; text-align:center;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding-block:clamp(40px, 4vw, 64px); max-width:760px;
}
.reservation h2{ font-size:var(--fs-display2); letter-spacing:.1em; line-height:1.4; }
.resv-note{ font-size:.875rem; color:var(--sumi-mid); max-width:30em; margin:24px auto 0; }
.reservation .cta-row{ margin-top:40px; }
.reservation .cta-block{ align-items:center; margin:40px auto 0; }
.cta-large{ font-size:1.125rem; letter-spacing:.1em; padding:12px 6px; min-height:48px; }

/* ===== footer ===== */
.site-foot{ border-top:1px solid var(--hairline); padding-block:48px 40px; }
.foot-mark{ font-family:var(--font-display); font-size:1rem; letter-spacing:.24em; font-weight:600; }
.foot-address{ margin-top:16px; font-size:.8125rem; color:var(--sumi-mid); line-height:2; }
.foot-reservation{
  display:flex; align-items:baseline; gap:24px; margin-top:24px;
  font-size:.8125rem; color:var(--sumi-mid); line-height:1.8;
}
.foot-reservation > span{ font-family:var(--font-latin-serif); letter-spacing:.12em; }
.foot-reservation a{
  min-height:44px; display:inline-flex; align-items:center; gap:.45em;
  color:var(--sumi-ink); border-bottom:1px solid var(--amber-ink);
  letter-spacing:.1em;
}
.foot-reservation a:hover{ color:var(--amber-ink); }

/* Language tabs and the user-supplied booking guide, 2026-09-06. */
.language-tabs{display:flex; align-items:center; gap:0; flex-shrink:0;}
.language-tabs[hidden]{display:none;}
.language-tabs button{
  appearance:none; border:0; border-bottom:2px solid transparent;
  background:transparent; color:var(--sumi-mid); min-height:44px; min-width:60px;
  padding:8px 12px; font-family:var(--font-latin-sans); font-size:.8125rem;
  cursor:pointer; line-height:1.3;
}
.language-tabs button[aria-selected="true"]{color:var(--sumi-ink); border-bottom-color:var(--amber-ink);}
.language-tabs button[lang="zh-CN"]{font-family:"Noto Sans SC",sans-serif;}
.has-languages .site-head{gap:12px;}
.has-languages .head-nav{gap:16px;}
.booking-timezone{margin:20px 0 32px; color:var(--sumi-mid); font-size:.875rem;}
.resv-inner{max-width:880px; text-align:left; background:var(--paper);}
.reservation h3{font-size:1.25rem; line-height:1.55; margin-bottom:14px;}
.booking-online,.booking-international,.booking-phone{padding-block:32px; border-top:1px solid var(--hairline);}
.booking-international{margin-top:32px;}
.reservation .cta-block{align-items:flex-start; margin:20px 0 0;}
.booking-example,.booking-service-note{font-size:.875rem; color:var(--sumi-mid); margin-top:12px;}
.booking-link{display:inline-flex; align-items:center; gap:12px; min-height:44px; border-bottom:1px solid var(--amber-ink); margin-top:16px;}
.booking-number{font-size:1.375rem; margin-top:20px;}
.booking-notes{display:grid; gap:28px; margin-top:28px; padding:24px; background:var(--info-field);}
.booking-notes h4{font-size:.9375rem; font-weight:500; line-height:1.7; margin-bottom:10px;}
.booking-notes p{font-size:.875rem;}
.resv-note{max-width:none; margin:28px 0 0; padding-top:20px; border-top:1px solid var(--hairline);}
html[lang="en"]{--font-display:"EB Garamond",Garamond,serif; --font-body:Inter,Arial,sans-serif;}
html[lang="en"] body{line-height:1.8; letter-spacing:0;}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{letter-spacing:.015em;}
html[lang="en"] .hero h1{font-size:clamp(2.8rem,4.4vw,4.75rem);}
html[lang="en"] .wordmark{letter-spacing:.025em;}
html[lang="en"] .breath{display:block;}
html[lang="en"] .breath-label{writing-mode:horizontal-tb; letter-spacing:.04em; padding:0; margin-bottom:12px; font-family:var(--font-body); font-size:.875rem;}
html[lang="en"] .breath-phrase{letter-spacing:0; font-size:clamp(1.75rem,3vw,2.75rem);}
html[lang="en"] .tokiya-name,html[lang="en"] .tokiya-name small{writing-mode:horizontal-tb;}
html[lang="en"] .tokiya-name{flex-direction:column; align-items:flex-start;}
html[lang="en"] .head-nav a,html[lang="en"] .hero-anchors a{letter-spacing:0;}
html[lang="zh-CN"]{--font-display:"Noto Serif SC",serif; --font-body:"Noto Sans SC",sans-serif;}
@media(min-width:900px) and (max-width:1199.98px){.has-languages .head-nav a:not(.nav-info):not(.nav-reserve){display:none;}}
@media(max-width:899.98px){
  html.has-languages{--head-h:96px;}
  .has-languages .site-head{display:grid;grid-template-columns:1fr auto;grid-template-rows:52px 44px;gap:0;}
  .has-languages .language-tabs{grid-column:1/-1;justify-self:end;align-self:start;}
  .has-languages .head-nav{gap:4px;}
  .has-languages .head-nav a{letter-spacing:0;}
  .booking-notes{padding:20px;}
}
@media(max-width:359.98px){
  html[lang="en"] .wordmark{font-size:1rem;}
  html[lang="en"] .head-nav a{font-size:.75rem;min-width:40px;padding-inline:4px;}
  .booking-notes{padding:16px;}
}

/* ===== motion — content is immediate; only decorative/scroll reveals remain ===== */
@media (prefers-reduced-motion: no-preference){
  html.js .hero-line{ animation:dawn 700ms var(--ease) both; }
  @keyframes dawn{ from{ opacity:0; } to{ opacity:1; } }

  html.js .reveal-fig .frame{ clip-path:inset(0 100% 0 0); }
  html.js .reveal-fig.in .frame{ clip-path:inset(0 0 0 0); transition:clip-path 1100ms var(--ease); }

  html.js .reveal-line{ opacity:0; transform:rotate(var(--angle)) translateY(-16px); }
  html.js .reveal-line.in{
    opacity:1; transform:rotate(var(--angle));
    transition:opacity 900ms var(--ease), transform 900ms var(--ease);
  }
}

/* Restaurant-provided photo sequences: real photos, kept at their own proportions. */
.photo-series{padding-block:24px clamp(48px,6vw,80px);}
.photo-series-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;}
.photo-series h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.5;letter-spacing:.08em;}
.photo-hint{color:var(--sumi-faint);font-size:.75rem;margin-top:8px;line-height:1.7;}
.photo-controls{display:flex;gap:8px;flex-shrink:0;}
.photo-controls[hidden]{display:none;}
.photo-controls button{border:1px solid var(--hairline);background:transparent;color:var(--sumi);width:44px;height:44px;cursor:pointer;font-size:1.125rem;}
.photo-controls button:hover:not(:disabled){border-color:var(--amber-ink);color:var(--amber-ink);}
.photo-controls button:disabled{opacity:.32;cursor:default;}
.photo-track{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--amber-ink) transparent;padding-bottom:16px;}
.photo-track figure{flex:0 0 82%;scroll-snap-align:start;}
.photo-track img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#0a0908;}
#sushi-photographs img{aspect-ratio:16/9;}
@media(min-width:680px){.photo-track figure{flex-basis:calc((100% - 20px) / 2.15);}}
@media(min-width:1100px){.photo-track figure{flex-basis:calc((100% - 40px) / 3);}}

@media(min-width:900px) and (max-width:1199.98px){
  .hero-figure{display:flex;align-items:center;}
  .hero-figure .frame{width:100%;height:auto;aspect-ratio:3/4;}
}
@media(min-width:1200px){
  .hero{grid-template-columns:minmax(0,1fr) clamp(480px,calc((100svh - var(--head-h)) * .75),58%);}
}

/* Additional restaurant-provided photographs: doorway, drinks, ingredients. */
.tokiya-photo{margin-top:40px;}
.tokiya-photo .frame{aspect-ratio:3/2;}
.tokiya-photo img{object-position:center;}
.drinks-photos{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(18px,4vw,56px);align-items:end;margin-top:clamp(32px,5vw,64px);}
.drinks-glass .frame{aspect-ratio:2/3;}
.drinks-pour .frame{aspect-ratio:3/2;}
.drinks-glass img,.drinks-pour img{object-position:center;}
@media(min-width:900px){.tokiya-photo{grid-column:3/11;}.drinks-photos{grid-column:2/12;}}
