/* Shared layer: the one consistent frame around every page (top bar, footer nav, fade-up from black).
   Each page keeps its own personality inside it and sets --accent to its own colour. */
:root {
  --k-ink: #f1ebdf;
  --k-muted: #a9a498;
  --k-hair: rgba(241, 235, 223, .16);
  --k-sans: "Montserrat", system-ui, sans-serif;
  --k-serif: "Cormorant Garamond", Georgia, serif;
  --accent: #c9a75e;
}

::selection { background: var(--accent); color: #05060a; }

/* Every sub-page fades up out of black, matching the cut-to-black of the link transitions */
.veil { position: fixed; inset: 0; z-index: 9998; background: #000; pointer-events: none; animation: kVeil 1.2s ease-out .05s forwards; }
@keyframes kVeil { to { opacity: 0; visibility: hidden; } }

/* Top bar */
.sitebar { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap;
  padding: 22px clamp(18px, 4vw, 52px); border-bottom: 1px solid var(--k-hair); background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); font-family: var(--k-sans); }
.sitebar__brand { font: 500 .8rem var(--k-sans); letter-spacing: .44em; text-transform: uppercase; color: var(--k-ink); transition: color .3s; }
.sitebar__brand:hover { color: var(--accent); }
.sitebar nav { display: flex; gap: 8px clamp(16px, 2.8vw, 40px); flex-wrap: wrap; }
.sitebar nav a, .sitefoot a { position: relative; font: 400 .68rem var(--k-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--k-muted); padding: 8px 0; transition: color .3s; }
.sitebar nav a::after, .sitefoot a::after { content: ""; position: absolute; left: 0; right: .3em; bottom: 2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.sitebar nav a:hover, .sitefoot a:hover, .sitebar nav a[aria-current="page"], .sitefoot a[aria-current="page"] { color: var(--k-ink); }
.sitebar nav a:hover::after, .sitefoot a:hover::after, .sitebar nav a[aria-current="page"]::after, .sitefoot a[aria-current="page"]::after { transform: scaleX(1); }

/* Footer nav */
.sitefoot { position: relative; z-index: 20; max-width: 960px; margin: 0 auto; padding: 5vh 5vw 7vh; border-top: 1px solid var(--k-hair); text-align: center; font-family: var(--k-sans); }
.sitefoot nav { display: flex; justify-content: center; gap: 6px clamp(18px, 4vw, 54px); flex-wrap: wrap; }
.sitefoot p { margin-top: 22px; font: 400 .6rem var(--k-sans); letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: rgba(169, 164, 152, .55); }

@media (max-width: 640px) { .sitebar { justify-content: center; text-align: center; } .sitebar nav { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .veil { animation-duration: .01s; } }