@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/geist-latin.woff2') format('woff2'); }
/* The shared site layer. Tokens (palette v3), type, liquid glass, pills, the nav bar and phone sheet, the pale
   reading band, the footer card on a sky crop. Every page links this first. Held layouts are on only when html has .hold (set in each page's head, for
   everyone; reduced motion drops only the timed motion). */

:root {
  --sky: #7E7BD0;
  --lavender: #B9A9E3;
  --mist: #EDE6F7;
  --cloud-rose: #E7A9C9;
  --rose: #D08AAF;
  --plum: #2B1A4F;
  --plum-soft: #5A4685;
  --glow: #F2A0A8;
  --on-sky: #FBF8FF;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --bar-top: 14px;
  --bar-h: 60px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sky); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-smooth { scroll-behavior: auto; }
body { margin: 0; background: var(--sky); color: var(--on-sky); font: 400 1.125rem/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { max-width: 62ch; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; left: 1rem; top: .5rem; padding: .6rem 1rem; border-radius: 999px; background: var(--glow); color: var(--plum); font-weight: 500; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }
.band-mist :focus-visible, .top-bar :focus-visible, .foot :focus-visible { outline-color: var(--plum); }

/* ---------------------------------------------------------------- type */
.h-display { font: 600 clamp(4.5rem, 12vw, 12rem)/.9 var(--font); letter-spacing: -.04em; }
h2, .h2 { font: 600 clamp(2.25rem, 4.6vw, 4.25rem)/1.05 var(--font); letter-spacing: -.03em; text-wrap: balance; }
h3, .h3 { font: 500 1.5rem/1.25 var(--font); letter-spacing: -.01em; }
.meta { font: 500 .75rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .14em; }
.soft { color: var(--plum-soft); }
@media (max-width: 767px) { .h-display { font-size: clamp(3rem, 14vw, 4.5rem); } }

/* ---------------------------------------------------------------- pale reading band: plum ink on pale lavender, never white */
.band-mist { position: relative; background: var(--mist); color: var(--plum); }
.band-mist .meta, .band-mist .soft { color: var(--plum-soft); }

/* ---------------------------------------------------------------- liquid glass
   The reference's recipe. It blurs what is behind it, so it is used only over still grounds (the phone sheet, the footer card).
   Over anything that moves, add .liquid-glass--tint: the same edge and inner light with a tinted fill and no backdrop-filter. */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.25) 80%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass--tint { background: rgba(237, 230, 247, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
.liquid-glass--deep { background: rgba(237, 230, 247, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }
.liquid-glass--open { overflow: visible; }

/* ---------------------------------------------------------------- pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1.4rem; border: 0; border-radius: 999px; background: var(--glow); color: var(--plum); font: 500 1rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 200ms var(--ease), transform 200ms var(--ease); }
.pill:hover { background: var(--cloud-rose); }
.pill:active { transform: translateY(1px); }
.pill--big { min-height: 52px; padding: .95rem 1.8rem; font-size: 1.0625rem; }
.pill--glass { background: rgba(43, 26, 79, .78); color: var(--on-sky); }
.pill--glass:hover { background: var(--plum); }
.textlink { color: inherit; text-decoration-color: currentColor; text-underline-offset: .2em; }
.textlink:hover { text-decoration-color: var(--rose); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- nav bar: tinted pale fill, no backdrop-filter, so it stays readable over moving sky */
.top { position: fixed; z-index: 50; top: var(--bar-top); left: var(--gutter); right: var(--gutter); pointer-events: none; }
.top-bar { pointer-events: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: var(--bar-h); padding: .5rem .6rem .5rem 1rem; border-radius: 999px; color: var(--plum); box-shadow: 0 8px 28px rgba(43, 26, 79, .16); }
.top-bar.liquid-glass--tint { background: rgba(237, 230, 247, .92); }
.brand { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; text-decoration: none; font: 500 1.0625rem/1 var(--font); letter-spacing: -.01em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: .15rem; }
.nav a { white-space: nowrap; padding: .55rem .95rem; border-radius: 999px; text-decoration: none; font: 400 .9375rem/1 var(--font); color: var(--plum); transition: background-color 200ms var(--ease); }
.nav a:hover { background: rgba(43, 26, 79, .08); }
.nav a[aria-current="page"] { background: rgba(126, 123, 208, .26); font-weight: 500; }
.top-join { justify-self: end; }
.menu-btn { display: none; justify-self: end; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(43, 26, 79, .08); cursor: pointer; place-content: center; gap: 6px; }
.menu-btn i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--plum); transition: transform 250ms var(--ease); }
.menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }

.sheet { position: fixed; z-index: 49; left: var(--gutter); right: var(--gutter); top: calc(var(--bar-top) + var(--bar-h) + 10px); border-radius: 28px; padding: 1rem; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(237, 230, 247, .97); color: var(--plum); box-shadow: 0 16px 40px rgba(43, 26, 79, .22); }
.sheet[hidden] { display: none; }
.sheet nav { display: grid; gap: .25rem; }
.sheet nav a:not(.pill) { display: block; padding: .95rem 1rem; border-radius: 16px; text-decoration: none; font: 500 1.25rem/1.2 var(--font); }
.sheet nav a:not(.pill):hover, .sheet nav a[aria-current="page"] { background: rgba(126, 123, 208, .22); }
.sheet .pill { margin-top: .5rem; }

@media (max-width: 1099px) {
  .top-bar { grid-template-columns: 1fr auto auto; }
  .nav { display: none; }
  .menu-btn { display: grid; }
}
/* Anchored targets stop below the fixed bar (bar-top + bar height + a little air) instead of under it. */
[id] { scroll-margin-top: calc(var(--bar-top) + var(--bar-h) + 1.5rem); }

/* The same switch by content: site.js adds .is-compact when the bar's own parts no longer fit (a large default font, long labels), whatever the width. */
.top.is-compact .top-bar { grid-template-columns: 1fr auto auto; }
.top.is-compact .nav { display: none; }
.top.is-compact .menu-btn { display: grid; }
.top.is-tight .top-bar { grid-template-columns: 1fr auto; }
.top.is-tight .top-join { display: none; }
@media (max-width: 480px) {
  .brand span { display: none; }
  .top-join { padding-inline: 1rem; font-size: .9375rem; }
}

/* ---------------------------------------------------------------- footer: a glass card on a sky crop (the crop is still, so the card may blur it) */
.close { position: relative; isolation: isolate; display: grid; align-content: end; padding: clamp(4rem, 12vh, 8rem) var(--gutter) 2rem; background: var(--sky); overflow: clip; }
.close-media { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sky) 0%, var(--lavender) 55%, var(--cloud-rose) 100%); }
.close-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.close-line { display: grid; justify-items: start; gap: 1.2rem; max-width: 60rem; margin-bottom: 3rem; }
.close-line h2 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -.04em; text-shadow: 0 2px 30px rgba(43, 26, 79, .35); }

.foot { margin-top: 0; background: rgba(237, 230, 247, .8); color: var(--plum); border-radius: 28px; padding: clamp(1.5rem, 3vw, 2.75rem); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.foot-brand { grid-column: span 5; display: grid; gap: 1rem; align-content: start; }
.foot-brand strong { display: inline-flex; align-items: center; gap: .6rem; font: 500 1.125rem/1 var(--font); }
.foot-brand img { width: 34px; height: 34px; border-radius: 9px; }
.foot-brand p { max-width: 22rem; color: var(--plum-soft); font-size: 1rem; line-height: 1.5; }
.foot-cols { grid-column: span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.foot h3 { font: 500 .75rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .14em; color: var(--plum-soft); margin-bottom: .9rem; }
.foot ul { display: grid; gap: .55rem; }
.foot li, .foot li a { font-size: 1rem; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.foot li a:hover { text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(43, 26, 79, .18); font: 500 .6875rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .16em; color: var(--plum-soft); }
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .foot-brand, .foot-cols { grid-column: auto; min-width: 0; }
  .foot-brand p { max-width: none; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .foot-cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- motion helpers shared by every page */
@keyframes blur-fade-up { from { opacity: 0; filter: blur(20px); transform: translate3d(0, 40px, 0); } to { opacity: 1; filter: blur(0); transform: none; } }