/* ============================================================
   Regency Home — FROZEN design tokens
   ------------------------------------------------------------
   This file hard-codes the three design decisions the client
   approved for the home page:
     • Palette ........ Monochrome
     • Display font ... DM Serif Display
     • Yacht cards .... Overlay layout
   In the prototype these were applied at runtime by tweaks.js.
   Here they are baked in so the page renders the final design
   with no JavaScript. Load this AFTER styles-logo.css.
   ============================================================ */

:root {
  /* ---- Monochrome palette (overrides styles-logo.css defaults) ---- */
  --navy-900: #141414;
  --navy-800: #141414;
  --navy-700: #2A2A2A;
  --cream-50: #FAFAF8;
  --cream-100: #EEEEEA;
  --gold-500: #8A8A8A;   /* "accent" — used for rules, small caps, badges */
  --gold-400: #A3A3A3;
  --gold-300: #BFBFBF;
  --gold-600: #6E6E6E;
  --ink:        #141414;
  --ink-deep:   #141414;
  --ink-muted:  #5C5C5C;
  --ink-subtle: #8A8A8A;

  /* ---- Display typeface ---- */
  --font-display: "DM Serif Display", Georgia, serif;
}

/* ============================================================
   Yacht card — OVERLAY layout
   Image fills the card; meta/title/specs/price sit on top of a
   dark bottom-up gradient. (Home page .yacht-card only.)
   ============================================================ */
.yacht-card.layout-overlay { position: relative; }
.yacht-card.layout-overlay .thumb {
  height: 520px;
  margin-bottom: 0;
  position: relative;
}
.yacht-card.layout-overlay .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,26,42,0.9), transparent 55%);
}
.yacht-card.layout-overlay .meta-top,
.yacht-card.layout-overlay h3,
.yacht-card.layout-overlay .specs,
.yacht-card.layout-overlay .row {
  position: absolute;
  left: 20px;
  right: 20px;
  color: var(--cream-50);
  z-index: 2;
}
.yacht-card.layout-overlay .meta-top { top: 20px; color: var(--cream-100); }
.yacht-card.layout-overlay h3       { bottom: 140px; color: var(--cream-50); }
.yacht-card.layout-overlay .specs   { bottom: 100px; color: rgba(245,239,230,0.85); }
.yacht-card.layout-overlay .row     { bottom: 20px; border-top-color: rgba(245,239,230,0.3); }
.yacht-card.layout-overlay .price,
.yacht-card.layout-overlay .cta     { color: var(--cream-50); }