/* Nova Seafood Restaurant — components and layout.
   Square corners only (--r-*: 0); the only depth is the viewer shadow.
   The brass L-corners appear exactly twice: .hero__copy and .map-card. */

* { box-sizing: border-box; }

.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.header-inner { display: flex; align-items: center; gap: var(--s-3); min-height: 3.5rem; }
.wordmark { display: inline-flex; flex-direction: column; gap: 2px; color: var(--c-ink); text-decoration: none; line-height: 1.05; }
.wordmark-name { font-family: var(--font-display); font-size: 1.5rem; }
.wordmark-subtitle { display: none; font-family: var(--font-body); font-size: .75rem; font-weight: 500; color: var(--c-muted); }
.desktop-nav { display: none; }
.lang-switch { display: flex; gap: var(--s-1); margin-inline-start: auto; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: .9rem; font-weight: 500; color: var(--c-ink); text-decoration: none; border-bottom: 2px solid transparent; }
.lang-switch a[aria-current="true"] { border-bottom-color: var(--c-accent); }
.lang-switch a:hover { border-bottom-color: var(--c-muted); }
.header-cta.button { display: none; }
.menu-toggle { margin-inline-start: 0; }
@media (min-width: 1024px) {
  .header-inner { min-height: 64px; gap: var(--s-6); }
  .wordmark-subtitle { display: block; }
  .desktop-nav { display: flex; gap: var(--s-6); margin-inline-start: var(--s-6); }
  .desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--c-ink); text-decoration: none; }
  .desktop-nav a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); }
  .lang-switch { margin-inline-start: auto; }
  .header-cta.button { display: inline-flex; }
  .menu-toggle.icon-button { display: none; }
}

/* ---------- Drawer ---------- */
.drawer { width: min(22rem, 100% - 3rem); max-width: none; height: 100%; max-height: none; margin: 0 0 0 auto; padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); background: var(--c-surface); color: var(--c-ink); border: 0; border-left: 1px solid var(--c-line); overscroll-behavior: contain; }
.drawer::backdrop { background: rgb(16 28 51 / .5); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a { display: flex; align-items: center; min-height: 48px; font-family: var(--font-display); font-size: var(--fs-2); color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line); }
.drawer .lang-switch { margin: var(--s-6) 0; }
.drawer .button { width: 100%; }

/* ---------- Buttons, chips, links ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-6); background: var(--c-accent); color: var(--c-accent-ink); font-family: var(--font-body); font-size: 1rem; font-weight: 600; text-decoration: none; border: 0; border-radius: 0; cursor: pointer; transition: filter var(--t-fast) var(--ease); }
.button:hover { filter: brightness(.95); }
.button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.button.secondary { background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); }
.button.secondary:hover { filter: none; background: var(--c-ink); color: var(--c-surface); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: transparent; color: var(--c-ink); border: 0; cursor: pointer; }
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.fact-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.fact-chips li { background: var(--c-tint); border-left: 1px solid var(--c-accent); padding: 6px 12px; font-size: .875rem; font-weight: 500; }
.text-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 500; color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: .18em; }
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Section headers ---------- */
.section-intro h2 { margin-bottom: var(--s-3); }
.section-intro p { margin: 0; color: var(--c-muted); max-width: 46rem; }

/* ---------- Signature: brass L-corners (hero type block + map card only) ---------- */
.lcorner { position: absolute; width: 48px; height: 48px; pointer-events: none; }
.lcorner--tl { top: -8px; left: -8px; }
.lcorner--br { bottom: -8px; right: -8px; }
.lcorner::before, .lcorner::after { content: ""; position: absolute; background: var(--c-accent); }
.lcorner--tl::before { top: 0; left: 0; width: 48px; height: 1.5px; transform-origin: left center; }
.lcorner--tl::after { top: 0; left: 0; width: 1.5px; height: 48px; transform-origin: top center; }
.lcorner--br::before { bottom: 0; right: 0; width: 48px; height: 1.5px; transform-origin: right center; }
.lcorner--br::after { bottom: 0; right: 0; width: 1.5px; height: 48px; transform-origin: bottom center; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero__grid { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); }
.hero__copy { position: relative; max-width: 28rem; }
.hero__copy .kicker { margin: 0 0 var(--s-3); font-size: .875rem; font-weight: 600; color: var(--c-muted); }
.hero__copy h1 { margin-bottom: var(--s-4); }
.hero__subline { margin: 0 0 var(--s-6); color: var(--c-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__media { position: relative; margin: 0; }
.hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.image-note { position: absolute; left: 0; bottom: 0; background: rgb(16 28 51 / .6); color: #fff; font-size: .75rem; font-weight: 500; padding: 4px 8px; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  .hero__media img { aspect-ratio: 16 / 9; }
}

/* One hero entrance: copy fades, the four brass arms draw. Base state is the
   finished state so reduced motion renders it without the animation. */
.hero__copy { animation: hero-fade var(--t-hero) var(--ease) both; }
.hero__copy .lcorner--tl::before { animation: corner-x var(--t-hero) var(--ease) both; }
.hero__copy .lcorner--tl::after { animation: corner-y var(--t-hero) var(--ease) both; }
.hero__copy .lcorner--br::before { animation: corner-x var(--t-hero) var(--ease) both; }
.hero__copy .lcorner--br::after { animation: corner-y var(--t-hero) var(--ease) both; }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes corner-x { from { transform: scaleX(0); } }
@keyframes corner-y { from { transform: scaleY(0); } }

/* Sinhala/Tamil hero wrap space is reserved at mobile widths so the late font
   swap cannot shrink the subline or headline below their final line counts.
   The reservations match the final Noto rendering (no added whitespace) and are
   upper-bounded by it; a system fallback that wraps longer can still shift the
   hero on a cold load, which is recorded as a measurement limitation in
   BUILD-LOG N06 rather than padded away with permanent empty space. */
@media (max-width: 1023.98px) {
  html[data-lang="si"] .hero__copy h1,
  html[data-lang="ta"] .hero__copy h1 { min-block-size: 2lh; }
  html[data-lang="si"] .hero__subline { min-block-size: 4lh; }
  html[data-lang="ta"] .hero__subline { min-block-size: 5lh; }
}

/* ---------- About ---------- */
.about-grid { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); }
.about-copy p { margin: 0 0 var(--s-4); color: var(--c-muted); }
.about-figure { position: relative; margin: 0; }
.about-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.highlights { display: grid; gap: var(--s-4); margin: var(--s-8) 0 0; }
.highlights > div { border-top: 1px solid var(--c-line); padding-top: var(--s-3); }
.highlights dt { font-size: .8rem; font-weight: 600; color: var(--c-muted); }
.highlights dd { margin: var(--s-1) 0 0; font-weight: 500; }
@media (min-width: 768px) {
  .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Services ---------- */
.services-note { font-weight: 500; }
.section-intro .services-note { margin-top: var(--s-3); }
.service-grid { display: grid; gap: var(--s-6); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.service { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-1); align-items: start; }
.service svg { width: 32px; height: 32px; grid-row: 1 / span 2; fill: none; stroke: var(--c-accent); stroke-width: 1.75; }
.service h3 { font-size: var(--fs-2); margin: 0; }
.service p { margin: 0; color: var(--c-muted); font-size: var(--fs-0); }
@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
  .service { grid-template-columns: minmax(0, 1fr); }
  .service svg { grid-row: auto; margin-bottom: var(--s-3); }
}

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.gallery-link { position: relative; display: block; color: inherit; }
.gallery-link img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sample-badge { position: absolute; left: 0; bottom: 0; background: rgb(16 28 51 / .6); color: #fff; font-size: .75rem; font-weight: 500; padding: 4px 8px; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Image failure state ---------- */
picture.image-unavailable { position: relative; }
picture.image-unavailable img { opacity: 0; }
picture.image-unavailable::after { content: attr(data-fallback-label); position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-4); background: var(--c-tint); color: var(--c-muted); font-size: .875rem; text-align: center; }

/* ---------- Viewer ---------- */
.lightbox { width: min(100% - 2rem, 64rem); max-width: none; padding: 0; background: var(--c-surface); color: var(--c-ink); border: 0; box-shadow: var(--shadow-1); overscroll-behavior: contain; }
.lightbox::backdrop { background: rgb(16 28 51 / .72); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
.viewer-toolbar > span { background: rgb(16 28 51 / .6); color: #fff; font-size: .75rem; font-weight: 500; padding: 4px 8px; }
.viewer-image img { width: 100%; height: auto; }
.viewer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4) var(--s-4); }
.viewer-bottom p { margin: 0; color: var(--c-muted); font-size: var(--fs-0); }
.viewer-controls { display: flex; align-items: center; gap: var(--s-1); }
.viewer-count { font-size: .875rem; color: var(--c-muted); min-width: 3.5rem; text-align: center; }
body:has(dialog[open]) { overflow: hidden; }
body:has(dialog[open]) .sticky-cta { visibility: hidden; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.contact-intro { margin: 0 0 var(--s-6); color: var(--c-muted); }
.contact-details { display: grid; gap: var(--s-4); margin: 0; }
.contact-details dt { font-size: .8rem; font-weight: 600; color: var(--c-muted); }
.contact-details dd { margin: var(--s-1) 0 0; font-weight: 500; }
.contact-details a { min-height: 44px; display: inline-flex; align-items: center; }
.hours-heading { margin: var(--s-8) 0 var(--s-3); font-family: var(--font-display); font-size: var(--fs-2); }
.hours-note { margin: 0; color: var(--c-muted); max-width: 34rem; }
.map-column h3 { margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: var(--fs-2); }
.map-card { position: relative; display: grid; place-items: center; min-height: 20rem; margin-bottom: 12px; padding: var(--s-6); background: var(--c-surface); }
.map-card iframe { display: block; width: 100%; height: 100%; min-height: 20rem; border: 0; }
.map-placeholder { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.map-placeholder p { margin: 0; color: var(--c-muted); }
.map-pin { width: 48px; height: 48px; fill: none; stroke: var(--c-accent); stroke-width: 2; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--c-line); padding-block: clamp(2.5rem, 6vw, 4rem) calc(4.5rem + env(safe-area-inset-bottom)); }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.footer-top p { margin: var(--s-2) 0 0; color: var(--c-muted); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-8); color: var(--c-muted); font-size: var(--fs-0); }
.footer-bottom p { margin: 0; }
.preview-notice { margin-top: var(--s-8); border-top: 1px solid var(--c-line); padding-top: var(--s-4); max-width: 46rem; }
.preview-notice p { margin: 0 0 var(--s-3); color: var(--c-muted); font-size: var(--fs-0); }
.offer-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* The campaign window toggles the hidden attribute; an author display rule
   must not defeat it (see BUILD-LOG N05). */
.offer-link[hidden] { display: none; }
@media (min-width: 1024px) { .site-footer { padding-bottom: clamp(2.5rem, 6vw, 4rem); } }

/* ---------- Sticky CTA ---------- */
.sticky-cta { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--c-surface); border-top: 1px solid var(--c-line); }
.sticky-cta .button { width: 100%; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}