/* base.css — reset, page column, global theming tokens, a11y helpers. */

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

html,
body {
  margin: 0;
  padding: 0;
}

:root {
  /* page background — a tasteful dark neutral sampled between the night sky (#050825)
     and the warm art edges, so the centred column reads on both scenes. */
  --page-bg: #16141d;
  --page-bg-2: #100e16;
  --column-max: 560px;

  /* palette sampled from the ground-truth renders */
  --ink-slate: #2c2c3c;   /* morning body text (44,44,60) */
  --ink-white: #f6f6fb;   /* night body text (248,248,252) */
  --gold-brown: #74481f;  /* morning + night script names (sampled ~115,72,37) */
  --night-name-hi: #ece1d4;
  --night-name-lo: #c6b09b;
}

html {
  background: var(--page-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--page-bg) 0%, var(--page-bg-2) 100%);
  color: var(--ink-white);
  font-family: "Cinzel", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* centred invitation column */
.page {
  width: 100%;
  max-width: var(--column-max);
  margin-inline: auto;
  background: #000;
  overflow: hidden; /* clip any hero edge bleed */
}

img {
  display: block;
  max-width: 100%;
}

/* skip link */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 8px 14px;
  border-radius: 8px;
  background: #050a28;
  color: #fff;
  font: 600 14px/1 "Cinzel", serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--night-name-hi);
  outline-offset: 2px;
}

/* visually hidden but available to assistive tech */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}