/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Andaluz palette (default) */
  --terracotta:        #b95239;
  --terracotta-deep:   #8a3a26;
  --bone:              #f1e7d3;
  --bone-2:            #e8dcc2;
  --paper:             #f7f0df;
  --olive:             #5b6444;
  --olive-deep:        #3a4029;
  --med:               #2c5a78;
  --gold:              #c79a3a;
  --ink:               #1c1815;
  --ink-2:             #3a322a;
  --muted:             #5c5144;

  /* Typography */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --serif:   "Cormorant Garamond", serif;
  --sans:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --hand:    "Caveat", cursive;

  /* Spacing */
  --section-gap: clamp(80px, 10vw, 160px);
  --container:   1200px;
  --container-wide: 1400px;
  --radius-arch: 260px 260px 8px 8px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Costa palette */
[data-theme="costa"] {
  --terracotta:      #1f4a6b; --terracotta-deep: #163451;
  --bone:            #f4ede1; --bone-2:          #eae0ce;
  --paper:           #faf4eb; --olive:           #7ba9b8;
  --olive-deep:      #568196; --med:             #d9b266;
  --gold:            #a85533; --ink:             #0e1f2a; --ink-2: #1a3040; --muted: #4a6070;
}
/* Olivo palette */
[data-theme="olivo"] {
  --terracotta:      #5b6444; --terracotta-deep: #3a4029;
  --bone:            #efe6cf; --bone-2:          #e4d9ba;
  --paper:           #f5efdc; --olive:           #b95239;
  --olive-deep:      #8a3a26; --med:             #a48249;
  --gold:            #3c5360; --ink:             #1c1815; --ink-2: #2e2720; --muted: #6e6456;
}
/* Moody palette */
[data-theme="moody"] {
  --terracotta:      #7a3a26; --terracotta-deep: #5a2718;
  --bone:            #1f1a17; --bone-2:          #2a2320;
  --paper:           #171210; --olive:           #c79a3a;
  --olive-deep:      #a07c28; --med:             #5b6444;
  --gold:            #8e6e4e; --ink:             #f0e3cb; --ink-2: #d4c4a8; --muted: #8a7a68;
}
/* Almendro palette */
[data-theme="almendro"] {
  --terracotta:      #9b6d3c; --terracotta-deep: #7a5428;
  --bone:            #f7eddd; --bone-2:          #ece0ca;
  --paper:           #fdf5e8; --olive:           #b8492f;
  --olive-deep:      #8c341f; --med:             #b9a472;
  --gold:            #385a55; --ink:             #241a13; --ink-2: #362519; --muted: #7a6050;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { cursor: pointer; font: inherit; border: none; background: none; }

/* ── Typography ────────────────────────────────────────────── */
.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: .88;
  letter-spacing: -.025em;
}
.serif { font-family: var(--serif); }
.hand  { font-family: var(--hand); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

/* ── Layout helpers ────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}
.container--wide {
  max-width: var(--container-wide);
}

.section {
  padding-block: var(--section-gap);
}

/* ── Arch motif ────────────────────────────────────────────── */
.arch {
  border-radius: var(--radius-arch);
  overflow: hidden;
  object-fit: cover;
}

/* ── Reveal on scroll ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 220ms, color 220ms, transform 120ms;
  border-radius: 2px;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--terracotta);
  color: #fff;
}
.btn--primary:hover { background: var(--terracotta-deep); }

.btn--outline {
  background: transparent;
  color: var(--terracotta);
  border: 1.5px solid var(--terracotta);
}
.btn--outline:hover { background: var(--terracotta); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border: 1.5px solid rgba(255,255,255,.35);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); }

/* ── Marquee strip ─────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  background: var(--ink);
  padding: 18px 0;
}
.marquee__track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}
.marquee__item {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--bone);
  white-space: nowrap;
  opacity: .7;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ── Chip / filter tag ─────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--bone);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid var(--bone-2);
  transition: background 150ms, border-color 150ms;
}
.chip:hover, .chip.is-active {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
}

/* ── Section eyebrow ───────────────────────────────────────── */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.section-eyebrow__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  color: var(--terracotta);
  line-height: 1;
  flex-shrink: 0;
}
.section-eyebrow__rule {
  flex: 1;
  height: 1px;
  background: var(--bone-2);
  max-width: 60px;
}
.section-eyebrow__label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

/* ── Apartment card ────────────────────────────────────────── */
.apt-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.apt-card__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-arch);
  aspect-ratio: 3/4;
  background: var(--bone-2);
}
.apt-card__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.apt-card:hover .apt-card__img-wrap img { transform: scale(1.04); }
.apt-card__body { padding: 28px 0 0; }
.apt-card__tag {
  font-family: var(--hand);
  font-size: 22px;
  color: var(--muted);
  margin-bottom: 6px;
}
.apt-card__name {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 12px;
}
.apt-card__blurb {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 20px;
}
.apt-card__price {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--terracotta);
}

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: auto; z-index: 9999;
  padding: 12px 20px; background: var(--terracotta); color: #fff;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  text-decoration: none; border-radius: 0 0 4px 4px;
}
.skip-link:focus { left: 50%; transform: translateX(-50%); }

/* ── Utility ───────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.text-terracotta { color: var(--terracotta); }
.text-muted { color: var(--muted); }
.italic { font-style: italic; }

/* ── Responsive breakpoints ────────────────────────────────── */
@media (max-width: 1024px) {
  body { font-size: 16px; }
}
@media (max-width: 768px) {
  :root { --section-gap: clamp(60px, 8vw, 100px); }
}
@media (max-width: 480px) {
  :root { --section-gap: 60px; }
  .btn { padding: 12px 22px; font-size: 12px; }
}