/* Au Naturel — Brand kit
   Premium travel/lifestyle feel. Sand + ocean palette.
   Typography: Source Serif 4 (display) + Inter (body) */

:root {
  /* Color palette — sunny Mediterranean */
  --white-50:      #FFFFFF;   /* pure white */
  --white-100:     #FAFBFC;   /* barely tinted */
  --white-200:     #EEF3F8;   /* cool wash for rules */
  --sand-warm:     #FFF8E8;   /* subtle sunny warm tint */

  --ink-900:       #0F1E2E;   /* deep navy ink */
  --ink-700:       #2C3E50;   /* slate */
  --ink-500:       #5A6E7E;   /* mid */
  --stone-400:     #8B9AA8;   /* muted */
  --stone-300:     #B8C4D0;   /* faint */

  --sun-700:       #FFB300;   /* deep tropical gold */
  --sun-500:       #FFD54F;   /* vivid tropical sun */
  --sun-400:       #FFE082;   /* bright sun glow */
  --sun-300:       #FFECB3;   /* sun haze */

  --sky-800:       #01579B;   /* deepest tropical sky */
  --sky-700:       #0277BD;   /* deep tropical sky */
  --sky-600:       #03A9F4;   /* vivid tropical sky — primary accent */
  --sky-500:       #29B6F6;   /* bright tropical sky */
  --sky-400:       #4FC3F7;   /* light bright sky */

  --turquoise-800: #006064;   /* deepest tropical sea */
  --turquoise-700: #00838F;   /* deep Caribbean sea */
  --turquoise-500: #00D9C8;   /* VIVID Caribbean turquoise */
  --turquoise-400: #4DE1D2;   /* bright turquoise */
  --turquoise-300: #80EBE0;   /* light turquoise */

  --coral-600:     #FF6E40;   /* deep tropical coral */
  --coral-500:     #FF8A65;   /* vivid peachy coral */
  --coral-400:     #FFAB91;   /* light coral */

  --leaf-600:      #43A047;   /* tropical leaf */
  --leaf-500:      #66BB6A;   /* bright leaf */

  /* Semantic */
  --bg:           var(--white-100);
  --bg-elevated:  var(--white-50);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-500);
  --text-quiet:   var(--stone-400);
  --accent:       var(--sky-600);
  --accent-warm:  var(--sun-500);
  --rule:         var(--white-200);

  /* Typography */
  --font-display: 'Source Serif 4', 'Source Serif Pro', ui-serif, Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;

  /* Layout */
  --container: 1140px;
  --gutter:    32px;
  --radius:    8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0 0 0.5em;
}

h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

p { margin: 0 0 1em; color: var(--text-muted); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--sky-700); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--ink-900);
  color: var(--white-50);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  transition: background 150ms ease, transform 150ms ease;
}
.btn:hover { background: var(--sky-700); color: var(--white-50); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-900);
}
.btn-ghost:hover { background: var(--ink-900); color: var(--white-50); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Shared page footer (matches homepage footer exactly) ─────── */
.page-footer {
  margin-top: 80px;
  padding: 56px var(--gutter) 40px;
  border-top: 1px solid var(--rule);
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.page-footer .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.page-footer .brand {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-900);
}
.page-footer .brand .accent { color: var(--sky-600); }
.page-footer .footer-meta {
  font-size: 12px;
  color: var(--text-quiet);
  letter-spacing: 0.05em;
}
.page-footer .footer-links {
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
}
.page-footer .footer-links li { font-size: 12px; }
.page-footer .footer-links a {
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 150ms ease;
}
.page-footer .footer-links a:hover { color: var(--accent); }
.page-footer .powered-by {
  margin-top: 20px;
  font-size: 11px;
  color: var(--text-quiet);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-footer .powered-by a { color: var(--ink-700); font-weight: 500; }
.page-footer .powered-by a:hover { color: var(--accent); }
.page-footer .photo-credits {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--text-quiet);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.page-footer .photo-credits a {
  color: var(--text-muted);
  border-bottom: 1px dotted currentColor;
}