/* Ravencove base: fonts, reset, type, the two-shore layout classes, deep water bands, the tide edge, the spine.
   Names per CONTRACT.md (with the 5B amplification). */

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/assets/fonts/bricolage-grotesque-variable.woff2) format('woff2-variations'), url(/assets/fonts/bricolage-grotesque-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url(/assets/fonts/instrument-sans-variable.woff2) format('woff2-variations'), url(/assets/fonts/instrument-sans-variable.woff2) format('woff2');
}
/* size-adjusted local fallbacks so the swap does not shift layout */
@font-face {
  font-family: 'Bricolage Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 98%;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 97%;
  ascent-override: 96%;
  descent-override: 25%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); overflow-x: clip; }
html, body { overflow-x: clip; }   /* entrance offsets and the gate slide never widen the page; clip keeps sticky working */
html:focus-within { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--raven);
  font-family: var(--font-text);
  font-size: var(--body);
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* never hidden: hidden makes body a scroll container and every position: sticky on the site stops */
  padding-top: var(--header-h);
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; font-size: inherit; }
::selection { background: var(--iris-tint); color: var(--raven); }

.visually-hidden, .sr-only {
  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: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px;
  background: var(--raven); color: var(--mist); border-radius: 999px 0 0 999px;
  transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-slack);
  font-family: var(--font-head); font-weight: 500; font-size: 15px;
}
.skip-link:focus-visible { transform: none; }

/* Focus: 2px iris tint ring at 3px offset, held inside an iris hairline so it reads on mist and on deep */
:focus-visible {
  outline: 2px solid var(--iris-tint);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--iris);
}
a:focus-visible, .link:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 2px;
}
.band--deep a:focus-visible, .band--deep .link:focus-visible { outline-color: var(--glow); }

/* ---------- type ---------- */
.h1, .h2, .h3 {
  font-family: var(--font-head);
  font-variation-settings: "wdth" var(--wdth, 90), "opsz" 96;
  letter-spacing: 0;
  line-height: 1.02;
  text-wrap: balance;
}
.h1 { font-weight: 600; font-size: var(--h1); --wdth: var(--h1-wdth); line-height: .96; text-wrap: initial; letter-spacing: 0; }   /* tracking 0 per the spec: the width axis carries the character (QA loop 2026-09-28, SHARED DNA 18) */
.h2 { font-weight: 500; font-size: var(--h2); --wdth: 85; line-height: 1; letter-spacing: 0; }
.h3 { font-weight: 500; font-size: var(--h3); --wdth: 90; line-height: 1.12; }
@media (min-width: 1440px) { .h1 { white-space: nowrap; } }
.lead { font-size: clamp(1.125rem, 1.35vw, 1.5rem); line-height: 1.4; }
.caption, .muted { color: var(--slate); }
.caption { font-size: .8125rem; line-height: 1.45; }

/* a heading whose first baseline sits on the water line (kit.js measures --baseline); on deep the line runs through the x-height */
[data-level] { position: relative; z-index: 0; }
[data-level]::after {
  content: ''; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); height: 1px;
  top: var(--baseline, 1em); background: var(--raven); opacity: .55; z-index: -1; pointer-events: none;
  transform-origin: center; transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-slack);
}
.is-in[data-level]::after, [data-level].is-in::after { transform: scaleX(1); }
.band--deep [data-level]::after { background: var(--mist); opacity: .35; top: calc(var(--baseline, 1em) - .5em); }
/* the level line never crosses the words: the first line's text run masks it in the band's own colour; on mist the
   run then carries the line itself as a 1px underline at the baseline that skips the descenders, so the words still
   sit on the water line; on deep the line enters and leaves the heading at its x-height */
.band { --band-bg: var(--mist); }
.band--water { --band-bg: var(--water); }
.band--paper { --band-bg: var(--paper); }
.band--deep { --band-bg: var(--deep); }
[data-level]::first-line {
  background-color: var(--level-bg, var(--band-bg, var(--mist)));
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0; text-decoration-skip-ink: auto;
  text-decoration-color: transparent;
}
[data-level].is-in::first-line { text-decoration-color: rgba(18, 21, 25, .55); }
.band--deep [data-level]::first-line, .band--deep [data-level].is-in::first-line { text-decoration-color: transparent; }

.fig {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
}
.fig--xl { font-size: clamp(3rem, 6.6vw, var(--fig-xl)); line-height: 1; letter-spacing: -.02em; }
.fig--lg { font-size: clamp(2.5rem, 5vw, var(--fig-lg)); line-height: 1; letter-spacing: -.015em; }
.fig--md { font-size: clamp(2rem, 3.9vw, var(--fig-md)); line-height: 1.02; letter-spacing: -.01em; }
.fig--display { font-size: clamp(2rem, 2.9vw, 3rem); line-height: 1.05; }
.fig--44 { font-size: clamp(1.9rem, 2.6vw, 2.75rem); line-height: 1.05; }
.fig--32 { font-size: 2rem; line-height: 1.1; }
.tide { position: relative; display: inline-block; padding-bottom: 10px; --tick-x: 50%; }
.tide::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px;
  background: var(--slate); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-slack);
}
.tide::before {
  content: ''; position: absolute; left: var(--tick-x); bottom: 0; width: 1.5px; height: 7px;
  background: var(--iris); transform: translateX(-50%) scaleY(0); transform-origin: bottom center;
  transition: transform var(--dur-fast) var(--ease-slack) .15s;
}
.tide.is-in::after { transform: scaleX(1); }
.tide.is-in::before { transform: translateX(-50%) scaleY(1); }
.band--deep .tide::after { background: var(--water); }
.band--deep .tide::before { background: var(--glow); }
/* the last digit settles (a 3px rise and settle, never a count up) */
.tide .last-digit { display: inline-block; }
.tide.is-in .last-digit { animation: rc-last-digit .56s var(--ease-slack) .1s both; }
@keyframes rc-last-digit { 0% { transform: translateY(3px); } 100% { transform: none; } }

/* ---------- layout ---------- */
main { display: block; }
.band {
  position: relative;
  padding: clamp(48px, 6vw, 112px) var(--gutter);
  background: var(--mist);
}
.band--water { background: var(--water); }
.band--paper { background: var(--paper); }
.band--tight { padding-top: clamp(24px, 3vw, 56px); padding-bottom: clamp(24px, 3vw, 56px); }
.band--flush { padding-top: 0; padding-bottom: 0; }
.band__head { margin-bottom: clamp(24px, 3vw, 48px); }

/* deep water: mist type, muted text as water at 78 percent, hairlines at deep-2, iris never as text */
.band--deep { background: var(--deep); color: var(--mist); --rule: var(--rule-deep); }
.band--deep .caption, .band--deep .muted { color: var(--muted-deep); }
.band--deep .shores::before { background: var(--mist); opacity: .38; }
.band--deep .link { --u-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 2 C 2 0, 4 0, 6 2 S 10 4, 12 2' fill='none' stroke='%23EDF0F3' stroke-width='1.2'/%3E%3C/svg%3E"); --u-flat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 3 H12' fill='none' stroke='%23EDF0F3' stroke-width='1.2'/%3E%3C/svg%3E"); }
.band--deep .btn--outline { --btn-fg: var(--mist); box-shadow: inset 0 0 0 1px var(--mist); }
.band--deep .btn--outline::before { border-color: var(--mist); }
.band--deep .btn--outline:hover { background: rgba(237, 240, 243, .08); }
.band--deep .rc-ico { color: var(--mist); }
.band--deep ::selection { background: var(--iris); color: var(--mist); }
.deep-plate { background: var(--deep-2); box-shadow: inset 0 0 0 1px var(--rule-deep); }

/* the tide edge: a shallow wave (amplitude 6px, wavelength 480px) on every mist-to-deep boundary,
   undulating on a 12 s cycle at idle. Place <div class="tide-edge"></div> first inside the band that
   follows a band of a different tone; it rises into the previous band in this band's own colour. */
.tide-edge {
  position: absolute; left: 0; right: 0; top: -13px; height: 14px; pointer-events: none; z-index: 2;
  background: inherit;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='14' viewBox='0 0 480 14'%3E%3Cpath d='M0 7 C120 -1 120 -1 240 7 C360 15 360 15 480 7 V14 H0 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='14' viewBox='0 0 480 14'%3E%3Cpath d='M0 7 C120 -1 120 -1 240 7 C360 15 360 15 480 7 V14 H0 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 480px 14px; mask-size: 480px 14px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  animation: rc-tide-edge 12s linear infinite;
}
.tide-edge--bottom { top: auto; bottom: -13px; transform: scaleY(-1); }
@keyframes rc-tide-edge { to { -webkit-mask-position: 480px 0; mask-position: 480px 0; } }

/* the spine: the full-height centre water line with the travelling float (kit.js RC.spine()) */
.spine {
  position: fixed; top: var(--header-h); bottom: 0; left: 50%; width: 1px; z-index: 150; pointer-events: none;
  background: #fff; mix-blend-mode: difference; opacity: .55; transform: translateX(-.5px);
}
.spine__float {
  position: absolute; left: 50%; top: 0; width: 8px; height: 12px; transform: translate(-50%, -50%);
  mix-blend-mode: normal; opacity: 1;
}
.spine__float::before { content: ''; position: absolute; top: 0; left: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--iris); box-shadow: 0 0 0 0 rgba(181, 107, 255, .3); animation: rc-spine-pulse 6s var(--ease-swell) infinite; }
.spine__float::after { content: ''; position: absolute; top: 6px; left: 3.5px; width: 1px; height: 5px; background: var(--iris); }
@keyframes rc-spine-pulse { 0%, 84% { box-shadow: 0 0 0 0 rgba(181, 107, 255, .3); } 92% { box-shadow: 0 0 0 6px rgba(181, 107, 255, .3); } 100% { box-shadow: 0 0 0 10px rgba(181, 107, 255, 0); } }
/* the float itself must not be inverted by the line's blend mode, so it lives in its own layer */
.spine-float-layer { position: fixed; top: var(--header-h); bottom: 0; left: 50%; width: 0; z-index: 151; pointer-events: none; }
/* where a text run crosses the line the mask cuts it, and the float dives under the words and surfaces after them */
.spine__float { transition: opacity .18s linear, transform .32s var(--ease-slack); }
.spine__float.is-under { opacity: 0; transform: translate(-50%, -50%) scale(.3); }

.shores {
  --shore-gap: clamp(24px, 3vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--shore-gap);
  position: relative;
  align-items: start;
}
.shores::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--raven); opacity: .55; pointer-events: none; transform: translateX(-.5px);
}
.shores--noline::before { display: none; }
.shores--stretch { align-items: stretch; }
.shores--center { align-items: center; }
.shore { min-width: 0; position: relative; }
.shore > :first-child { margin-top: 0; }

/* bleed shores: that shore's media runs from the viewport edge to the centre line, so the band
   drops its padding on that side and the grid is re-centred on the viewport middle */
.band:has(> .shores--bleed-left), .band--bleed-left { padding-left: 0; }
.band:has(> .shores--bleed-right), .band--bleed-right { padding-right: 0; }
.shores--bleed-left { grid-template-columns: calc(50% + var(--gutter) / 2 - var(--shore-gap) / 2) 1fr; }
.shores--bleed-left::before { left: calc(50% + var(--gutter) / 2); }
.shores--bleed-right { grid-template-columns: 1fr calc(50% + var(--gutter) / 2 - var(--shore-gap) / 2); }
.shores--bleed-right::before { left: calc(50% - var(--gutter) / 2); }
.shores--bleed-left > .shore:first-child, .shores--bleed-right > .shore:last-child { align-self: stretch; }
.shore--media { overflow: hidden; position: relative; }
.shore--media > img, .shore--media > picture > img, .shore--media > video { width: 100%; height: 100%; object-fit: cover; }
.shore--media picture { display: block; height: 100%; }
/* parallax media: the image layer is taller than its shore so the 0.88x drift never shows an edge */
[data-parallax="media"] { overflow: hidden; position: relative; }
[data-parallax="media"] > img, [data-parallax="media"] > picture, [data-parallax="media"] > video { position: absolute; left: 0; width: 100%; top: -7%; height: 114%; will-change: transform; }
[data-parallax="media"] > picture > img { height: 100%; }
[data-parallax="media"] > .haze { position: absolute; left: 0; right: 0; bottom: -10%; height: 45%; pointer-events: none; will-change: transform;
  background: linear-gradient(to top, rgba(237, 240, 243, .55), rgba(237, 240, 243, 0)); }
.band--deep [data-parallax="media"] > .haze { background: linear-gradient(to top, rgba(14, 24, 38, .6), rgba(14, 24, 38, 0)); }

.bleed { margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); }
section.bleed, .bleed--section { margin-inline: 0; width: 100%; padding: 0; }

.prose { column-width: 34ch; column-gap: 3rem; column-fill: balance; }
.prose p, .prose li, .prose h3 { break-inside: avoid; }
.prose p { margin-bottom: 1em; }
.prose--wide { column-width: 40ch; }

.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }

@media (max-width: 899.98px) {
  :root { --gutter: 16px; }
  .shores, .shores--bleed-left, .shores--bleed-right { grid-template-columns: 1fr; row-gap: 32px; }
  .shores::before { display: none; }
  .shores--stack-first-right > .shore:last-child { order: -1; }
  .band:has(> .shores--bleed-left), .band--bleed-left, .band:has(> .shores--bleed-right), .band--bleed-right { padding-inline: var(--gutter); }
  .shores--bleed-left > .shore--media, .shores--bleed-right > .shore--media { margin-inline: calc(-1 * var(--gutter)); }
  .prose { column-width: auto; }
  /* under 900px the water line moves into the left gutter, clear of every text block, and keeps its float */
  .spine { left: 8px; opacity: .4; }
  .spine-float-layer { left: 8.5px; }
}