/* ==========================================================================
   Tegal Sari — Balinese & Indonesian Restaurant
   Global stylesheet
   ========================================================================== */

/* ---------- Fonts ----------
   Self-hosted variable woff2 from Google Fonts (SIL OFL, license texts in
   assets/fonts/). One file per family covers the whole weight range, so the
   weights used in this sheet are free to change. Only the latin and latin-ext
   subsets ship; the unicode-range gates keep latin-ext off the wire unless a
   glyph needs it. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root{
  --forest: #2f3d2b;
  --forest-dark: #1f2a1c;
  --terracotta: #c1622f;
  --gold: #c9a24a;
  --cream: #f7f2e7;
  --cream-2: #efe6d3;
  --ink: #22241f;
  --ink-soft: #55584f;
  --line: rgba(34,36,31,0.12);
  --radius: 4px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.15;
  color:var(--forest-dark);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 32px;}
.eyebrow{
  font-size:12.5px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:600;
  display:inline-block;
  margin-bottom:14px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  border-radius:2px;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .25s ease;
}
.btn-primary{background:var(--terracotta); color:#fff;}
.btn-primary:hover{background:#a94f22;}
.btn-outline{border-color:rgba(255,255,255,0.55); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,0.12);}
.btn-outline-dark{border-color:var(--forest-dark); color:var(--forest-dark);}
.btn-outline-dark:hover{background:var(--forest-dark); color:#fff;}

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
header.scrolled{
  background:rgba(247,242,231,0.96);
  padding:14px 0;
  box-shadow:0 2px 18px rgba(0,0,0,0.06);
  backdrop-filter:blur(6px);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between;}
.logo{
  display:inline-flex; align-items:center; gap:12px; flex-shrink:0;
  font-family:'Fraunces', serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:0.5px;
  color:#fff;
  transition:color .35s ease;
}
/* The mark carries no wordmark of its own - the name beside it is live text,
   which is why the img is alt="" rather than repeating it to a screen reader. */
/* flex:none matters: .nav-wrap can squeeze .logo, and the global
   img{max-width:100%} then shrinks the mark below its set height. */
.logo img{display:block; flex:none; height:38px; width:auto; max-width:none; transition:height .35s ease;}
header.scrolled .logo img{height:32px;}
.logo-text span{color:var(--gold);}
header.scrolled .logo{color:var(--forest-dark);}
nav ul{display:flex; gap:38px; list-style:none;}
nav a{
  font-size:13.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#fff;
  font-weight:500;
  position:relative;
  transition:color .35s ease;
}
header.scrolled nav a{color:var(--ink);}
nav a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .25s ease;
}
nav a:hover::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:24px;}
.nav-cta .btn{padding:11px 24px; font-size:12.5px;}
header.scrolled .btn-outline{border-color:var(--forest-dark); color:var(--forest-dark);}
header.scrolled .btn-outline:hover{background:var(--forest-dark); color:#fff;}
.menu-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.menu-toggle span{width:26px; height:2px; background:#fff; transition:.3s;}
header.scrolled .menu-toggle span{background:var(--forest-dark);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(180deg, rgba(20,24,16,0.55) 0%, rgba(20,24,16,0.35) 40%, rgba(20,24,16,0.75) 100%),
    url('../images/sang.jpg') center/cover no-repeat;
}
/* WebP is ~22% smaller, but a browser that does not understand image-set() would
   drop the whole background declaration, so the JPEG above stays as the base and
   this only overrides it where image-set() is actually supported. The preload in
   <head> carries type="image/webp" so the same browsers skip it too. */
@supports (background-image: image-set(url('../images/sang.webp') type('image/webp'))){
  .hero{
    background:
      linear-gradient(180deg, rgba(20,24,16,0.55) 0%, rgba(20,24,16,0.35) 40%, rgba(20,24,16,0.75) 100%),
      image-set(url('../images/sang.webp') type('image/webp'),
                url('../images/sang.jpg') type('image/jpeg')) center/cover no-repeat;
  }
}
.hero-content{max-width:680px; color:#fff;}
.hero .eyebrow{color:var(--gold);}
.hero h1{
  font-size:clamp(42px, 6vw, 74px);
  color:#fff;
  margin-bottom:22px;
}
.hero h1 em{color:var(--gold); font-style:italic;}
.hero p{
  font-size:17px;
  color:rgba(255,255,255,0.86);
  max-width:520px;
  margin-bottom:36px;
  font-weight:300;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.scroll-cue{
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.8;
}
.scroll-cue::after{
  content:''; width:1px; height:40px; background:rgba(255,255,255,0.6);
  animation:scrollDown 2s infinite;
}
@keyframes scrollDown{
  0%{transform:scaleY(0); transform-origin:top;}
  50%{transform:scaleY(1); transform-origin:top;}
  51%{transform-origin:bottom;}
  100%{transform:scaleY(0); transform-origin:bottom;}
}

/* ---------- Section generic ---------- */
section{padding:120px 0;}
.section-head{max-width:620px; margin-bottom:60px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(32px, 4vw, 46px);}
.section-head p{color:var(--ink-soft); margin-top:16px; font-size:16px;}
.section-head.flush{margin-bottom:0;}

/* ---------- About ---------- */
.about{background:var(--cream);}
.about-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center;
}
/* aspect-ratio rather than a fixed height: the three images are positioned in
   percentages, so their own shapes only stay put if the box keeps its shape at
   every width. A fixed height made them landscape on a wide tablet. */
.about-imgs{position:relative; aspect-ratio:47/56;}
.about-imgs img{
  position:absolute; object-fit:cover; border-radius:4px; box-shadow:0 25px 50px -20px rgba(0,0,0,0.35);
}
.about-imgs img.img1{width:60%; height:76%; top:0; left:0; z-index:1;}
/* img3 fills the corner img1 leaves open; img2 overlaps img1 and sits on top.
   Both carry box-sizing:border-box, so object-fit sees the box minus the border. */
.about-imgs img.img2{width:46%; height:50%; bottom:0; right:0; z-index:3; border:6px solid var(--cream);}
.about-imgs img.img3{width:34%; height:30%; top:6%; right:4%; z-index:2; border:6px solid var(--cream);}
.about-copy p{color:var(--ink-soft); margin-bottom:18px; font-size:16px;}
.stat-row{display:flex; gap:48px; margin-top:38px; padding-top:32px; border-top:1px solid var(--line);}
.stat h3{font-size:36px; color:var(--terracotta); margin-bottom:4px;}
.stat span{font-size:12.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft);}

/* ---------- Menu ---------- */
.menu{background:var(--forest-dark); color:#f2ede0; position:relative;}
.menu::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 20%, rgba(201,162,74,0.08), transparent 45%);
  pointer-events:none;
}
.menu .section-head h2{color:#fff;}
.menu .section-head p{color:rgba(242,237,224,0.65);}
.menu-tabs{
  display:flex; gap:10px; margin-bottom:50px; flex-wrap:wrap;
}
.menu-tab{
  padding:10px 22px; border:1px solid rgba(242,237,224,0.25); border-radius:30px;
  font-size:13px; letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  background:transparent; color:rgba(242,237,224,0.75); transition:.25s;
}
.menu-tab.active, .menu-tab:hover{background:var(--gold); border-color:var(--gold); color:var(--forest-dark);}
.menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px 60px;}
.menu-panel{display:none;}
.menu-panel.active{display:grid; grid-template-columns:1fr 1fr; gap:36px 60px;}
.menu-item{display:flex; align-items:center; gap:18px; padding-bottom:20px; border-bottom:1px dashed rgba(242,237,224,0.2);}
.menu-item h4{color:#fff; font-size:18px; font-weight:600; margin-bottom:6px;}
.menu-item p{font-size:13.5px; color:rgba(242,237,224,0.6); max-width:280px;}
.menu-item .price{font-family:'Fraunces', serif; font-size:18px; color:var(--gold); white-space:nowrap; margin-left:auto;}
.menu-photo{
  flex:none; width:72px; height:72px; border-radius:8px; overflow:hidden;
  border:none; padding:0; cursor:zoom-in; background:none;
}
.menu-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.menu-group{
  grid-column:1 / -1; margin-top:14px;
  font-family:'Fraunces', serif; font-size:15px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--gold);
}
.menu-group:first-child{margin-top:0;}
.menu-note{
  margin-top:44px; text-align:center; font-size:13px;
  color:rgba(242,237,224,0.5);
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{display:flex;}
.lightbox-backdrop{position:absolute; inset:0; background:rgba(34,36,31,0.9);}
.lightbox-close{
  position:absolute; top:20px; right:24px; z-index:1;
  width:40px; height:40px; border-radius:50%; border:none;
  background:rgba(247,242,231,0.15); color:var(--cream);
  font-size:24px; line-height:1; cursor:pointer;
}
.lightbox-close:hover{background:rgba(247,242,231,0.3);}
.lightbox-content{
  position:relative; max-width:90vw; max-height:80vh; margin:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.lightbox-content img{max-width:90vw; max-height:70vh; object-fit:contain; border-radius:6px; display:block;}
.lightbox-content figcaption{font-family:'Fraunces', serif; font-size:17px; color:var(--cream); text-align:center;}

/* ---------- Gallery ---------- */
.gallery{background:var(--cream);}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:190px; gap:14px;
}
.gallery-grid picture{grid-column:span 1; grid-row:span 1; overflow:hidden; border-radius:3px; position:relative; display:block;}
.gallery-grid picture:nth-child(1){grid-column:span 2; grid-row:span 2;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
/* Only the transform is animated; promoting it keeps the hover off the main thread. */
.gallery-grid picture:hover img{will-change:transform;}
.gallery-grid picture:hover img{transform:scale(1.08);}
.gallery-grid picture::after{
  content:''; position:absolute; inset:0; background:rgba(31,42,28,0.15); opacity:0; transition:.3s;
}
.gallery-grid picture:hover::after{opacity:1;}

/* ---------- Testimonials ---------- */
.testimonials{background:var(--cream-2);}
.testi-track{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;}
.testi-card{
  background:#fff; padding:38px 32px; border-radius:4px; box-shadow:0 15px 40px -25px rgba(0,0,0,0.25);
}
.testi-card .stars{color:var(--gold); letter-spacing:3px; margin-bottom:18px; font-size:15px;}
.testi-card p{color:var(--ink-soft); font-size:15px; margin-bottom:24px; font-style:italic;}
.testi-person{display:flex; align-items:center; gap:14px;}
.testi-person img{width:46px; height:46px; border-radius:50%; object-fit:cover;}
.testi-person h5{font-family:'Fraunces', serif; font-size:15px; color:var(--ink);}
.testi-person span{font-size:12px; color:var(--ink-soft);}
.testi-card{display:flex; flex-direction:column;}
/* Pushes the attribution block to the bottom so cards of differing review
   length still line their author rows up. */
.testi-person{margin-top:auto;}
.testi-link{
  margin-top:16px; align-self:flex-start;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--terracotta); border-bottom:1px solid transparent; transition:.2s;
}
.testi-link:hover{border-bottom-color:var(--terracotta);}
.testi-source{
  margin-top:32px; text-align:center; font-size:13px; color:var(--ink-soft);
}
.testi-source a{color:var(--ink-soft); border-bottom:1px solid var(--line);}
.testi-source a:hover{color:var(--ink);}

/* ---------- Reserve / Contact ---------- */
.reserve{
  background:
    linear-gradient(120deg, rgba(31,42,28,0.92), rgba(31,42,28,0.88)),
    url('../images/spring-rolls.jpg') center/cover fixed;
  color:#fff;
}
/* Same guard as the hero: a browser that cannot parse image-set() throws the
   whole declaration away, so the plain url() above has to stand on its own. */
@supports (background-image: image-set(url('../images/spring-rolls.webp') type('image/webp'))){
  .reserve{
    background:
      linear-gradient(120deg, rgba(31,42,28,0.92), rgba(31,42,28,0.88)),
      image-set(url('../images/spring-rolls.webp') type('image/webp'),
                url('../images/spring-rolls.jpg') type('image/jpeg')) center/cover fixed;
  }
}
.reserve-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.reserve .section-head h2{color:#fff;}
/* This heading carries .section-head itself rather than sitting inside one, so
   the descendant rule above never matches it and it fell back to the dark
   heading colour on a dark background. */
.reserve h2.section-head{color:#fff; font-weight:700;}
.reserve .section-head p{color:rgba(255,255,255,0.7);}
.reserve-intro{color:rgba(255,255,255,0.7); margin-top:16px; max-width:440px;}
.info-list{margin-top:30px; display:flex; flex-direction:column; gap:22px;}
.info-item{display:flex; gap:16px; align-items:flex-start;}
.info-item .ico{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold);
}
.info-item h5{font-size:15px; margin-bottom:4px; font-family:'Fraunces', serif;}
.info-item p{font-size:14px; color:rgba(255,255,255,0.65);}
.res-form{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  padding:40px; border-radius:6px; backdrop-filter:blur(4px);
}
.res-form h3{color:#fff; font-size:22px; margin-bottom:24px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:12px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.6);}
.field input, .field select, .field textarea{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:3px;
  padding:12px 14px; color:#fff; font-family:'Jost', sans-serif; font-size:14px;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,0.4);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
.field-spaced{margin-bottom:20px;}
.res-form .btn{width:100%; justify-content:center; margin-top:8px;}
.form-note{font-size:12.5px; color:rgba(255,255,255,0.55); margin-top:12px; text-align:center;}
.info-item a{border-bottom:1px solid rgba(201,162,74,0.5); transition:color .2s;}
.info-item a:hover{color:var(--gold);}

/* ---------- Footer ---------- */
footer{background:var(--forest-dark); color:rgba(242,237,224,0.6); padding:70px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(242,237,224,0.1);}
.footer-logo{font-family:'Fraunces', serif; font-size:24px; color:#fff; margin-bottom:16px; display:block;}
.footer-logo span{color:var(--gold);}
.footer-col h5{color:#fff; font-size:14px; letter-spacing:1px; text-transform:uppercase; margin-bottom:20px;}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
.footer-col a{font-size:14px; transition:.2s;}
.footer-col a:hover{color:var(--gold);}
.footer-about{font-size:14px; max-width:280px; margin-bottom:20px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; flex-wrap:wrap; gap:12px;}
.footer-bottom a{color:rgba(242,237,224,0.85); text-decoration:underline; text-decoration-color:rgba(242,237,224,0.3); text-underline-offset:3px; transition:.2s;}
.footer-bottom a:hover{color:var(--gold); text-decoration-color:var(--gold);}
.social{display:flex; gap:12px;}
.social a{
  width:36px; height:36px; border-radius:10px; border:1px solid rgba(242,237,224,0.2);
  display:flex; align-items:center; justify-content:center; color:inherit;
}
.social a:hover{background:var(--gold); color:var(--forest-dark); border-color:var(--gold);}
.social svg{display:block; fill:currentColor;}
.social .icon-ig{width:17px; height:17px;}
.social .icon-fb{width:15px; height:15px;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Motion & performance ---------- */
/* `background-attachment:fixed` forces a repaint on every scroll frame and is
   ignored or janky on most mobile browsers — drop to a normal scrolling image. */
@media (max-width:980px), (hover:none){
  .reserve{background-attachment:scroll;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .scroll-cue::after{animation:none;}
  .gallery-grid img, .btn, header, nav a::after{transition:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  nav{display:none;}
  .menu-toggle{display:flex;}
  .about-grid, .reserve-grid{grid-template-columns:1fr;}
  /* width:100% is load-bearing. The auto margins stop this grid item from
     stretching, and every child is absolutely positioned, so without a width
     the box measures its content at zero and aspect-ratio collapses it. */
  .about-imgs{width:100%; max-width:440px; margin:0 auto 20px;}
  .testi-track{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid picture:nth-child(1){grid-column:span 2;}
  .menu-panel.active{grid-template-columns:1fr;}
}
@media (max-width:600px){
  section{padding:80px 0;}
  /* Logo, two CTAs and the burger do not fit 375px: calling wins over the
     reserve button, which the nav still reaches via Contact. */
  .nav-cta .btn-primary{display:none;}
  .nav-cta .btn{padding:10px 18px;}
  .logo{gap:8px; font-size:21px;}
  .logo img, header.scrolled .logo img{height:28px;}
  .form-row{grid-template-columns:1fr;}
  .stat-row{gap:28px;}
  /* The 190px auto-rows make each tile taller than it is wide at this width,
     which crops a landscape photo down to a vertical sliver. One column, and
     let the photos keep their own height. */
  .gallery-grid{grid-template-columns:1fr; grid-auto-rows:auto;}
  .gallery-grid picture:nth-child(1){grid-column:span 1; grid-row:span 1;}
  .gallery-grid img{height:auto;}
  .footer-grid{grid-template-columns:1fr;}
  .menu-photo{width:56px; height:56px;}
}