/* ---------- Alt shared site chrome ---------- */
@font-face{font-family:'Anton';src:url('Anton-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'GSF';src:url('GSF-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'GSF';src:url('GSF-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'GSF';src:url('GSF-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'GSF';src:url('GSF-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --bg:#F4F1EC;      /* Alt WHITE */
  --ink:#0A0F0D;     /* Alt BLACK */
  --green:#33CC80;   /* Alt GREEN — primary accent */
  --magenta:#C1256C; /* Alt MAGENTA — secondary accent */
  --muted:#9a958c;
  --line:rgba(10,15,13,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:'GSF',-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
body{position:fixed;inset:0;
  background:var(--bg) url('alt-bg-light.png') center/cover no-repeat;
  animation:pageEnter .72s cubic-bezier(.16,1,.3,1) both}

/* ---------- top nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:14px 34px;font-weight:600;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase}
.nav .logo{--dot-motion-duration:.62s;--dot-idle-size:34px;--dot-idle-x:1px;
  --dot-final-size:12px;--dot-final-x:66px;--dot-final-y:41px;
  position:relative;width:112px;height:64px;display:block;overflow:hidden;
  background:transparent;border:0;border-radius:0;padding:0}
.nav .logo::before{content:"";position:absolute;left:var(--dot-idle-x);top:50%;z-index:1;
  width:var(--dot-idle-size);height:var(--dot-idle-size);aspect-ratio:1;border-radius:999px;
  background:var(--green);transform:translateY(-50%);
  transition:left var(--dot-motion-duration) cubic-bezier(.2,.9,.18,1),
    top var(--dot-motion-duration) cubic-bezier(.2,.9,.18,1),
    width var(--dot-motion-duration) cubic-bezier(.2,.9,.18,1),
    height var(--dot-motion-duration) cubic-bezier(.2,.9,.18,1),
    transform var(--dot-motion-duration) cubic-bezier(.2,.9,.18,1)}
.nav .logo img{position:absolute;top:calc(50% - 4px);left:-17px;width:116px;height:116px;
  margin:0;mix-blend-mode:multiply;pointer-events:none;transform:translateY(-50%);
  clip-path:circle(0 at 89px 77px);
  transition:clip-path 2.5s cubic-bezier(.2,.9,.18,1)}
.nav .logo:hover::before,.nav .logo:focus-visible::before{
  left:var(--dot-final-x);top:var(--dot-final-y);width:var(--dot-final-size);height:var(--dot-final-size);transform:none}
.nav .logo:hover img,.nav .logo:focus-visible img{
  clip-path:circle(160px at 89px 77px);transition-delay:var(--dot-motion-duration)}
.nav .logo:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.nav .group{display:flex;gap:30px}
.nav a{color:var(--ink);text-decoration:none;opacity:.85;cursor:pointer}
.nav a:hover{opacity:1;color:var(--green)}
.nav a.on{opacity:1;color:var(--green)}
.nav .spacer{flex:1}

/* ---------- corner chrome ---------- */
.pagehint{position:fixed;bottom:18px;left:34px;z-index:18;font-weight:600;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.pagehint b{color:var(--green);font-weight:600}
.nextlink{position:fixed;bottom:18px;right:34px;z-index:18;font-weight:600;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;opacity:.75;transition:opacity .2s,color .2s}
.nextlink:hover{opacity:1;color:var(--green)}

/* ---------- shared type ---------- */
.kicker{font-weight:700;font-size:clamp(.95rem,1.3vw,1.2rem);letter-spacing:.26em;text-transform:uppercase;color:var(--green)}
.display{font-family:'Anton';font-weight:400;text-transform:uppercase;line-height:.94;
  letter-spacing:.004em;color:var(--ink)}

@keyframes morph{0%{transform:scaleX(.18);opacity:0}55%{opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes fadeIn{to{opacity:1}}
@keyframes rise{0%{transform:translateY(26px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes pageEnter{0%{transform:translateY(100vh)}100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (max-width:760px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  body{position:relative;inset:auto;min-height:100svh;padding-bottom:14px;background-attachment:scroll}
  body:not(.home) main{position:relative!important;inset:auto!important;
    min-height:calc(100svh - 126px);margin:86px 20px 42px;overflow:visible}
  .nav{padding:8px 12px;flex-wrap:nowrap;gap:8px;font-size:.62rem;
    letter-spacing:.075em;background:linear-gradient(180deg,var(--bg) 84%,rgba(244,241,236,0))}
  .nav .logo{--dot-motion-duration:.62s;--dot-idle-size:22px;--dot-idle-x:1px;
    --dot-final-size:8px;--dot-final-x:39px;--dot-final-y:26px;
    flex:0 0 60px;width:60px;height:40px}
  .nav .logo img{top:calc(50% - 3px);left:-12px;width:76px;height:76px;
    clip-path:circle(0 at 64px 56px)}
  .nav .logo:hover img,.nav .logo:focus-visible img{clip-path:circle(116px at 64px 56px)}
  .nav .spacer{display:none}
  .nav .group{gap:9px}
  .nav .group.right{flex:1 1 auto;min-width:0;margin-left:auto;padding:0;align-items:center;
    justify-content:flex-end;overflow:hidden;scrollbar-width:none}
  .nav .group.right::-webkit-scrollbar{display:none}
  .nav .group.right a{flex:0 0 auto;white-space:nowrap}
  .nav .group.right a[href="index.html"]{display:none}
  .kicker{font-size:.72rem;letter-spacing:.18em}
  .display{line-height:.98}
  .pagehint{left:20px;bottom:10px;font-size:.6rem;max-width:45vw}
  .nextlink{right:20px;bottom:10px;font-size:.6rem;max-width:45vw;text-align:right}
}

@media (max-width:420px){
  .nav{padding-inline:10px;font-size:.6rem;letter-spacing:.055em}
  .nav .logo{flex-basis:52px;width:52px}
  .nav .group{gap:7px}
}

/* ============================================================
   Accessibility layer
   - Always-on structural styles (no change to default look)
   - Opt-in adaptations scoped to html.a11y-* (set by a11y.js)
   ============================================================ */

/* --- Always-on: visible keyboard focus (only shows on keyboard nav) --- */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nav a:focus-visible,.nextlink:focus-visible,.book a:focus-visible,
.mail:focus-visible,.socials a:focus-visible,.foot .team:focus-visible,
.founder .li a:focus-visible,.meta .back:focus-visible,.card:focus-visible,
.it:focus-visible{outline-color:var(--green)}
:focus:not(:focus-visible){outline:none}

/* --- Always-on: skip link (hidden until focused) --- */
.skip-link{position:fixed;top:0;left:8px;z-index:100;transform:translateY(-140%);
  transition:transform .18s ease;background:var(--ink);color:var(--bg);
  padding:11px 18px;font-family:'GSF',-apple-system,sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{transform:translateY(8px);outline:2px solid var(--green);outline-offset:2px}

/* --- Always-on: accessibility launcher + panel (injected by a11y.js) --- */
.a11y-fab{width:52px;height:52px;flex:0 0 auto;border:none;cursor:pointer;color:#eafff5;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  border-radius:58% 42% 55% 45% / 55% 48% 52% 45%;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 34% 28%,#7fe6b1,#33CC80 58%,#1fa869);
  box-shadow:0 8px 22px rgba(31,168,105,.4);
  animation:a11yBloom 5.5s ease-in-out infinite;transition:transform .3s}
.a11y-fab:hover{transform:scale(1.08)}
@keyframes a11yBloom{0%,100%{border-radius:58% 42% 55% 45%/55% 48% 52% 45%}
  50%{border-radius:46% 54% 48% 52%/52% 46% 54% 48%}}
.a11y-fab svg{width:24px;height:24px;display:block}
.a11y-fab img{width:auto;height:30px;display:block;object-fit:contain}
.a11y-fab-nav{margin-left:14px}                 /* inner pages: in the nav, after the logo */
.a11y-dock.a11y-fab-float{position:fixed;z-index:60;bottom:50px;left:22px}  /* discreet corner */

/* draggable dock + dismiss "x" */
.a11y-dock{position:relative;display:inline-flex;flex:0 0 auto}
.a11y-dock .a11y-fab{touch-action:none}
.a11y-dock-floating{position:fixed!important;z-index:62;margin:0!important}
.a11y-dock-x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:999px;
  border:1px solid var(--ink);background:var(--bg);color:var(--ink);cursor:pointer;
  font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.a11y-dock-x:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}

.a11y-panel{position:fixed;z-index:61;top:74px;left:24px;width:264px;     /* top/left set by JS */
  max-width:calc(100vw - 24px);color:var(--ink);
  background:linear-gradient(165deg,#effaf3,#F4F1EC);border:1px solid rgba(51,204,128,.3);
  box-shadow:0 18px 40px rgba(31,168,105,.18);padding:16px 16px 14px;
  border-radius:26px 26px 10px 26px;font-family:'GSF',-apple-system,sans-serif}
.a11y-panel[hidden]{display:none}
.a11y-panel h2{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);margin:0 0 12px}
.a11y-grp{margin-bottom:13px}
.a11y-lbl{display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.a11y-row{display:flex;gap:6px}
.a11y-opt{flex:1;border:1px solid rgba(51,204,128,.35);background:none;cursor:pointer;
  font-family:inherit;font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--ink);
  padding:7px 4px;text-align:center;border-radius:14px;
  transition:background .18s,color .18s,border-color .18s}
.a11y-opt:hover{border-color:var(--green)}
.a11y-opt[aria-pressed="true"]{background:var(--green);color:#06301d;border-color:var(--green)}
.a11y-foot{margin-top:8px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.a11y-foot a{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;opacity:.85}
.a11y-foot a:hover{color:var(--green);opacity:1}
.a11y-reset{background:none;border:none;cursor:pointer;font-family:inherit;font-size:.6rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0}
.a11y-reset:hover{color:var(--magenta)}

/* === Opt-in: reduce motion === */
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;scroll-behavior:auto!important}

/* === Opt-in: high contrast (on-demand AA colours; brand hue preserved) === */
html.a11y-contrast{--green:#0f7a44;--magenta:#9a1255;--muted:#4f4c45;--line:rgba(10,15,13,.5)}
html.a11y-contrast .head .sub,html.a11y-contrast .head .note,html.a11y-contrast .pitch,
html.a11y-contrast .hero .sub .dim,html.a11y-contrast .nav a,html.a11y-contrast .nextlink,
html.a11y-contrast .book .r,html.a11y-contrast .card .tag,html.a11y-contrast .tag,
html.a11y-contrast .pagehint{opacity:1!important}
html.a11y-contrast .founder .personal,html.a11y-contrast .founder .bio,
html.a11y-contrast .pl p,html.a11y-contrast .body p{color:var(--ink)!important}
html.a11y-contrast :focus-visible{outline-width:3px}

/* === Opt-in: larger text (also unlocks scroll so nothing clips) === */
html.a11y-text-lg{font-size:112.5%}
html.a11y-text-xl{font-size:125%}
html.a11y-text-lg body,html.a11y-text-xl body{position:static;inset:auto;height:auto;
  min-height:100%;overflow:hidden auto}
html.a11y-text-lg body:not(.home) main,html.a11y-text-xl body:not(.home) main{
  position:relative;inset:auto;margin:92px 24px 48px;height:auto;min-height:0;overflow:visible}
html.a11y-text-lg body:not(.home) main *,html.a11y-text-xl body:not(.home) main *{
  min-height:0!important;max-height:none!important;overflow:visible!important}

/* --- Always-on: screen-reader-only utility --- */
.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}