/* Arco Diez Cafe — prototype. Earth tones taken from the house and its
   Instagram: the night around the old house, the walnut of its boards and
   tables, the amber of the neon and the capiz windows, the terracotta of
   the brick walls and the staff's shirts, the cream of the plaster, the
   pink of the bougainvillea (and their pink cups), the green of the garden.
   The hero lives at night; the sections below are daytime, like the feed. */

:root {
  --night: #070605;          /* the sky behind the house; the hero's ground */
  --espresso: #15100c;
  --walnut: #2a1f17;
  --bark: #4a3626;
  --terracotta: #b8653a;
  --amber: #ffb24a;          /* the neon */
  --lamp: #ffd99a;
  --oat: #efe4cf;
  --oat-dim: #c9bba2;
  --moss: #7b8457;
  --brick: #a5553a;          /* the brick walls, the staff shirts */
  --cream: #f4ead9;          /* the plaster walls in daylight */
  --cream-deep: #ead9c0;
  --capiz: #e8c78c;          /* light through the capiz windows */
  --bougainvillea: #d4789a;  /* the flowers by the door, the pink cups */
  --leaf: #5f6f3c;
  --ink: #2b1d14;            /* text on cream: dark roast, not black */
  --ink-soft: #6b5544;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Switzer', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--oat);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem clamp(1.25rem, 4vw, 3.5rem);
  background: linear-gradient(to bottom, rgba(7, 6, 5, 0.75), rgba(7, 6, 5, 0));
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--amber);
  text-decoration: none;
  text-shadow: 0 0 14px rgba(255, 160, 60, 0.55);
  margin-right: auto;
}
/* The AD sprout, tinted with whatever colour it sits in (it is a mask). */
.logo-mark {
  display: inline-block;
  height: 1.7em;
  aspect-ratio: 1170 / 1894;
  background: currentColor;
  -webkit-mask: url('../assets/logo-mark.png') center / contain no-repeat;
          mask: url('../assets/logo-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 160, 60, 0.45));
}
.nav__links { display: flex; gap: 1.75rem; }
.nav__links a, .nav__cta {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--oat-dim);
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--oat); }
/* Over the daytime sections the nav becomes a cream bar with dark ink
   (js/hero.js toggles .is-day once the night hero has scrolled away). */
.nav { transition: background 0.4s ease, box-shadow 0.4s ease; }
.nav.is-day {
  background: rgba(244, 234, 217, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(43, 29, 20, 0.08);
}
.nav.is-day .nav__brand { color: var(--brick); text-shadow: none; }
.nav.is-day .logo-mark { filter: none; }
.nav.is-day .nav__links a { color: var(--ink-soft); }
.nav.is-day .nav__links a:hover { color: var(--ink); }
.nav.is-day .nav__cta { color: var(--brick); border-color: rgba(165, 85, 58, 0.45); }
.nav__cta {
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 178, 74, 0.45);
  border-radius: 999px;
  color: var(--amber);
}
.nav__cta:hover { background: rgba(255, 178, 74, 0.1); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--night);
}
/* The plain photo: shown until the scene draws its first frame (and for
   good if WebGL is unavailable), placed where the scene places the house. */
.hero__fallback {
  position: absolute;
  top: 0;
  right: 4%;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 82%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 22%, #000 82%, transparent);
  transition: opacity 0.8s ease;
}
.hero.is-live .hero__fallback { opacity: 0; }
/* The dusk scene (hero v3) is landscape and fills the hero edge to edge. */
.hero[data-scene="dusk"] .hero__fallback {
  inset: 0;
  right: auto;
  width: 100%;
  height: 100%;
  translate: none;
  object-position: 60% 55%;
  -webkit-mask-image: none;
          mask-image: none;
}
/* A shade behind the headline only, so the copy reads over the busy dusk
   photo (string lights, the balcony) while the leaves and the terrace keep
   their full light. Sits over the canvases, under the copy. */
.hero[data-scene="dusk"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 62% at 18% 52%, rgba(12, 7, 3, 0.72), rgba(12, 7, 3, 0) 100%),
    linear-gradient(to right, rgba(12, 7, 3, 0.35), rgba(12, 7, 3, 0) 55%);
}
.hero[data-scene="dusk"] .hero__copy { text-shadow: 0 2px 18px rgba(10, 5, 2, 0.75); }
.hero[data-scene="dusk"] .hero__eyebrow { color: var(--capiz); }
@media (max-aspect-ratio: 9/10) {
  .hero[data-scene="dusk"]::after {
    background: linear-gradient(to bottom, rgba(12, 7, 3, 0.82) 0%, rgba(12, 7, 3, 0.7) 42%, rgba(12, 7, 3, 0) 62%);
  }
}
.hero__scene, .hero__life {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__life { pointer-events: none; }

.hero__copy {
  position: absolute;
  z-index: 5;
  left: clamp(1.25rem, 6vw, 6rem);
  top: 50%;
  translate: 0 -46%;
  max-width: min(34rem, 44vw);
}
.hero__eyebrow, .story__eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.9rem, 6.2vw, 5.8rem);
  line-height: 1;
  letter-spacing: -0.005em;
}
.hero__title em {
  font-style: italic;
  color: var(--lamp);
  text-shadow: 0 0 28px rgba(255, 170, 70, 0.35);
}
.hero__lede {
  margin: 1.4rem 0 2.1rem;
  max-width: 26rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--oat-dim);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn--warm {
  background: var(--amber);
  color: var(--espresso);
  box-shadow: 0 0 0 0 rgba(255, 178, 74, 0);
}
.btn--warm:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 178, 74, 0.35); }
.btn--ghost { border: 1px solid rgba(239, 228, 207, 0.35); color: var(--oat); }
.btn--ghost:hover { background: rgba(239, 228, 207, 0.08); }

.hero__scroll {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  width: 22px;
  height: 36px;
  border: 1px solid rgba(239, 228, 207, 0.35);
  border-radius: 12px;
}
.hero__scroll span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--oat-dim);
  animation: scroll-hint 2.2s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0; }
}

/* Phones: the photo fills the screen (it is portrait, like the phone), and
   the copy sits in the night sky above the roof. */
@media (max-aspect-ratio: 9/10) {
  .hero__fallback { right: 50%; translate: 50% 0; -webkit-mask-image: none; mask-image: none; }
  .hero__copy {
    top: 6.5rem;
    translate: none;
    left: 1.25rem;
    right: 1.25rem;
    max-width: none;
    text-align: center;
  }
  .hero__title { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .hero__lede { margin: 0.9rem auto 1.4rem; font-size: 0.95rem; }
  .hero__actions { justify-content: center; }
  .nav__links { display: none; }
}

/* ---------- placeholder sections ---------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(4rem, 10vw, 9rem) clamp(1.25rem, 6vw, 6rem);
  background: var(--cream);
  color: var(--ink);
}
.story--flip { background: var(--cream-deep); }
.story .story__eyebrow { color: var(--brick); }
.story--flip .story__text { order: 2; }
.story h2 {
  margin: 0 0 1.2rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1.1;
}
.story p { color: var(--ink-soft); line-height: 1.7; }
.story h2 em { font-style: italic; color: var(--brick); }
.story__img {
  border-radius: 6px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  box-shadow: 0 24px 60px -24px rgba(60, 30, 10, 0.45);
}
@media (max-width: 760px) {
  .story { grid-template-columns: 1fr; }
  .story--flip .story__text { order: 0; }
}

.foot {
  padding: 4.5rem clamp(1.25rem, 6vw, 6rem);
  background: var(--brick);
  color: var(--cream);
  text-align: center;
}
.foot__logo { width: min(320px, 70vw); height: auto; margin: 0 auto 1.6rem; }
.foot p { margin: 0; }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.65;
}
.foot__label {
  margin-bottom: 0.7rem !important;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--capiz);
}
.foot address { font-style: normal; }
.foot__map { display: inline-block; margin-top: 0.6rem; color: var(--cream); text-underline-offset: 3px; }
.foot__hours { display: grid; grid-template-columns: auto auto; gap: 0.25rem 1.2rem; margin: 0; }
.foot__hours dd { margin: 0; opacity: 0.85; }
@media (max-width: 760px) {
  .foot__grid { grid-template-columns: 1fr; text-align: center; }
  .foot__hours { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scroll span { animation: none; }
}