/* ============================================================
   Blackbird Art & Cafe · site-v1 · "Sobremesa" (route C)
   Collage arches, alternating dark/cream worlds, olive-led accents,
   terracotta reserved for the CTA. Young Serif + Work Sans.
   Foundation :root copied from knowledge/design-system/tokens.css.
   ============================================================ */

/* --- design-system foundation tokens (copied, do not fork values) --- */
:root {
  /* brand color ramps (50 light .. 900 dark) */
  --brand-50: #eeeeee;
  --brand-100: #dcdcdc;
  --brand-200: #bababa;
  --brand-300: #8e8e8e;
  --brand-400: #5a5a5a;
  --brand-500: #262626;
  --brand-600: #212121;
  --brand-700: #1b1b1b;
  --brand-800: #151515;
  --brand-900: #0f0f0f;
  --accent-50: #fcf4f2;
  --accent-100: #f9e9e5;
  --accent-200: #f3d2cb;
  --accent-300: #ebb6ab;
  --accent-400: #e29585;
  --accent-500: #d9735e;
  --accent-600: #bb6351;
  --accent-700: #9c5344;
  --accent-800: #7a4035;
  --accent-900: #572e26;

  --color-bg: #faf7f1;
  --color-muted: #7a8060;
  --color-brand: #262626;
  --color-accent: #d9735e;
  --color-ink: #262626;
  --color-on-brand: #ffffff;
  --color-on-accent: #262626;

  --step-6: clamp(2.4rem, 1.664rem + 3.27vw, 4.2rem);
  --step-5: clamp(2rem, 1.509rem + 2.18vw, 3.2rem);
  --step-4: clamp(1.7rem, 1.414rem + 1.27vw, 2.4rem);
  --step-3: clamp(1.4rem, 1.236rem + 0.73vw, 1.8rem);
  --step-2: clamp(1.2rem, 1.098rem + 0.45vw, 1.45rem);
  --step-1: clamp(1.1rem, 1.059rem + 0.18vw, 1.2rem);
  --step-0: clamp(1rem, 0.98rem + 0.09vw, 1.05rem);
  --step--1: clamp(0.875rem, 0.865rem + 0.05vw, 0.9rem);
  --step--2: clamp(0.78rem, 0.772rem + 0.04vw, 0.8rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --measure: 66ch;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --radius-0: 0;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.16);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* --- route-level derived tones (tints of brand.md colors, AA-checked) --- */
:root {
  --tan: #d2c6a2; /* brand.md warm tan */
  --tan-tint: #f1ecdf; /* light tan wash for the marquee + combo strip */
  --olive-300: #b9bfa4; /* light olive tint: labels on dark bands (8.9:1) */
  --text-soft: #55564c; /* warm olive-gray body support on cream (6.9:1) */
  --ink-band: var(--brand-700); /* the dark "evening" world */
  --cream-soft: #e9e5da; /* body text on dark bands */
  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-text: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --arch: 999px 999px var(--radius-md) var(--radius-md);
  --header-h: 76px;
}

/* ============ base ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* No CSS smooth-scroll: Lenis owns the scroll feel when motion is allowed,
   and screenshots / reduced-motion / no-JS get instant, deterministic jumps. */

/* Lenis-recommended styles (only apply while Lenis is driving the scroll) */
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.no-scroll {
  overflow: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-sm);
}

h2 {
  font-size: var(--step-4);
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--step-2);
}

p {
  margin: 0 0 var(--space-sm);
}

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

/* hostile-content insurance: an unusually long unbreakable token
   (name, URL, label) wraps instead of blowing out the page width */
h1,
h2,
h3,
p,
li,
dt,
dd,
a,
label,
button,
blockquote,
figcaption,
address {
  overflow-wrap: anywhere;
}

a {
  color: var(--accent-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--accent-800);
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-700);
  outline-offset: 2px;
}
.band-dark :focus-visible,
.drawer :focus-visible {
  outline-color: var(--accent-400);
}

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: 0.6em 1.2em;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
  color: var(--color-on-brand);
}

/* section anchor offset under the fixed header */
section[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--space-xs);
}
.eyebrow-terra {
  color: var(--accent-700);
}
.eyebrow-olive {
  color: var(--olive-300);
}

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: var(--step-0);
  padding: 0.8em 1.5em;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn-accent {
  background: var(--accent-500);
  color: var(--color-on-accent);
}
.btn-accent:hover {
  background: var(--accent-400);
  color: var(--color-on-accent);
  transform: translateY(-1px);
}
.btn-sm {
  padding: 0.55em 1.1em;
  font-size: var(--step--1);
}

.link-arrow {
  font-weight: 600;
  color: var(--accent-700);
}
.link-arrow::after {
  content: " \2192";
}
.link-arrow-light {
  color: var(--cream-soft);
}
.link-arrow-light:hover {
  color: #ffffff;
}

.todo-note {
  font-size: var(--step--1);
  color: #cfc9b8;
  border-left: 3px dashed var(--accent-400);
  padding-left: var(--space-xs);
  max-width: 40ch;
}

/* ============ header ============ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 247, 241, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(122, 128, 96, 0.28);
}

.header-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  overflow: hidden;
}
.brand img {
  height: 54px;
  width: 61px; /* 662:582 intrinsic ratio, holds the box if the file fails */
  object-fit: contain;
  /* failed-load alt text: one truncated line, never spilling past the box */
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  mix-blend-mode: multiply;
}

.main-nav {
  display: flex;
  gap: var(--space-md);
  margin-left: auto;
}
.main-nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}
.main-nav a:hover {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header-cta {
  white-space: nowrap;
}

.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(38, 38, 38, 0.3);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  padding: 0.6em 0.7em;
  cursor: pointer;
}

/* drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(27, 27, 27, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.drawer-nav a {
  color: var(--cream-soft);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--step-3);
}
.drawer-nav a:hover {
  color: #ffffff;
}
.drawer-nav .btn {
  font-family: var(--font-text);
  font-size: var(--step-0);
  margin-top: var(--space-sm);
}

/* ============ hero ============ */
.hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-title {
  font-size: clamp(2.2rem, 1.55rem + 2.9vw, 3.8rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin-bottom: var(--space-md);
}

.hero-sub {
  font-size: var(--step-1);
  color: var(--text-soft);
  max-width: 44ch;
  margin-bottom: var(--space-lg);
}

.hero-actions {
  margin-bottom: var(--space-xl);
}

.hero-quote {
  margin: 0;
  border-left: 3px solid var(--tan);
  padding-left: var(--space-sm);
  max-width: 40ch;
}
.hero-quote blockquote {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
}
.hero-quote figcaption {
  font-size: var(--step--1);
  color: var(--text-soft);
}

.hero-arches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: start;
  padding-bottom: 4.5rem;
}

.arch-slot-2 {
  margin-top: 3.5rem;
}
.arch-slot-3 {
  margin-top: 7rem;
}

.arch {
  position: relative;
  margin: 0;
  border-radius: var(--arch);
  overflow: hidden;
  will-change: transform;
  /* quiet olive tint: clean placeholder while lazy photos load or if one fails */
  background: rgba(122, 128, 96, 0.08);
}
.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* hairline ring so the arch cut stays legible over bright photo edges */
.arch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(38, 38, 38, 0.16);
  pointer-events: none;
}
.band-dark .arch::after {
  box-shadow: inset 0 0 0 1px rgba(250, 247, 241, 0.14);
}

.hero-arches .arch {
  aspect-ratio: 0.68;
}

.hero-stamp {
  position: absolute;
  bottom: 0;
  left: 4%;
  width: 168px;
  padding: 2.1rem 1.2rem;
  margin: 0;
  background: var(--tan);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--step--1);
  text-align: center;
  line-height: var(--leading-snug);
  border-radius: 48% 52% 55% 45% / 55% 48% 52% 45%;
  transform: rotate(-7deg);
}

/* ============ bands ============ */
.band {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.band-dark {
  background: var(--ink-band);
  color: var(--cream-soft);
}
.band-dark h2 {
  color: #ffffff;
}
.band-dark a {
  color: var(--cream-soft);
}
.band-dark a:hover {
  color: #ffffff;
}

.band-head {
  max-width: 62ch;
  margin-bottom: var(--space-xl);
}
.band-lede {
  font-size: var(--step-1);
  max-width: 52ch;
}
.band-lede-soft {
  color: #c9c4b6;
  font-size: var(--step-0);
}
.band-note {
  font-size: var(--step--1);
  color: var(--olive-300);
}
.band-foot {
  margin-top: var(--space-xl);
}

/* food mosaic */
.food-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "ft ft salmon club"
    "ft ft roll club";
  grid-template-rows: repeat(2, clamp(180px, 22vw, 320px));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.mosaic-tile {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: inherit;
  width: 100%;
}
.mosaic-tile .arch {
  height: 100%;
}
.mosaic-tile:hover img {
  filter: brightness(1.06);
}
.mosaic-tile img {
  transition: filter var(--dur-base) var(--ease-out);
}

.tile-ft {
  grid-area: ft;
}
.tile-salmon {
  grid-area: salmon;
}
.tile-club {
  grid-area: club;
}
.tile-roll {
  grid-area: roll;
}

/* ============ carta ============ */
.section-carta {
  padding-block: clamp(3.5rem, 9vw, 6rem);
}

.carta-head {
  margin-bottom: var(--space-lg);
}
.carta-head h2 {
  font-size: var(--step-5);
}
.carta-note {
  font-size: var(--step-0);
  margin-bottom: var(--space-3xs);
}
.carta-note-soft {
  font-size: var(--step--1);
  color: var(--text-soft);
}

.carta-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  background: var(--color-bg);
  border-bottom: 1px solid rgba(122, 128, 96, 0.28);
  padding-block: var(--space-xs);
  margin-bottom: var(--space-md);
}

.carta-tab {
  border: 1px solid rgba(38, 38, 38, 0.35);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.55em 1.05em;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.carta-tab:hover {
  border-color: var(--color-ink);
}
.carta-tab.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-bg);
}

/* no-JS: tabs hidden, every panel visible stacked */
html:not(.js) .carta-tabs {
  display: none;
}
html.js .carta-panel:not(.is-active) {
  display: none;
}

.carta-course {
  margin-bottom: var(--space-xl);
}

.carta-course-title {
  font-size: var(--step-2);
  border-bottom: 1px solid rgba(122, 128, 96, 0.4);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}

.carta-course-note {
  font-size: var(--step--1);
  color: var(--text-soft);
  margin-bottom: var(--space-sm);
}

.dish-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.dish {
  break-inside: avoid;
  margin-bottom: var(--space-md);
}

.dish-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}

.dish-name {
  font-weight: 600;
}

.dish-leader {
  flex: 1 1 2rem;
  min-width: 2rem;
  border-bottom: 2px dotted rgba(122, 128, 96, 0.45);
  transform: translateY(-4px);
}

.dish-price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1em 0.8em;
  justify-content: flex-end;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.dish-var {
  white-space: nowrap;
}
.dish-varlabel {
  font-size: var(--step--2);
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.2em;
}

.dish-todo {
  font-size: var(--step--1);
  color: var(--accent-700);
  border-bottom: 1px dashed var(--accent-700);
  font-weight: 600;
}

.dish-quote-price {
  font-weight: 500;
}

.dish-desc {
  font-size: var(--step--1);
  color: var(--text-soft);
  max-width: 58ch;
  margin: 0.3rem 0 0;
}

.dish-tag-line {
  font-size: var(--step--2);
  color: var(--accent-700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0.3rem 0 0;
}

/* combo strip (Afternoon Hours) */
.combo-strip {
  margin-top: var(--space-2xl);
  background: var(--tan-tint);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.combo-head h3 {
  font-size: var(--step-3);
  margin-bottom: var(--space-3xs);
}
.combo-head p {
  color: var(--text-soft);
  font-size: var(--step--1);
  margin-bottom: var(--space-md);
}

.combo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-2xl);
}

.combo .dish-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
}

/* ============ la casa ============ */
.section-casa {
  padding-bottom: clamp(3.5rem, 9vw, 6rem);
}

.fullbleed {
  margin: 0;
}
.fullbleed-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.fullbleed img,
.fullbleed-video {
  width: 100%;
  height: clamp(420px, 72vh, 720px);
  object-fit: cover;
  object-position: center 58%;
}
.fullbleed-video {
  display: block;
  object-position: center 50%;
  background: var(--color-ink, #262626);
}

.casa-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-top: clamp(3rem, 7vw, 5rem);
}

.casa-lede {
  font-size: var(--step-1);
  color: var(--text-soft);
  max-width: 52ch;
}

.rincon-list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
}
.rincon-list li {
  position: relative;
  border-top: 1px solid rgba(122, 128, 96, 0.4);
  padding: var(--space-md) 0;
}
.rincon-list li:focus-visible {
  outline: 3px solid var(--brand-700);
  outline-offset: 3px;
}
.rincon-list li:focus-visible h3 {
  color: var(--accent-700);
}
.rincon-list h3 {
  margin-bottom: var(--space-3xs);
}
.rincon-list p {
  margin: 0;
  color: var(--text-soft);
}

/* --- the casa polaroid pile: hovering a rincón in the list lays that
       card on top of the stack and it STAYS (JS places it, most recent
       on top). Without JS only the resting "la mesa" card shows. --- */
.polaroid-drift {
  will-change: transform;
}
.polaroid-stack {
  position: relative;
}
.stack-card {
  --dx: 0%;
  --dy: 0%;
  --tilt: -2deg;
  display: block;
  width: 100%;
  padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.6rem, 1.2vw, 0.9rem) 0;
  border: 0;
  background: #fbfaf6;
  box-shadow: var(--shadow-lg);
  cursor: zoom-in;
  font: inherit;
  text-align: center;
  transform: translate(var(--dx), var(--dy)) rotate(var(--tilt));
}
.stack-card:focus-visible {
  outline: 3px solid var(--brand-700);
  outline-offset: 3px;
}
/* the resting card sits in flow (it sets the pile's height), the rincón
   cards wait above it, hidden until they are placed */
.stack-card[data-key="mesa"] {
  position: relative;
  z-index: 1;
}
.stack-card:not([data-key="mesa"]) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
.stack-card[data-key="patio"] {
  --tilt: -4deg;
  --dx: -2%;
  --dy: 1.5%;
}
.stack-card[data-key="barra"] {
  --tilt: 2.5deg;
  --dx: 2%;
  --dy: -1%;
}
.stack-card[data-key="galeria"] {
  --tilt: -1deg;
  --dx: -0.5%;
  --dy: -2%;
}
.stack-card.is-placed {
  visibility: visible;
  animation: card-land calc(var(--dur-slow) * 1.3) var(--ease-out) both;
}
/* the card drops in from slightly above, over-rotated, and develops */
@keyframes card-land {
  from {
    opacity: 0;
    transform: translate(calc(var(--dx) + 3%), calc(var(--dy) - 9%))
      rotate(calc(var(--tilt) * 2.4)) scale(1.05);
    filter: sepia(0.35) brightness(1.2) contrast(0.9);
  }
  to {
    opacity: 1;
    transform: translate(var(--dx), var(--dy)) rotate(var(--tilt));
    filter: none;
  }
}
.stack-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  /* quiet olive tint while lazy photos load */
  background: rgba(122, 128, 96, 0.08);
}
.stack-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stack-caption {
  display: block;
  padding: 0.55rem 0.2rem 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.03em;
  color: var(--text-soft);
}

@media (min-width: 900px) {
  .rincon-list li {
    cursor: zoom-in;
  }
  .rincon-list h3 {
    transition: color var(--dur-base) ease;
  }
  .rincon-list li:hover h3 {
    color: var(--accent-700);
  }
}

@media (max-width: 899px) {
  .casa-photo .polaroid-drift {
    max-width: 440px;
    margin-inline: auto;
  }
  /* gentler tilts and offsets so the pile never overflows a narrow screen */
  .stack-card[data-key="patio"] {
    --tilt: -2.5deg;
    --dx: -1%;
    --dy: 1%;
  }
  .stack-card[data-key="barra"] {
    --tilt: 1.75deg;
    --dx: 1%;
    --dy: -0.75%;
  }
  .stack-card[data-key="galeria"] {
    --tilt: -1deg;
    --dx: -0.5%;
    --dy: -1.25%;
  }
}

/* ============ el café ============ */
.cafe-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.cafe-photo {
  order: -1;
}
.cafe-photo .arch {
  aspect-ratio: 0.8;
  max-width: 480px;
}

.method-row {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: #ffffff;
  line-height: var(--leading-snug);
  margin: var(--space-md) 0;
  letter-spacing: 0.01em;
}

/* ============ galería ============ */
.section-galeria {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.galeria-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.artroom {
  position: relative;
  border: 1.5px solid var(--color-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  max-width: 44ch;
}
.artroom::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 26px;
  width: 30px;
  height: 22px;
  background: var(--accent-500);
  border-radius: 48% 52% 55% 45% / 55% 48% 52% 45%;
  transform: rotate(-12deg);
}
.artroom h3 {
  margin-bottom: var(--space-3xs);
}
.artroom p {
  margin: 0;
  font-size: var(--step-1);
}

/* a layered collage that plays with scale: the workshop in motion is the big
   landscape arch (the star), and the merch photo is a small portrait arch laid
   over its lower-left corner with a cream mat ring. The concept's parallax
   drifts the two layers at different rates for depth. Video plays only in view,
   frozen to its poster under ?shot=1 / prefers-reduced-motion, present (poster)
   without JS. */
.galeria-photos {
  display: grid;
  grid-template-columns: 1fr;
}
.tile-video,
.tile-merch {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.tile-video {
  z-index: 1;
  width: 84%;
  justify-self: start;
}
.tile-video .arch {
  aspect-ratio: 1.42;
}
.tile-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
/* merch anchored to the column's right edge, so it breaks past the video's
   right frame yet always stays inside the viewport. Uses the `translate`
   property (not `transform`) for the downward poke, because the gate-reveal
   rule overrides `transform`. */
.tile-merch {
  z-index: 2;
  width: 36%;
  align-self: end;
  justify-self: end;
  translate: 0 9%;
}
.tile-merch .arch {
  aspect-ratio: 0.8;
  box-shadow:
    0 0 0 8px var(--color-bg),
    var(--shadow-lg);
}

/* scroll-gated reveal (The Grounds adaptation) */
html.js [data-gate] .gate-item {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
html.js [data-gate].is-live .gate-item {
  opacity: 1;
  transform: none;
}
html.js [data-gate].is-live .galeria-copy .gate-item:nth-child(2) {
  transition-delay: 120ms;
}
html.js [data-gate].is-live .galeria-copy .gate-item:nth-child(3) {
  transition-delay: 240ms;
}
html.js [data-gate].is-live .galeria-copy .gate-item:nth-child(4) {
  transition-delay: 360ms;
}
html.js [data-gate].is-live .galeria-photos .gate-item:nth-child(1) {
  transition-delay: 150ms;
}
html.js [data-gate].is-live .galeria-photos .gate-item:nth-child(2) {
  transition-delay: 300ms;
}

/* ============ río de café (proof) ============
   The carafe pours an ink river and the reviews ride the current.
   Default layout = the RESTING state: illustration + static cards,
   used without JS, without GSAP, under ?shot=1 and reduced motion.
   .is-live (added by main.js when motion is allowed) switches the
   cards to absolute positioning for the GSAP MotionPath ride. */
.rio-band {
  background: var(--tan-tint);
  padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
}

/* the heading floats in the scene's calm upper-left water margin */
.rio-head {
  position: absolute;
  top: clamp(0.75rem, 3.5vw, 3rem);
  left: clamp(1.25rem, 5vw, 4.5rem);
  z-index: 1;
}

.rio-stat {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-700);
  margin: 0 0 var(--space-2xs);
}

.rio-title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin: 0;
}

.rio-stage {
  position: relative;
  /* full-bleed on purpose: the river must reach both screen edges on any
     width, so the scene scales with the viewport instead of capping */
  overflow: clip; /* cards never leak horizontal overflow */
}

.rio-scene {
  display: block;
  width: 100%;
  height: auto;
}
.rio-scene-m {
  display: none;
}
@media (max-width: 899px) {
  .rio-scene-d {
    display: none;
  }
  .rio-scene-m {
    display: block;
    max-width: 430px;
    margin-inline: auto;
  }
  /* stack the heading above the scene so it never meets the carafe */
  .rio-head {
    position: static;
    padding: 0 clamp(1rem, 4vw, 2rem) var(--space-sm);
  }
  .rio-title {
    font-size: var(--step-2);
  }
}

/* --- the review cards: postcards in the logo's ink line --- */
.rio-reviews {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 1140px;
  margin: clamp(-110px, -7vw, -48px) auto 0;
  padding: 0 clamp(1rem, 4vw, 2rem) var(--space-sm);
  position: relative;
  z-index: 2;
}
.rio-reviews li {
  max-width: 320px;
}

.rio-card {
  background: var(--color-bg);
  border: 1.5px solid rgba(38, 38, 38, 0.75);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 0.85rem 1.05rem 0.95rem;
}
.rio-card p {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.35;
  color: var(--color-ink);
}
.rio-name {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-text);
  font-size: var(--step--2);
  color: var(--text-soft);
}
.rio-name svg {
  flex: none;
}

/* three paper treatments so the notes read scattered, not repeated
   (tilts are mirrored in the bob keyframes so live mode keeps them) */
.rio-reviews li:nth-child(3n + 1) .rio-card {
  transform: rotate(-2.2deg);
  border-width: 2px;
}
.rio-reviews li:nth-child(3n + 2) .rio-card {
  transform: rotate(1.8deg);
  background: var(--cream-soft);
  border-color: rgba(38, 38, 38, 0.55);
}
.rio-reviews li:nth-child(3n) .rio-card {
  transform: rotate(-1deg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* --- live mode: GSAP owns each <li>, cards ride the course --- */
.rio-band.is-live .rio-reviews {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.rio-band.is-live .rio-reviews li {
  position: absolute;
  top: 0;
  left: 0;
  width: min(300px, 74vw);
  max-width: none;
  visibility: hidden; /* GSAP autoAlpha reveals each card as it spawns */
  will-change: transform;
}
/* the nudge layer between the course (li) and the bobbing paper (card):
   GSAP shoves it aside when the cursor gets in a drifting card's way */
.rio-band.is-live .rio-float {
  will-change: transform;
}
@media (max-width: 899px) {
  .rio-band.is-live .rio-reviews li {
    width: 224px;
  }
  .rio-band.is-live .rio-card p {
    font-size: var(--step--1);
  }
}

/* --- ambient scene motion, only while live, all transform/opacity/dash --- */
.rio-band.is-live .rio-flow {
  animation: rio-flow 14s linear infinite;
}
.rio-band.is-live .rio-flow-b {
  animation-duration: 20s;
}
.rio-band.is-live .rio-flow-c {
  animation-duration: 26s;
}
.rio-band.is-live .rio-pourflow {
  animation: rio-pourfall 0.9s linear infinite;
}
.rio-band.is-live .rio-drop {
  transform-box: fill-box;
  animation: rio-drop 1.7s linear infinite;
}
.rio-band.is-live .rio-drop-b {
  animation-duration: 2.3s;
  animation-delay: 0.6s;
}
.rio-band.is-live .rio-steam {
  transform-box: fill-box;
  animation: rio-steam 4.2s ease-in-out infinite alternate;
}
.rio-band.is-live .rio-steam-b {
  animation-duration: 5.4s;
  animation-delay: 1s;
}
.rio-band.is-live .rio-reviews li:nth-child(3n + 1) .rio-card {
  animation: rio-bob-a 3.6s ease-in-out infinite alternate;
}
.rio-band.is-live .rio-reviews li:nth-child(3n + 2) .rio-card {
  animation: rio-bob-b 4.1s ease-in-out infinite alternate;
  animation-delay: -1.3s;
}
.rio-band.is-live .rio-reviews li:nth-child(3n) .rio-card {
  animation: rio-bob-c 3.2s ease-in-out infinite alternate;
  animation-delay: -2.1s;
}

/* dashes drift toward the path start = with the current, both scenes
   (every flow dasharray sums to 250 so the loop is seamless) */
@keyframes rio-flow {
  to {
    stroke-dashoffset: 250;
  }
}
/* the pour falls toward the path end = downward */
@keyframes rio-pourfall {
  to {
    stroke-dashoffset: -90;
  }
}
@keyframes rio-drop {
  0% {
    transform: translateY(-6px);
    opacity: 0;
  }
  14% {
    opacity: 0.9;
  }
  78% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(84px);
    opacity: 0;
  }
}
@keyframes rio-steam {
  from {
    transform: translateY(4px);
    opacity: 0.12;
  }
  to {
    transform: translateY(-9px);
    opacity: 0.42;
  }
}
@keyframes rio-bob-a {
  from {
    transform: rotate(-2.2deg) translateY(-3px);
  }
  to {
    transform: rotate(-2.2deg) translateY(3px);
  }
}
@keyframes rio-bob-b {
  from {
    transform: rotate(1.8deg) translateY(-3.5px);
  }
  to {
    transform: rotate(1.8deg) translateY(2.5px);
  }
}
@keyframes rio-bob-c {
  from {
    transform: rotate(-1deg) translateY(-2.5px);
  }
  to {
    transform: rotate(-1deg) translateY(3.5px);
  }
}

/* frozen states: never any scene animation without .is-live, and
   belt-and-braces kills for capture mode and reduced motion */
html.shot .rio-scene *,
html.shot .rio-card {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .rio-scene *,
  .rio-card {
    animation: none !important;
  }
}

.rio-pause {
  display: none; /* only meaningful while the river runs */
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  width: 44px;
  height: 44px;
  place-items: center;
  background: var(--color-bg);
  border: 1px solid rgba(38, 38, 38, 0.35);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
  z-index: 3;
}
.rio-band.is-live .rio-pause {
  display: grid;
}
.rio-pause .icon-play {
  display: none;
}
.rio-band.is-paused .rio-pause .icon-pause {
  display: none;
}
.rio-band.is-paused .rio-pause .icon-play {
  display: block;
}
.rio-band.is-paused .rio-scene *,
.rio-band.is-paused .rio-card {
  animation-play-state: paused;
}

/* ============ visita ============ */
.visita-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.section-visita h2 {
  font-size: var(--step-5);
}

.visita-address {
  font-style: normal;
  font-size: var(--step-1);
  max-width: 38ch;
  margin-bottom: var(--space-sm);
}

.hours {
  margin: var(--space-lg) 0;
  max-width: 380px;
}
.hours div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: var(--space-2xs);
  border-bottom: 1px dotted rgba(185, 191, 164, 0.4);
}
.hours dt {
  font-weight: 600;
}
.hours dd {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.visita-phone {
  font-size: var(--step-1);
}

.visita-form form {
  background: var(--brand-600);
  border: 1px solid rgba(185, 191, 164, 0.25);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.visita-form h3 {
  color: #ffffff;
  margin-bottom: var(--space-md);
}

.field {
  margin-bottom: var(--space-sm);
}
.field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
  color: var(--olive-300);
}
.field input {
  width: 100%;
  font-size: 1rem;
  font-family: var(--font-text);
  padding: 0.7em 0.9em;
  background: var(--brand-800);
  color: var(--cream-soft);
  border: 1px solid rgba(185, 191, 164, 0.35);
  border-radius: var(--radius-sm);
}
.field input::placeholder {
  color: #8f8f85;
}
.field input:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 1px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-sm);
}

.visita-form .btn {
  width: 100%;
  margin-top: var(--space-2xs);
}

.form-note {
  font-size: var(--step--2);
  color: #c9c4b6;
  margin: var(--space-xs) 0 0;
  text-align: center;
}

.form-alt {
  font-size: var(--step--1);
  margin-top: var(--space-sm);
  text-align: center;
}

/* ============ footer ============ */
.site-footer {
  background: var(--color-bg);
  border-top: 1px solid rgba(122, 128, 96, 0.28);
  padding-block: var(--space-2xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-xl);
  align-items: center;
}

.footer-brand {
  overflow: hidden;
}
.footer-brand img {
  height: 96px;
  width: 109px; /* 662:582 ratio, holds the box if the file fails */
  object-fit: contain;
  /* failed-load alt text: one truncated line, same treatment as the header */
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  mix-blend-mode: multiply;
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: var(--step-0);
  margin: var(--space-xs) 0 0;
}

.footer-info p {
  margin-bottom: var(--space-3xs);
  font-size: var(--step--1);
  color: var(--text-soft);
}
.footer-info a {
  color: var(--accent-700);
}
.footer-small {
  margin-top: var(--space-xs);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-ink);
  border: 1px solid rgba(38, 38, 38, 0.3);
  border-radius: var(--radius-sm);
}
.footer-social a:hover {
  color: var(--accent-700);
  border-color: var(--accent-700);
}

/* ============ lightbox ============ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(15, 15, 15, 0.93);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open {
  display: flex;
}
.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
}
.lb-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  color: var(--color-ink);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ============ reveals ============ */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-gate] .gate-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mosaic-tile img {
    transition: none;
  }
}

/* ============ responsive ============ */
@media (max-width: 899px) {
  .main-nav,
  .header-cta {
    display: none;
  }
  .burger {
    display: block;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    order: -1;
  }
  .hero-arches {
    padding-bottom: 3.5rem;
  }
  .arch-slot-2 {
    margin-top: 1.75rem;
  }
  .arch-slot-3 {
    margin-top: 3.5rem;
  }
  .hero-stamp {
    width: 132px;
    padding: 1.6rem 0.9rem;
    font-size: var(--step--2);
    left: 2%;
  }

  .food-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "ft ft"
      "salmon club"
      "roll club";
    grid-template-rows: clamp(220px, 60vw, 380px) repeat(
        2,
        clamp(150px, 40vw, 240px)
      );
  }

  .dish-list {
    columns: 1;
  }
  .combo-list {
    grid-template-columns: 1fr;
  }

  .carta-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .carta-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .casa-grid,
  .cafe-grid,
  .galeria-grid,
  .visita-grid {
    grid-template-columns: 1fr;
  }
  .cafe-photo {
    order: 0;
  }
  .cafe-photo .arch {
    max-width: 420px;
  }

  .tile-video {
    width: 100%;
  }
  .tile-merch {
    width: 44%;
    translate: 0 10%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-brand img {
    margin-inline: auto;
  }
  .footer-social {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--step-4);
  }
  .carta-head h2,
  .section-visita h2 {
    font-size: var(--step-4);
  }
  .field-row {
    grid-template-columns: 1fr;
  }
  .hours {
    max-width: none;
  }
}

/* ============================================================
   Elevation pass (QA ✨ items)
   ============================================================ */

/* burger morphs to an X while the drawer is open */
.burger-x {
  display: none;
}
.burger.is-open .burger-bars {
  display: none;
}
.burger.is-open .burger-x {
  display: block;
}

/* hero reads as one collage: the colonnade bleeds into the copy gutter
   and the tan stamp sits on the seam (wide screens only) */
@media (min-width: 1100px) {
  .hero-arches {
    margin-left: -3.5rem;
  }
  .hero-stamp {
    left: -5%;
    bottom: 6%;
  }
}

/* headline signature: section h2s wipe in once (clip-path, compositor-cheap) */
html.js [data-reveal] h2 {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 850ms var(--ease-out) 120ms;
}
html.js [data-reveal].is-in h2 {
  clip-path: inset(0 -6% 0 0);
}

/* the blackbird draws itself (galería signature, the brief's hook) */
.bird-mark {
  display: block;
  width: min(250px, 60%);
  height: auto;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}
.bird-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.bird-blob {
  opacity: 1;
  transform: none;
  transform-origin: center;
  transform-box: fill-box;
}
html.js [data-gate]:not(.is-live) .bird-line {
  stroke-dashoffset: 1;
}
html.js [data-gate]:not(.is-live) .bird-blob {
  opacity: 0;
  transform: scale(0.6);
}
html.js .bird-line {
  transition: stroke-dashoffset 1100ms var(--ease-out);
}
html.js .bird-line-1 {
  transition-duration: 1200ms;
  transition-delay: 100ms;
}
html.js .bird-line-2 {
  transition-duration: 250ms;
  transition-delay: 800ms;
}
html.js .bird-line-3 {
  transition-duration: 500ms;
  transition-delay: 1050ms;
}
html.js .bird-line-4 {
  transition-duration: 450ms;
  transition-delay: 1450ms;
}
html.js .bird-line-5 {
  transition-duration: 550ms;
  transition-delay: 1800ms;
}
html.js .bird-line-6 {
  transition-duration: 250ms;
  transition-delay: 2300ms;
}
html.js .bird-line-7 {
  transition-duration: 450ms;
  transition-delay: 2500ms;
}
html.js .bird-line-8 {
  transition-duration: 550ms;
  transition-delay: 2850ms;
}
html.js .bird-line-9 {
  transition-duration: 250ms;
  transition-delay: 3300ms;
}
html.js .bird-blob {
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
html.js .bird-blob-terra {
  transition-delay: 3500ms;
}
html.js .bird-blob-olive {
  transition-delay: 3650ms;
}
html.js .bird-blob-tan {
  transition-delay: 3800ms;
}
html.js .bird-eye {
  transition-delay: 3950ms;
}

/* freezes: screenshots and reduced motion always get the resting state */
html.shot [data-reveal],
html.shot [data-reveal] h2,
html.shot [data-gate] .gate-item,
html.shot .bird-line,
html.shot .bird-blob,
html.shot .rincon-list h3 {
  transition: none !important;
}
html.shot .stack-card {
  transition: none !important;
  animation-duration: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] h2 {
    clip-path: none;
    transition: none;
  }
  html.js .bird-line,
  html.js .bird-blob {
    transition: none;
  }
  html.js [data-gate]:not(.is-live) .bird-line {
    stroke-dashoffset: 0;
  }
  html.js [data-gate]:not(.is-live) .bird-blob {
    opacity: 1;
    transform: none;
  }
}