/* Shared brand primitives — loaded by the public site AND /admin.
   Single source of truth: change a token here and both surfaces move
   together. Everything page-specific stays in its own document. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Author-level display rules (display:grid on .sheet-wrap, .af-q) outrank the
   UA sheet's [hidden]{display:none}, so a hidden element stays laid out and
   keeps eating clicks. Pin it here once for both surfaces. */
[hidden]{display:none!important}

:root{
  --paper:#FFFFFF;
  --ink:#0B0B0F;
  --ink-2:rgba(11,11,15,.64);
  --ink-3:rgba(11,11,15,.42);
  --line:rgba(11,11,15,.09);
  --pink:#F292CE;
  --blue:#68BAF5;
  --aqua:#BAEAF6;
  --violet:#8A9CF2;
  --lilac:#BE94EE;
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.78);
  --glass-sh:0 8px 32px rgba(30,26,66,.09);
  --r:24px;
  --maxw:1180px;
  --step:clamp(1rem,.85rem + .7vw,1.125rem);
}

body{
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--step);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- iridescent ambient field ---------- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:transform;
  background:
    /* left column: blue -> gold -> green */
    radial-gradient(38vw 58vh at -7% 12%,
      rgba(96,198,246,.34), rgba(140,150,242,.21) 40%,
      rgba(198,140,238,.12) 64%, rgba(255,255,255,0) 82%),
    radial-gradient(34vw 50vh at -6% 48%,
      rgba(250,214,110,.25), rgba(190,226,138,.15) 42%,
      rgba(255,255,255,0) 78%),
    radial-gradient(36vw 54vh at -5% 84%,
      rgba(104,222,172,.29), rgba(96,198,246,.16) 44%,
      rgba(255,255,255,0) 80%),
    /* right column: aqua -> pink -> violet */
    radial-gradient(33vw 50vh at 106% 20%,
      rgba(122,226,208,.24), rgba(96,198,246,.14) 44%,
      rgba(255,255,255,0) 80%),
    radial-gradient(35vw 56vh at 107% 56%,
      rgba(242,140,196,.26), rgba(198,140,238,.16) 42%,
      rgba(96,198,246,.09) 66%, rgba(255,255,255,0) 84%),
    radial-gradient(33vw 52vh at 105% 92%,
      rgba(140,150,242,.28), rgba(242,140,196,.14) 46%,
      rgba(255,255,255,0) 82%);
  animation:drift 78s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(0,-2.5%,0) scale(1.08)}
}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:rgba(255,255,255,.06)}

/* ---------- shell ---------- */
.page{position:relative;z-index:2}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
section{padding-block:clamp(6.5rem,13vw,12rem)}

.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

h1,h2,h3,.display{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.9rem,8.4vw,5.6rem)}
h2{font-size:clamp(2.1rem,5.4vw,3.5rem)}
h3{font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.14}
.lede{font-size:clamp(1.05rem,.95rem + .55vw,1.3rem);color:var(--ink-2);max-width:56ch;text-wrap:pretty}

/* ---------- glass: refracts the backdrop; edge has thickness, not colour ---------- */
.glass{
  position:relative;
  border-radius:var(--r);
  background:linear-gradient(158deg, rgba(255,255,255,.40), rgba(255,255,255,.16));
  box-shadow:
    /* ambient, zero offset — without this the top edge has nothing casting above
       it and simply dissolves into a white page */
    0 0 1px rgba(28,32,64,.055),
    0 0 10px -1px rgba(28,32,64,.038),
    0 0 26px -8px rgba(28,32,64,.045),
    /* key light from above: the directional stack that lifts it off the page.
       Big negative spreads keep these from hugging the border and reading as
       an outline, which is what greyed the rim before. */
    0 3px 6px -2px rgba(28,32,64,.030),
    0 12px 24px -10px rgba(28,32,64,.042),
    0 28px 56px -22px rgba(28,32,64,.058),
    0 60px 104px -44px rgba(28,32,64,.075);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
/* the edge: bevel + caustic, achromatic — colour comes from what it bends */
.glass{
  --mx:50%;--my:0%;--lin:158deg;
  --p1:-10% -14%; --p2:110% 10%; --p3:108% 110%; --p4:-8% 108%;
  --s1:88% 74%; --s2:80% 68%; --s3:86% 72%; --s4:78% 66%;
}
/* every pane gets a different light signature — one recipe repeated reads as duplication */
.stat:nth-child(4n+2),.card:nth-child(4n+2),.role:nth-child(4n+2){
  --lin:198deg; --my:8%;
  --p1:108% -16%; --p2:-12% 18%; --p3:-6% 108%; --p4:112% 96%;
  --s1:76% 82%; --s2:92% 62%; --s3:74% 78%; --s4:88% 60%;
}
.stat:nth-child(4n+3),.card:nth-child(4n+3),.role:nth-child(4n+3){
  --lin:132deg; --my:-6%;
  --p1:-14% 104%; --p2:104% -10%; --p3:-4% -8%; --p4:110% 112%;
  --s1:94% 66%; --s2:72% 86%; --s3:82% 70%; --s4:70% 74%;
}
.stat:nth-child(4n+4),.card:nth-child(4n+4),.role:nth-child(4n+4){
  --lin:172deg; --my:14%;
  --p1:112% 106%; --p2:-10% -6%; --p3:106% 22%; --p4:-14% 92%;
  --s1:70% 90%; --s2:86% 64%; --s3:78% 84%; --s4:96% 58%;
}
/* Content must sit above ::after (the caustic wash) and ::before (the edge),
   or the gradient paints straight over the text and greys it out. This was
   scoped to the site's four card classes, so /admin never inherited it. */
.glass>*{position:relative;z-index:3}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;
  background:
    radial-gradient(42% 66% at var(--mx) var(--my),
      rgba(255,255,255,.96), rgba(255,255,255,.26) 40%, rgba(255,255,255,0) 70%),
    linear-gradient(var(--lin), rgba(255,255,255,.46) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(var(--s1) at var(--p1), rgba(255,255,255,.58), rgba(255,255,255,0) 58%),
    radial-gradient(var(--s2) at var(--p2), rgba(255,255,255,.44), rgba(255,255,255,0) 60%),
    radial-gradient(var(--s3) at var(--p3), rgba(255,255,255,.36), rgba(255,255,255,0) 58%),
    radial-gradient(var(--s4) at var(--p4), rgba(255,255,255,.30), rgba(255,255,255,0) 58%);
  transition:opacity .3s ease}
.glass::before,.nav-in::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;
  box-shadow:
    /* top edge catches the key light — the strongest single 3D cue */
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 2.5px 2px -1px rgba(255,255,255,.88),
    /* bottom edge returns light bounced up through the body */
    inset 0 -1px 0 rgba(255,255,255,.88),
    inset 0 -2.5px 3px -1.5px rgba(255,255,255,.80),
    /* side walls */
    inset 3px 0 6px -4px rgba(255,255,255,.96),
    inset -3px 0 6px -4px rgba(255,255,255,.96),
    /* crisp hairline rim: this is the cut edge of the glass */
    inset 0 0 0 1px rgba(255,255,255,.78),
    /* thickness, all of it light — no dark inner glow */
    inset 0 0 20px -7px rgba(255,255,255,.92),
    inset 0 0 46px -24px rgba(255,255,255,.70);
}

.brandmark{display:inline-flex;align-items:center;gap:.58rem;color:var(--ink);
  font-size:1.12rem;line-height:1;white-space:nowrap}
.brandmark-ic{flex:0 0 auto;height:1.02em;width:auto;display:block}
.brandmark-t{font-family:Jost,"Century Gothic",Futura,-apple-system,sans-serif;
  font-weight:600;letter-spacing:.045em;text-transform:uppercase;line-height:1}
.brandmark--lg{font-size:1.24rem;gap:.66rem}
.brandmark--lg .brandmark-t{letter-spacing:.055em}

.btn{display:inline-flex;align-items:center;gap:1rem;
  padding:.5rem .5rem .5rem 1.6rem;border-radius:999px;font-size:.95rem;font-weight:500;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:none}
.btn-t{text-decoration:underline 1.5px transparent;text-underline-offset:3px;
  transition:text-decoration-color .25s}
.btn:hover .btn-t,.btn:focus-visible .btn-t{text-decoration-color:currentColor}
.btn-ic{display:grid;place-items:center;flex:0 0 auto;width:2.5rem;height:2.5rem;
  border-radius:999px;transition:background .25s,color .25s}
.btn-ic svg{width:1.05rem;height:1.05rem;display:block;
  transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.btn:hover .btn-ic svg,.btn:focus-visible .btn-ic svg{transform:rotate(-45deg)}
.btn-solid{background:var(--ink);color:#fff;
  box-shadow:0 1px 2px rgba(11,11,15,.10),0 8px 20px -8px rgba(11,11,15,.22)}
.btn-solid .btn-ic{background:#fff;color:var(--ink)}
.btn-ghost{background:linear-gradient(158deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  border-color:rgba(255,255,255,.85);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 10px rgba(30,26,66,.06);
  -webkit-backdrop-filter:blur(20px) saturate(190%);backdrop-filter:blur(20px) saturate(190%)}
.btn-ghost .btn-ic{background:var(--ink);color:#fff}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.btn-ic svg{transition:none}}

@media(max-width:640px){
/* Mobile only. On a narrow screen the desktop field's two edge columns
   collapse into stripes down both sides of the page; these scattered
   multi-hue lobes read as sparse instead. Desktop keeps the original. */
.field{inset:-32vh -8vw;
  background:
  /* wide faint wash so bare stretches never read as flat paper */
  radial-gradient(74vw 50vh at 38% 24%,
    rgba(140,150,242,.09), rgba(122,226,208,.05) 55%, rgba(255,255,255,0) 76%),

  /* Each "blob" is three overlapping lobes at offset centres with very
     different aspect ratios, so the union is lopsided rather than a clean
     oval, and each lobe carries its own hue so colour travels across it.
     A single radial-gradient can only ever be an ellipse. */

  /* upper left — blue > violet > orchid > aqua */
  radial-gradient(26vw 18vh at  4% 12%, rgba(96,198,246,.23), rgba(140,150,242,.13) 46%, rgba(255,255,255,0) 74%),
  radial-gradient(13vw 27vh at 12% 20%, rgba(198,140,238,.17), rgba(242,140,196,.09) 50%, rgba(255,255,255,0) 76%),
  radial-gradient(21vw 11vh at  2% 27%, rgba(122,226,208,.15), rgba(190,226,138,.07) 52%, rgba(255,255,255,0) 74%),

  /* upper right — pink > orchid > gold > indigo */
  radial-gradient(18vw 23vh at 82% 26%, rgba(242,140,196,.20), rgba(198,140,238,.11) 48%, rgba(255,255,255,0) 76%),
  radial-gradient(27vw 11vh at 73% 34%, rgba(250,214,110,.14), rgba(242,140,196,.08) 52%, rgba(255,255,255,0) 78%),
  radial-gradient(11vw 21vh at 89% 37%, rgba(140,150,242,.16), rgba(96,198,246,.08) 50%, rgba(255,255,255,0) 74%),

  /* right — aqua > blue > lime > indigo */
  radial-gradient(20vw 15vh at 97% 51%, rgba(122,226,208,.19), rgba(96,198,246,.10) 48%, rgba(255,255,255,0) 76%),
  radial-gradient(12vw 26vh at 89% 60%, rgba(190,226,138,.14), rgba(104,222,172,.08) 50%, rgba(255,255,255,0) 76%),
  radial-gradient(23vw  9vh at 99% 67%, rgba(140,150,242,.12), rgba(198,140,238,.06) 54%, rgba(255,255,255,0) 74%),

  /* lower left — gold > lime > green > pink */
  radial-gradient(23vw 13vh at 13% 61%, rgba(250,214,110,.18), rgba(190,226,138,.10) 48%, rgba(255,255,255,0) 76%),
  radial-gradient(12vw 25vh at 24% 68%, rgba(104,222,172,.15), rgba(122,226,208,.08) 50%, rgba(255,255,255,0) 76%),
  radial-gradient(19vw 11vh at  7% 73%, rgba(242,140,196,.11), rgba(198,140,238,.06) 52%, rgba(255,255,255,0) 74%),

  /* lower middle — green > blue > indigo > gold */
  radial-gradient(24vw 16vh at 54% 80%, rgba(104,222,172,.17), rgba(96,198,246,.10) 46%, rgba(255,255,255,0) 74%),
  radial-gradient(14vw 24vh at 63% 87%, rgba(140,150,242,.15), rgba(198,140,238,.08) 50%, rgba(255,255,255,0) 76%),
  radial-gradient(21vw 10vh at 47% 91%, rgba(250,214,110,.12), rgba(190,226,138,.06) 54%, rgba(255,255,255,0) 74%),

  /* bottom right — indigo > pink > aqua */
  radial-gradient(16vw 19vh at 91% 92%, rgba(140,150,242,.16), rgba(242,140,196,.09) 48%, rgba(255,255,255,0) 76%),
  radial-gradient(23vw  9vh at 83% 97%, rgba(122,226,208,.12), rgba(96,198,246,.06) 54%, rgba(255,255,255,0) 74%);
  animation:drift 96s ease-in-out infinite}
}

/* ---------- form controls (site form + admin) ---------- */
.af input,.af select,.af textarea,.inp{width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  padding:.7rem .85rem;border-radius:12px;border:1px solid rgba(11,11,15,.12);
  background:rgba(255,255,255,.72);
  transition:border-color .2s,box-shadow .2s,background .2s}
.af input:focus,.af select:focus,.af textarea:focus,.inp:focus{outline:none;
  border-color:rgba(11,11,15,.5);background:#fff;box-shadow:0 0 0 3px rgba(11,11,15,.07)}

@media(prefers-reduced-motion:reduce){.field{animation:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding-block:.9rem}
.nav-in{display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:.6rem .7rem .6rem 1.15rem;border-radius:999px;
  position:relative;
  background:linear-gradient(158deg, rgba(255,255,255,.26), rgba(255,255,255,.08));
  box-shadow:
    0 1px 2px rgba(30,26,66,.03),
    0 10px 30px -10px rgba(30,26,66,.07),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.36);
  -webkit-backdrop-filter:blur(16px) saturate(185%);
  backdrop-filter:blur(16px) saturate(185%);
  transition:box-shadow .35s ease}
.nav.stuck .nav-in{box-shadow:
    0 1px 2px rgba(30,26,66,.04),
    0 16px 44px -14px rgba(30,26,66,.11),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.38)}

@media(max-width:640px){
  .nav{padding-block:.45rem}
  .nav-in{padding:.35rem .35rem .35rem .85rem;gap:.6rem}
}
/* A pill that has to wrap is no longer a pill — soften the radius instead of
   letting a two-row stadium shape appear. */
@media(max-width:900px){ .nav-in{border-radius:22px} }