/* =========================================================
   Comet — 発酵する町の、コーヒースタンド。
   Shared design system
   生成り(off-white) base / 墨黒(sumi) to tighten /
   深い赤茶(accent) used very sparingly.
   Gothic-only JP type (Zen Kaku Gothic New) + Jost wordmark.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* surfaces */
  --paper:      #F4F1EA;   /* 生成り — primary ground */
  --paper-2:    #ECE7DC;   /* 生成りを一段締めた — alternating section ground */
  --paper-3:    #E6E0D2;   /* card / inset */
  --sumi:       #1A1A1A;   /* 墨黒 — tighten / dark sections */
  --sumi-2:     #232220;

  /* ink */
  --ink:        #211F1B;   /* body text on paper */
  --ink-soft:   #4F4A41;   /* secondary */
  --ink-faint:  #8C8473;   /* captions, labels */
  --on-sumi:    #EDE9E0;   /* text on dark */
  --on-sumi-soft:#A9A294;

  /* accent — 深い赤茶 (used in tiny doses only) */
  --accent:     #6B3A2A;
  --accent-ink: #7A4634;

  /* lines */
  --line:       rgba(26,26,26,0.13);
  --line-soft:  rgba(26,26,26,0.07);
  --line-on-sumi: rgba(237,233,224,0.16);

  /* placeholder duotone tones */
  --ph-a1: #E4E3DF;  --ph-a2: #BFBEB9;   /* neutral light (default) */
  --ph-b1: #D7D6D2;  --ph-b2: #ADACA7;   /* neutral (hero) */
  --ph-c1: #E6E5E2;  --ph-c2: #BAB9B4;   /* neutral cool */

  /* type */
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-en: "Jost", system-ui, sans-serif;

  /* layout */
  --container: 1280px;
  --gutter: clamp(22px, 5.5vw, 80px);
  --section-y: clamp(76px, 11vw, 168px);
  --header-h: 76px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:400;
  font-size:1.06rem;
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--sumi); color:var(--paper); }

/* keyboard focus visibility (a11y) */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .site-header--overlay:not(.scrolled) :focus-visible{ outline-color:var(--on-sumi); }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(56px,8vw,108px); }

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--font-en);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  opacity:.65;
}
.eyebrow--accent{ color:var(--accent); }
.on-dark .eyebrow{ color:var(--on-sumi-soft); }

.display{
  font-weight:300;
  font-size:clamp(2.6rem, 7.2vw, 6.8rem);
  line-height:1.12;
  letter-spacing:0;
  text-wrap:balance;
}
.h2{
  font-weight:300;
  font-size:clamp(1.9rem, 4vw, 3.4rem);
  line-height:1.32;
  letter-spacing:.01em;
  text-wrap:balance;
}
.h3{
  font-weight:500;
  font-size:clamp(1.18rem, 1.8vw, 1.5rem);
  line-height:1.55;
  letter-spacing:.04em;
}
.lead{
  font-size:clamp(1.08rem, 1.4vw, 1.3rem);
  line-height:2.05;
  color:var(--ink-soft);
  font-weight:400;
  text-wrap:pretty;
}
.body{ color:var(--ink-soft); text-wrap:pretty; }
.measure{ max-width:34em; }
.measure-sm{ max-width:26em; }

.on-dark{ color:var(--on-sumi); }
.on-dark .lead, .on-dark .body{ color:var(--on-sumi-soft); }

/* ---------- Links / buttons (quiet) ---------- */
.link-quiet{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--font-en);
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  padding-block:.4em;
  position:relative;
}
.link-quiet .arrow{
  width:30px; height:1px; background:currentColor; position:relative;
  transition:width .5s var(--ease);
}
.link-quiet .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.link-quiet:hover .arrow{ width:46px; }
.on-dark .link-quiet{ color:var(--on-sumi); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.8em;
  font-family:var(--font-en);
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1.05em 2.1em;
  border:1px solid var(--sumi);
  color:var(--sumi);
  background:transparent;
  border-radius:0;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn:hover{ background:var(--sumi); color:var(--paper); }
.btn--solid{ background:var(--sumi); color:var(--paper); }
.btn--solid:hover{ background:transparent; color:var(--sumi); }
.btn--disabled{
  border-color:var(--line); color:var(--ink-faint);
  pointer-events:none; cursor:default;
}
.on-dark .btn{ border-color:var(--on-sumi); color:var(--on-sumi); }
.on-dark .btn:hover{ background:var(--on-sumi); color:var(--sumi); }

/* ---------- Placeholder images (warm duotone gradients) ---------- */
.ph{
  position:relative;
  width:100%;
  background:linear-gradient(165deg, var(--ph-a1), var(--ph-a2));
  overflow:hidden;
  isolation:isolate;
}
.ph::after{   /* soft diagonal sheen for a quiet "quality" feel */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%);
  z-index:1;
}
.ph--deep{ background:linear-gradient(165deg, var(--ph-b1), var(--ph-b2)); }
.ph--cool{ background:linear-gradient(165deg, var(--ph-c1), var(--ph-c2)); }
.ph--sumi{ background:linear-gradient(165deg, #2C2925, #161513); }
.ph--1x1{ aspect-ratio:1/1; }
.ph--4x3{ aspect-ratio:4/3; }
.ph--3x4{ aspect-ratio:3/4; }
.ph--3x2{ aspect-ratio:3/2; }
.ph--16x9{ aspect-ratio:16/9; }
.ph--21x9{ aspect-ratio:21/9; }
.ph--map{ background:linear-gradient(165deg,#ECECE9,#CECECA); }

.ph-label{
  position:absolute; left:0; bottom:0; z-index:2;
  margin:14px 16px;
  font-family:var(--font-en);
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(40,34,28,.42);
}
.ph--sumi .ph-label{ color:rgba(237,233,224,.42); }
.ph-mark{   /* faint centered comet asterisk */
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  font-family:var(--font-en);
  font-size:1.4rem; color:rgba(40,34,28,.16);
  pointer-events:none;
}
.ph--sumi .ph-mark{ color:rgba(237,233,224,.20); }

/* map placeholder grid lines */
.ph--map::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(26,26,26,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,.06) 1px, transparent 1px);
  background-size:34px 34px;
}
.ph--map .ph-pin{
  position:absolute; left:50%; top:50%; z-index:2;
  width:14px; height:14px; transform:translate(-50%,-50%);
  border-radius:50% 50% 50% 0; rotate:-45deg;
  background:var(--accent);
  box-shadow:0 6px 14px rgba(107,58,42,.35);
}

/* ---------- Header / nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(244,241,234,.86);
  backdrop-filter:saturate(1.1) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{
  font-family:var(--font-en);
  font-weight:400;
  font-size:1.5rem;
  letter-spacing:.26em;
  padding-left:.26em;
  color:var(--sumi);
  line-height:1;
}
.nav{ display:flex; align-items:center; gap:clamp(20px,2.4vw,40px); }
.nav a{
  font-family:var(--font-en);
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); position:relative; padding-block:.4em;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ width:100%; }
.nav a[aria-current="page"]{ color:var(--accent-ink); }

.nav-toggle{
  display:none;
  background:none; border:none; color:var(--sumi);
  font-family:var(--font-en); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  gap:.6em; align-items:center;
}
.nav-toggle .bars{ display:inline-grid; gap:4px; }
.nav-toggle .bars span{ width:22px; height:1px; background:currentColor; display:block; }

/* mobile overlay */
.nav-overlay{
  position:fixed; inset:0; z-index:55;
  background:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gutter);
  gap:.4em;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.nav-overlay.open{ opacity:1; transform:none; pointer-events:auto; }
.nav-overlay a{
  font-family:var(--font-en);
  font-size:clamp(2rem,9vw,3.2rem); font-weight:300;
  letter-spacing:.04em; color:var(--sumi);
  padding-block:.18em; border-bottom:1px solid var(--line-soft);
}
.nav-overlay a .en{
  display:block; font-family:var(--font-en);
  font-size:.62rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:.3em;
}
.nav-overlay .overlay-close{
  position:absolute; top:0; right:0; height:var(--header-h);
  display:flex; align-items:center; padding-inline:var(--gutter);
  font-family:var(--font-en); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  background:none; border:none; color:var(--sumi);
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--sumi); color:var(--on-sumi);
  padding-block:clamp(64px,8vw,104px) 40px;
}
.footer-top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(32px,5vw,72px);
  padding-bottom:clamp(48px,6vw,72px);
  border-bottom:1px solid var(--line-on-sumi);
}
.footer-brand .wordmark{ color:var(--on-sumi); font-size:1.9rem; }
.footer-tagline{ color:var(--on-sumi-soft); margin-top:1.2em; font-size:.94rem; line-height:2; }
.footer-col h4{
  font-family:var(--font-en); font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--on-sumi-soft); font-weight:400; margin-bottom:1.4em;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85em; }
.footer-col a, .footer-col li{ color:var(--on-sumi); font-size:.92rem; }
.footer-col a{ position:relative; }
.footer-col a:hover{ color:#fff; }
.footer-meta{ color:var(--on-sumi-soft); font-size:.86rem; line-height:1.9; }
.footer-meta .ph{ margin-top:1em; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding-top:32px; flex-wrap:wrap;
}
.footer-bottom small, .footer-bottom a{
  font-family:var(--font-en); font-size:.7rem; letter-spacing:.16em; color:var(--on-sumi-soft);
}
.footer-social{ display:flex; gap:1.6em; }

/* ---------- Cards ---------- */
.card{ display:flex; flex-direction:column; }
.card .ph{ margin-bottom:1.5em; }
.card .card-no{
  font-family:var(--font-en); font-size:.72rem; letter-spacing:.24em; color:var(--ink-faint);
  margin-bottom:.9em;
}
.card .card-title{ font-size:1.28rem; font-weight:500; letter-spacing:.04em; line-height:1.5; }
.card .card-title .en{
  display:block; font-family:var(--font-en); font-weight:300; font-size:.86rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-top:.5em;
}
.card .card-text{ color:var(--ink-soft); margin-top:1em; font-size:1rem; line-height:1.9; }
.card .link-quiet{ margin-top:1.6em; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-top:var(--header-h); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media .ph{ position:absolute; inset:-8% 0; height:116%; }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,18,16,0) 40%, rgba(20,18,16,.34) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,7vw,104px); }
.hero .display{ color:#fff; max-width:16em; }
.hero .hero-sub{ color:rgba(255,255,255,.86); margin-top:1.6em; max-width:24em; font-size:clamp(1rem,1.3vw,1.18rem); line-height:2; }
.hero-actions{ display:flex; gap:clamp(20px,3vw,44px); align-items:center; margin-top:2.6em; flex-wrap:wrap; }
.hero-actions .link-quiet{ color:#fff; }
.hero-scroll{
  position:absolute; left:var(--gutter); bottom:26px; z-index:2;
  font-family:var(--font-en); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.7); display:flex; align-items:center; gap:.8em;
}
.hero-scroll .ln{ width:1px; height:34px; background:rgba(255,255,255,.5); display:block; transform-origin:top; animation:scrollLn 2.4s var(--ease) infinite; }
@keyframes scrollLn{ 0%{transform:scaleY(.2)} 40%{transform:scaleY(1)} 100%{transform:scaleY(.2)} }

/* page hero (interior pages) */
.page-hero{ padding-top:calc(var(--header-h) + clamp(64px,10vw,140px)); padding-bottom:clamp(40px,6vw,80px); }
.page-hero .display{ max-width:18em; }
.page-hero .lead{ margin-top:1.6em; }

/* ---------- Editorial blocks ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center;
}
.split--media-first{ direction:rtl; }
.split--media-first > *{ direction:ltr; }
.stack > * + *{ margin-top:1.4em; }
.statement{ max-width:20em; }

/* feature grid */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,64px); }

/* dark section */
.section--sumi{ background:var(--sumi); color:var(--on-sumi); }
.section--paper2{ background:var(--paper-2); }

/* section heading row */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px,5vw,72px); }
.section-head .h2{ max-width:14em; }

/* divider */
.rule{ height:1px; background:var(--line); border:0; }

/* number marker */
.bignum{ font-family:var(--font-en); font-weight:200; font-size:clamp(3rem,8vw,7rem); line-height:1; color:var(--accent); opacity:.9; }

/* ---------- Menu list ---------- */
.menu-list{ display:grid; gap:0; }
.menu-item{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:24px;
  padding-block:1.5em; border-bottom:1px solid var(--line);
}
.menu-item:first-child{ border-top:1px solid var(--line); }
.menu-item .mi-name{ font-size:1.12rem; font-weight:500; letter-spacing:.04em; }
.menu-item .mi-name .en{ font-family:var(--font-en); font-weight:300; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-left:1em; }
.menu-item .mi-desc{ color:var(--ink-soft); font-size:.9rem; margin-top:.4em; max-width:40em; line-height:1.9; }
.menu-item .mi-price{ font-family:var(--font-en); font-size:.92rem; letter-spacing:.12em; color:var(--ink); white-space:nowrap; }
.price-tag{ color:var(--ink-faint); }

/* ---------- Location card ---------- */
.loc-card{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:stretch; }
.loc-meta{ display:grid; gap:1.4em; align-content:start; }
.loc-row{ display:grid; grid-template-columns:auto 1fr; gap:1.4em; align-items:baseline; padding-bottom:1.3em; border-bottom:1px solid var(--line-soft); }
.loc-row dt{ font-family:var(--font-en); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.loc-row dd{ margin:0; color:var(--ink); line-height:1.85; }

/* ---------- Forms ---------- */
.form{ display:grid; gap:1.9em; }
.field{ display:grid; gap:.7em; }
.field label{ font-family:var(--font-en); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.field label .req{ color:var(--accent); margin-left:.5em; }
.field input, .field textarea, .field select{
  font-family:var(--font-jp); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.7em 0; width:100%; border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-bottom-color:var(--sumi); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); opacity:.7; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C8473'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .2em center; }
.radio-row{ display:flex; flex-wrap:wrap; gap:.7em; }
.radio-chip{ position:relative; }
.radio-chip input{ position:absolute; opacity:0; inset:0; }
.radio-chip span{
  display:inline-block; padding:.7em 1.4em; border:1px solid var(--line);
  font-size:.92rem; color:var(--ink-soft); transition:all .4s var(--ease);
}
.radio-chip input:checked + span{ border-color:var(--sumi); color:var(--sumi); background:rgba(26,26,26,.04); }
.form-note{ font-size:.8rem; color:var(--ink-faint); line-height:1.8; }
.form-success{
  border:1px solid var(--line); padding:2em; text-align:center; color:var(--ink-soft);
  display:none;
}
.form-success.show{ display:block; }

/* ---------- Notice / fine print ---------- */
.finenote{ font-size:.78rem; color:var(--ink-faint); line-height:1.9; }
.placeholder-tag{ color:var(--ink-faint); font-feature-settings:normal; }

/* ---------- Reveal animations ---------- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{ animation:revealIn 1.15s var(--ease) forwards; }
@keyframes revealIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.reveal-line{ overflow:hidden; }
.reveal-line > *{ display:block; transform:translateY(110%); }
.reveal-line.in > *{ animation:revealLine 1.1s var(--ease) forwards; }
@keyframes revealLine{ from{ transform:translateY(110%); } to{ transform:none; } }
/* safety net: guarantee final visible state regardless of timeline state */
.reveal.settled, .reveal-line.settled{ opacity:1 !important; transform:none !important; animation:none !important; }
.reveal-line.settled > *{ transform:none !important; animation:none !important; }

@media (prefers-reduced-motion:reduce){
  .reveal, .reveal-line > *{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
  .hero-scroll .ln{ animation:none; }
  html{ scroll-behavior:auto; }
}
/* print / no-JS safety: never leave reveal content hidden */
@media print{
  .reveal, .reveal-line > *{ opacity:1 !important; transform:none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .grid-3{ grid-template-columns:1fr; gap:48px; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .split--media-first{ direction:ltr; }
  .loc-card{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .grid-2{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .menu-item{ grid-template-columns:1fr; }
  .menu-item .mi-price{ margin-top:.6em; }
  .hero-actions{ gap:18px; }
}

/* =========================================================
   Real photography & new components (added 2026-06-24)
   ========================================================= */
/* photo inside a .ph frame (keeps all aspect-ratio modifiers) */
.ph--photo{ background:var(--paper-3); }
.ph--photo img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease);
}
.ph--photo::after{   /* whisper of sheen only */
  background:linear-gradient(120deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%);
}
/* hover micro-zoom for interactive photo containers */
a.card:hover .ph--photo img,
a:hover > .ph--photo img,
.g-item:hover .ph--photo img,
.zoomable:hover .ph--photo img{ transform:scale(1.045); }

/* hero with real photo — stronger legibility scrim */
.hero--photo .hero-scrim{
  background:linear-gradient(180deg, rgba(20,18,16,.40) 0%, rgba(20,18,16,0) 28%, rgba(20,18,16,0) 44%, rgba(20,18,16,.66) 100%);
}
.hero--short{ min-height:86svh; }

/* ---------- Gallery band ---------- */
.gallery{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(240px, 30vw, 360px);
  gap:14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:8px;
}
.gallery::-webkit-scrollbar{ height:6px; }
.gallery::-webkit-scrollbar-thumb{ background:var(--line); }
.g-item{ scroll-snap-align:start; }
.g-item .ph{ aspect-ratio:4/5; }

/* ---------- Map embed ---------- */
.map-embed{ position:relative; width:100%; aspect-ratio:21/9; background:var(--paper-3); overflow:hidden; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.28) contrast(.94) brightness(1.02); }

/* ---------- Store overview cards ---------- */
.store-card .ph{ margin-bottom:1.6em; }
.store-card .card-title{ font-size:clamp(1.4rem,2.4vw,1.95rem); font-weight:500; }
.store-card .card-title .en{ display:block; font-family:var(--font-en); font-weight:300; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-top:.5em; }

/* ---------- Menu groups (store pages) ---------- */
.menu-group + .menu-group{ margin-top:clamp(44px,5vw,76px); }
.menu-group-head{ display:flex; align-items:baseline; gap:1em; margin-bottom:.6em; }
.menu-group-head .en{ font-family:var(--font-en); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); }
.menu-note{ font-size:.82rem; color:var(--ink-faint); margin-top:1.2em; line-height:1.8; }

/* ---------- Brand lockup (logo mark + name) ---------- */
.brand{ display:inline-flex; align-items:center; gap:.5em; }
.brand-mark{ width:30px; height:auto; display:block; }
.brand-name{ font-family:var(--font-en); font-weight:400; font-size:1.12rem; letter-spacing:.16em; color:var(--sumi); white-space:nowrap; line-height:1; }
.site-footer .brand-mark{ width:36px; filter:brightness(0) invert(1); opacity:.92; }
.site-footer .brand-name{ color:var(--on-sumi); font-size:1.4rem; }

/* header overlaying a dark hero photo → light brand & nav until scrolled */
.site-header--overlay:not(.scrolled) .brand-name,
.site-header--overlay:not(.scrolled) .nav a,
.site-header--overlay:not(.scrolled) .nav a[aria-current="page"],
.site-header--overlay:not(.scrolled) .nav-toggle{ color:#fff; }
.site-header--overlay:not(.scrolled) .brand-mark{ filter:brightness(0) invert(1); }

/* dark section with a photo behind (overlay keeps text legible) */
.section--bgphoto{ position:relative; isolation:isolate; }
.section--bgphoto > .bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.section--bgphoto > .bg img{ width:100%; height:100%; object-fit:cover; }
.section--bgphoto > .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(20,18,16,.82), rgba(20,18,16,.74)); }

/* maker name block */
.maker-name{ font-size:1.3rem; font-weight:500; letter-spacing:.06em; line-height:1.5; }
.maker-name .en{ display:block; font-family:var(--font-en); font-weight:300; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:.5em; }

/* ---------- 営業カレンダー (Google Calendar embed) ---------- */
.cal-embed{ position:relative; width:100%; aspect-ratio:16/10; max-height:640px; background:var(--paper-3); border:1px solid var(--line); overflow:hidden; }
.cal-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cal-placeholder{ display:grid; place-items:center; text-align:center; padding:2em; aspect-ratio:auto; min-height:240px; }
.cal-placeholder p{ color:var(--ink-soft); font-size:.95rem; line-height:1.9; }
@media (max-width:640px){ .cal-embed{ aspect-ratio:4/5; } }

/* ---------- News / Events ---------- */
.news-list{ display:grid; }
.news-item{ display:grid; grid-template-columns:180px 1fr; gap:clamp(16px,3vw,56px); padding-block:1.7em; border-top:1px solid var(--line); align-items:baseline; }
.news-list .news-item:last-child{ border-bottom:1px solid var(--line); }
.news-meta{ display:flex; flex-direction:column; gap:.7em; align-items:flex-start; }
.news-meta time{ font-family:var(--font-en); font-size:.84rem; letter-spacing:.1em; color:var(--ink-soft); }
.news-tag{ font-family:var(--font-en); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); padding:.3em .9em; line-height:1; }
.news-title{ font-size:1.14rem; font-weight:500; letter-spacing:.03em; line-height:1.6; }
.news-text{ color:var(--ink-soft); font-size:.95rem; margin-top:.5em; line-height:1.9; }
@media (max-width:640px){
  .news-item{ grid-template-columns:1fr; gap:.7em; }
  .news-meta{ flex-direction:row; align-items:center; gap:1em; }
}

/* =========================================================
   Review fixes (2026-07-02)
   ========================================================= */
/* 注記系は「読ませる」テキストなのでコントラストAAを確保（装飾ラベルは --ink-faint のまま） */
:root{ --ink-note:#6E6959; }
.finenote, .form-note, .menu-note{ color:var(--ink-note); }

/* radio group を fieldset/legend 化した際の見た目合わせ */
.field legend{
  font-family:var(--font-en); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); padding:0; margin-bottom:.7em;
}

/* 暗面の「準備中」ボタンを押せない見た目に */
.on-dark .btn--disabled, .on-dark .btn--disabled:hover{
  background:transparent; color:rgba(237,233,224,.45); border-color:rgba(237,233,224,.22);
}

/* モバイル: 地図は帯にせず 4:3、カレンダーの準備中プレースホルダは空箱化させない */
@media (max-width:640px){
  .map-embed{ aspect-ratio:4/3; }
}
.cal-embed.cal-placeholder{ aspect-ratio:auto; }

/* 店舗情報の定義リストの値の頭を揃える */
.loc-row{ grid-template-columns:6.5em 1fr; }

/* ギャラリー横スクロールバー (Firefox) */
.gallery{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }

/* ---------- Hours bar (トップの営業案内) ---------- */
.hours-section{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.hours-bar{ display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,44px); flex-wrap:wrap; padding-block:1.35em; }
.hours-bar .eyebrow{ margin:0; }
.hours-stores{ display:flex; gap:clamp(16px,3vw,44px); flex-wrap:wrap; align-items:baseline; }
.hours-stores p{ font-size:.98rem; letter-spacing:.02em; color:var(--ink); }
.hours-stores strong{ font-weight:500; margin-right:.5em; }
.hours-stores .finenote{ display:inline; }
@media (max-width:720px){
  .hours-bar{ flex-direction:column; align-items:flex-start; gap:.9em; }
  .hours-stores{ flex-direction:column; gap:.4em; }
}

/* ---------- 日本語ファーストのナビ（機能文言=日本語、小さく英語添字） ---------- */
.nav a{
  display:inline-block; text-align:center;
  font-family:var(--font-jp);
  font-size:.84rem; letter-spacing:.14em; text-transform:none;
}
.nav a .en{
  display:block; font-family:var(--font-en);
  font-size:.55rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:.32em; line-height:1;
}
.site-header--overlay:not(.scrolled) .nav a .en{ color:rgba(255,255,255,.62); }
.nav-overlay a{
  font-family:var(--font-jp);
  font-size:clamp(1.7rem,7.5vw,2.7rem);
  letter-spacing:.06em; text-transform:none;
}

/* ---------- 見出しの語中改行防止（意味の塊で折り返す） ---------- */
.nb{ display:inline-block; }
@supports (word-break: auto-phrase){
  .lead, .hero-sub, .news-text, .card-text{ word-break:auto-phrase; }
}