/* =============================================================================
   lm.css — the Lantern Meadow design system (shared by every product page).
   -----------------------------------------------------------------------------
   Two registers, one world:
     • DUSK  — the meadow, the hero, the moment of lighting: deep blue-violet
               night, warm lantern light.
     • PAPER — reading and writing: warm cream paper lit from within, ink.
   Type: Gambetta (serif, for words people wrote and names) + General Sans
   (interface). Motion: slow, soft, eased — candlelight, never confetti.
   Every animation stops under prefers-reduced-motion.
   ============================================================================= */

@font-face { font-family: "Gambetta"; src: url("fonts/Gambetta-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gambetta"; src: url("fonts/Gambetta-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gambetta"; src: url("fonts/Gambetta-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("fonts/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* paper */
  --lm-cream: #f6ecd7; --lm-cream-2: #eee0c2; --lm-card: #fbf3e0; --lm-paper-hi: #fffaf0;
  --lm-ink: #2b2015; --lm-ink-80: rgba(43,32,21,.84); --lm-ink-60: rgba(43,32,21,.66); --lm-ink-45: rgba(43,32,21,.56);
  --lm-line: rgba(43,32,21,.13); --lm-line-2: rgba(43,32,21,.22);
  /* light */
  --lm-amber: #f3b65a; --lm-amber-hi: #f8c985; --lm-ember: #ffcf8e; --lm-flame: #ffe7bc; --lm-amber-ink: #7d461c;
  /* dusk */
  --lm-night: #141a26; --lm-dusk: #232b3b; --lm-dusk-2: #2f3446; --lm-dusk-warm: #4a3b3a; --lm-moon: #f1e9da; --lm-moon-60: rgba(241,233,218,.68);
  /* states */
  --lm-sage: #5f7a52; --lm-rose: #a4473a; --lm-calm: #3d5a73;
  /* shape + depth */
  --lm-r-sm: 10px; --lm-r: 16px; --lm-r-lg: 24px; --lm-r-pill: 999px;
  --lm-shadow: 0 24px 60px -30px rgba(43,32,21,.45), 0 2px 6px -2px rgba(43,32,21,.12);
  --lm-glow: 0 0 0 1px rgba(243,182,90,.35), 0 10px 40px -10px rgba(243,182,90,.55);
  /* type */
  --lm-serif: "Gambetta", Georgia, "Times New Roman", serif;
  --lm-sans: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* space (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  /* motion */
  --lm-ease: cubic-bezier(.16, 1, .3, 1); --lm-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --lm-slow: 900ms; --lm-mid: 450ms; --lm-fast: 200ms;
  /* safe areas (notches, home bars) */
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------------------------------------------------------------- buttons */
.lm-btn {
  --bg: linear-gradient(180deg, var(--lm-amber-hi), var(--lm-amber));
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 1.5em; border-radius: var(--lm-r-pill); border: 0;
  background: var(--bg); color: #2a1706; font: 500 1rem/1 var(--lm-sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 24px -12px rgba(201,128,40,.75), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform var(--lm-fast) var(--lm-ease), box-shadow var(--lm-mid) var(--lm-ease), opacity var(--lm-fast);
}
.lm-btn:hover { box-shadow: 0 12px 34px -12px rgba(201,128,40,.9), inset 0 1px 0 rgba(255,255,255,.5); }
.lm-btn:active { transform: scale(.97); }
.lm-btn:disabled, .lm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.lm-btn.ghost { --bg: transparent; color: var(--lm-ink); box-shadow: inset 0 0 0 1.5px var(--lm-line-2); }
.lm-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--lm-ink-45); background: rgba(43,32,21,.03); }
.lm-btn.on-dusk.ghost { color: var(--lm-moon); box-shadow: inset 0 0 0 1.5px rgba(241,233,218,.35); }
.lm-btn.quiet { --bg: transparent; box-shadow: none; color: var(--lm-ink-80); padding: 0 .9em; }
.lm-btn.quiet:hover { background: rgba(43,32,21,.05); }
.lm-btn.small { min-height: 38px; padding: 0 1.05em; font-size: .9rem; }
.lm-btn.block { width: 100%; }
.lm-btn.danger { --bg: transparent; color: var(--lm-rose); box-shadow: inset 0 0 0 1.5px rgba(164,71,58,.35); }

.lm-icon-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%;
  border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.35rem; line-height: 1;
  -webkit-tap-highlight-color: transparent; transition: background var(--lm-fast);
}
.lm-icon-btn:hover { background: rgba(43,32,21,.06); }

/* ----------------------------------------------------------------- fields */
.lm-field { display: grid; gap: 6px; }
.lm-label { font: 500 .88rem/1.3 var(--lm-sans); color: var(--lm-ink-80); }
.lm-hint { font: 400 .84rem/1.45 var(--lm-sans); color: var(--lm-ink-60); }
.lm-input, .lm-textarea {
  width: 100%; font: 400 1.05rem/1.5 var(--lm-sans); color: var(--lm-ink);
  background: var(--lm-paper-hi); border: 1.5px solid var(--lm-line-2); border-radius: var(--lm-r-sm);
  padding: 12px 14px; transition: border-color var(--lm-fast), box-shadow var(--lm-fast);
  -webkit-appearance: none; appearance: none;
}
.lm-input:focus, .lm-textarea:focus { outline: none; border-color: var(--lm-amber-ink); box-shadow: 0 0 0 4px rgba(243,182,90,.25); }
.lm-input[aria-invalid="true"] { border-color: var(--lm-rose); }
.lm-error { color: var(--lm-rose); font: 500 .88rem/1.4 var(--lm-sans); }

/* ------------------------------------------------------------------ toasts */
.lm-toasts {
  position: fixed; z-index: 2000; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + var(--safe-b)); display: grid; gap: 8px; width: min(92vw, 460px); pointer-events: none;
}
.lm-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  background: rgba(28,32,44,.96); color: var(--lm-moon); border-radius: 14px;
  padding: 10px 8px 10px 16px; box-shadow: 0 18px 50px -18px rgba(0,0,0,.55);
  font: 400 .95rem/1.35 var(--lm-sans);
  opacity: 0; transform: translateY(12px); transition: opacity .35s var(--lm-ease), transform .45s var(--lm-ease);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lm-toast.in { opacity: 1; transform: none; }
.lm-toast.out { opacity: 0; transform: translateY(6px); transition: opacity .9s var(--lm-ease-soft), transform .9s var(--lm-ease-soft); }
.lm-toast-msg { flex: 1; }
.lm-toast-act { border: 0; background: rgba(243,182,90,.18); color: var(--lm-ember); font: 500 .92rem var(--lm-sans); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.lm-toast-act:hover { background: rgba(243,182,90,.3); }
.lm-toast-x { border: 0; background: transparent; color: var(--lm-moon-60); font-size: 1.2rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.lm-toast.warn { background: rgba(74,48,26,.97); }
.lm-toast { position: relative; overflow: hidden; }


/* ---------------------------------------------------- the lantern (mark/loader) */
.lm-lantern { width: 44px; height: auto; color: var(--lm-moon); overflow: visible; }
.lm-lantern .lm-halo { transform-origin: 32px 62px; }
.lm-lantern .lm-flame { transform-origin: 32px 72px; }
.lm-lantern.is-breathing .lm-halo { animation: lm-breathe 3.2s var(--lm-ease-soft) infinite; }
.lm-lantern.is-breathing .lm-flame { animation: lm-flicker 2.3s ease-in-out infinite; }
.lm-lantern.is-breathing { animation: lm-drift 6s ease-in-out infinite; }
@keyframes lm-breathe { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes lm-flicker { 0%, 100% { transform: scale(1, 1); opacity: 1; } 30% { transform: scale(.94, 1.06); opacity: .9; } 55% { transform: scale(1.04, .95); } 80% { transform: scale(.97, 1.03); opacity: .95; } }
@keyframes lm-drift { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

.lm-loader { display: grid; justify-items: center; gap: 14px; padding: 48px 16px; color: var(--lm-ink-60); text-align: center; }
.lm-loader .lm-lantern { width: 46px; color: var(--lm-amber-ink); }
.lm-loader p { margin: 0; font: italic 400 1.02rem/1.4 var(--lm-serif); }
.lm-loader.is-dark { color: var(--lm-moon-60); }
.lm-loader.is-dark .lm-lantern { color: var(--lm-moon); }

/* ------------------------------------------------------------------ sheets */
.lm-scrim { position: fixed; inset: 0; z-index: 900; background: rgba(14,16,24,.55); opacity: 0; transition: opacity var(--lm-mid) var(--lm-ease); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.lm-scrim.in { opacity: 1; }

/* ----------------------------------------------------------------- utility */
.lm-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lm-honey { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 500 .8rem/1.2 var(--lm-sans); background: rgba(43,32,21,.06); color: var(--lm-ink-80); }

@media (prefers-reduced-motion: reduce) {
  .lm-lantern.is-breathing, .lm-lantern.is-breathing .lm-halo, .lm-lantern.is-breathing .lm-flame { animation: none !important; }
  .lm-toast, .lm-scrim { transition: none !important; }
}

/* A photograph that would lose too much to its frame is shown whole, resting
   on a soft, blurred copy of itself (lm-core.js → fit). */
.lm-fit-bg { position: absolute; inset: -12%; z-index: -1; pointer-events: none; background: center / cover no-repeat; filter: blur(22px) saturate(1.12) brightness(.9); }
.lm-fit-bg[hidden] { display: none; }