@import url('tokens.css');

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 460;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
h1 { font-size: var(--t-6); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); line-height: 1.2; }
h4 { font-size: var(--t-1); line-height: 1.3; }
p  { text-wrap: pretty; }

a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--sky); color: var(--ink); }

/* ---------- layout ---------- */
.wrap { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(52rem, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.section--sunk { background: var(--paper-sunk); }
.section--wash { background: var(--wash); }
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* A hairline that carries meaning: it marks where one idea ends.
   Gilt, because a gilt page-edge is the one ornament a Bible is allowed. */
.rule {
  width: 3.5rem; height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--gilt), var(--gilt-soft));
}

/* ---------- small caps label (not ALL-CAPS tracked-out eyebrow) ----------
   Uses real small-caps where the font supports it, so it reads as a
   typographic register change rather than shouted plain text. */
.label {
  font-family: var(--font-text);
  font-feature-settings: 'smcp' 1, 'c2sc' 1;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  font-size: var(--t-0);
  color: var(--ink-faint);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 0.7em 1.5em;
  font-size: var(--t-0);
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--blue-deep); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 4.5rem;
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.brand img { width: 2.25rem; height: 2.25rem; }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.masthead nav { margin-left: auto; }
.masthead__links { display: flex; align-items: center; gap: var(--s-5); list-style: none; padding: 0; }
/* :not(.btn) matters — otherwise this selector (0,1,1) outranks .btn--primary
   (0,1,0) and repaints the header CTA's white label grey. */
.masthead__links a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-size: var(--t-0); }
.masthead__links a:not(.btn):hover,
.masthead__links a:not(.btn)[aria-current="page"] { color: var(--ink); }
.masthead__links a:not(.btn)[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gilt); }

.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .5em .75em; }

@media (max-width: 54rem) {
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .masthead nav { margin-left: 0; }
  .masthead__nav {
    position: fixed; inset: 4.5rem 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s-5) var(--gutter) var(--s-6);
    display: none;
  }
  .masthead__nav[data-open="true"] { display: block; }
  .masthead__links { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .masthead__links a:not(.btn) { font-size: var(--t-1); }
}

/* ---------- footer ---------- */
.colophon { border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-6); }
.colophon__grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(10rem, 1fr));
}
.colophon h4 { font-family: var(--font-text); font-size: var(--t-0); color: var(--ink-faint); margin-bottom: var(--s-3); }
.colophon ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.colophon a { color: var(--ink-soft); text-decoration: none; }
.colophon a:hover { color: var(--blue); }
.colophon__base {
  margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  color: var(--ink-faint); font-size: var(--t--1);
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-4); z-index: 100;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

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

/* ---------- the one pointer-responsive moment ----------
   The dark closing band carries a soft light that trails the cursor, like a
   lamp moved across a dark page. It is the only cursor effect on the site:
   one memorable thing, everything else quiet. Opt-in via JS, so it simply
   never appears for touch, reduced-motion, or no-JS visitors. */
.field-dark { position: relative; overflow: hidden; isolation: isolate; }
.field-dark > .wrap { position: relative; z-index: 2; }
.field-dark::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease);
  background: radial-gradient(
    28rem 28rem at var(--lamp-x, 50%) var(--lamp-y, 50%),
    rgba(157, 190, 227, .20),
    rgba(23, 105, 168, .10) 40%,
    transparent 70%);
}
.field-dark[data-lamp="on"]::before { opacity: 1; }

/* ============================================================
   Field, texture and structure.
   The first pass was too quiet: colour only ever appeared as an
   accent, nothing was ever large, and every surface was flat white.
   These are the devices that give the page weight.
   ============================================================ */

/* ---------- icons ---------- */
.icon { width: 1.5rem; height: 1.5rem; flex: none; stroke-width: 1.5; }
.icon--lg { width: 2.25rem; height: 2.25rem; }

/* ---------- dark field ----------
   A full-bleed deep-navy section. Used for the moments that should feel
   like a held breath, not for decoration. */
.field-dark {
  background: var(--navy);
  color: #fff;
  position: relative;
  isolation: isolate;
}
.field-dark h1, .field-dark h2, .field-dark h3 { color: #fff; }
.field-dark p { color: rgba(255,255,255,.76); }
.field-dark .label { color: var(--sky); }
.field-dark a:not(.btn) { color: var(--sky); }

/* ---------- grain ----------
   Print has tooth. A perfectly flat screen-white is part of what reads cheap.
   Applied over dark fields only, where it actually shows. */
.grain::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url('/assets/img/art/grain.svg');
  background-size: 180px;
  opacity: .14;
  mix-blend-mode: overlay;
}
.grain > * { position: relative; z-index: 1; }

/* ---------- the reach mark ----------
   The brand name, drawn: a message leaving a point and widening. */
.reach-mark {
  position: absolute;
  inset-block-start: -8%;
  inset-inline-end: -6%;
  width: min(46rem, 80%);
  aspect-ratio: 1;
  background: url('/assets/img/art/reach-arcs.svg') no-repeat center / contain;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.field-dark .reach-mark { opacity: .32; }

/* ---------- wing divider ----------
   Sections meet on a curve lifted from a wing's leading edge instead of
   a flat horizontal seam. */
.wing {
  display: block;
  width: 100%;
  height: clamp(3rem, 6vw, 6.5rem);
  margin-bottom: -1px;
}
.wing svg, .wing img { width: 100%; height: 100%; display: block; }

/* ---------- display numerals ----------
   Only where content genuinely is a sequence or a quantity. */
.numeral {
  font-family: var(--font-display);
  font-size: var(--t-8);
  line-height: .78;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--gilt);
  opacity: .9;
}

/* ---------- editorial lede ----------
   One oversized opening paragraph gives a page a voice. */
.lede-xl {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.26;
  letter-spacing: -0.02em;
  max-width: 26ch;
  text-wrap: balance;
}

/* ---------- offset / asymmetric grid ---------- */
.offset-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.offset-grid--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 60rem) {
  .offset-grid, .offset-grid--flip { grid-template-columns: 1fr; }
}
.sticky-head { position: sticky; top: 6rem; }
@media (max-width: 60rem) { .sticky-head { position: static; } }

/* ---------- image discipline ----------
   Pictures were running the page. They are now capped and cropped to a
   deliberate ratio instead of expanding to whatever the source was. */
.fig { position: relative; overflow: hidden; border-radius: var(--radius-img); background: var(--paper-sunk); }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig--wide   { aspect-ratio: 16 / 9; }
.fig--banner { aspect-ratio: 21 / 9; }
.fig--square { aspect-ratio: 1; }
.fig--tall   { aspect-ratio: 4 / 5; }
.fig--portrait { aspect-ratio: 3 / 4; }
/* A duotone wash ties stock photography into the palette instead of letting
   each picture bring its own colour story. */
.fig--tone img { filter: saturate(.88) contrast(1.02); }
.fig--tone::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(23,105,168,.12), rgba(10,27,41,.05));
  mix-blend-mode: multiply;
}
/* The hero photo sits on a dark field and was reading almost black. */
.hero__fig.fig--tone img { filter: saturate(.92) contrast(1.01); }
.hero__fig.fig--tone::after { background: linear-gradient(140deg, rgba(23,105,168,.10), rgba(10,27,41,.04)); }

/* Button for use on a dark field, where the ghost outline disappears. */
.btn--onDark { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn--onDark:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* The hero figure is moved by script only; it must sit correctly without it. */
.hero__fig { will-change: transform; transition: box-shadow .4s var(--ease); }
.hero:hover .hero__fig { box-shadow: 0 2.5rem 5rem rgba(0,0,0,.45); }

/* Portrait photographs cropped into shorter frames: keep faces in shot. */
.fig--tall img, .fig--portrait img { object-position: 50% 28%; }

/* ---------- consent notice ---------- */
.consent {
  position: fixed; inset-inline: var(--s-4); inset-block-end: var(--s-4);
  z-index: 80; max-width: 32rem; margin-inline: auto;
  background: var(--navy); color: #fff;
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.35);
  display: grid; gap: var(--s-4);
}
.consent[hidden] { display: none; }
.consent p { color: rgba(255,255,255,.82); font-size: var(--t-0); margin: 0; }
.consent__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.consent .btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.consent .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }