/* =====================================================================
   VESPER BLACK  |  styles.css
   Layout concept: a dark door. One vertical seam of light, three quiet
   rooms (opening, manifesto, access), nothing else.

   EDIT COLOURS AND FONTS HERE. Every colour on the site comes from
   these tokens, so changing a value here changes it everywhere.
   ===================================================================== */

/* ---------- Fonts (self hosted, free, SIL Open Font License) ----------
   Files live in assets/fonts/. No calls to Google or any other service. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Colour */
  --near-black: #080808;   /* main background */
  --soft-black: #111111;   /* access section and raised surfaces */
  --ivory:      #F2EFE8;   /* main text, solid button */
  --grey:       #8D8D8D;   /* supporting text, labels */
  --white:      #FFFFFF;   /* only where extra contrast is needed */
  --hairline:   rgba(242, 239, 232, 0.16);  /* thin rules and borders */
  --hairline-strong: rgba(242, 239, 232, 0.42);

  /* Type */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", Georgia, serif;
  --font-sans:    "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--near-black);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Film grain: a fixed, static texture over the whole site. No movement.
   To remove it, delete this rule. To soften or strengthen it, change opacity. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--ivory);
  outline-offset: 4px;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--ivory);
  color: var(--near-black);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.9rem;
  border: 1px solid var(--ivory);
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn--solid { background: var(--ivory); color: var(--near-black); }
.btn--solid:hover { background: var(--white); border-color: var(--white); }
.btn--ghost { background: transparent; color: var(--ivory); border-color: var(--hairline-strong); }
.btn--ghost:hover { border-color: var(--ivory); }

/* =====================================================================
   1. OPENING
   ===================================================================== */
.opening {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(4rem + env(safe-area-inset-top, 0px)) var(--gutter) 4.5rem;
  overflow: hidden;
}

/* Media position. Off = dark neutral placeholder. On = image or film. */
.opening__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 62%, var(--near-black) 100%),
    radial-gradient(ellipse 70% 55% at 50% 40%, #161616 0%, #0c0c0c 55%, var(--near-black) 100%);
}
.opening__media video,
.opening__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.opening__media[data-media="on"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0.72) 60%, var(--near-black) 100%);
}

.opening__inner {
  width: 100%;
  max-width: 62rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Logo slot */
.logo-slot {
  width: min(72vw, 21rem);
  display: flex;
  justify-content: center;
}
.logo-slot__image {
  width: 100%;
  height: auto;
  /* Tone the pure white down to ivory so it matches the type.
     Filter is defined in index.html (id="vb-ivory"). Remove this line for pure white. */
  filter: url("#vb-ivory");
}
/* The supplied logo is white on solid black. "screen" blending lets the black
   disappear into the page so no box shows, without editing the file. It sits
   on the slot (not the image) so it still works while the fade animation runs. */
.logo-slot.has-logo { mix-blend-mode: screen; }
.logo-slot.has-logo { width: min(64vw, 19rem, 44vh); }
@media (min-width: 40rem) {
  .logo-slot.has-logo { width: min(34vw, 22rem, 42vh); }
}
.logo-slot__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1.4rem 1rem 1.1rem;
  border: 1px dashed var(--hairline);
}
.logo-slot__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 6.4vw, 3rem);
  line-height: 1;
  letter-spacing: 0.2em;
  padding-left: 0.2em; /* balances the tracking after the last letter */
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-slot__label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}
.logo-slot.has-logo .logo-slot__placeholder,
.logo-slot.has-logo .logo-slot__sr { display: none; }

/* The seam: a single line of light, like a door left slightly open */
.seam {
  display: block;
  width: 1px;
  height: clamp(3.5rem, 11vh, 6.5rem);
  margin-block: clamp(1.75rem, 5vh, 2.75rem);
  background: linear-gradient(180deg, transparent 0%, var(--ivory) 45%, transparent 100%);
  opacity: 0.7;
  transform-origin: top center;
}

.opening__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 4.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
}

.opening__support {
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--grey);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.actions {
  margin-top: 2.5rem;
  width: 100%;
  max-width: 20rem;
  display: grid;
  gap: 0.75rem;
}

/* =====================================================================
   2. MANIFESTO
   ===================================================================== */
.manifesto {
  padding: clamp(4.5rem, 12vh, 11rem) var(--gutter) clamp(5.5rem, 15vh, 11rem);
}
.manifesto__inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}
.manifesto__inner::before {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--hairline-strong);
}
.manifesto__lead {
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 10.4vw, 9.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
/* Second line steps in, like a cover line */
.manifesto__lead span + span { padding-left: 0.9em; }
.manifesto__lead em { font-style: italic; color: var(--grey); }
.manifesto__body {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--ivory);
  text-wrap: pretty;
}
.manifesto__close {
  margin: 0;
  max-width: 30ch;
  color: var(--grey);
  font-size: 1rem;
  letter-spacing: 0.03em;
}

/* =====================================================================
   3. ACCESS
   ===================================================================== */
.access {
  background: var(--soft-black);
  padding: clamp(5rem, 14vh, 8.5rem) var(--gutter);
  scroll-margin-top: 0;
}
.access:focus { outline: none; }
.access__inner {
  max-width: 36rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.access__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 7vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.access__support {
  margin: 1rem 0 0;
  color: var(--grey);
}

.access__form {
  margin-top: 2.75rem;
  display: grid;
  gap: 1.25rem;
  max-width: 42rem;
}
.field { display: grid; gap: 0.4rem; min-width: 0; }
.phone-group {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
}
.field__label {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
}
.field__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ivory);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.1rem; /* 16px+ stops iOS zooming on focus */
  transition: border-color 0.4s var(--ease);
}
.field__input::placeholder { color: var(--grey); opacity: 0.7; }
.field__input:hover { border-bottom-color: var(--ivory); }
.field__input:focus { outline: none; border-bottom-color: var(--ivory); }
.field__input:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
.field__input[aria-invalid="true"] { border-bottom-color: var(--ivory); }

.access__submit { width: 100%; }

.access__status {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.9rem;
  color: var(--ivory);
}
.access__status:empty { min-height: 0; }

.access__consent {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--grey);
}
.access__consent a { text-underline-offset: 3px; }
.form-trap,
.form-target { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.access__direct {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.92rem;
  color: var(--grey);
}
.access__direct a {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.4s var(--ease);
}
.access__direct a:hover { text-decoration-color: var(--ivory); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
.footer__inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.75rem;
}
.footer__brand { display: grid; gap: 0.3rem; }
.footer__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.22em;
}
.footer__tag { font-size: 0.85rem; color: var(--grey); }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}
.footer__links a {
  display: inline-block;
  padding-block: 0.6rem; /* comfortable tap target */
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grey);
  transition: color 0.4s var(--ease);
}
.footer__links a:hover { color: var(--ivory); }

/* =====================================================================
   LARGER SCREENS
   ===================================================================== */
@media (min-width: 40rem) {
  .actions {
    max-width: none;
    width: auto;
    grid-template-columns: repeat(2, minmax(13.5rem, 1fr));
  }

  .access__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
  .field--full { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  /* Manifesto sits right of centre, like a statement on a magazine spread */
  .manifesto__inner {
    max-width: 84rem;
    grid-template-columns: 5fr 7fr;
  }
  /* The statement runs the full width; the supporting lines sit right */
  .manifesto__inner > .manifesto__lead { grid-column: 1 / -1; }
  .manifesto__inner::before { grid-column: 1; }
  .manifesto__lead { font-size: clamp(5rem, 8.6vw, 9.5rem); }
  .manifesto__lead span { white-space: nowrap; }
  .manifesto__lead span + span { padding-left: 1.6em; }
  .manifesto__inner > * { grid-column: 2; }
}

/* =====================================================================
   MOTION  (nearly invisible, and switched off for reduced motion)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .opening__inner > * {
    animation: vb-fade 1.6s var(--ease) both;
  }
  .opening__inner > .logo-slot      { animation-delay: 0.1s; }
  .opening__inner > .seam           { animation: vb-seam 1.8s var(--ease) 0.5s both; }
  .opening__inner > .opening__line  { animation-delay: 0.9s; }
  .opening__inner > .opening__support { animation-delay: 1.2s; }
  .opening__inner > .actions        { animation-delay: 1.45s; }

  /* Scroll reveals: only applied by script.js to content below the fold */
  .reveal.is-pending {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  .reveal {
    transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
  }
}

/* Short screens (small phones, landscape laptops): tighten the opening so
   both buttons are visible without scrolling */
@media (max-height: 44rem) {
  .opening { padding-top: calc(2.5rem + env(safe-area-inset-top, 0px)); padding-bottom: 2.5rem; }
  .seam { height: 2.5rem; margin-block: 1.25rem; }
  .opening__support { margin-top: 1rem; }
  .actions { margin-top: 1.5rem; }
}

@keyframes vb-fade {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes vb-seam {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 0.7; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}