/* ===========================================================================
   Base - reset, landmarks, focus, links, motion, dark mode.

   The accessibility floor lives here, so every section added later inherits it
   rather than re-earning it (FR-107, FR-114, FR-116, FR-117, FR-119).
   =========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

/* The compositions ARE the design, and they are fixed artwork. A dark variant
   of a cream-letterpress invitation is a different design, not a theme, so the
   palette is never inverted. Declaring the scheme is what stops a dark-mode
   browser recolouring the chrome underneath the artwork (research R13). */
:root {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  /* Anchors glide by default. The reduced-motion block below turns this off
     entirely rather than shortening it (FR-116, SC-012). */
  scroll-behavior: smooth;
  /* There is no fixed or sticky bar any more (the tab row scrolls with the
     page), so nothing can cover a focused element and no offset is needed. */
}

body {
  /* The tab row is absolutely positioned and anchors to the page. */
  position: relative;
  margin: 0;
  background: var(--ground-cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-variant-numeric: oldstyle-num;
  /* The invitation's own typographic manners, on by default. */
  font-kerning: normal;
  font-feature-settings: 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Nine full-bleed sections: never let one overflow sideways (SC-010). */
  overflow-x: hidden;
}

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

/* --- Typographic roles ---------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  /* A single long word set in display caps is wider than a 320 px viewport.
     "ACCOMMODATIONS" and "TRANSPORTATION" are both that word, so headings are
     allowed to break rather than push the page sideways (FR-113, SC-010). */
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  text-wrap: pretty;
  max-width: var(--measure);
}

/* True small caps, from the font's own smcp table. Not uppercased text at a
   smaller size, which is the tell the references would have exposed. */
.smallcaps {
  font-variant-caps: small-caps;
  font-feature-settings: 'smcp' 1, 'c2sc' 1, 'liga' 1, 'calt' 1;
  letter-spacing: var(--tracking-smallcaps);
}

/* --- Links ---------------------------------------------------------------
   Distinguishable by more than colour, everywhere (FR-119). The underline is
   the signal; the colour is the garnish. */

a {
  color: var(--accent-azulejo-ink);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: var(--rule-strong);
}

/* On dark grounds a link inherits the reversed ink, because azulejo blue has
   nothing like enough contrast against deep olive.
   A FILLED control is excluded: it carries its own ground, and letting this
   rule reach it produced cream type on a cream button, which is the exact
   white-on-white failure a button-contrast check exists to catch. */
.ground--olive a:not(.rsvp-link--primary),
.ground--olive-deep a:not(.rsvp-link--primary),
.on-dark a:not(.rsvp-link--primary) {
  color: var(--ink-reversed);
  text-decoration-color: var(--accent-butter);
}

/* --- Focus ---------------------------------------------------------------
   One visible indicator, on every focusable thing, in both directions of
   contrast (FR-107). The double ring survives any ground the site has. */

:focus-visible {
  outline: var(--rule-strong) solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--ground-cream);
}

.ground--olive :focus-visible,
.ground--olive-deep :focus-visible,
.on-dark :focus-visible,
.section--home :focus-visible {
  outline-color: var(--ground-cream);
  box-shadow: 0 0 0 5px var(--ink);
}

/* Sections take focus when an anchor lands on them so the heading is announced
   (FR-010, SC-029). That focus must not draw a ring around the whole viewport. */
section:focus,
section:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- Skip link -----------------------------------------------------------
   Past the navigation, to the content (FR-108). Visible the moment it has
   focus, and never a zero-size element that a screen reader cannot reach. */

.skip-link {
  position: absolute;
  z-index: calc(var(--z-nav) + 1);
  inset-inline-start: var(--space-sm);
  inset-block-start: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  background: var(--ground-cream);
  color: var(--ink);
  font-size: var(--fs-sm);
  text-decoration: none;
  border: var(--rule-strong) solid var(--ink);
  transform: translateY(calc(-100% - var(--space-xl)));
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- Interactive targets -------------------------------------------------
   44x44 CSS pixels is the floor, not the aspiration (FR-114). */

a,
button,
summary,
[role='button'] {
  /* Anchors inside running prose must not become 44 px tall blocks, so the
     floor is applied to controls, and to in-prose links through padding only
     where they stand alone. */
  touch-action: manipulation;
}

button,
.control {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

button:active,
.control:active {
  /* Feedback that shows what changed, which is the only motion the site owes
     an interaction. */
  transform: translateY(1px);
}

/* --- Reduced motion ------------------------------------------------------
   Everything non-essential off, including the smooth scroll, which is the one
   people most often forget (FR-116, SC-012). */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  button:active,
  .control:active {
    transform: none;
  }
}

/* --- Dark mode -----------------------------------------------------------
   The palette is NOT inverted (research R13). What this block does is stop the
   browser degrading anything underneath the artwork: chrome that would default
   to a light surface gets that surface explicitly. */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }

  body {
    background: var(--ground-cream);
    color: var(--ink);
  }
}

/* --- Utilities ----------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden from assistive technology AND from layout. */
[hidden] {
  display: none !important;
}