/* Casa Brasa, sample restaurant site by Solo Trace. Own palette and type (Part 7 concept 3): charcoal, smoke, terracotta, gold, linen; Playfair Display + Source Sans 3. */
:root {
  --charcoal: #1F1B18; --smoke: #2B2622; --terracotta: #A8462C; --gold: #D4A95A; --linen: #F4ECE2; --linen-muted: #C9BFB2;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --max: 72rem; --gutter: clamp(1rem, 4vw, 2.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--charcoal); }
body { margin: 0; font-family: var(--sans); font-size: 1.05rem; line-height: 1.65; color: var(--linen); background: var(--charcoal); -webkit-font-smoothing: antialiased; position: relative; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: 0.005em; color: var(--linen); }
h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; position: relative; }
.eyebrow { display: block; font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; font-weight: 600; }
.lead { font-size: 1.2rem; color: var(--linen-muted); max-width: 38rem; }
.gold-rule { width: 3.5rem; height: 1px; background: var(--gold); margin: 1.25rem 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.8rem 1.7rem; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-radius: 2px; border: 1.5px solid var(--terracotta); background: var(--terracotta); color: var(--linen); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.btn:hover { background: #8f3a24; border-color: #8f3a24; }
.btn--gold { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn--gold:hover { background: rgba(212, 169, 90, 0.12); }

/* Sample banner */
.banner { background: #000; color: var(--linen); font-size: 0.8rem; letter-spacing: 0.04em; position: relative; z-index: 3; }
.banner .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; min-height: 2.5rem; padding-block: 0.3rem; }
.banner a { color: var(--linen); display: inline-flex; align-items: center; min-height: 2.75rem; }
.banner__links { display: flex; align-items: center; gap: 1.25rem; }
.lang { display: inline-flex; gap: 0.2rem; }
.lang a { text-decoration: none; padding-inline: 0.5rem; min-width: 2.75rem; justify-content: center; opacity: 0.7; }
.lang a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; }
.lang a[hidden] { display: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 3; background: rgba(31, 27, 24, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(212, 169, 90, 0.25); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.04em; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.brand span { color: var(--gold); }
.nav { display: none; gap: 1.5rem; }
.nav a { text-decoration: none; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; min-height: 2.75rem; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
@media (min-width: 900px) { .nav { display: flex; } }

/* Orbs: soft light behind everything, low opacity so text keeps AA contrast. Static when reduced motion is on. */
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.16; will-change: transform; }
.orb--1 { width: 38vw; height: 38vw; left: -8vw; top: 12vh; background: var(--terracotta); animation: drift1 28s ease-in-out infinite alternate; }
.orb--2 { width: 30vw; height: 30vw; right: -6vw; top: 42vh; background: var(--gold); opacity: 0.12; animation: drift2 34s ease-in-out infinite alternate; }
.orb--3 { width: 26vw; height: 26vw; left: 38vw; bottom: -10vh; background: #c9733a; opacity: 0.1; animation: drift3 40s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0, 0); } to { transform: translate(14vw, 10vh); } }
@keyframes drift2 { from { transform: translate(0, 0); } to { transform: translate(-12vw, -14vh); } }
@keyframes drift3 { from { transform: translate(0, 0); } to { transform: translate(-10vw, -8vh); } }
main, .site-footer { position: relative; z-index: 1; }

/* Cinematic hero */
.hero { position: relative; min-height: min(88vh, 48rem); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: -12% 0; z-index: -1; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform; }
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; }
.hero__media.has-video video { opacity: 1; }
/* Hero fire (see fire.js). Tuning variables; override here or per page. */
.hero { --fire-height: 0.52; --fire-speed: 1; --fire-brightness: 1; --fire-flicker: 1; --fire-flash-min: 6; --fire-flash-max: 10; --flicker: 1; }
.hero__media img { filter: brightness(var(--flicker, 1)); transition: filter 90ms linear; }
.hero__fire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: screen; image-rendering: auto; opacity: 0; transition: opacity 700ms ease; }
.hero.is-burning .hero__fire { opacity: 1; }
.hero__embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 60% 90%, rgba(255, 150, 60, 0.35), transparent 70%); opacity: calc((var(--flicker, 1) - 0.9) * 2.4); mix-blend-mode: screen; }
.hero.is-burning .hero__actions .btn { box-shadow: 0 0 calc(var(--flicker, 1) * 22px - 14px) rgba(255, 140, 50, 0.45); }
.hero__pause { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid rgba(244, 236, 226, 0.35); background: rgba(31, 27, 24, 0.7); color: var(--linen); font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero__pause:hover { border-color: var(--gold); }
.hero__pause i { width: 0.55rem; height: 0.7rem; border-left: 0.2rem solid currentColor; border-right: 0.2rem solid currentColor; }
.hero__pause[aria-pressed="true"] i { border: 0; width: 0; height: 0; border-left: 0.6rem solid currentColor; border-top: 0.38rem solid transparent; border-bottom: 0.38rem solid transparent; }
.hero .wrap { position: relative; z-index: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31, 27, 24, 0.35) 0%, rgba(31, 27, 24, 0.55) 50%, rgba(31, 27, 24, 0.86) 78%, var(--charcoal) 100%); }
.hero__copy { position: relative; }
.hero__copy::before { content: ""; position: absolute; inset: -1.5rem -2rem; z-index: -1; border-radius: 24px; background: radial-gradient(ellipse at 50% 60%, rgba(31, 27, 24, 0.82), rgba(31, 27, 24, 0.55) 60%, transparent 100%); }
.hero .wrap { padding-block: clamp(4rem, 10vw, 7rem) clamp(2.5rem, 6vw, 4rem); }
.hero__copy { max-width: 40rem; display: grid; gap: 1.25rem; }
.hero__copy h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.hero__note { font-size: 0.9rem; color: var(--linen-muted); }

/* Sections */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); scroll-margin-top: 5rem; }
.section--smoke { background: var(--smoke); }
.section__head { max-width: 42rem; margin-bottom: 2.25rem; }
.section__head p { margin-top: 0.9rem; color: var(--linen-muted); }

/* Menu tabs */
.tabs { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(212, 169, 90, 0.3); margin-bottom: 1.75rem; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: 3rem; padding: 0.6rem 1.1rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--linen-muted); font-family: var(--sans); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color 160ms ease, border-color 160ms ease; }
.tab:hover { color: var(--linen); }
.tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.tab:focus-visible { outline-offset: -3px; }
.panel { display: grid; gap: 2rem; }
.panel[hidden], [hidden] { display: none !important; }
@media (min-width: 900px) { .panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: start; } }
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1.5rem; padding: 1rem 0.5rem; border-top: 1px solid rgba(244, 236, 226, 0.12); align-items: baseline; border-radius: 2px; transition: background 160ms ease; }
.menu li:last-child { border-bottom: 1px solid rgba(244, 236, 226, 0.12); }
.menu li:hover, .menu li:focus-within { background: rgba(212, 169, 90, 0.08); }
.menu h3 { font-size: 1.25rem; }
.menu p { grid-column: 1; font-size: 0.95rem; color: var(--linen-muted); }
.menu .price { font-family: var(--serif); font-size: 1.2rem; color: var(--gold); white-space: nowrap; }
.menu .tag { display: inline-block; margin-left: 0.5rem; font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 0.1rem 0.4rem; border-radius: 2px; vertical-align: middle; }
.panel__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.panel__img figcaption { font-size: 0.85rem; color: var(--linen-muted); margin-top: 0.6rem; }
.panel__img { margin: 0; }

/* Chef's special: light 3D tilt on fine pointers, static everywhere else */
.special { perspective: 1200px; }
.special__card { background: var(--smoke); border: 1px solid rgba(212, 169, 90, 0.35); border-radius: 2px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1rem; transform-style: preserve-3d; transition: transform 240ms ease; }
.special__card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: 2px; transform: translateZ(24px); }
.special__card h3 { font-size: 1.6rem; transform: translateZ(18px); }
.special__card p { color: var(--linen-muted); }
.special__card .price { font-family: var(--serif); font-size: 1.4rem; color: var(--gold); }

/* About */
.about { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }
.about__img { position: relative; margin: 0; }
.about__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.about__img::after { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--gold); border-radius: 2px; z-index: -1; }
.about__copy > * + * { margin-top: 1.1rem; }
.about__copy p { color: var(--linen-muted); max-width: 60ch; }

/* Gallery */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.gallery figcaption { font-size: 0.8rem; color: var(--linen-muted); margin-top: 0.5rem; }

/* Reservation form */
.reserve { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .reserve { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }
.form { display: grid; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--smoke); border: 1px solid rgba(212, 169, 90, 0.3); border-radius: 2px; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { display: grid; gap: 0.4rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--linen-muted); }
.form input, .form select, .form textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; font: inherit; color: var(--linen); background: var(--charcoal); border: 1px solid rgba(244, 236, 226, 0.25); border-radius: 2px; color-scheme: dark; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--gold); outline-offset: 0; }
.form textarea { min-height: 6rem; resize: vertical; }
.form__note { font-size: 0.85rem; color: var(--linen-muted); }
.thanks { padding: 2rem; border: 1px solid var(--gold); border-radius: 2px; background: var(--smoke); }
.thanks h3 { margin-bottom: 0.5rem; }

/* Hours and FAQ */
.hours { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .hours { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.hours dl { margin: 1.5rem 0 0; display: grid; gap: 0.3rem; max-width: 24rem; }
.hours dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(244, 236, 226, 0.12); }
.hours dd { margin: 0; color: var(--gold); }
.address { margin-top: 1.5rem; color: var(--linen-muted); }
.map { aspect-ratio: 4 / 3; border-radius: 2px; background: var(--smoke); border: 1px solid rgba(212, 169, 90, 0.3); display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--linen-muted); font-size: 0.9rem; }
.faq { max-width: 46rem; }
.faq details { border-top: 1px solid rgba(244, 236, 226, 0.12); }
.faq details:last-of-type { border-bottom: 1px solid rgba(244, 236, 226, 0.12); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-family: var(--serif); font-size: 1.25rem; min-height: 2.75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); color: var(--gold); font-size: 1.4rem; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 1.25rem; color: var(--linen-muted); max-width: 60ch; }

/* Footer */
.site-footer { background: #000; color: var(--linen); padding-block: 3.5rem 2.5rem; font-size: 0.9rem; }
.site-footer .wrap { display: grid; gap: 2rem; }
@media (min-width: 900px) { .site-footer .wrap { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.site-footer p { color: var(--linen-muted); max-width: 36ch; margin-top: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.site-footer a { color: var(--linen); display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h4 { margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); }
.site-footer .credit { grid-column: 1 / -1; border-top: 1px solid rgba(244, 236, 226, 0.15); padding-top: 1.5rem; margin-top: 1rem; color: var(--linen-muted); font-size: 0.8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.site-footer .credit a { min-height: 0; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb { animation: none !important; }
  .hero__media img, .special__card, .tab, .menu li, .btn { transition: none !important; transform: none !important; animation: none !important; scale: none !important; filter: none !important; }
  .hero__media { inset: 0; }
  .hero__fire, .hero__embers, .hero__light, .hero__pause, .hero__media video { display: none !important; }
  .hero { --flicker: 1 !important; }
}

/* No default tap flash on touch devices (2 November 2026); keyboard focus keeps this demo's own ring above. */
a, button, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }