/* ============================================================
   Wesley & Claire — shared design tokens
   Palette: Wedding_Palette.png (White · Green · Lemon)
   Fonts:   Storybook system — IM Fell DW Pica (display) + Alex Brush (names) + Tangerine (script) + Alegreya Sans
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica:ital@0;1&family=Alex+Brush&family=Tangerine:wght@400;700&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

:root{
  /* ——— SPRING PALETTE 2026-08-01 (Wesley & Claire's pick) ———
     swatches: olive #758650 · leaf #B5C267 · lemon #FFE27C · mustard #E8B634 · white #F8F9F8 · taupe #C9B6A1
     text-golds are deepened derivatives — true mustard/taupe fail contrast as small text on light grounds */
  /* neutrals — white & taupe linen */
  --soft-white:#F8F9F8;
  --dover:#F0EDE4;
  --oat:#D9CFBB;
  --oak:#C9B6A1;

  /* greens — olive foliage */
  --leaf:#B5C267;
  --grass:#758650;
  --forest:#46532F;

  /* yellows — soft lemon & mustard gold */
  --soft-lemon:#FFE27C;
  --lemon:#FFE27C;     /* hero colour */
  --honey:#C79B1F;

  /* ink / text */
  --ink:#333A26;       /* deep olive-charcoal */
  --soft-ink:#626B4E;
  --line:rgba(117,134,80,.22);

  /* tints for soft sectioned backgrounds */
  --tint-green:#EFF3DC;
  --tint-lemon:#FFF6D8;

  /* fonts */
  --display:"IM Fell DW Pica",Georgia,serif;   /* chapter headings, dates, body accents */
  --names:"Alex Brush",cursive;                /* Wesley & Claire — the names only */
  --script:"Tangerine",cursive;                /* "Save the date" flourishes */
  --sans:"Alegreya Sans",-apple-system,system-ui,sans-serif;

  /* misc */
  --maxw:1120px;
  --radius:16px;
  --shadow:0 24px 60px rgba(44,51,39,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--soft-white);
  -webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}

/* shared type primitives (options may override) */
.eyebrow{font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.32em;font-size:12px;color:var(--honey);margin:0 0 .5em}
.script{font-family:var(--script);color:var(--grass);font-weight:700;line-height:1}
.display{font-family:var(--display);font-weight:400;line-height:1.05;color:var(--ink)}  /* IM Fell DW Pica ships 400 only */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* shared lightbox (created by std.js) */
.std-lightbox{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:rgba(28,33,25,.92);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  padding:4vmin;cursor:zoom-out}
.std-lightbox.open{opacity:1;visibility:visible}
.std-lightbox img{max-width:94vw;max-height:92vh;width:auto;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.std-lightbox__close{position:fixed;top:18px;right:22px;background:none;border:0;color:#fff;font-size:38px;
  line-height:1;cursor:pointer;opacity:.8}
.std-lightbox__close:hover{opacity:1}

/* body scroll lock while cover is up */
body:not(.std-entered){overflow:hidden}

/* shared cover transitions (the cover stays CLOSED until tapped; engine handles play) */
[data-std-cover]{transition:opacity 1.2s var(--ease),visibility 1.2s var(--ease)}
[data-std-cover].is-gone{opacity:0;visibility:hidden}
/* while the opening animation plays, fade out the tap prompt */
[data-std-cover].is-opening [data-std-enter]{opacity:0;pointer-events:none;transition:opacity .55s var(--ease)}

/* scroll-progress bar — slim gold line filling as you read (shows once entered) */
.std-progress{position:fixed;top:0;left:0;z-index:300;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none;
  background:linear-gradient(90deg,var(--lemon),var(--honey));
  box-shadow:0 0 10px rgba(232,182,52,.55);opacity:0;transition:opacity .5s var(--ease)}
body.std-entered .std-progress{opacity:1}