/* ===== tokens ===== */
: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; }
@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;
  -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; }
.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; }
.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-height:44px; display:inline-flex; align-items: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 (max-width:899.98px){
  .head-nav{ gap:0; }
  .head-nav a:not(.nav-reserve){ display:none; } /* section anchors move to the hero row */
}

/* ===== 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-row{ 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); }
.temp-marker{
  font-size:.75rem; letter-spacing:.08em; color:var(--sumi-faint); line-height:1.7;
}
.hero-type > .temp-marker{ margin:28px 0 24px; }
.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:4/5; overflow:hidden; }
.hero-figure img{ object-position:66% 45%; }

@media (min-width:900px){
  .hero{
    display:grid; grid-template-columns:minmax(420px,38%) 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:.08em;
    white-space:nowrap;
  }
  .hero .support{ font-size:.9375rem; margin-top:16px; }
  .cta-row{ margin-top:40px; }
  .hero-type > .temp-marker{ margin:56px 0 0; }
  .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:62% 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;
}
.cap .temp-marker{ flex-shrink:0; }

/* ===== opening — 昼という時間 ===== */
.opening{ padding-block:clamp(96px, 12vw, 224px); }
.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(96px, 11vw, 208px); }
.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(48px, 6vw, 96px); }
.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;
}
.b2 .breath-phrase{ color:var(--cherry-ink); }
.b1{ margin-left:0; }
.b2{ margin-top:112px; margin-left:12%; }
.b3{ margin-top:136px; margin-left:24%; }
.sanshin-close{ max-width:34em; margin-top:88px; }
@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:176px; }
  .b3{ grid-column:6/12; grid-row:3; margin-top:216px; }
  .sanshin-header{ display:block; grid-column:2/9; }
  .sanshin-close{ margin-top:128px; margin-left:calc(100% / 12 * 1); }
}

/* ===== 空間 ===== */
.space{ position:relative; overflow:clip; padding-block:clamp(96px, 10vw, 176px) 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(56px, 7vw, 112px); }
.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; }
}

/* ===== 鮨 — craft ===== */
.craft{ position:relative; overflow:clip; padding-block:clamp(112px, 12vw, 224px) clamp(96px, 10vw, 176px); }
.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; }
.fig-nigiri .frame{ aspect-ratio:4/5; }
.fig-nigiri img{ object-position:50% 55%; }
.craft-text{ margin-top:56px; }
.craft-bottom{ margin-top:clamp(64px, 8vw, 128px); }
.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:2/3; }
  .fig-nigiri img{ object-position:50% 50%; }
  .craft-text{ grid-column:7/12; 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%; }
}

/* ===== 店主 ===== */
.chef{ position:relative; overflow:clip; padding-block:clamp(96px, 10vw, 176px); }
.line-chef{ top:20%; }
.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:4/5; }
.fig-chef img{ object-position:72% 35%; }
@media (min-width:900px){
  .chef-text{ grid-column:2/7; align-self:center; }
  .fig-chef{ grid-column:7/13; margin-top:0; }
  .fig-chef .frame{ aspect-ratio:3/2; }
  .fig-chef img{ object-position:70% 35%; }
}

/* ===== editorial gallery ===== */
.gallery{ padding-block:clamp(96px, 12vw, 192px) clamp(96px, 10vw, 176px); }
.fig-icebox .frame{ aspect-ratio:4/3; }
.fig-icebox img{ object-position:30% 55%; }
.fig-entrance{ margin-top:64px; margin-left:12%; }
.fig-entrance .frame{ aspect-ratio:2/3; }
.fig-entrance img{ object-position:48% 45%; }
@media (min-width:900px){
  .fig-icebox{ grid-column:2/7; grid-row:1; align-self:end; }
  .fig-entrance{ grid-column:8/12; grid-row:1; margin-top:-96px; margin-left:0; }
  .fig-entrance img{ object-position:50% 45%; }
}

/* ===== 店舗情報 — level, straight, calm ===== */
.information{ background:var(--info-field); padding-block:clamp(80px, 8vw, 128px); }
.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(112px, 12vw, 208px); }
.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(56px, 6vw, 96px); 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; }
.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:64px 48px; }
.foot-mark{ font-family:var(--font-display); font-size:1rem; letter-spacing:.24em; font-weight:600; }
.foot-fact{ margin-top:16px; font-size:.8125rem; color:var(--sumi-mid); line-height:2; }
.foot-disclosure{ margin-top:40px; font-size:.75rem; color:var(--sumi-faint); line-height:1.9; max-width:44em; }
.foot-credit{ margin-top:8px; font-size:.75rem; color:var(--sumi-faint); line-height:1.9; }

/* ===== motion — exactly three languages, JS-gated, reduced-motion-off =====
   1. hero settle (load)  2. figure mask reveal  3. chapter light-line settle */
@media (prefers-reduced-motion: no-preference){
  html.js .hero-type, html.js .hero-media{ animation:rise 900ms var(--ease) both; }
  html.js .hero-media{ animation-delay:120ms; }
  html.js .hero-line{ animation:dawn 1200ms var(--ease) both 240ms; }
  @keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  @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);
  }
}