/* base.css — reset, body, typography helpers, focus/selection/scrollbar,
   @font-face. Design doc: §12.2, §12.5, §14. */

/* ---- Fonts (self-hosted, latin subset, variable weight; Devanagari comes
   from the OS stack). Google Fonts serves these families as variable fonts:
   one file covers every weight DESIGN.md 14 lists, so four files replace
   the design's seven static ones. Deviation recorded in DESIGN.md. ---- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-var.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-italic-var.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/raleway-var.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/cinzel-var.woff2") format("woff2");
}

/* ---- Reset ---- */

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

/* The `hidden` attribute must always win: any author `display` rule
   (e.g. .organiser__new-code, .rsvp__form, .music-button use display:flex)
   otherwise overrides the browser's [hidden] { display: none } and the
   element renders while supposedly hidden. */
[hidden] { display: none !important; }

body,
h1, h2, h3, p,
figure,
blockquote,
dl, dd { margin: 0; }

ul[class],
ol[class] { list-style: none; margin: 0; padding: 0; }

img,
svg,
video,
canvas { display: block; max-width: 100%; }

img,
video { height: auto; }

input,
button,
textarea,
select { font: inherit; }

button { background: none; border: none; padding: 0; cursor: pointer; color: inherit; }

a { color: inherit; text-decoration: none; }

/* ---- Body ---- */

body {
  background: var(--color-bg-top);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.is-covered { overflow: hidden; }

/* ---- Screen-reader helpers ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- No-JS notice ---- */

.noscript-note {
  position: relative;
  z-index: 99999;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 16px;
  text-align: center;
  color: var(--color-cream);
}

/* ---- Selection, focus, scrollbar (§12.5) ---- */

::selection { background: var(--color-green); color: var(--color-bg-deep); }

:focus-visible { outline: 1px solid var(--color-line-md); outline-offset: 3px; }

html { scrollbar-color: var(--color-green-dark) var(--color-bg-deep); }