/* Victoria Peak brand system.
   Copy Book + Swiss print: one big photo, a heavy headline, honest copy, a strict grid.
   Palette: Sanzo Wada, A Dictionary of Color Combinations, no. 39. */
:root {
  --red: #cc1236;        /* Carmine */
  --blue: #005b8d;       /* Helvetia Blue */
  --paper: #f5f4f0;
  --ink: #141414;
  --ink-2: #4a4a47;
  --rule: rgba(20, 20, 20, 0.16);

  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-hero: clamp(3rem, 8.4vw, 7.75rem);
  --fs-h2: clamp(2.25rem, 5.4vw, 4.75rem);
  --fs-h3: clamp(1.35rem, 2.1vw, 1.75rem);
  --fs-copy: clamp(1.0625rem, 1.25vw, 1.1875rem);
  --fs-small: 0.875rem;

  --wrap: 82rem;
  --gap: clamp(1rem, 2vw, 1.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-copy);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.hl { font-family: var(--sans); font-weight: 800; letter-spacing: -0.045em; line-height: 0.92; text-wrap: balance; }
.hl em, .accent { font-style: normal; color: var(--red); }
.kick { font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.01em; color: var(--red); }
.sans { font-family: var(--sans); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 1em 1.4em;
  border: 2px solid var(--red); background: var(--red); color: #fff;
  font: 700 1.0625rem/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--small { padding: 0.7em 1em; font-size: 0.95rem; }
.link { font-family: var(--sans); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.link:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* The mark: a carmine square with a peak cut out. */
.logo { display: inline-flex; align-items: center; gap: 0.55em; font: 800 1.2rem/1 var(--sans); letter-spacing: -0.03em; text-decoration: none; }
.logo .mark { width: 1.45em; height: 1.45em; background: var(--red); position: relative; flex: none; }
.logo .mark::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 24%; height: 44%; background: var(--paper); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.logo i { font-style: normal; color: var(--red); margin-left: -0.45em; }

/* Blue band: one per page, for the most important block. */
.band { background: var(--blue); color: #fff; }
.band .kick { color: #fff; }
.band .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.band .btn:hover { background: var(--red); border-color: var(--red); color: #fff; }