/* Site-wide theme — black Satoshi type on a clean white field, lit by a single
   maxed-out electric-blue accent and a vivid receding electric grid.

   Every page on the site shares this one palette, typeface and pair of corner
   controls, so the landing page and the wedding pages all
   read as one piece; each page adds only its own layout on top, never its own
   font, colours or controls. The electric blue is the favicon mark — carried
   through as the signature highlight and as the waterway on the save-the-date
   page. The receding grid is borrowed from 9flow.golf.

   The palette is pushed to maximum punch — every colour sits at full saturation:
     • field  — white, the background of every page
     • ink    — black, all type, for maximum legibility on the white field
     • accent — pure electric blue (#0040ff), the favicon mark and signature note
     • grid   — the same electric blue, run loud as the ambient receding grid
                drawn by tracers.js */

:root {
  /* white field */
  --field: #ffffff;
  /* black type */
  --ink: #000000;
  /* pure electric blue — the favicon mark, the save-the-date waterway, the accent */
  --accent: #0040ff;

  /* The ambient receding grid. tracers.js reads this "r, g, b" triplet for its
     line colour; pushed off the old faint grey up to the full-saturation accent
     blue so the grid reads as a loud, electric texture behind the type rather
     than a quiet one. */
  --grid-rgb: 0, 64, 255;

  /* one typeface for the whole site — Satoshi (Fontshare), sans-serif fallback */
  --font: 'Satoshi', sans-serif;
  /* one base type size: comfortable on a phone, never huge on desktop */
  --type: clamp(1.18rem, 2.9vw, 1.68rem);
  /* side inset used by the fixed corner controls */
  --gutter: clamp(1.5rem, 6vw, 5rem);

  /* legacy alias — older rules still resolve --text to the ink */
  --text: var(--ink);
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--type);
  line-height: 1.4;
  text-transform: lowercase;
  -webkit-text-size-adjust: 100%;
}

/* The field lives on the root element so the body can stay transparent,
   letting the grid canvas (tracers.js) show through behind the type. */
html {
  background: var(--field);
}

/* Links carry no underline and no glow — they read exactly like the
   surrounding text; a soft fade on hover is the only feedback. */
a {
  color: var(--ink);
  text-decoration: none;
}
a:hover {
  opacity: 0.7;
}

/* A single locked viewport with its one mark held dead-centre — shared by the
   simple interior pages (home, rsvp, favourite-spots) so each
   no longer repeats the same centring block. Each page adds only its own type. */
body.screen {
  height: 100vh;
  height: 100dvh; /* track the live viewport so the mark stays centred as mobile browser chrome shows and hides */
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* The cobalt favicon mark, pinned top-left on every interior page, doubling as
   the link back to the site home. */
.home-button {
  position: fixed;
  top: clamp(1rem, 3vh, 1.5rem);
  left: clamp(1rem, 3vw, 1.5rem);
  /* On a notched phone (with viewport-fit=cover) the status bar / rounded corner
     eats into the top-left of the viewport, so fold in the safe-area insets. The
     plain clamps above are the fallback for browsers that don't understand env();
     they simply ignore these augmented declarations. */
  top: calc(clamp(1rem, 3vh, 1.5rem) + env(safe-area-inset-top, 0px));
  left: calc(clamp(1rem, 3vw, 1.5rem) + env(safe-area-inset-left, 0px));
  z-index: 1000;
  display: block;
  line-height: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.home-button img {
  width: clamp(36px, 5vw, 44px);
  height: auto;
  display: block;
}
.home-button:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

/* The shared "back" chevron, sitting just to the right of the home mark on
   interior pages that need a step back as well as a way home. */
.back-arrow {
  position: fixed;
  top: clamp(1rem, 3vw, 1.8rem);
  left: calc(clamp(1rem, 3vw, 1.5rem) + clamp(36px, 5vw, 44px) + 0.75rem);
  /* Mirror the home mark's safe-area shift so the chevron stays beside it on a
     notched phone; the plain declarations above are the env()-less fallback. */
  top: calc(clamp(1rem, 3vw, 1.8rem) + env(safe-area-inset-top, 0px));
  left: calc(clamp(1rem, 3vw, 1.5rem) + clamp(36px, 5vw, 44px) + 0.75rem + env(safe-area-inset-left, 0px));
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
}
.back-arrow:hover {
  opacity: 0.7;
}