/* ============================================================
   ARATI RESTAURANT — Design System
   Display: Cormorant Garamond | Body: Outfit
   Palette: Saffron / Deep Maroon / Ivory / Gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Outfit:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

:root{
  /* Outfit/Cormorant Garamond only cover Latin glyphs — for Japanese
     characters the browser automatically falls through to the next font
     in the stack per-character, so mixed EN/JA text stays legible and
     on-brand instead of dropping to the OS default (MS Gothic etc). */
  --font-sans:'Outfit','Noto Sans JP',sans-serif;
  --font-serif:'Cormorant Garamond','Noto Serif JP',serif;
  --saffron:#E3711F;
  --saffron-deep:#C4590F;
  --saffron-light:#FCEEDF;
  --maroon:#4A1220;
  --maroon-soft:#6B1E2F;
  --cream:#FFF9F2;
  --paper:#FFFDFA;
  --gold:#C9982F;
  --gold-light:#E8C874;
  --ink:#2B1710;
  --ink-soft:#6E5B4F;
  --line:#EEDFC9;
  --white:#FFFFFF;

  --radius-s:10px;
  --radius-m:18px;
  --radius-l:28px;

  --shadow-soft:0 20px 50px -25px rgba(74,18,32,0.35);
  --shadow-card:0 12px 30px -12px rgba(74,18,32,0.25);

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

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img,video{max-width:100%;display:block;}
table{max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:700;
  margin:0;
  color:var(--maroon);
  letter-spacing:.01em;
  overflow-wrap:break-word;
  word-break:normal;
}
/* Japanese headings: don't inherit the Latin-tuned letter-spacing/italic
   styling, and allow line breaks between characters so long headings
   never overflow their container on narrow screens (iPhone SE/mini). */
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ja) h4,
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] h4{
  letter-spacing:0;
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
}
html[lang="ja"] .eyebrow{letter-spacing:.14em;}
html[lang="ja"] h1 em,html[lang="ja"] h2 em,html[lang="ja"] h3 em{font-style:normal;}
.eyebrow{
  font-family:var(--font-sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--saffron-deep);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:'';
  width:28px;height:1px;
  background:var(--saffron);
}
.container{
  max-width:1560px;
  margin:0 auto;
  padding:0 clamp(16px,2.6vw,44px);
}
::selection{background:var(--saffron);color:#fff;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--saffron-deep);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Paisley divider (signature motif) ---------- */
.motif-divider{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:0 auto;
  color:var(--gold);
}
.motif-divider .line{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.motif-divider svg{width:22px;height:22px;flex-shrink:0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--saffron) 0%,var(--saffron-deep) 100%);
  color:#fff;
  box-shadow:0 14px 30px -12px rgba(196,89,15,.65);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 36px -12px rgba(196,89,15,.75);}
.btn-outline{
  background:transparent;
  border:1.5px solid var(--maroon);
  color:var(--maroon);
}
.btn-outline:hover{background:var(--maroon);color:#fff;transform:translateY(-3px);}
.btn-ghost-light{
  border:1.5px solid rgba(255,255,255,.7);
  color:#fff;
}
.btn-ghost-light:hover{background:#fff;color:var(--maroon);transform:translateY(-3px);}
.btn-sm{padding:10px 20px;font-size:.72rem;}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:20px 0;
  background:linear-gradient(120deg,#3E0F1B 0%,var(--maroon) 45%,var(--maroon-soft) 100%);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:2px solid var(--gold);
  box-shadow:0 10px 34px -16px rgba(20,4,8,.55);
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.nav::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-light),var(--saffron),var(--gold-light),transparent);
  opacity:.9;
}
.nav.scrolled{
  padding:12px 0;
  background:linear-gradient(120deg,#320B14 0%,#3E0F1B 45%,var(--maroon) 100%);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.6);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  max-width:1560px;margin:0 auto;padding:0 clamp(16px,2.6vw,44px);
  box-sizing:border-box;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;min-width:0;}
.brand-mark{width:46px;height:46px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}
.brand-name{
  font-family:var(--font-serif);
  font-size:1.55rem;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.3);
}
.brand-name span{display:block;white-space:nowrap;font-family:var(--font-sans);font-size:.56rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin-top:4px;color:var(--gold-light);}
/* The tagline's letter-spacing makes it print wider than "Arati Restaurant"
   itself, and .brand doesn't shrink — so on mid-width screens (roughly
   600-900px) it was quietly forcing the whole navbar row past the
   viewport and crowding out the takeout button/search/hamburger. Tighten
   the spacing progressively, then drop it once the row gets tight; the
   logo + main name alone is still a complete, recognizable brand mark. */
@media(max-width:980px){
  .brand-name span{letter-spacing:.12em;}
}
@media(max-width:900px){
  .brand-name span{display:none;}
}
.nav-links{
  display:flex;align-items:center;gap:clamp(9px,1.3vw,22px);
  min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  font-size:clamp(.72rem,.95vw,.84rem);font-weight:700;letter-spacing:.03em;
  position:relative;padding:8px 0;
  color:#F3E1D2;
  white-space:nowrap;flex-shrink:0;
  transition:color .25s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:2px;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--saffron));transition:width .35s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-drawer-brand{display:none;}
.nav-drawer-lang{display:none;}
.lang-switch{display:flex;}
.nav-right{display:flex;align-items:center;gap:clamp(6px,.8vw,12px);flex-shrink:0;min-width:0;}
.nav-takeout-group{display:flex;align-items:center;gap:8px;min-width:0;}
@media (min-width:1561px){
  .nav-drawer-lang{display:none !important;}
  .lang-switch{display:flex !important;}
}
.nav-branch-select-wrap{display:flex;align-items:center;min-width:0;}
.nav-branch-select{
  appearance:none; border:none; border-radius:999px; background:var(--saffron); color:#fff; min-height:38px;
  padding:0 34px 0 12px; font-size:.72rem; font-weight:700; letter-spacing:.04em; cursor:pointer; max-width:150px;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 10px) calc(50% - 2px);background-size:6px 6px;background-repeat:no-repeat;
}
.glf-button{cursor:pointer;white-space:nowrap;}
.icon-btn{
  position:relative;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);
  color:#F3E1D2;
  transition:background .3s, transform .3s, color .3s;
  flex-shrink:0;
}
.icon-btn:hover{transform:translateY(-2px);background:var(--saffron);color:#fff;}
.icon-btn svg{width:18px;height:18px;}
.nav-toggle{display:none;}
.lang-switch{background:rgba(255,255,255,.12);}
.lang-switch a{color:#F3E1D2;}
.lang-switch a.active{background:var(--saffron);color:#fff;}

/* ---------- Placeholder image field ---------- */
.img-field{
  position:relative;
  background:repeating-linear-gradient(135deg,var(--saffron-light),var(--saffron-light) 10px,#fff 10px,#fff 20px);
  display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--gold);
  color:var(--saffron-deep);
  text-align:center;
  overflow:hidden;
}
.img-field > img{width:100%;height:100%;object-fit:cover;display:block;}
.img-field .placeholder-label{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:20px;
}
.img-field .placeholder-label svg{width:30px;height:30px;opacity:.8;}
.img-field .placeholder-label small{font-family:var(--font-sans);font-weight:400;letter-spacing:.02em;text-transform:none;opacity:.75;font-size:.72rem;}

/* ---------- Footer ---------- */
.footer{
  background:var(--maroon);
  color:#F3E4D6;
  padding:90px 0 30px;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 15% 20%,rgba(227,113,31,.18),transparent 45%),
             radial-gradient(circle at 85% 80%,rgba(201,152,47,.14),transparent 45%);
  pointer-events:none;
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:50px;
  position:relative;z-index:1;
  padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer h4{color:#F3E4D6;font-family:var(--font-sans);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin-bottom:22px;}
.footer-brand-name{font-family:var(--font-serif);font-size:1.9rem;color:#fff;margin-bottom:14px;}
.footer p{color:#D9BFAE;font-size:.9rem;margin:0 0 8px;}
.footer-links li{margin-bottom:12px;}
.footer-links a{color:#D9BFAE;font-size:.9rem;transition:color .3s,padding-left .3s;}
.footer-links a:hover{color:var(--gold-light);padding-left:6px;}
.footer-social{display:flex;gap:12px;margin-top:20px;}
.footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:.3s;}
.footer-social a:hover{background:var(--saffron);border-color:var(--saffron);transform:translateY(-3px);}
.footer-social svg{width:16px;height:16px;}
.footer-bottom{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;font-size:.78rem;color:#B99A87;
  flex-wrap:wrap;gap:10px;
}
.footer-bottom a{color:var(--saffron-light);text-decoration:underline;text-underline-offset:2px;}
.footer-bottom a:hover{color:#fff;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(120%);
  background:var(--maroon);color:#fff;
  padding:16px 26px;border-radius:999px;
  display:flex;align-items:center;gap:12px;
  font-size:.85rem;font-weight:500;
  box-shadow:0 20px 40px -15px rgba(0,0,0,.4);
  z-index:2000;
  transition:transform .5s var(--ease);
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast svg{width:18px;height:18px;color:var(--gold-light);flex-shrink:0;}

/* ---------- Section basics ---------- */
.section{padding:110px 0;}
.section-head{text-align:center;max-width:640px;margin:0 auto 60px;}
.section-head h2{font-size:clamp(2.1rem,4vw,3.2rem);margin:16px 0;}
.section-head p{color:var(--ink-soft);font-size:1.02rem;}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
/* Safety net: if JavaScript never runs (blocked, failed to load, etc.)
   content must still be visible rather than permanently hidden. */
.no-js .reveal{opacity:1;transform:none;}

/* Mobile nav drawer kicks in below this width. This has been tuned up
   several times while adding items to nav-right (the "Takeout Order"
   button, search, language switch) — each addition ate into the room
   nav-links had, and narrower fixes (1200 -> 1320 -> 1400px) kept getting
   caught out by specific laptop widths / browser zoom levels where the
   last link (Contact) got scrolled out of view inside nav-links' own
   hidden-scrollbar row (body has overflow-x:hidden, so overflow there is
   invisible rather than a visible scrollbar).
   Instead of chasing another specific pixel value, this is set to match
   .nav-inner's own max-width (1560px): below that width the full desktop
   nav can never reliably fit everything, so the drawer takes over instead
   of silently clipping/hiding a link. */
@media (max-width:1560px){
  .nav{padding:18px 0;}
  .nav-inner{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
  .nav-right{margin-left:auto;gap:12px;display:flex;align-items:center;}
  .nav-links{position:fixed;top:0;right:0;bottom:0;height:100vh;width:clamp(280px,80vw,320px);box-sizing:border-box;
    background:var(--cream);flex-direction:column;justify-content:flex-start;align-items:flex-start;
    padding:110px 28px 30px;gap:20px;transform:translateX(110%);transition:transform .35s var(--ease);
    box-shadow:-20px 0 50px -20px rgba(0,0,0,.25);overflow-y:auto;z-index:1001;will-change:transform;
  }
  /* Drawer sits on a light cream background, so links need dark, high-contrast
     text -- the default #F3E1D2 (pale cream) is designed for the dark navbar
     and is nearly invisible here. */
  .nav-drawer-brand{
    display:flex;align-items:center;gap:12px;width:100%;
    padding-bottom:18px;margin-bottom:4px;border-bottom:1px solid rgba(74,18,32,.12);
  }
  .nav-drawer-brand img{width:38px;height:38px;flex-shrink:0;object-fit:contain;}
  .nav-drawer-brand span{font-family:var(--font-serif);font-size:1.2rem;font-weight:800;color:var(--ink);line-height:1.15;}
  .nav-drawer-lang{display:flex !important;align-items:center;justify-content:center;gap:8px;width:100%;margin-bottom:6px;padding:10px 12px;border-radius:18px;background:rgba(74,18,32,.05);}
  .nav-drawer-lang a{display:inline-flex;align-items:center;justify-content:center;text-align:center;flex:1;min-width:54px;padding:7px 12px;border-radius:14px;background:transparent;color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.08em;opacity:.7;line-height:1;}
  .nav-drawer-lang a.active{background:var(--saffron);color:#fff;opacity:1;}
  .lang-switch{display:none !important;}
  @media (max-width:420px){
    .nav-drawer-lang{padding:8px 10px;gap:6px;border-radius:16px;}
    .nav-drawer-lang a{min-width:0;padding:8px 10px;font-size:.68rem;letter-spacing:.06em;border-radius:12px;}
  }
  .nav-links a{font-size:.95rem;display:block;width:100%;padding:14px 0;margin:0;
    border-bottom:1px solid rgba(74,18,32,.08);box-sizing:border-box;
    color:var(--ink);font-weight:700;}
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a:hover,.nav-links a.active{color:var(--saffron-deep);}
  .nav-links a::after{background:linear-gradient(90deg,var(--saffron),var(--saffron-deep));}
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{position:relative;display:flex;width:42px;height:42px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(62,15,27,.9);align-items:center;justify-content:center;color:#fff;flex-shrink:0;z-index:1003;appearance:none;-webkit-appearance:none;box-shadow:0 3px 12px rgba(20,4,8,.28);touch-action:manipulation;transition:background .3s,color .3s;}
  .nav-toggle svg{display:block;width:20px;height:20px;flex:0 0 20px;}
  .nav-toggle:hover{background:var(--saffron);color:#fff;}
  .nav-toggle.is-active{background:var(--maroon-soft);color:#fff;}
}
@media (max-width:980px){
  .nav-right{gap:10px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav-inner{gap:10px;}
  .nav-right{gap:8px;}
  .brand{gap:8px;}
  .nav-links{padding:100px 24px 28px;}
  .nav-toggle{width:40px;height:40px;}
  .icon-btn{width:38px;height:38px;}
}
@media (max-width:600px){
  .lang-switch{display:none;}
  .nav-links{padding:94px 16px 26px;width:100vw;}
  .nav-toggle{width:40px;height:40px;}
  .footer-grid{grid-template-columns:1fr;}
  .section{padding:80px 0;}
}
@media (max-width:420px){
  .nav-links{padding:84px 14px 24px;}
  .brand-name{font-size:1.1rem;}
  .brand-mark{width:36px;height:36px;}
  .nav-right{gap:6px;}
  .nav-takeout-group{gap:6px;max-width:calc(100% - 54px);}
  .nav-takeout-btn{max-width:130px;padding:0 10px;font-size:.52rem;}
  .nav-branch-select-wrap{width:108px;min-width:108px;max-width:108px;flex:0 0 108px;}
  .nav-branch-select{width:108px;max-width:108px;padding:0 16px 0 6px;font-size:.5rem;letter-spacing:0;}
  .container{padding:0 16px;}
}