/* ===== tokens/colour.css ===== */
:root{
  --swell-navy:#001964;
  --swell-blue:#5032ff;
  --swell-turquoise:#32b0bc;
  --swell-magenta:#ff78ff;
  --swell-orange:#ff7750;
  --swell-white:#ffffff;

  --gray-950:#0a1130; --gray-900:#141c40; --gray-800:#232a52;
  --gray-700:#3b4272; --gray-600:#565d8a; --gray-500:#7178a1;
  --gray-400:#9aa0c0; --gray-300:#c2c7de; --gray-200:#e0e3f0;
  --gray-100:#eef0f8; --gray-50:#f7f8fc;

  --tint-blue:#ecebff;
  --tint-turquoise:#e5f5f7;
  --tint-magenta:#ffecff;
  --tint-orange:#ffeee8;

  --color-bg:var(--swell-white);
  --color-bg-muted:var(--gray-50);
  --color-border:var(--gray-200);
  --color-text:var(--swell-navy);
  --color-text-secondary:var(--gray-700);

  --gradient-brand:linear-gradient(118deg,#ff78ff 0%,#6a2be0 24%,#241a9c 44%,#001964 60%,#0a5f86 82%,#32b0bc 100%);
  --gradient-brand-soft:linear-gradient(118deg,#ff78ff 0%,#5032ff 40%,#32b0bc 100%);

  /* ===== tokens/type.css ===== */
  --font-display:'League Spartan',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --weight-body:400; --weight-medium:500; --weight-semibold:600;
  --weight-subhead:700; --weight-headline:800; --weight-black:900;

  --text-display:clamp(2.75rem,1.6rem+4.4vw,4.75rem);
  --text-h1:clamp(2.2rem,1.5rem+2.6vw,3.25rem);
  --text-h2:clamp(1.7rem,1.3rem+1.6vw,2.35rem);
  --text-h3:1.5rem; --text-h4:1.2rem;
  --text-lead:1.25rem; --text-body:1rem; --text-sm:0.875rem;
  --text-xs:0.75rem; --text-eyebrow:0.78rem;

  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-display:-0.02em; --tracking-heading:-0.01em; --tracking-eyebrow:0.16em;

  /* ===== tokens/spacing.css ===== */
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --container:1200px; --container-narrow:760px;

  /* ===== tokens/effects.css ===== */
  --shadow-xs:0 1px 2px rgba(10,17,48,.06);
  --shadow-sm:0 2px 8px rgba(10,17,48,.08);
  --shadow-md:0 8px 24px rgba(10,17,48,.10);
  --shadow-lg:0 18px 48px rgba(10,17,48,.14);
  --focus-ring:0 0 0 3px rgba(80,50,255,.35);

  /* ===== page ===== */
  --cta:var(--swell-blue);
  --page-max:1200px;
  --text-max:760px;
  --section-pad:clamp(64px,7vw,112px);
  --card-radius:var(--radius-lg,22px);
  --mx:0; --my:0; --sy:0;
  --fs-display:clamp(2.75rem, 1.6rem + 4.4vw, 4.75rem);
  --fs-h1:clamp(2.2rem, 1.5rem + 2.6vw, 3.25rem);
  --fs-h2:clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem);
  --fs-quote:clamp(1.5rem, 1.1rem + 1.1vw, 2.05rem);
}
@media (max-width:640px){
  :root{
    --fs-display:2.05rem; --fs-h1:1.6rem; --fs-h2:1.5rem; --fs-quote:1.35rem;
    --text-h1:1.6rem; --text-h2:1.5rem; --text-h3:1.2rem; --text-h4:1.05rem;
    --text-lead:1rem; --text-body:0.95rem; --text-sm:0.875rem;
    --section-pad:56px;
  }
  section{padding-left:20px;padding-right:20px}
  [data-hero-grid]{gap:28px !important}
  [data-hero-photo]{max-width:250px !important}
  [data-hero-copy] h1{max-width:none !important}
  [data-num]{font-size:1.9rem !important}
}
@media (max-width:820px){
  [data-nav-desktop]{display:none !important}
  [data-nav-actions]{margin-left:auto !important}
  [data-nav-toggle]{display:inline-flex !important}
  /* only when opened: a blanket display:flex here beats the inline
     display:none and pins the drawer permanently open on phones */
  [data-nav-drawer].open{display:flex !important}
}
@media (max-width:900px){
  [data-footer-h]{white-space:normal !important}
}
@media (max-width:640px){
  [data-footer-h]{font-size:1.42rem !important}
  [data-footer-break]{display:inline !important}
  [data-footer-break]::before{content:"\00a0"}
}
@media (max-width:820px){
  [data-footer-row]{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:759px){
  [data-topics]{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:520px){
  [data-formats]{grid-template-columns:minmax(0,1fr) !important}
}
@media (min-width:1040px){
  [data-formats]{grid-template-columns:minmax(0,168px) repeat(4,minmax(0,1fr)) !important}
  [data-formats] > [data-formats-title]{grid-column:auto !important;align-self:center !important}
  [data-formats] > [data-formats-title] > span{max-width:9ch}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-relaxed);text-wrap:pretty;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--swell-turquoise);text-decoration:none;transition:color .18s ease}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:var(--tracking-heading);margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
section{padding:var(--section-pad) 24px;scroll-margin-top:88px}
::selection{background:var(--swell-magenta);color:var(--swell-navy)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---- hover states (were style-hover in the source) ----
   !important is load-bearing here: every one of these elements carries the
   same property in an inline style attribute, which otherwise always wins. */
.h-navlink:hover{color:#fff !important}
.h-cta:hover{transform:translateY(-3px) !important;box-shadow:0 0 0 1px rgba(255,255,255,.75),0 0 26px rgba(255,120,255,.6),0 0 70px rgba(80,50,255,.48) !important;color:var(--cta) !important}
.h-cta2:hover{transform:translateY(-3px) !important;background:#fff !important;color:var(--cta) !important;box-shadow:0 0 0 1px rgba(255,255,255,.75),0 0 26px rgba(255,120,255,.55),0 0 70px rgba(80,50,255,.45) !important}
.h-card:hover{transform:translateY(-5px) !important;background:rgba(255,255,255,.09) !important;box-shadow:0 22px 46px rgba(0,6,34,.5) !important}
.h-link:hover{gap:14px !important;color:#fff !important;text-shadow:0 0 18px rgba(255,120,255,.75)}
.h-topic:hover{transform:translateY(-3px) !important;box-shadow:var(--shadow-lg) !important}
.h-footcta:hover{transform:translateY(-3px) !important;box-shadow:0 0 0 1px rgba(255,255,255,.75),0 0 28px rgba(255,120,255,.6),0 0 78px rgba(80,50,255,.5) !important;color:var(--cta) !important}
.h-social:hover{background:#fff !important;color:var(--cta) !important;transform:translateY(-3px) !important;box-shadow:0 0 22px rgba(255,120,255,.5) !important}
.h-social:hover svg{fill:var(--cta)}
.h-mail:hover{color:#fff !important}
.h-drawer:hover{color:#fff !important}

/* ---- language buttons ---- */
.langbtn{
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:32px;
  padding:3px 14px 0;text-indent:.1em;font-family:var(--font-display);
  font-weight:var(--weight-subhead);font-size:.78rem;letter-spacing:.1em;line-height:1;
  border-radius:var(--radius-pill,999px);cursor:pointer;
  background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.32);
  transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .3s ease;
}
.langbtn[aria-current="page"]{
  background:#fff;color:var(--swell-navy);border:1px solid #fff;box-shadow:0 0 18px rgba(255,255,255,.35);
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* ---- static-build additions ---- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:#fff;color:var(--swell-navy);
  font-family:var(--font-display);font-weight:var(--weight-subhead);
  border-radius:0 0 var(--radius-md) 0;
}
.skip:focus{left:0}

.grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}


/* ---- wave placement ----
   The wave keeps a fixed aspect ratio and always spans the full width, so on a
   narrower two-column layout it grows tall enough to run straight across the
   copy. Moving it only relocates the collision, so instead it is masked: faded
   out across the text column, left at full strength behind the portrait. It
   still bleeds off both edges, so no strand end is ever visible.
   Phones are deliberately excluded, the stacked layout has no collision. */
@media (min-width:641px){
  .wave-hero{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 44%,rgba(0,0,0,.4) 60%,#000 80%);
    mask-image:linear-gradient(to right,transparent 0%,transparent 44%,rgba(0,0,0,.4) 60%,#000 80%);
  }
  .wave-foot{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 52%,rgba(0,0,0,.4) 68%,#000 86%);
    mask-image:linear-gradient(to right,transparent 0%,transparent 52%,rgba(0,0,0,.4) 68%,#000 86%);
  }
  .wave-quote{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 42%,#000 72%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 42%,#000 72%);
  }
}
@media (max-width:1100px){
  .wave-hero{opacity:.32 !important;bottom:-14% !important}
  .wave-quote{opacity:.34 !important;bottom:-26% !important}
  .wave-foot{opacity:.3 !important;bottom:-30% !important}
}
@media (max-width:640px){
  .wave-hero{opacity:.2 !important;bottom:-8% !important}
  .wave-quote{opacity:.28 !important;bottom:-22% !important}
  .wave-foot{opacity:.22 !important;bottom:-28% !important}
}