@import url("https://fonts.googleapis.com/css2?family=League+Gothic&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --ink: #140C17;
  --ink-deep: #0C070E;
  --plum: #26142C;
  --plum-raised: #2E1935;
  --violet: #6E5C8A;
  --mist: #A99DB6;
  --paper: #F1E7DA;
  --paper-dim: #D9CCBC;
  --paper-ink: #1E1321;
  --rule: #3B2842;
  --rule-strong: #54395D;
  --accent: #FF4F9A;
  --accent-deep: #D93A7E;
  --accent-ink: #1A0710;

  --text: var(--paper);
  --text-soft: #D6CCD9;
  --text-meta: var(--mist);
  --ground: var(--ink);
  --surface: var(--plum);

  --zano-d3b: "League Gothic", "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --zano-180: "EB Garamond", "Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --zano-531: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--2: clamp(0.72rem, 0.69rem + 0.12vw, 0.8rem);
  --step--1: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  --zano-6e8: clamp(1.1rem, 1.04rem + 0.3vw, 1.27rem);
  --zano-db2: clamp(1.25rem, 1.13rem + 0.55vw, 1.6rem);
  --zano-423: clamp(1.5rem, 1.28rem + 1vw, 2.15rem);
  --zano-32b: clamp(1.9rem, 1.5rem + 1.85vw, 3.05rem);
  --zano-92a: clamp(2.35rem, 1.7rem + 3vw, 4.4rem);
  --zano-068: clamp(2.8rem, 1.9rem + 4.8vw, 6.9rem);
  --zano-ade: clamp(3.1rem, 1.6rem + 8.2vw, 10.5rem);

  --leading-tight: 0.92;
  --leading-snug: 1.18;
  --leading-body: 1.58;
  --leading-loose: 1.75;

  --track-display: 0.012em;
  --track-kicker: 0.16em;
  --track-mono: 0.08em;
  --track-settle-from: 0.08em;

  --space-3xs: 0.25rem;
  --space-2xs: 0.4375rem;
  --space-xs: 0.6875rem;
  --space-s: 1.0625rem;
  --space-m: 1.625rem;
  --space-l: 2.5rem;
  --space-xl: 3.875rem;
  --space-2xl: 5.75rem;
  --space-3xl: 8.5rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 11vw, 9rem);
  --section-tight: clamp(3rem, 7vw, 5.5rem);

  --measure: 38rem;
  --measure-wide: 48rem;
  --shell: 76rem;
  --shell-photo: 92rem;

  --radius: 0;
  --hairline: 1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);
  --double-rule: 3px double var(--rule-strong);

  --shadow-lift: 0 1px 0 rgba(241, 231, 218, 0.04), 0 18px 40px -22px rgba(0, 0, 0, 0.85);
  --shadow-deep: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--rule);
  --shadow-press: inset 0 2px 0 rgba(0, 0, 0, 0.35);

  --focus-ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent), 0 0 0 7px rgba(110, 92, 138, 0.45);

  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-settle: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.3, 0.7, 0.4, 1);
  --dur-press: 120ms;
  --dur-hover: 180ms;
  --dur-ui: 260ms;
  --dur-reveal: 900ms;
  --dur-settle: 1600ms;
  --dur-ticker: 70s;
  --stagger: 90ms;
  --rise: 28px;

  --header-h: 7.25rem;
  --header-h-condensed: 4.25rem;
  --logo-h: 2.75rem;
  --logo-h-condensed: 1.875rem;
  --consent-offset: 0px;

  --z-header: 50;
  --z-sheet: 60;
  --z-consent: 80;
  --z-chat: 90;
  --z-skip: 100;

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-condensed) + 1.5rem);
  hanging-punctuation: first last;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background-color: var(--ground);
  background-image:
    radial-gradient(rgba(241, 231, 218, 0.035) 1px, transparent 1.2px),
    radial-gradient(rgba(0, 0, 0, 0.28) 1px, transparent 1.4px),
    radial-gradient(120% 70% at 50% -10%, rgba(110, 92, 138, 0.16), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
  background-size: 3px 3px, 5px 5px, 100% 100%, 100% 100%;
  background-position: 0 0, 1px 2px, 0 0, 0 0;
  background-attachment: scroll;
  color: var(--text);
  font-family: var(--zano-180);
  font-size: var(--zano-6e8);
  font-weight: 400;
  line-height: var(--leading-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
iframe, embed, object { max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
textarea { resize: vertical; }

p, h1, h2, h3, h4, h5, h6, blockquote, figure, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p, li, dd, figcaption, blockquote { overflow-wrap: break-word; }

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

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--violet);
  transition: color var(--dur-hover) var(--ease-out), text-decoration-color var(--dur-hover) var(--ease-out);
}
a:hover { color: var(--paper); text-decoration-color: var(--accent); }
a:active { color: var(--accent); }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
  stroke: currentColor;
  display: inline-block;
  vertical-align: -0.18em;
}
.icon--s { width: 0.95em; height: 0.95em; }
.icon--l { width: 1.6em; height: 1.6em; }

h1, .h1, h2, .h2, h3, .h3, .display {
  font-family: var(--zano-d3b);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--paper);
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--zano-068); }
.display { font-size: var(--zano-ade); line-height: 0.86; letter-spacing: 0.004em; }
h2, .h2 { font-size: var(--zano-92a); }
h3, .h3 { font-size: var(--zano-423); line-height: 1; letter-spacing: 0.03em; }
h4, .h4 {
  font-family: var(--zano-180);
  font-weight: 600;
  font-size: var(--zano-db2);
  line-height: var(--leading-snug);
  font-variant-caps: normal;
}
h5, h6, .h5 {
  font-family: var(--zano-531);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
}

.kicker, .smallcaps {
  font-family: var(--zano-180);
  font-weight: 500;
  font-size: var(--step--1);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-kicker);
  line-height: 1.4;
  color: var(--mist);
}
.kicker--accent { color: var(--accent); }

.mono, code, kbd, samp {
  font-family: var(--zano-531);
  font-size: 0.86em;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

.lede {
  font-size: var(--zano-423);
  line-height: 1.38;
  color: var(--paper);
  max-width: var(--measure);
  text-wrap: pretty;
}
.lede em { font-style: italic; color: var(--paper); }

.meta { font-size: var(--step--1); color: var(--mist); line-height: 1.5; }

strong, b { font-weight: 600; }
em, i { font-style: italic; }
small { font-size: var(--step--1); }

hr {
  border: 0;
  height: 4px;
  margin: var(--space-xl) 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
}

.prose {
  max-width: var(--measure);
  color: var(--text-soft);
  text-wrap: pretty;
}
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 1.6em; font-size: var(--zano-32b); }
.prose h3 { margin-top: 1.8em; font-size: var(--zano-423); }
.prose h4 { margin-top: 1.6em; color: var(--paper); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.7em; }
.prose p, .prose li { color: var(--text-soft); }
.prose strong { color: var(--paper); }
.prose a { color: var(--paper); text-decoration-color: var(--accent); }
.prose a:hover { color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose ul li::marker { color: var(--accent); }
.prose ol li::marker { font-family: var(--zano-531); font-size: 0.8em; color: var(--mist); }
.prose blockquote {
  border-left: 1px solid var(--accent);
  padding-left: var(--space-m);
  font-style: italic;
  color: var(--paper);
}
.prose code { background: var(--plum); padding: 0.1em 0.35em; }
.prose table { width: 100%; }

.dropcap::first-letter,
.prose--dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--zano-d3b);
  font-size: 4.6em;
  line-height: 0.78;
  padding: 0.08em 0.12em 0 0;
  margin-top: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
}

.wrap {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--measure) + var(--gutter) * 2); }
.wrap--wide { max-width: calc(var(--measure-wide) + var(--gutter) * 2); }
.wrap--photo { max-width: calc(var(--shell-photo) + var(--gutter) * 2); }
.wrap--bleed { max-width: none; padding-inline: 0; }

.section { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }
.section--flush-top { padding-top: 0; }
.section--paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(30, 19, 33, 0.07) 1px, transparent 1.3px),
    radial-gradient(rgba(30, 19, 33, 0.045) 1px, transparent 1.2px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
  color: var(--paper-ink);
}
.section--paper h1, .section--paper h2, .section--paper h3 { color: var(--paper-ink); }
.section--paper .kicker { color: #6A5775; }
.section--paper .prose, .section--paper .prose p, .section--paper .prose li { color: #3A2D3E; }
.section--plum { background: var(--plum); }

.stack > * + * { margin-top: var(--stack-gap, var(--space-m)); }
.stack--s { --stack-gap: var(--space-s); }
.stack--l { --stack-gap: var(--space-l); }
.stack--xl { --stack-gap: var(--space-xl); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-s)); align-items: center; }
.cluster > * { min-width: 0; }

.grid { display: grid; gap: var(--grid-gap, var(--space-l)); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.center { text-align: center; }
.center .prose, .center .lede { margin-inline: auto; }

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 0.75rem;
  z-index: var(--z-skip);
  transform: translate(-50%, -160%);
  padding: 0.8rem 1.4rem;
  min-height: 44px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--zano-531);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-ui) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: translate(-50%, 0); color: var(--accent-ink); outline: 2px solid var(--paper); outline-offset: 2px; }

main { display: block; }
main:focus { outline: none; }

.settle { letter-spacing: var(--track-display); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :root {
    --dur-press: 0ms;
    --dur-hover: 0ms;
    --dur-ui: 0ms;
    --dur-reveal: 0ms;
    --dur-settle: 0ms;
    --stagger: 0ms;
    --rise: 0px;
  }
}

@media print {
  body { background: #fff; color: #000; }
  a { color: #000; }
}