/* The Flamingo House — redesign concepts, shared foundation.
   Type: Palatino (system) · Figura Sans → stand-in Belleza · Portrait Script → stand-in Mrs Saint Delafield */
@import url('https://fonts.googleapis.com/css2?family=Belleza&family=Mrs+Saint+Delafield&display=swap');

:root {
  --midnight: #193285;
  --kelp: #3041AD;
  --cream: #F9F2ED;
  --linen: #EFE5D8;
  --pale: #DCE6F7;
  --sand: #E1BBA0;
  --rust: #A94F2D;
  --white: #FFFDFB;

  --serif: 'Palatino Linotype', Palatino, 'Book Antiqua', 'TeX Gyre Pagella', 'URW Palladio L', serif;
  --label: 'Figura Sans', 'Belleza', 'Optima', 'Candara', sans-serif;
  --script: 'Portrait Script', 'Mrs Saint Delafield', cursive;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--midnight);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
em { font-style: italic; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
/* tendrils are allowed to bleed past the gutter, never past the viewport */
main, footer, header { overflow-x: clip; }

/* Figura Sans role: letterspaced caps */
.label {
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.5;
}
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; line-height: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.75rem;
  font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--rust { background: var(--rust); color: #fff; }
.btn--rust:hover { background: #8f4125; }
.btn--midnight { background: var(--midnight); color: var(--cream); }
.btn--midnight:hover { background: var(--kelp); }
.btn--sand { background: var(--sand); color: var(--midnight); }
.btn--sand:hover { background: #d6a988; }
.btn--line { border-color: currentColor; color: inherit; background: transparent; }
.btn--line:hover { background: var(--midnight); color: var(--cream); border-color: var(--midnight); }

.link {
  font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.link:hover { color: var(--rust); }

.tendril { color: var(--kelp); pointer-events: none; position: absolute; }
.tendril use { fill: currentColor; }

/* Concept switcher (review aid, not part of the design) */
.concept-bar {
  position: fixed; z-index: 100; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 2px; background: rgba(25, 50, 133, .94); padding: 4px;
  font-family: system-ui, sans-serif; font-size: 12px; max-width: calc(100% - 24px); overflow-x: auto;
}
.concept-bar a { color: #F9F2ED; text-decoration: none; padding: 7px 12px; white-space: nowrap; }
.concept-bar a[aria-current] { background: #F9F2ED; color: #193285; }

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }