/* =========================================================
   OLIVE & OAK SALON — "Quiet Luxury, Light"
   Airy editorial minimalism. Cormorant display at large
   scale, Hanken Grotesk utility. Warm bone paper, sage-olive
   + clay accents, hairline rules, vast negative space.
   ========================================================= */

:root {
  --bone:      oklch(0.958 0.011 88);
  --bone-2:    oklch(0.935 0.013 85);
  --bone-3:    oklch(0.905 0.015 82);
  --ink:       oklch(0.275 0.013 90);
  --ink-soft:  oklch(0.46 0.013 86);
  --ink-faint: oklch(0.6 0.011 84);
  --olive:     oklch(0.52 0.06 128);
  --olive-d:   oklch(0.42 0.052 128);
  --olive-soft:oklch(0.52 0.06 128 / 0.13);
  --clay:      oklch(0.62 0.072 48);
  --deep:      oklch(0.255 0.018 120);   /* deep olive-ink for footer/dark */
  --deep-2:    oklch(0.31 0.02 120);
  --line:      oklch(0.275 0.013 90 / 0.15);
  --line-d:    oklch(0.958 0.011 88 / 0.18);

  /* legacy aliases (used by inner pages) */
  --rose: var(--olive);
  --rose-deep: var(--olive-d);
  --rose-soft: var(--olive-soft);
  --char: var(--deep);
  --char-2: var(--deep-2);
  --paper: var(--bone);
  --paper-2: var(--bone-2);

  --display: "Cormorant", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --gut: clamp(20px, 5.5vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--bone); font-size: 17px; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.04; margin: 0; letter-spacing: 0; }
em { font-style: italic; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.eyebrow { font-family: var(--body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--olive-d); margin: 0 0 1.4rem; }
.eyebrow--light { color: oklch(0.78 0.05 128); }

.lead { font-size: 1.16rem; color: var(--ink-soft); line-height: 1.65; max-width: 54ch; font-weight: 400; }

.btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--body); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 1.1em 2.1em; border: 1px solid transparent; cursor: pointer; transition: background .4s ease, color .4s ease, border-color .4s ease, transform .3s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--rose { background: var(--olive); color: var(--bone); }
.btn--rose:hover { background: var(--olive-d); }
.btn--dark { background: var(--deep); color: var(--bone); }
.btn--dark:hover { background: var(--deep-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--bone); border-color: var(--line-d); }
.btn--ghost-light:hover { border-color: var(--bone); background: oklch(0.958 0.011 88 / 0.08); }

.link-quiet { font-family: var(--body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color .3s ease, border-color .3s ease; }
.link-quiet:hover { color: var(--olive-d); border-color: var(--olive); }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem var(--gut); transition: background .5s ease, padding .5s ease, border-color .5s ease, color .5s ease; border-bottom: 1px solid transparent; }
.nav__brand { font-family: var(--display); font-size: 1.7rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.nav__brand .amp { font-style: italic; color: var(--olive); font-weight: 500; }
.nav__links { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.8rem); list-style: none; margin: 0; padding: 0; }
.nav__links a { font-family: var(--body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--olive); transition: width .4s ease; }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
.nav.scrolled, .nav--solid { background: oklch(0.958 0.011 88 / 0.9); backdrop-filter: blur(16px); border-bottom-color: var(--line); color: var(--ink); }
.nav--overlay { color: var(--ink); }
@media (max-width: 760px) { .nav__links li:not(.nav__cta) { display: none; } }

/* footer */
.footer { background: var(--deep); color: var(--bone); padding: clamp(3.5rem,6vw,5.5rem) 0 2rem; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-d); }
.footer__brand { font-family: var(--display); font-size: 2.1rem; font-weight: 600; }
.footer__brand .amp { font-style: italic; color: oklch(0.78 0.05 128); }
.footer p, .footer li { color: oklch(0.958 0.011 88 / 0.64); font-size: 0.95rem; }
.footer h4 { font-family: var(--body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; color: var(--bone); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.6rem; font-size: 0.78rem; letter-spacing: 0.04em; color: oklch(0.958 0.011 88 / 0.5); }
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; gap: 2rem; } }

/* photo helper */
.ph { position: relative; overflow: hidden; background: var(--bone-3); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph__label { position: absolute; left: 0; bottom: 0; font-family: ui-monospace, Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone); background: oklch(0.25 0.018 120 / 0.5); padding: 0.4em 0.7em; margin: 0.8rem; backdrop-filter: blur(3px); }

/* avatar fallback (unused on home now, kept for safety) */
.avatar { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 2.6rem; font-weight: 500; color: var(--bone); }
.av-1 { background: linear-gradient(150deg, var(--olive), var(--olive-d)); }
.av-2 { background: linear-gradient(150deg, var(--clay), oklch(0.45 0.05 45)); }
.av-3 { background: linear-gradient(150deg, var(--deep-2), var(--deep)); }

/* reveal (slow, elegant) */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 1s cubic-bezier(.16,.7,.2,1), transform 1s cubic-bezier(.16,.7,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* sections */
.section { padding: clamp(4.5rem, 10vw, 9rem) 0; }
.section--dark { background: var(--deep); color: var(--bone); }
.section--paper2 { background: var(--bone-2); }
.section-head { max-width: 56ch; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.section-head h2 em { color: var(--olive-d); }
.section-head .lead { margin-top: 1.3rem; }