/* Shared design tokens, components, then responsive overrides. */
@charset "UTF-8";
  
:root {
  --ink:#191c18;
  --paper:#f3eee5;
  --muted:#64645c;
  --gold:#d9bd8d;
  --line:#d6d0c5;
  --accent:#9a3c29}

* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 Arial,Helvetica,sans-serif}

a {
  color:inherit;
  text-decoration:none}

button {
  font:inherit;
  cursor:pointer}

img {
  max-width:100%;
  display:block}

h1,h2,h3,p {
  margin-top:0}

h1,h2,h3 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.1}

h1 {
  font-size:clamp(54px,6.5vw,96px);
  letter-spacing:-.055em;
  margin-bottom:25px}

h2 {
  font-size:clamp(36px,4vw,58px);
  letter-spacing:-.035em;
  margin-bottom:25px}

h3 {
  font-size:28px}

p {
  margin-bottom:20px}

a,button {
  touch-action:manipulation}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #cb7643;
  outline-offset:5px}

.skip {
  position:absolute;
  top:-100px;
  z-index:50;
  background:white;
  padding:15px}

.skip:focus {
  top:0}

.header {
  height:92px;
  padding:0 5%;
  background:#131713;
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:space-between}

.brand {
  font:32px/1 Georgia,serif;
  letter-spacing:.05em}

.brand span {
  display:block;
  font:8px/2.2 Arial,sans-serif;
  letter-spacing:.22em}

nav {
  display:flex;
  align-items:center;
  gap:34px}

nav a {
  font-size:13px}

nav a:hover,.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 23px;
  border-radius:4px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s}

.button:hover {
  transform:translateY(-2px)}

.light {
  background:var(--paper);
  color:var(--ink)}

.small {
  min-height:40px;
  padding:8px 20px}

.outline {
  border:1px solid var(--ink)}

.ghost {
  border:1px solid #aaa;
  color:white}

.accent {
  background:var(--accent);
  color:white}

.menu {
  display:none}

.hero {
  position:relative;
  min-height:610px;
  display:flex;
  align-items:center;
  color:var(--paper);
  background:#20251a;
  overflow:hidden}

.hero-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%}

.hero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,10,6,.88),rgba(5,10,6,.25)),linear-gradient(0deg,rgba(5,10,6,.3),transparent)}

.hero-content {
  position:relative;
  z-index:1;
  width:min(850px,90%);
  margin:65px 7%}

.eyebrow {
  text-transform:uppercase;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  display:block;
  margin-bottom:18px}

.hero .eyebrow {
  color:var(--gold)}

.hero p {
  max-width:480px;
  font-size:17px;
  line-height:1.6}

.actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:30px;
  flex-wrap:wrap}

.hero-link {
  font-size:14px}

.photo-note {
  position:absolute;
  bottom:24px;
  right:5%;
  z-index:1;
  font-size:9px;
  letter-spacing:.2em}

.journey {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:27px 7%;
  border-bottom:1px solid var(--line);
  gap:20px}

.journey span {
  font-family:Georgia,serif;
  font-size:18px}

.journey b {
  font:11px Arial,sans-serif;
  color:var(--muted);
  margin-right:15px}

.section {
  padding:80px 7%}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center}

.status {
  border:1px solid var(--line);
  border-radius:30px;
  padding:7px 13px;
  font-size:11px;
  white-space:nowrap}

.section-intro {
  max-width:600px;
  color:var(--muted)}

.filters {
  display:flex;
  gap:10px;
  margin:30px 0}

.filter {
  padding:9px 23px;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:30px;
  background:transparent;
  font-size:13px}

.filter.active {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)}

.event-grid {
  display:grid;
  grid-template-columns:minmax(280px,430px) 1fr;
  gap:8%;
  align-items:center}

.event-card {
  display:block;
  background:var(--ink);
  color:var(--paper);
  border-radius:5px;
  overflow:hidden}

.card-photo {
  height:250px;
  position:relative;
  overflow:hidden}

.card-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s}

.event-card:hover img {
  transform:scale(1.035)}

.badge {
  position:absolute;
  left:18px;
  top:18px;
  background:#171c16e8;
  padding:10px 13px;
  color:var(--gold);
  font-size:11px;
  letter-spacing:.09em;
  border:1px solid #b69a6d6b}

.badge span {
  display:block;
  color:white;
  letter-spacing:0;
  margin-top:4px}

.card-copy {
  padding:25px}

.card-copy h3 {
  font-size:27px;
  margin-bottom:12px}

.card-copy p {
  font-size:13px;
  color:#d0d0c5}

.card-copy .eyebrow {
  color:var(--gold);
  font-size:9px;
  margin-bottom:12px}

.card-link {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #54564b;
  padding-top:17px;
  font-size:13px}

.editorial-note {
  max-width:390px}

.editorial-note h3 {
  font-size:38px}

.editorial-note p {
  color:var(--muted)}

.large-number {
  font:80px Georgia,serif;
  color:#b5a78e;
  display:block;
  margin-bottom:20px}

.text-link {
  font-size:14px;
  border-bottom:1px solid;
  padding-bottom:5px}

.fine {
  font-size:12px;
  color:var(--muted);
  margin-top:17px}

.tinted {
  background:#e7e1d6}

.restaurant-card {
  display:block;
  position:relative;
  height:390px;
  border-radius:4px;
  overflow:hidden;
  color:white}

.restaurant-card:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#050b05d9,transparent)}

.restaurant-card img {
  height:100%;
  width:100%;
  object-fit:cover}

.restaurant-card>div {
  position:absolute;
  bottom:30px;
  left:35px;
  z-index:1}

.restaurant-card h3 {
  font-size:52px;
  margin-bottom:10px}

.restaurant-card p {
  margin-bottom:12px}

.restaurant-card span:last-child {
  font-size:13px}

.agenda {
  display:flex;
  align-items:center;
  gap:35px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 0}

.agenda h3 {
  font-size:23px;
  margin-bottom:6px}

.agenda p {
  margin:0;
  font-size:13px;
  color:var(--muted)}

.agenda-date {
  font-size:11px;
  text-transform:uppercase}

.agenda .button {
  margin-left:auto}

.breadcrumbs {
  padding:14px 7%;
  font-size:12px;
  display:flex;
  gap:12px}

.breadcrumbs a {
  text-decoration:underline}

.subnav {
  justify-content:center;
  padding:20px;
  background:var(--ink);
  color:var(--paper);
  flex-wrap:wrap}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  align-items:center}

.lead {
  font-family:Georgia,serif;
  font-size:28px;
  line-height:1.4}

.dark {
  background:#202819;
  color:var(--paper)}

.dark .eyebrow {
  color:var(--gold)}

.pillars {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:45px}

.pillars article {
  border-top:1px solid #61694f;
  padding-top:25px}

.pillars p {
  font-size:14px;
  color:#d1d5c7}

.spaces {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px}

.spaces img {
  height:310px;
  width:100%;
  object-fit:cover;
  border-radius:4px}

.spaces article>div {
  padding:22px 0}

.spaces h3 {
  margin-bottom:10px}

.spaces p {
  font-size:14px;
  color:var(--muted)}

.location {
  padding:30px;
  border:1px solid #b9b4a8;
  border-radius:4px}

.location h3 {
  font-size:25px}

.location p {
  font-size:14px;
  margin:0}

.reservation {
  padding:65px 7%;
  background:#242b1d;
  color:var(--paper);
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:35px;
  align-items:center}

.reservation h2 {
  font-size:43px}

.reservation .fine {
  color:#d0d3c7}

.reservation .eyebrow {
  color:var(--gold)}

.reservation-state {
  display:none;
  grid-column:1/-1;
  border-top:1px solid #70765f;
  padding-top:30px}

.reservation-state.visible,.reservation-state:target {
  display:block}

.reservation-state h3 {
  font-size:28px}

.reservation-state p {
  max-width:760px}

.event-summary {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:32px 7%;
  gap:25px;
  border-bottom:1px solid var(--line)}

.event-summary span {
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:8px}

.event-summary strong,.event-summary a {
  font-size:14px;
  font-weight:400}

.notice {
  border-left:2px solid #a08a65;
  padding-left:20px;
  font-size:13px;
  color:var(--muted)}

.host {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7%;
  align-items:center}

.host img {
  height:390px;
  object-fit:cover;
  width:100%;
  border-radius:4px}

footer {
  padding:45px 7%;
  background:#10150f;
  color:var(--paper);
  display:flex;
  gap:30px;
  align-items:center;
  flex-wrap:wrap}

footer p {
  margin:0;
  font-size:12px}

footer .fine {
  margin:0;
  color:#b7bdae}

footer>a:last-child {
  font-size:12px;
  margin-left:auto}

@media(min-width:1500px) {
  .section,.reservation {
  padding-left:max(7%,calc((100vw - 1300px)/2));
  padding-right:max(7%,calc((100vw - 1300px)/2))}

}

@media(max-width:760px) {
  html {
  scroll-padding-top:20px}

.header {
  height:78px;
  padding:0 6%;
  position:relative;
  z-index:10}

.brand {
  font-size:28px}

.menu {
  display:flex;
  gap:15px;
  align-items:center;
  background:none;
  color:var(--paper);
  border:1px solid #69705f;
  border-radius:4px;
  padding:10px 12px;
  font-size:12px;
  min-height:44px}

.header nav {
  display:none;
  position:absolute;
  top:78px;
  left:0;
  right:0;
  background:#131713;
  padding:25px 6%;
  align-items:stretch;
  gap:10px;
  box-shadow:0 15px 20px #0004}

.header nav.open {
  display:flex;
  flex-direction:column}

.header nav>a {
  padding:12px}

.hero {
  min-height:590px}

.hero-content {
  margin:55px 6%;
  width:88%}

h1 {
  font-size:57px}

.hero p {
  font-size:16px}

.hero:after {
  background:linear-gradient(90deg,#050a06d9,#050a0666)}

.actions {
  gap:20px}

.journey {
  grid-template-columns:1fr 1fr;
  gap:19px;
  padding:25px 6%}

.journey span {
  font-size:16px}

.journey b {
  margin-right:10px}

.section {
  padding:52px 6%}

.section-heading {
  display:block}

.status {
  display:inline-block;
  margin-bottom:20px}

.section-heading h2 {
  margin-bottom:20px}

.event-grid,.split,.host {
  grid-template-columns:1fr;
  gap:30px}

.editorial-note {
  padding:25px 0 0}

.large-number {
  font-size:55px;
  margin-bottom:12px}

.editorial-note h3 {
  font-size:32px}

.card-photo {
  height:250px}

.restaurant-card {
  height:350px}

.restaurant-card>div {
  left:25px}

.restaurant-card h3 {
  font-size:43px}

.agenda {
  gap:18px;
  flex-wrap:wrap}

.agenda .button {
  margin-left:0;
  width:100%}

.agenda h3 {
  font-size:21px}

.subnav {
  gap:20px;
  justify-content:flex-start;
  padding:18px 6%}

.subnav a {
  font-size:12px}

.pillars {
  grid-template-columns:1fr 1fr;
  gap:22px}

.pillars h3 {
  font-size:27px}

.spaces {
  grid-template-columns:1fr;
  gap:10px}

.spaces img {
  height:270px}

.spaces article>div {
  padding-bottom:12px}

.reservation {
  grid-template-columns:1fr;
  padding:50px 6%;
  gap:18px}

.reservation h2 {
  font-size:37px}

.reservation .button {
  width:100%}

.event-summary {
  grid-template-columns:1fr 1fr;
  padding:28px 6%;
  gap:25px 18px}

.event-summary strong {
  font-size:13px}

.host img {
  height:290px}

.breadcrumbs {
  padding:13px 6%}

.event-hero {
  min-height:580px}

footer {
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  padding:35px 6%}

footer>a:last-child {
  margin:0}

.photo-note {
  font-size:8px}

.lead {
  font-size:26px}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}

* {
  transition:none!important}

}



/* v0.2 — page skins and progressive motion, built on the v0.1 components. */
:root { --motion: 420ms; }
.header { position: sticky; top: 0; z-index: 30; transition: background 220ms, box-shadow 220ms; }
.header.scrolled { background: #10170ff5; box-shadow: 0 8px 25px #0002; }
.header.scrolled .brand { color: #e1c494; }
.button { transition: transform 180ms, background 180ms, box-shadow 180ms; }
.button:hover { box-shadow: 0 5px 18px #0002; }
.button:active { transform: translateY(0); }
.event-card { transition: transform 220ms, box-shadow 220ms; }
.event-card:hover { transform: translateY(-5px); box-shadow: 0 18px 35px #171c1625; }
.restaurant-card img, .spaces img { transition: transform 550ms; }
.restaurant-card:hover img { transform: scale(1.035); }
.reveal { transition: opacity 520ms var(--reveal-delay, 0ms), translate 520ms var(--reveal-delay, 0ms); }
.reveal-pending { opacity: 0; translate: 0 18px; }
body[data-page="hub"] { --accent: #a94c28; }
body[data-page="hub"] .hero { min-height: 655px; }
body[data-page="hub"] .hero h1 { max-width: 850px; }
body[data-page="hub"] .hero .light { background: #e7cba2; }
body[data-page="hub"] .journey { background: #e8e1d5; }
.journey b { display: inline-flex; width: 29px; height: 29px; border: 1px solid #9b927c; border-radius: 50%; align-items: center; justify-content: center; transition: background 180ms, color 180ms; }
.journey span:hover b { background: #293021; color: #f3eee5; }
.future-restaurants { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10%; padding-top: 55px; }
.future-restaurants h3 { font-size: 37px; }
.future-restaurants p { color: var(--muted); font-size: 13px; max-width: 310px; }
.future-restaurants ul { list-style: none; padding: 0; margin: 0; }
.future-restaurants li { padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #bdb6a7; }
.future-restaurants li>span { font: 24px Georgia,serif; }
.future-restaurants small { font-size: 10px; color: #65645d; }

/* Frecuencia: deep green, warm brass, and a more intimate photographic rhythm. */
body[data-page="restaurant"] { background: #172015; color: #f1e9da; --ink: #f1e9da; --paper: #172015; --muted: #b9bcae; --line: #536044; }
body[data-page="restaurant"] .header { background: #10160f; }
body[data-page="restaurant"] .breadcrumbs { background: #172015; color: #c9c8b8; }
body[data-page="restaurant"] .hero { min-height: 690px; }
body[data-page="restaurant"] .hero:after { background: linear-gradient(90deg,#0b130bee,#0b130b35),linear-gradient(0deg,#172015,transparent 45%); }
body[data-page="restaurant"] .hero h1 { font-style: italic; font-size: clamp(65px,7.5vw,110px); max-width: 660px; }
body[data-page="restaurant"] .light { background: #e8d0a5; color: #152011; }
body[data-page="restaurant"] .subnav { background: #172015; border-bottom: 1px solid #546046; color: #e6dac6; }
body[data-page="restaurant"] #concepto { padding-top: 105px; padding-bottom: 100px; }
body[data-page="restaurant"] #concepto h2 { color: #ddc19a; }
body[data-page="restaurant"] .dark { background: #202b1a; }
body[data-page="restaurant"] .event-card { background: #0e150d; color: #f1e9da; }
body[data-page="restaurant"] .filter.active { background: #e2c398; color: #1b2415; }
body[data-page="restaurant"] .filter:not(.active) { color: #ece1ce; }
body[data-page="restaurant"] .tinted { background: #292d20; }
body[data-page="restaurant"] .reservation { background: #44271f; }
body[data-page="restaurant"] .accent { background: #e4c398; color: #2b1f17; }
.sound-interlude { display: grid; grid-template-columns: 1fr 1.1fr .65fr; gap: 5%; padding: 35px 7% 90px; align-items: center; }
.sound-interlude figure { margin: 0; }
.sound-interlude img { width: 100%; object-fit: cover; border-radius: 2px; }
.sound-photo img { height: 580px; }
.detail-photo { padding-top: 160px; }
.detail-photo img { height: 310px; }
.sound-interlude figcaption { color: #acae9d; font-size: 10px; letter-spacing: .08em; padding-top: 12px; }
.sound-copy h2 { font-size: clamp(38px,4.2vw,65px); }
.sound-copy em { color: #daba8b; }
.sound-copy p { color: #c4c3b4; font-size: 14px; }
.sound-mark { display: flex; height: 38px; gap: 5px; align-items: center; margin-bottom: 28px; }
.sound-mark i { width: 2px; height: 14px; background: #c5a87c; }
.sound-mark i:nth-child(2n) { height: 25px; }
.sound-mark i:nth-child(3n) { height: 36px; }
.sound-mark i:nth-child(4n) { height: 20px; }

/* Campaign shell: reserved for an approved event, no invented programme. */
body[data-page="event"] { --accent: #842e2c; }
body[data-page="event"] .breadcrumbs { background: #3c2022; color: #eeded5; }
body[data-page="event"] .event-hero { background: #2b1619; min-height: 640px; }
body[data-page="event"] .hero-image { width: 51%; left: auto; right: 0; object-position: center 48%; }
body[data-page="event"] .hero:after { background: linear-gradient(90deg,#2b1619 38%,#2b1619b8 57%,#2b161914); }
body[data-page="event"] .hero h1 { font-size: clamp(60px,7.2vw,102px); }
body[data-page="event"] .event-summary { background: #3c2022; color: #f5e7db; border: 0; }
body[data-page="event"] .event-summary span { color: #d7bbae; }
body[data-page="event"] .hero .accent { background: #e7c499; color: #301a1b; }
body[data-page="event"] .reservation { background: #3c2022; }
@media (max-width: 1000px) {
  .sound-interlude { grid-template-columns: 1fr 1fr; gap: 35px; }
  .detail-photo { display: none; }
}
@media (max-width: 760px) {
  .header { position: sticky; }
  body[data-page="hub"] .hero { min-height: 610px; }
  body[data-page="restaurant"] .hero { min-height: 630px; }
  body[data-page="restaurant"] .hero h1 { font-size: 65px; }
  body[data-page="restaurant"] #concepto { padding-top: 60px; padding-bottom: 35px; }
  .future-restaurants { grid-template-columns: 1fr; gap: 22px; padding-top: 35px; }
  .future-restaurants li>span { font-size: 21px; }
  .future-restaurants small { font-size: 9px; }
  .sound-interlude { grid-template-columns: 1fr; padding: 25px 6% 55px; gap: 35px; }
  .sound-photo img { height: 450px; object-position: center 65%; }
  .sound-copy h2 { font-size: 46px; }
  .sound-copy { padding-left: 8%; }
  body[data-page="event"] .hero-image { width: 100%; opacity: .6; }
  body[data-page="event"] .hero:after { background: linear-gradient(90deg,#2b1619dc,#2b16196b),linear-gradient(0deg,#2b1619,transparent); }
  body[data-page="event"] .hero h1 { font-size: 59px; }
  body[data-page="event"] .event-hero { min-height: 600px; }
  .journey { gap: 16px 10px; }
  .journey span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; translate: none; }
  .event-card:hover, .button:hover, .restaurant-card:hover img, .event-card:hover img { transform: none; }
}
body[data-page="restaurant"] .header,
body[data-page="restaurant"] .hero,
body[data-page="restaurant"] .dark,
body[data-page="restaurant"] .reservation,
body[data-page="restaurant"] footer,
body[data-page="restaurant"] .menu { color: #f1e9da; }
/* Keep anchored content clear of the sticky navigation. */
html { scroll-padding-top: 110px; }
@media (max-width: 760px) { html { scroll-padding-top: 98px; } }

/* UX refinement: stable interactive boxes. Only internal imagery moves. */
.event-card, .event-card:hover, .button, .button:hover, .button:active {
  transform: none;
}
.event-card, .event-card:hover { translate: none; }
.event-card { transition: opacity 520ms, box-shadow 220ms; }
.event-card:hover { box-shadow: 0 12px 32px #171c1630; }
.button:hover { filter: brightness(1.08); }
.card-photo img { transition: transform 450ms; }
.event-card:hover .card-photo img { transform: scale(1.035); }
.journey span { display: flex; align-items: center; gap: 20px; }
.journey span:not(:last-child)::after { content: ''; display: block; flex: 1; height: 1px; background: #b4a993; }
.header {
  opacity: var(--nav-opacity, 1);
  transform: translateY(var(--nav-offset, 0px));
  transition: opacity 240ms linear, transform 260ms ease-out, background 220ms, box-shadow 220ms;
}
.header:has(:focus-visible) { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }

/* Shared preview structure; restaurant-specific color and photographic treatment. */
.restaurant-previews { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 28px; align-items: start; }
.venue-preview { border-radius: 4px; overflow: hidden; min-width: 0; }
.venue-cover { height: 300px; overflow: hidden; }
.venue-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms ease-out; }
.venue-preview:hover .venue-cover img { transform: scale(1.035); }
.venue-copy { padding: 29px 24px; }
.venue-copy h3 { font-size: 43px; margin-bottom: 14px; }
.venue-copy .eyebrow { margin-bottom: 12px; }
.venue-copy p { font-size: 14px; margin-bottom: 22px; }
.preview-status { display: block; font-size: 10px; letter-spacing: .02em; opacity: .8; margin-bottom: 22px; }
.venue-details { border-top: 1px solid currentColor; }
.venue-details summary { padding: 17px 0 2px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-size: 13px; }
.venue-details summary::-webkit-details-marker { display: none; }
.venue-details summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.venue-details summary span { font-size: 23px; transition: rotate 200ms; }
.venue-details[open] summary span { rotate: 45deg; }
.venue-gallery { display: grid; gap: 20px; margin-top: 18px; }
.venue-gallery figure { margin: 0; }
.venue-gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; }
.venue-gallery figcaption { font-size: 11px; margin-top: 8px; }
.skin-zoen { background: #14262b; color: #f1e4cb; }
.skin-zoen .eyebrow { color: #d0ad72; }
.skin-zoen .venue-copy { border-top: 4px solid #6d292b; }
.skin-kobore { background: #ece4cd; color: #344533; border: 1px solid #c8c4a6; }
.skin-kobore h3 { font-style: italic; }
.skin-kobore .venue-copy { border-top: 4px solid #9b773f; }
.skin-kobore .venue-cover img { object-position: 50% 40%; }
.skin-plaza { background: #faf9f2; color: #294c57; }
.skin-plaza .venue-copy { border-top: 4px solid #bd6947; }
.skin-plaza .venue-cover img { object-position: center 65%; }
.skin-plaza .venue-gallery figure:last-child img { aspect-ratio: 1; object-fit: contain; }

/* Bowflag influence: graphic black/white display, without reproducing the art. */
body[data-page="restaurant"] .hero h1 {
  font-family: Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif;
  font-stretch: condensed;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  font-size: clamp(62px, 7.5vw, 108px);
  max-width: 850px;
  line-height: .98;
  color: #fff;
}
body[data-page="restaurant"] .eyebrow,
body[data-page="restaurant"] .pillars h3 {
  font-family: 'Arial Narrow', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
}
body[data-page="restaurant"] .header,
body[data-page="restaurant"] footer { background: #090b09; }
body[data-page="restaurant"] .hero .light { background: #fff; color: #101410; }
body[data-page="restaurant"] .sound-mark i { background: #fff; }
@media (max-width: 1000px) {
  .restaurant-previews { gap: 15px; }
  .venue-copy { padding: 24px 18px; }
  .venue-copy h3 { font-size: 34px; }
}
@media (max-width: 760px) {
  .restaurant-previews { grid-template-columns: 1fr; gap: 25px; }
  .venue-cover { height: 340px; }
  .venue-copy { padding: 28px 25px; }
  .venue-copy h3 { font-size: 43px; }
  .venue-gallery { grid-template-columns: 1fr 1fr; gap: 15px; }
  .journey span:nth-child(2)::after { display: none; }
  body[data-page="restaurant"] .hero h1 { font-size: clamp(44px, 11.8vw, 70px); overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .header { opacity: 1 !important; transform: none !important; }
  .venue-preview:hover .venue-cover img, .event-card:hover .card-photo img { transform: none; }
}