/* =========================================================================
   SUSHI TEI MEDAN — design system
   Direction: quiet Japanese fine-dining. Mincho display + Zen Kaku body.
   Palette: sumi ink · ai indigo · washi paper · shu vermilion · muted kin.
   Signature: hanko (red seal) + vertical mincho labels.
   ========================================================================= */

:root{
  /* color */
  --sumi:        #14161B;   /* deep warm ink — dark sections, primary text */
  --sumi-soft:   #1E222A;   /* raised ink panels */
  --ai:          #16242E;   /* indigo — secondary dark */
  --ai-deep:     #0F1A22;
  --washi:       #F4EEE1;   /* warm paper — light background */
  --washi-2:     #ECE3D2;   /* unbleached panel */
  --washi-3:     #E2D6BF;
  --shu:         #C5432B;   /* vermilion — disciplined accent / seal */
  --shu-deep:    #A6331E;
  --kin:         #B08A57;   /* muted brass — hairlines, fine detail */
  --kin-soft:    #C9A878;
  --cha:         #7C5A40;   /* wood midtone */

  --ink:         #1A1C20;
  --ink-70:      rgba(20,22,27,.70);
  --ink-55:      rgba(20,22,27,.55);
  --paper-80:    rgba(244,238,225,.82);
  --paper-55:    rgba(244,238,225,.55);
  --paper-30:    rgba(244,238,225,.30);
  --line-dark:   rgba(244,238,225,.14);
  --line-light:  rgba(20,22,27,.14);

  /* type */
  --display: "Shippori Mincho", "Times New Roman", serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;

  /* layout */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  font-weight:400;
  color:var(--ink);
  background:var(--washi);
  line-height:1.7;
  -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; }

::selection{ background:var(--shu); color:var(--washi); }

/* ---------- typographic primitives ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:.01em; }

.display{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.005em;
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
}
.h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.9rem, 3.6vw, 3.1rem);
  line-height:1.14;
}
.lead{
  font-size:clamp(1.05rem,1.4vw,1.28rem);
  color:var(--ink-70);
  font-weight:400;
  max-width:54ch;
}

/* eyebrow: small letterspaced label + japanese glyph */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--body);
  font-size:.72rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--shu);
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--kin); display:inline-block;
}
.eyebrow .jp{ font-family:var(--display); letter-spacing:.1em; font-size:.95rem; color:var(--cha); }
.eyebrow--light{ color:var(--kin-soft); }
.eyebrow--light::before{ background:var(--paper-30); }
.eyebrow--light .jp{ color:var(--paper-55); }

/* vertical mincho label — signature device */
.vlabel{
  writing-mode:vertical-rl;
  font-family:var(--display);
  letter-spacing:.28em;
  font-size:.8rem;
  color:var(--ink-55);
}

/* ---------- hanko seal (signature) ---------- */
.seal{
  width:62px; height:62px; flex:0 0 auto;
  display:grid; place-items:center;
  border:2px solid var(--shu);
  border-radius:8px;
  color:var(--shu);
  font-family:var(--display); font-weight:700; font-size:1.5rem;
  transform:rotate(-4deg);
  box-shadow:inset 0 0 0 1px rgba(197,67,43,.25);
  background:rgba(197,67,43,.04);
}
.seal--lg{ width:88px; height:88px; font-size:2.1rem; border-radius:12px; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(4.5rem, 9vw, 8rem); position:relative; }
.section--paper{ background:var(--washi); }
.section--paper2{ background:var(--washi-2); }
.section--ink{ background:var(--sumi); color:var(--paper-80); }
.section--ink h2,.section--ink h3{ color:var(--washi); }
.section--ai{ background:var(--ai); color:var(--paper-80); }
.section--ai h2,.section--ai h3{ color:var(--washi); }

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

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--body); font-weight:500; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1rem 1.7rem; border-radius:var(--radius);
  border:1px solid transparent; position:relative;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.btn--shu{ background:var(--shu); color:var(--washi); }
.btn--shu:hover{ background:var(--shu-deep); }

.btn--ink{ background:var(--sumi); color:var(--washi); }
.btn--ink:hover{ background:#000; }

.btn--ghost{ border-color:var(--line-light); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }

.btn--ghost-light{ border-color:var(--paper-30); color:var(--washi); }
.btn--ghost-light:hover{ border-color:var(--washi); background:rgba(244,238,225,.06); }

.btn:focus-visible{ outline:2px solid var(--kin); outline-offset:3px; }

/* link with underline reveal */
.tlink{
  font-weight:500; letter-spacing:.04em; position:relative;
  border-bottom:1px solid currentColor; padding-bottom:2px; transition:color .3s var(--ease);
}
.tlink:hover{ color:var(--shu); }

/* =========================================================================
   HEADER
   ========================================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center;
  padding:0 var(--gutter); height:84px;
  transition:background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand__name{
  font-family:var(--display); font-weight:700; font-size:1.32rem; letter-spacing:.12em;
  color:var(--washi);
}
.brand__sub{
  font-family:var(--body); font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--shu); font-weight:600;
}
.header.is-solid .brand__name{ color:var(--ink); }

/* image logo — real PNG; white on dark hero (filter), original on solid header */
.brand__logo{ display:block; height:46px; width:auto; transition:height .4s var(--ease); }
.header.is-solid .brand__logo{ height:38px; }
.brand__logo--light{ filter:brightness(0) invert(1); }
.brand__logo--dark{ display:none; }
.header.is-solid .brand__logo--light{ display:none; }
.header.is-solid .brand__logo--dark{ display:block; }
@media (max-width:560px){ .brand__logo{ height:40px; } .header.is-solid .brand__logo{ height:34px; } }

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-80); position:relative; padding:.4rem 0;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--shu); transition:width .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ width:100%; }
.nav a[aria-current="page"]{ color:var(--shu); }
.header.is-solid .nav a{ color:var(--ink-70); }
.header.is-solid .nav a:hover, .header.is-solid .nav a[aria-current="page"]{ color:var(--shu); }

.header.is-solid{
  background:var(--washi); height:70px;
  border-color:var(--line-light);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.5);
}

.header__cta{ display:flex; align-items:center; gap:1rem; }

/* mobile menu button */
.burger{
  display:none; width:42px; height:42px; background:transparent; border:0;
  position:relative;
}
.burger span{
  position:absolute; left:9px; right:9px; height:1.5px; background:var(--washi);
  transition:transform .35s var(--ease), opacity .25s var(--ease), background .3s;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.header.is-solid .burger span{ background:var(--ink); }
.menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-open .burger span:nth-child(2){ opacity:0; }
.menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.menu-open .burger span{ background:var(--washi); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:55;
  background:var(--sumi); color:var(--washi);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:var(--gutter);
  transform:translateY(-100%); transition:transform .5s var(--ease);
  visibility:hidden;
}
.menu-open .drawer{ transform:translateY(0); visibility:visible; }
.drawer a{
  font-family:var(--display); font-size:clamp(1.8rem,7vw,2.6rem); font-weight:500;
  padding:.5rem 0; border-bottom:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer a .idx{ font-family:var(--body); font-size:.8rem; letter-spacing:.2em; color:var(--shu); }
.drawer__foot{ margin-top:2rem; color:var(--paper-55); font-size:.85rem; letter-spacing:.04em; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--washi); overflow:hidden;
  background:var(--ai-deep);
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,26,34,.55) 0%, rgba(15,26,34,.35) 35%, rgba(20,22,27,.92) 100%),
    radial-gradient(120% 80% at 80% 10%, rgba(197,67,43,.18), transparent 55%);
}
.hero__inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter) clamp(3.5rem,7vw,6rem);
  display:grid; grid-template-columns:auto 1fr; gap:2.4rem; align-items:end;
}
.hero__rail{ align-self:stretch; display:flex; align-items:center; }
.hero__rail .vlabel{ color:var(--paper-55); border-right:1px solid var(--line-dark); padding-right:1.4rem; height:60%; }
.hero__content{ max-width:42ch; }
.hero .eyebrow{ margin-bottom:1.6rem; }
.hero__title{ font-size:clamp(2.7rem, 6.6vw, 5.6rem); color:var(--washi); margin-bottom:1.5rem; }
.hero__title em{ font-style:italic; color:var(--kin-soft); }
.hero__sub{ color:var(--paper-80); font-size:clamp(1.02rem,1.4vw,1.2rem); max-width:48ch; margin-bottom:2.4rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero__seal{
  position:absolute; right:var(--gutter); top:clamp(7rem,16vw,11rem); z-index:2;
}
.hero__seal .seal{ border-color:var(--shu); color:var(--shu); background:rgba(197,67,43,.08); }

.scrollcue{
  position:absolute; left:var(--gutter); bottom:1.4rem; z-index:2;
  display:flex; align-items:center; gap:.7rem; color:var(--paper-55);
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
}
.scrollcue .bar{ width:1px; height:34px; background:var(--paper-30); position:relative; overflow:hidden; }
.scrollcue .bar::after{ content:""; position:absolute; inset:0; background:var(--shu); transform:translateY(-100%); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 45%{transform:translateY(0)} 100%{transform:translateY(100%)} }

/* page banner (sub-pages) */
.banner{
  position:relative; min-height:56svh; display:flex; align-items:flex-end;
  color:var(--washi); overflow:hidden; background:var(--ai-deep);
}
.banner__bg{ position:absolute; inset:0; }
.banner__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; }
.banner__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,26,34,.5), rgba(20,22,27,.9)); }
.banner__inner{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--gutter) clamp(2.5rem,5vw,4rem); }
.banner__inner .eyebrow{ margin-bottom:1.2rem; }
.banner__title{ font-size:clamp(2.4rem,5.4vw,4.4rem); color:var(--washi); }
.crumbs{ margin-top:1.1rem; font-size:.78rem; letter-spacing:.1em; color:var(--paper-55); }
.crumbs a:hover{ color:var(--washi); }

/* =========================================================================
   GENERIC SECTION HEADS
   ========================================================================= */
.sec-head{ max-width:var(--wrap); margin-inline:auto; margin-bottom:clamp(2.4rem,4vw,3.6rem); }
.sec-head .eyebrow{ margin-bottom:1.1rem; }
.sec-head .h2{ max-width:18ch; }
.sec-head.center{ text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-head.center .h2{ margin-inline:auto; }

/* split: text + media */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2.4rem,5vw,5rem); align-items:center; }
.split--rev .split__media{ order:-1; }
.split__body .eyebrow{ margin-bottom:1.2rem; }
.split__body .h2{ margin-bottom:1.4rem; }
.split__body p + p{ margin-top:1.1rem; }
.split__cta{ margin-top:2rem; }

/* media block — gradient + optional photo, always looks intentional */
.media{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    linear-gradient(135deg, var(--ai) 0%, var(--sumi) 100%);
  min-height:380px;
  box-shadow:0 40px 60px -40px rgba(0,0,0,.55);
}
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(20,22,27,.35)); }
.media__tag{
  position:absolute; left:1.2rem; bottom:1.1rem; z-index:2;
  font-family:var(--display); color:var(--washi); font-size:1rem; letter-spacing:.04em;
  display:flex; align-items:center; gap:.6rem;
}
.media__tag .jp{ color:var(--kin-soft); }
.media--tall{ min-height:520px; }

/* stat / facts row */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border-block:1px solid var(--line-light); }
.section--ink .facts, .section--ai .facts{ background:var(--line-dark); border-color:var(--line-dark); }
.fact{ background:var(--washi); padding:2rem clamp(1rem,2vw,2rem); }
.section--ink .fact, .section--ai .fact{ background:transparent; }
.fact__n{ font-family:var(--display); font-size:clamp(2.2rem,4vw,3rem); color:var(--shu); line-height:1; }
.section--ink .fact__n, .section--ai .fact__n{ color:var(--kin-soft); }
.fact__l{ margin-top:.6rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-55); }
.section--ink .fact__l, .section--ai .fact__l{ color:var(--paper-55); }

/* =========================================================================
   SIGNATURE DISHES
   ========================================================================= */
.dishes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
.dish{
  background:var(--washi); border:1px solid var(--line-light); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.dish:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -34px rgba(0,0,0,.4); border-color:var(--kin); }
.dish__media{ position:relative; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(135deg,var(--ai),var(--sumi)); }
.dish__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.dish:hover .dish__media img{ transform:scale(1.05); }
.dish__media .num{ position:absolute; top:.8rem; left:.9rem; font-family:var(--display);
  color:var(--washi); font-size:.85rem; letter-spacing:.1em; opacity:.85; }
.dish__body{ padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.dish__jp{ font-family:var(--display); color:var(--cha); font-size:.85rem; letter-spacing:.14em; margin-bottom:.35rem; }
.dish__name{ font-family:var(--display); font-size:1.32rem; font-weight:600; line-height:1.2; }
.dish__desc{ color:var(--ink-70); font-size:.95rem; margin-top:.6rem; flex:1; }
.dish__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:1.3rem;
  padding-top:1.1rem; border-top:1px solid var(--line-light); }
.dish__price{ font-family:var(--display); font-weight:600; color:var(--shu); font-size:1.05rem; }
.dish__cat{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-55); }

/* =========================================================================
   GALLERY GRID
   ========================================================================= */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.gcell{ position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(135deg,var(--ai),var(--sumi)); }
.gcell img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gcell:hover img{ transform:scale(1.06); }
.gcell::after{ content:""; position:absolute; inset:0; background:rgba(20,22,27,.0); transition:background .4s; }
.gcell:hover::after{ background:rgba(20,22,27,.18); }
.gcell .cap{ position:absolute; left:1rem; bottom:.9rem; z-index:2; color:var(--washi);
  font-family:var(--display); font-size:.95rem; opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease); }
.gcell:hover .cap{ opacity:1; transform:none; }
.gcell.wide{ grid-column:span 2; }
.gcell.tall{ grid-row:span 2; }

/* =========================================================================
   OUTLETS / VISIT
   ========================================================================= */
.outlets{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,1.8rem); }
.outlet{ background:var(--washi); border:1px solid var(--line-light); border-radius:var(--radius);
  padding:1.8rem 1.7rem; display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .4s var(--ease), transform .4s var(--ease); }
.outlet:hover{ border-color:var(--kin); transform:translateY(-4px); }
.outlet__name{ font-family:var(--display); font-size:1.3rem; font-weight:600; }
.outlet__name .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--shu); margin-right:.6rem; vertical-align:middle; }
.outlet__addr{ color:var(--ink-70); font-size:.95rem; }
.outlet__meta{ margin-top:.6rem; font-size:.86rem; color:var(--ink-55); display:flex; flex-direction:column; gap:.25rem; }
.outlet__meta b{ color:var(--ink); font-weight:500; }
.outlet__foot{ margin-top:auto; padding-top:1.2rem; }

.mapframe{ width:100%; border:1px solid var(--line-light); border-radius:var(--radius); aspect-ratio:16/9; filter:saturate(.85) contrast(1.02); }

/* =========================================================================
   MENU PAGE — iframe frame
   ========================================================================= */
.menuframe-wrap{ max-width:var(--wrap); margin-inline:auto; }
.menuframe-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.menuframe-head .note{ font-size:.86rem; color:var(--ink-55); max-width:46ch; }
.menuframe{
  position:relative; border:1px solid var(--line-light); border-radius:var(--radius);
  background:var(--washi-2); overflow:hidden; box-shadow:0 40px 70px -50px rgba(0,0,0,.5);
}
.menuframe iframe{ width:100%; height:78vh; min-height:560px; border:0; display:block; background:var(--washi); }
.menuframe__bar{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem;
  background:var(--sumi); color:var(--paper-55); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.menuframe__bar .dotrow{ display:flex; gap:.4rem; }
.menuframe__bar .dotrow i{ width:9px; height:9px; border-radius:50%; background:var(--paper-30); }
.menuframe__bar .url{ margin-left:auto; text-transform:none; letter-spacing:.02em; color:var(--paper-55); }
.menuframe__load{ position:absolute; inset:auto 0 0 0; top:42px; display:grid; place-items:center;
  background:var(--washi); color:var(--ink-55); gap:1rem; font-size:.85rem; letter-spacing:.1em; transition:opacity .5s; }
.menuframe__load.hide{ opacity:0; pointer-events:none; }
.spinner{ width:30px; height:30px; border:2px solid var(--line-light); border-top-color:var(--shu); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.menu-cats{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.menu-cats span{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55);
  border:1px solid var(--line-light); border-radius:99px; padding:.45rem 1rem; }

/* =========================================================================
   RESERVE / FORM
   ========================================================================= */
.reserve-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.form{ display:grid; gap:1.2rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-55); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--washi); border:1px solid var(--line-light); border-radius:var(--radius);
  padding:.85rem 1rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0; border-color:var(--shu); box-shadow:0 0 0 3px rgba(197,67,43,.12);
}
.field textarea{ resize:vertical; min-height:96px; }
.form__note{ font-size:.84rem; color:var(--ink-55); }

.aside-card{ background:var(--sumi); color:var(--paper-80); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.4rem); }
.aside-card h3{ color:var(--washi); font-size:1.5rem; margin-bottom:1.2rem; }
.aside-card .line{ display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line-dark); }
.aside-card .line:last-child{ border-bottom:0; }
.aside-card .line .k{ color:var(--kin-soft); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; flex:0 0 84px; padding-top:.2rem; }
.aside-card .line .v{ color:var(--paper-80); font-size:.96rem; }
.aside-card .line .v a:hover{ color:var(--washi); }

/* =========================================================================
   CALLOUT (cta band)
   ========================================================================= */
.callout{ position:relative; overflow:hidden; }
.callout .wrap{ position:relative; z-index:2; text-align:center; }
.callout .h2{ margin-inline:auto; max-width:20ch; margin-bottom:1.4rem; }
.callout .lead{ margin-inline:auto; margin-bottom:2.2rem; }
.callout__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.wave{
  position:absolute; inset:auto 0 0 0; height:140px; z-index:1; opacity:.5;
  background:
    radial-gradient(circle at 50% 100%, transparent 28px, rgba(176,138,87,.18) 28px, rgba(176,138,87,.18) 30px, transparent 31px) 0 0/60px 60px repeat-x,
    radial-gradient(circle at 50% 100%, transparent 18px, rgba(197,67,43,.16) 18px, rgba(197,67,43,.16) 20px, transparent 21px) 0 0/60px 60px repeat-x;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ background:var(--sumi); color:var(--paper-55); padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.2rem; }
.footer__brand .brand__name{ color:var(--washi); font-size:1.5rem; }
.footer__brand p{ margin-top:1.1rem; max-width:34ch; font-size:.92rem; color:var(--paper-55); }
.footer__brand .seal{ margin-top:1.6rem; }
.fcol h4{ color:var(--washi); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.1rem; font-family:var(--body); font-weight:600; }
.fcol a, .fcol p{ display:block; font-size:.92rem; color:var(--paper-55); padding:.32rem 0; transition:color .3s var(--ease); }
.fcol a:hover{ color:var(--washi); }
.footer__bottom{ margin-top:clamp(2.4rem,4vw,3.4rem); padding-top:1.6rem; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  font-size:.8rem; color:var(--paper-30); letter-spacing:.04em; }
.footer__bottom .jp{ font-family:var(--display); letter-spacing:.18em; color:var(--paper-55); }

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scrollcue .bar::after{ animation:none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px){
  .nav, .header__cta .btn{ display:none; }
  .burger{ display:block; }
  .split{ grid-template-columns:1fr; gap:2.2rem; }
  .split--rev .split__media{ order:0; }
  .dishes{ grid-template-columns:repeat(2,1fr); }
  .outlets{ grid-template-columns:1fr; }
  .reserve-grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__rail{ display:none; }
  .hero__seal{ display:none; }
}
@media (max-width: 560px){
  .dishes{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .form .row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .gcell.wide{ grid-column:span 1; }
  .gcell.tall{ grid-row:span 1; }
  .menuframe iframe{ height:84vh; }
}

/* =========================================================================
   JARINGAN / DIREKTORI CABANG (elegan, selaras palet washi)
   ========================================================================= */
.net__region{ border-top:1px solid var(--line-light); padding-top:1.6rem; margin-top:2.2rem; }
.net__region:first-of-type{ margin-top:0; }
.net__rhead{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.2rem; }
.net__rname{ font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:.01em; }
.net__rname .jp{ color:var(--cha); font-size:.85rem; letter-spacing:.12em; margin-right:.6rem; }
.net__count{ font-size:.78rem; letter-spacing:.08em; color:var(--ink-55); }
.net__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.7rem; }

.branch{ display:flex; align-items:center; gap:.9rem; padding:.95rem 1.1rem;
  border:1px solid var(--line-light); border-radius:var(--radius); background:var(--washi);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.branch:hover{ border-color:var(--kin); transform:translateY(-2px); box-shadow:0 18px 32px -26px rgba(0,0,0,.4); }
.branch__code{ font-family:var(--display); font-size:.72rem; letter-spacing:.1em; color:var(--cha);
  background:var(--washi-2); border-radius:6px; padding:.32rem .5rem; min-width:46px; text-align:center; }
.branch__name{ font-family:var(--display); font-weight:600; font-size:1.06rem; flex:1; line-height:1.1; }
.branch__ar{ color:var(--kin); transition:transform .35s var(--ease), color .35s var(--ease); }
.branch:hover .branch__ar{ transform:translateX(3px); color:var(--shu); }

.branch--here{ background:var(--sumi); border-color:var(--sumi); cursor:default; }
.branch--here:hover{ transform:none; box-shadow:none; border-color:var(--sumi); }
.branch--here .branch__name{ color:var(--washi); }
.branch--here .branch__code{ background:rgba(244,238,225,.12); color:var(--kin-soft); }
.branch--here .here-tag{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--shu); }

@media (max-width:560px){ .net__grid{ grid-template-columns:1fr; } }

/* --- direktori dua merek (Sushi Tei + Sushiro) --- */
.net__grid{ grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); }
.netcity{ display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem;
  border:1px solid var(--line-light); border-radius:var(--radius); background:var(--washi);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.netcity:hover{ border-color:var(--kin); box-shadow:0 16px 30px -26px rgba(0,0,0,.4); }
.netcity--here{ background:var(--washi-2); border-color:var(--kin); }
.netcity__name{ font-family:var(--display); font-weight:600; font-size:1.04rem; flex:1; line-height:1.1; }
.netcity__chips{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.chip{ font-family:var(--body); font-size:.72rem; font-weight:600; letter-spacing:.03em;
  padding:.36rem .6rem; border-radius:7px; display:inline-flex; align-items:center; gap:.3rem;
  white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease); }
.chip .x{ opacity:.55; font-size:.85em; }
.chip--tei{ color:var(--shu); background:rgba(197,67,43,.10); }
.chip--tei:hover{ background:var(--shu); color:var(--washi); }
.chip--shiro{ color:#8A6A3C; background:rgba(176,138,87,.16); }
.chip--shiro:hover{ background:var(--kin); color:var(--sumi); }
.chip--here{ color:var(--kin-soft); background:var(--sumi); }
@media (max-width:560px){ .net__grid{ grid-template-columns:1fr; } .netcity{ flex-wrap:wrap; } .netcity__chips{ justify-content:flex-start; } }