:root {
  /* single source of truth for the frame margin — same value as the
     vault+ splash so the two sites hang on the same grid */
  --frame: clamp(1.25rem, 3vw, 2.5rem);
  /* shared condensed-bold stack — the one typographic voice of the
     whole family of sites */
  --font-condensed-bold: 'Helvetica Neue Condensed Bold', 'Helvetica Neue Condensed', 'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* the blur hierarchy — the house effect in the same five fixed tiers
     as thevault.locker, so no element ever picks its own in-between
     value: statement → display → body → small accents → fine links */
  --blur-hero: 2.5px;
  --blur-display: 2px;
  --blur-body: 1.1px;
  --blur-accent: 0.8px;
  --blur-fine: 0.6px;
}

/* selecting text inverts it — the family's signature highlight,
   identical to the vault+ */
::selection {
  background: #000;
  color: #ff0000;
}

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

/* the whole site is one screen — it never scrolls, on any device */
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* the same bright red field as the vault — this site's own voice is
   the gold (#ffd101) statement sitting on it */
body {
  background-color: #ff0000;
  color: #000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============ Hero: the whole site is one statement ============ */

.hero {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--frame);
}

.statement-zone {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.statement-wrap {
  position: relative;
  width: 100%;
}

.statement {
  font-family: var(--font-condensed-bold);
  font-stretch: condensed;
  font-weight: 700;
  /* fallback only — JS fits the real size so the statement always
     FILLS the zone, continuously, at any window size */
  font-size: clamp(3rem, 10.5vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-align: left;
  text-transform: lowercase;
  color: #ffd101;
  filter: blur(var(--blur-hero));
  width: 100%;
}

/* the called-out brands — kept on one line so their hand-drawn
   annotations always wrap a single rect, never a broken one. they start
   gold like the rest; the cascade inks each one black as it's called out */
.hl-word {
  color: #ffd101;
  white-space: nowrap;
}

.statement-link {
  color: inherit;
  text-decoration: none;
}

/* hard cut inversion — no transition, the family's one motion rule.
   !important beats the inline colour the annotation cascade leaves
   on the word */
.statement-link:hover,
.statement-link:focus-visible {
  background: #000;
  color: #ff0000 !important;
  outline: none;
}

/* trans rights, letter by letter in the flag's stripes — the same
   per-letter colouring the old site's pride line used */
.trans-word {
  white-space: nowrap;
}

.trans-word--5 span:nth-child(1) { color: #55CDFC; }
.trans-word--5 span:nth-child(2) { color: #F7A8B8; }
.trans-word--5 span:nth-child(3) { color: #FFFFFF; }
.trans-word--5 span:nth-child(4) { color: #F7A8B8; }
.trans-word--5 span:nth-child(5) { color: #55CDFC; }

/* six letters: the flag with its white stripe doubled, so the mirror
   symmetry holds */
.trans-word--6 span:nth-child(1) { color: #55CDFC; }
.trans-word--6 span:nth-child(2) { color: #F7A8B8; }
.trans-word--6 span:nth-child(3) { color: #FFFFFF; }
.trans-word--6 span:nth-child(4) { color: #FFFFFF; }
.trans-word--6 span:nth-child(5) { color: #F7A8B8; }
.trans-word--6 span:nth-child(6) { color: #55CDFC; }

.annotate-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  /* hard-gated: stays invisible until JS has confirmed every path has
     valid, measured geometry — nothing can flash on screen before that */
  opacity: 0;
}

.annotate-layer.ready {
  opacity: 1;
}

.annotate-svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

/* ============ Bottom bar: contact + colophon, one line ============ */
/* the footer, dissolved into the single screen: contact links on the
   left, the eye and the copyright on the right */

.bottom-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: var(--frame);
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2.25rem;
}

/* black ink on the red field, the vault's body voice */
.contact-row a {
  font-family: var(--font-condensed-bold);
  font-stretch: condensed;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  filter: blur(var(--blur-accent));
  text-decoration: none;
}

/* the family's hard-cut inversion: black slab, red text */
.contact-row a:hover,
.contact-row a:focus-visible {
  background: #000;
  color: #ff0000;
  outline: none;
}

.colophon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.colophon-eye {
  display: block;
  width: clamp(28px, 3.5vw, 44px);
  height: auto;
  flex: none;
  /* the eye's native red would vanish into the red field — crush it to
     black ink, same as every other mark on the page */
  filter: brightness(0);
}

/* fine print speaks the family's fine-print voice: all-caps condensed,
   tracked out to exactly 0.08em */
.colophon-copyright {
  font-family: var(--font-condensed-bold);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.65);
}

/* ============ Tip line: one small ask under the statement ============ */

.tip-line {
  flex: none;
  padding-top: calc(var(--frame) * 0.5);
  font-family: var(--font-condensed-bold);
  font-stretch: condensed;
  font-weight: 700;
  /* dynamic: scales with the window, always a whisper next to the
     statement's shout */
  font-size: clamp(1.4rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  text-transform: lowercase;
  filter: blur(var(--blur-body));
}

.tip-line a {
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.1em;
}

.tip-line a:hover,
.tip-line a:focus-visible {
  background: #000;
  color: #ff0000;
  outline: none;
}