/* Shared by every page: self-hosted fonts, scroll animations, cookie notice, legal footer */

@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ink: #070e1b;
  --panel: #0d1729;
  --gold: #cd9d62;
  --gold-light: #e7b679;
  --cream: #f1e7d5;
  --muted: #a99f92;
  --line: rgba(205, 157, 98, .22);
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- reveal on scroll (only when JS is running, so content never stays hidden) */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* gold rule that draws itself under a title */
.rule { display: block; width: 72px; height: 1px; background: var(--gold); margin-top: 22px; transform-origin: left; }
.js .rule { transform: scaleX(0); transition: transform 1.1s var(--ease) .25s; }
.js .in .rule, .js .rule.in { transform: scaleX(1); }

/* ---- cookie notice */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 620px; margin: 0 auto; background: rgba(13, 23, 41, .97); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; color: var(--cream); font: 400 14px/1.5 var(--sans); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); transform: translateY(140%); transition: transform .7s var(--ease); }
.cookie-bar.on { transform: none; }
.cookie-bar p { flex: 1; }
.cookie-bar a { color: var(--gold-light); }
.cookie-bar button { flex: none; background: var(--gold); color: var(--ink); border: 0; border-radius: 999px; padding: 10px 20px; font: 600 14px var(--sans); cursor: pointer; }
@media (max-width: 560px) { .cookie-bar { flex-direction: column; align-items: stretch; text-align: left; } }

/* ---- footer with legal links */
.site-footer { border-top: 1px solid var(--line); padding: 30px clamp(16px, 6vw, 96px); color: var(--muted); font: 400 14px/1.6 var(--sans); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }

/* ---- legal pages */
.legal { max-width: 820px; margin: 0 auto; padding: 40px clamp(16px, 5vw, 32px) 90px; font: 400 16px/1.75 var(--sans); }
.legal h1 { font: 400 clamp(40px, 6vw, 64px)/1.05 var(--serif); }
.legal h1 em { color: var(--gold-light); }
.legal .upd { color: var(--muted); font-size: 14px; margin-top: 12px; }
.legal h2 { font: 500 22px/1.3 var(--serif); color: var(--gold-light); margin: 40px 0 10px; }
.legal p, .legal li { color: #d9cfbf; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; margin-top: 8px; }
.legal li { margin-top: 6px; }
.legal a { color: var(--gold-light); }
.legal table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--gold); font-weight: 600; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin-top: 10px; }
.legal dt { color: var(--muted); }
.legal-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px clamp(16px, 4vw, 48px); }
.legal-top img { height: 42px; width: auto; }
.legal-top a { color: var(--muted); text-decoration: none; font: 400 14px var(--sans); letter-spacing: .06em; }
.legal-top a:hover { color: var(--gold-light); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .rule { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cookie-bar { transition: none; }
}