/* Tiger Noodles, Treatment A, layered physical.
   Palette and type observed by Lens from the restaurant's own photographs. */

@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --red:#C42020;
  --red-deep:#9E1919;
  --orange:#E8611A;
  --ink:#1A1A1A;
  --paper:#FBF3E7;
  --card:#FFFBF3;
  --yellow:#F5C200;
  --muted:#7A6855;
  --line:#E4D6C3;

  --sp-1:.5rem;
  --sp-2:1rem;
  --sp-3:2rem;
  --sp-4:4rem;

  --fs-display:clamp(2.4rem,8vw,4.25rem);
  --fs-h2:clamp(1.6rem,4.4vw,2.4rem);
  --fs-h3:clamp(1.1rem,2.6vw,1.3rem);
  --fs-body:1rem;
  --fs-small:.875rem;

  --radius-lg:24px;
  --radius-md:14px;
  --radius-sm:8px;
  --container:1080px;
  --container-narrow:640px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Barlow', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--red); }
h1,h2,h3{
  font-family:'Barlow', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight:800;
  line-height:1.05;
  margin:0 0 var(--sp-2);
}
p{ margin:0 0 var(--sp-2); }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-2); }
.container-narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--sp-2); }

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

/* ---------- motion ---------- */
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-card{ animation:rise .45s ease-out both; }
a, .btn, .social-links a{ transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }

@media (prefers-reduced-motion: reduce){
  .hero-card{ animation:none; }
  a, .btn, .social-links a{ transition:none; }
}

/* ---------- header / nav ---------- */
.site-header{ background:var(--paper); padding:var(--sp-2) 0; }
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.brand-mark{ width:40px; height:40px; flex:none; }
.brand-name{ font-weight:800; font-size:1.1rem; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.nav-links{ display:flex; align-items:center; gap:var(--sp-2); }
.nav-links a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--ink); font-weight:800; text-transform:uppercase; font-size:.85rem; letter-spacing:.06em; padding:.4rem 0; position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--red); transition:right .15s ease; }
.nav-links a:hover::after, .nav-links a:focus-visible::after{ right:0; }
.nav-call{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 1rem; border-radius:999px; background:var(--orange); color:var(--ink)!important; white-space:nowrap; }
.nav-call::after{ display:none; }

/* ---------- hero ---------- */
.hero-media{ position:relative; margin:0 var(--sp-2); border-radius:var(--radius-lg); overflow:hidden; background:var(--ink); }
.hero-photo{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 32%; }
.hero-polaroid{
  position:absolute; right:6%; bottom:-34px; width:27%; max-width:130px;
  background:#fff; padding:6px 6px 16px; border-radius:6px; margin:0;
  box-shadow:0 14px 28px rgba(26,26,26,.28); transform:rotate(-5deg);
}
.hero-polaroid img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; }
.hero-polaroid figcaption{ display:none; }

.hero-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  margin:-48px var(--sp-2) 0;
  padding:var(--sp-3) var(--sp-2);
  position:relative;
  box-shadow:0 20px 40px rgba(26,26,26,.14);
  text-align:center;
}
.hero-card h1{ font-size:var(--fs-display); text-transform:uppercase; letter-spacing:-.01em; color:var(--red); }
.hero-lead{ max-width:46ch; margin-inline:auto; color:var(--ink); }
.hero-hours{
  font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-size:.9rem;
}
.hero-cta{ display:flex; flex-direction:column; gap:.75rem; margin-top:var(--sp-2); align-items:stretch; }
.phone-line{ margin-top:.6rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.phone-line a{ text-decoration:none; }

@media (min-width:560px){
  .hero-cta{ flex-direction:row; justify-content:center; }
  .btn{ flex:0 0 auto; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 1.75rem; border-radius:999px;
  font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  text-decoration:none; white-space:nowrap; font-size:clamp(.92rem,3.6vw,1.05rem);
  border:2px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.btn-primary:hover, .btn-primary:focus-visible{ background:#cf5313; border-color:#cf5313; transform:translateY(-1px); }
.btn-ghost{ background:transparent; border-color:var(--red); color:var(--red); }
.btn-ghost:hover, .btn-ghost:focus-visible{ background:var(--red); color:#fff; transform:translateY(-1px); }
.btn-outline{ background:transparent; border-color:var(--red); color:var(--red); }
.btn-outline:hover, .btn-outline:focus-visible{ background:var(--red); color:#fff; }

/* ---------- atmosphere (full bleed) ---------- */
.atmosphere{ position:relative; margin:var(--sp-4) 0; color:#fff; }
.atmosphere-photo{ width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center 40%; }
.atmosphere-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,12,9,.1) 0%, rgba(15,12,9,.55) 60%);
}
.atmosphere-content{
  position:absolute; left:0; right:0; bottom:0; padding:var(--sp-3) var(--sp-2);
  background:rgba(15,12,9,.9);
}
.atmosphere-content > *{ max-width:var(--container); margin-inline:auto; }
.atmosphere-content h2{ color:#fff; text-transform:uppercase; }
.atmosphere-content p{ max-width:60ch; color:#F3E7D6; }

/* ---------- sections (general) ---------- */
section.container{ margin:var(--sp-4) auto; }
h2{ font-size:var(--fs-h2); text-transform:uppercase; color:var(--red); }
.section-intro{ max-width:60ch; color:var(--muted); }

/* ---------- highlights ---------- */
.highlights-grid{ display:grid; gap:var(--sp-3); }
.highlights-photos{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-1); }
.photo-large, .photo-small{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-md); filter:saturate(1.05) contrast(1.03); }
.photo-large{ aspect-ratio:4/3; }
.photo-small{ aspect-ratio:1/1; }

.price-list{ list-style:none; margin:var(--sp-2) 0; padding:0; }
.price-list li{ display:flex; align-items:baseline; gap:.5rem; padding:.6rem 0; border-bottom:1px solid var(--line); }
.price-list .dish{ font-weight:600; flex:1 1 auto; min-width:0; }
.price-list .leader{ flex:1; border-bottom:2px dotted var(--muted); margin-bottom:5px; min-width:1rem; }
.price-list .price{ flex:0 0 auto; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--red); }
.price-note{ font-size:var(--fs-small); color:var(--muted); }

@media (min-width:760px){
  .highlights-grid{ grid-template-columns:1fr 1fr; align-items:start; }
}

/* ---------- practical ---------- */
.practical-grid{ display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
.practical-block h3{ font-size:var(--fs-h3); text-transform:uppercase; letter-spacing:.04em; color:var(--ink); margin-bottom:.4rem; }
.practical-block p{ color:var(--ink); }
.hours{ font-variant-numeric:tabular-nums; font-weight:600; }
.link-arrow{
  display:flex; align-items:center; justify-content:center; min-height:44px;
  margin-top:.5rem; padding:0 1rem; border-radius:999px; border:2px solid var(--red);
  font-weight:800; text-decoration:none; text-transform:uppercase; font-size:.85rem; letter-spacing:.04em;
  color:var(--red);
}
.link-arrow::after{ content:" \2192"; }
.link-arrow:hover, .link-arrow:focus-visible{ background:var(--red); color:#fff; }

@media (min-width:480px){
  .link-arrow{ display:inline-flex; }
}
.practical-photo-block img{ border-radius:var(--radius-md); aspect-ratio:9/8; object-fit:cover; margin-bottom:.5rem; }

@media (min-width:640px){
  .practical-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:960px){
  .practical-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- social ---------- */
.social-links{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--sp-2); }
.social-links a{
  display:inline-flex; align-items:center; height:48px; padding:0 1.25rem;
  border-radius:999px; border:2px solid var(--red); color:var(--red);
  text-decoration:none; font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:.9rem;
}
.social-links a:hover, .social-links a:focus-visible{ background:var(--red); color:#fff; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#F3E7D6; padding:var(--sp-4) var(--sp-2) var(--sp-3); margin-top:var(--sp-4); }
.footer-inner{ max-width:var(--container); margin-inline:auto; text-align:center; }
.footer-brand{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:var(--sp-2); }
.footer-brand strong{ text-transform:uppercase; letter-spacing:.03em; }
.site-footer a{ color:#fff; }
.site-footer p{ color:#D8C6AE; }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem 1rem; margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid #3a332c; }
.footer-nav a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-weight:700; text-transform:uppercase; font-size:.82rem; letter-spacing:.05em; }

/* ---------- menu page ---------- */
.menu-note{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--sp-2); color:var(--muted); font-size:var(--fs-small); max-width:70ch; margin:0 auto var(--sp-4);
}
.menu-section{ margin-bottom:var(--sp-4); }
.menu-section h2{ border-bottom:3px solid var(--red); padding-bottom:.3rem; display:inline-block; }
.menu-item{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; padding:.55rem 0; border-bottom:1px dashed var(--line); }
.menu-item .dish{ flex:1 1 auto; min-width:0; }
.menu-item .leader{ flex:1; border-bottom:2px dotted var(--muted); margin-bottom:5px; min-width:1rem; }
.menu-item .price{ flex:0 0 auto; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--red); }
.menu-item .desc{ display:block; color:var(--muted); font-size:var(--fs-small); flex-basis:100%; order:3; }

@media (max-width:479px){
  .price-list .leader, .menu-item .leader{ display:none; }
  .price-list li, .menu-item{ justify-content:space-between; }
}
.menu-formule{ background:var(--card); border-radius:var(--radius-md); padding:var(--sp-2); margin-bottom:var(--sp-2); }
.menu-formule h3{ font-size:var(--fs-h3); margin-bottom:.3rem; }
.menu-formule .price{ font-weight:800; color:var(--red); font-variant-numeric:tabular-nums; }
.menu-aside{ background:var(--ink); color:#F3E7D6; border-radius:var(--radius-md); padding:var(--sp-2) var(--sp-3); margin:var(--sp-4) 0; }
.menu-aside h3{ color:var(--yellow); font-size:var(--fs-h3); }
.menu-aside a{ color:#fff; }

/* ---------- legal page ---------- */
.legal-content{ max-width:70ch; margin:0 auto var(--sp-4); }
.legal-content h2{ font-size:var(--fs-h3); margin-top:var(--sp-3); }
.legal-content dl{ display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; }
.legal-content dt{ font-weight:800; color:var(--muted); }
.legal-content dd{ margin:0; }

/* ---------- print ---------- */
@media print{
  .site-header, .hero-polaroid, .social-links, .btn, .nav-call, .atmosphere-scrim{ display:none !important; }
  body{ background:#fff; color:#000; }
  a{ color:#000; text-decoration:underline; }
  a[href^="http"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
  .hero-card, .menu-note, .menu-formule, .menu-aside{ box-shadow:none; border:1px solid #999; }
  .price-list .price, .menu-item .price{ color:#000; }
  section{ page-break-inside:avoid; }
}