@import url('https://fonts.googleapis.com/css2?family=Anton&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@500;700&display=swap');

:root{
  /* shared system */
  --line-w:1px;
  --radius:14px;
  --ease:cubic-bezier(.16,.84,.44,1);

  /* SA FITNESS room — dark, energetic */
  --fit-bg:#0a0b0c;
  --fit-raised:#141517;
  --fit-card:#17181a;
  --fit-ink:#f2efe9;
  --fit-dim:#a9a49a;
  --fit-faint:#716c62;
  --fit-line:rgba(242,239,233,0.10);
  --fit-line-strong:rgba(242,239,233,0.22);
  --fit-accent:#c8f24a;
  --fit-accent-dim:rgba(200,242,74,0.14);

  /* SA LIBRARY room — calm, editorial */
  --lib-bg:#f4efe4;
  --lib-raised:#ece3d1;
  --lib-card:#f9f5eb;
  --lib-ink:#211d16;
  --lib-dim:#726b5c;
  --lib-faint:#a49a86;
  --lib-line:rgba(33,29,22,0.12);
  --lib-line-strong:rgba(33,29,22,0.28);
  --lib-accent:#8a6a2f;
  --lib-accent-dim:rgba(138,106,47,0.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--fit-bg); color:var(--fit-ink);
  font-family:"Space Grotesk",system-ui,sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
h1,h2,h3,h4{margin:0; text-wrap:balance;}
.display{font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; line-height:0.94;}
.serif{font-family:"Fraunces",Georgia,serif;}
.mono{font-family:"Space Mono",monospace;}
.num{font-family:"Space Mono",monospace; font-variant-numeric:tabular-nums;}

/* ---------- grain + cursor ---------- */
.grain{
  position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* cursor = a loaded weight plate: hub, six bolt holes, slow rotation */
.cursor-dot,.cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:3000; border-radius:50%; transform:translate(-50%,-50%); transition:opacity .2s, border-color .25s;}

.cursor-dot{width:5px; height:5px; background:#3E7BFA; box-shadow:0 0 9px rgba(62,123,250,0.75);}
.cursor-dot.on-paper{background:#FF3F91; box-shadow:0 0 9px rgba(255,63,145,0.5);}

.cursor-ring{
  --plate:#3E7BFA;
  width:40px; height:40px;
  border:2.5px solid var(--plate);
  background:radial-gradient(circle at 50% 50%, rgba(8,9,16,0.5) 0 36%, rgba(62,123,250,0.07) 36% 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,0.07) inset, 0 3px 12px rgba(0,0,0,0.45);
  transition:width .25s var(--ease), height .25s var(--ease), border-width .25s var(--ease), border-color .25s;
  animation:plateSpin 11s linear infinite;
}
.cursor-ring.on-paper{
  --plate:#FF3F91;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.32) 0 36%, rgba(255,63,145,0.08) 36% 100%);
  box-shadow:0 3px 12px rgba(0,0,0,0.14);
}

/* centre hub (the sleeve hole) */
.cursor-ring::before{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; border:1.5px solid var(--plate); opacity:0.9;
  transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease);
}
/* six bolt holes, drawn as box-shadows off a transparent centre */
.cursor-ring::after{
  content:""; position:absolute; left:50%; top:50%;
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%; background:transparent; opacity:0.75;
  transition:box-shadow .25s var(--ease);
  box-shadow:
     13px 0 0 var(--plate),   -13px 0 0 var(--plate),
     6.5px 11.3px 0 var(--plate), -6.5px 11.3px 0 var(--plate),
     6.5px -11.3px 0 var(--plate), -6.5px -11.3px 0 var(--plate);
}

/* hover = heavier plate */
.cursor-ring.hover{width:64px; height:64px; border-width:3.5px;}
.cursor-ring.hover::before{width:14px; height:14px; margin:-7px 0 0 -7px;}
.cursor-ring.hover::after{
  box-shadow:
     21px 0 0 var(--plate),   -21px 0 0 var(--plate),
     10.5px 18.2px 0 var(--plate), -10.5px 18.2px 0 var(--plate),
     10.5px -18.2px 0 var(--plate), -10.5px -18.2px 0 var(--plate);
}

@keyframes plateSpin{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}
@media(prefers-reduced-motion:reduce){ .cursor-ring{animation:none;} }
@media(hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{display:none;} }

/* ---------- eyebrow / buttons (shared) ---------- */
.eyebrow{font-family:"Space Mono",monospace; font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:22px; height:1px;}
.on-dark .eyebrow{color:var(--fit-accent);} .on-dark .eyebrow::before{background:var(--fit-accent);}
.on-paper .eyebrow{color:var(--lib-accent);} .on-paper .eyebrow::before{background:var(--lib-accent);}

.btn{position:relative; display:inline-flex; align-items:center; gap:10px; font-family:"Space Mono",monospace; font-weight:700; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; padding:16px 28px; border-radius:100px; border:1px solid transparent;}
.btn-solid-fit{background:var(--fit-accent); color:var(--fit-bg);}
.btn-outline-fit{border-color:var(--fit-line-strong); color:var(--fit-ink);}
.btn-outline-fit:hover{border-color:var(--fit-accent); color:var(--fit-accent);}
.btn-solid-lib{background:var(--lib-ink); color:var(--lib-card);}
.btn-outline-lib{border-color:var(--lib-line-strong); color:var(--lib-ink);}
.btn-outline-lib:hover{border-color:var(--lib-accent); color:var(--lib-accent);}
.magnetic{transition:transform .25s var(--ease);}

.reveal{opacity:0; transform:translateY(36px);}
.reveal.in{opacity:1; transform:translateY(0); transition:opacity .8s var(--ease), transform .8s var(--ease);}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none;} }


/* ============ ROOM SHELLS (shared across sections) ============ */
.room{position:relative;}
.on-dark{background:var(--fit-bg); color:var(--fit-ink);}
.on-paper{background:var(--lib-bg); color:var(--lib-ink);}
.raised-dark{background:var(--fit-raised);}
.raised-paper{background:var(--lib-raised);}
.border-dark{border-top:1px solid var(--fit-line); border-bottom:1px solid var(--fit-line);}
.border-paper{border-top:1px solid var(--lib-line); border-bottom:1px solid var(--lib-line);}
section{padding:120px 0; position:relative;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:52px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(2.3rem,4.8vw,3.8rem);}
.section-head p{max-width:36ch; margin:0;}
.on-dark .section-head p{color:var(--fit-dim);}
.on-paper .section-head p{color:var(--lib-dim);}