/* ============================================================
   ATELIER LUNA — base.css
   Design tokens, reset, typography, utilities.
   Warm cream palette · Fraunces + Manrope · soft rounded system
   ============================================================ */

:root {
  /* ---- Surface ---- */
  --bg:          #FBF6EE;   /* warm cream page ground */
  --card:        #FDF9F1;   /* raised paper */
  --white:       #FFFFFF;
  --blush:       #F3DDD1;   /* soft peach section tint */
  --blush-soft:  #F8EAE1;
  --sand:        #F4EBDC;   /* muted warm tint */
  --sage:        #E3EAE1;   /* quiet secondary accent */

  /* ---- Ink ---- */
  --ink:         #291F19;   /* headings, primary buttons */
  --ink-2:       #3D3027;
  --body:        #4A3C33;
  --muted:       #7C6A5B;

  /* ---- Accent ---- */
  --gold:        #B29160;
  --gold-dark:   #96784B;
  --gold-soft:   #EADFCB;

  /* ---- Line ---- */
  --line:        #E9DAC4;
  --line-soft:   #F0E5D6;

  /* ---- State ---- */
  --ok:          #6B8F6B;
  --err:         #B4574A;
  --err-soft:    #FAEDEA;

  /* ---- Type ---- */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:  clamp(2.5rem, 1.35rem + 4.8vw, 4.75rem);   /* 40 → 76 */
  --fs-h1:    clamp(2.25rem, 1.5rem + 3.1vw, 3.75rem);   /* 36 → 60 */
  --fs-h2:    clamp(1.875rem, 1.35rem + 2.2vw, 3rem);    /* 30 → 48 */
  --fs-h3:    clamp(1.375rem, 1.15rem + .95vw, 1.875rem);/* 22 → 30 */
  --fs-h4:    clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* ---- Rhythm ---- */
  --sp:        clamp(4rem, 2.6rem + 5.4vw, 7rem);   /* 64 → 112 (py-20/28) */
  --sp-lg:     clamp(4.5rem, 2.8rem + 6.5vw, 8rem);
  --gutter:    clamp(1.25rem, .8rem + 1.9vw, 2.25rem);
  --shell:     1200px;
  --shell-wide:1320px;

  /* ---- Shape ---- */
  --r-xs:   10px;
  --r-sm:   14px;
  --r:      16px;
  --r-card: 24px;
  --r-lg:   32px;
  --r-pill: 9999px;

  /* ---- Elevation ---- */
  --sh-soft:   0 4px 24px -6px rgba(42, 32, 26, .10), 0 2px 6px -2px rgba(42, 32, 26, .05);
  --sh-card:   0 10px 30px -12px rgba(42, 32, 26, .16), 0 2px 8px -3px rgba(42, 32, 26, .06);
  --sh-lift:   0 12px 40px -12px rgba(42, 32, 26, .22);
  --sh-float:  0 20px 55px -18px rgba(42, 32, 26, .30);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .45s;
  --fast: .25s;

  --nav-h: 72px;
  --nav-top: 20px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--nav-top) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .55em;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.35; }

/* Sans headings where UI-like weight reads better */
.h-sans { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }

a { color: var(--gold-dark); text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--ink); }

button { font: inherit; color: inherit; }
strong, b { font-weight: 700; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--blush); color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 4000;
  background: var(--ink); color: var(--bg);
  padding: .8rem 1.35rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; color: var(--bg); }

/* ---------- Display type ---------- */
.display { font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); }
.display em { font-style: italic; color: var(--gold); font-weight: 400; }

.t-hero { font-size: var(--fs-hero); line-height: 1.06; }
.t-h1   { font-size: var(--fs-h1); }
.t-h2   { font-size: var(--fs-h2); }
.t-h3   { font-size: var(--fs-h3); }

.lede {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 54ch;
}
.muted { color: var(--muted); }

/* Eyebrow pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem .4rem .75rem;
  margin-bottom: 1.15rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  box-shadow: var(--sh-soft);
}
.eyebrow .spark { color: var(--gold); flex: none; }
.eyebrow--plain { background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; }

/* ---------- Section heads ---------- */
.head { max-width: 640px; margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.head--center { margin-inline: auto; text-align: center; }
.head p { margin-bottom: 0; }
.head h2 { margin-bottom: .75rem; }

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}
.head-row .head { margin-bottom: 0; }

/* ---------- Layout utilities ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-wide { width: 100%; max-width: var(--shell-wide); margin-inline: auto; padding-inline: var(--gutter); }

.sec { padding-block: var(--sp); }
.sec-lg { padding-block: var(--sp-lg); }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

.bg-cream { background: var(--bg); }
.bg-blush { background: var(--blush-soft); }
.bg-sand  { background: var(--sand); }
.bg-card  { background: var(--card); }

.on-dark { background: var(--ink); color: #C9BCB0; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--bg); }
.on-dark .muted, .on-dark .lede { color: #B0A196; }
.on-dark .eyebrow { background: rgba(253,249,241,.09); border-color: rgba(253,249,241,.18); color: var(--gold); box-shadow: none; }

.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; } .mb-0 { margin-bottom: 0; }

.mw-34 { max-width: 34ch; } .mw-42 { max-width: 42ch; }
.mw-50 { max-width: 50ch; } .mw-60 { max-width: 60ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Figures ---------- */
.ph { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--r-card); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--bordered { border: 1px solid var(--line); box-shadow: var(--sh-soft); }
.ph--4-5 { aspect-ratio: 4 / 5; }
.ph--3-4 { aspect-ratio: 3 / 4; }
.ph--1-1 { aspect-ratio: 1 / 1; }
.ph--4-3 { aspect-ratio: 4 / 3; }
.ph--16-9 { aspect-ratio: 16 / 9; }
.ph--3-2 { aspect-ratio: 3 / 2; }
.ph--zoom img { transition: transform .9s var(--ease); }
.ph-hover:hover .ph--zoom img, a:hover .ph--zoom img { transform: scale(1.04); }

/* ---------- Reveal ----------
   Content is visible by default. main.js "arms" only the elements
   that start below the fold, so the page still renders fully when
   JavaScript is unavailable or the observer never fires. */
.rv { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.armed { opacity: 0; transform: translateY(22px); }
.rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv.armed { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}