/* ============================================================
   THE ARCHIVE — shared stylesheet
   Every page under /personal links this one file.
   ============================================================ */

:root{
  --bg:#0a0a0f;
  --bg-alt:#0e0e16;
  --card:#14141e;
  --card-hi:#1a1a26;
  --line:rgba(255,255,255,.08);
  --line-hi:rgba(255,255,255,.16);
  --ink:#f1f0ff;
  --ink-2:#9b98b8;
  --ink-3:#5c5a78;
  --hot:#ff5f7e;
  --lime:#c4ff5c;
  --violet:#8a6bff;
  --disp:'Space Grotesk',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --wrap:1080px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(196,255,92,.25);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.02em;line-height:1.1}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 24px}

/* ---------- ambient canvas ---------- */
#bg{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none}
.layer{position:relative;z-index:1}

/* ---------- nav ---------- */
#nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  background:rgba(10,10,15,.72);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
#nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{font-family:var(--mono);font-size:14px;font-weight:500;display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.nav-links{display:flex;gap:24px;font-size:14.5px;color:var(--ink-2);flex-wrap:wrap}
.nav-links a{transition:color .2s}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
@media (max-width:640px){
  .nav-links{gap:14px;font-size:13px}
  .brand span:not(.dot){display:none}
}

/* ============================================================
   MOTION LAYER
   Everything below is progressive enhancement. Browsers without
   scroll-driven animations or view transitions get exactly the
   behaviour that existed before it, via the @supports guards and
   the IntersectionObserver fallback in archive.js.
   ============================================================ */

/* ---------- cross-document view transitions ----------
   The site is real multi-page HTML, so navigation can morph instead
   of flashing. #nav and the section titles are pulled out of the
   root snapshot by name, which is what makes the chrome look like it
   stays put while only the content changes. */
@view-transition { navigation: auto; }

#nav{ view-transition-name: site-nav; }

@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: vt-out 150ms cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root){ animation: vt-in 240ms cubic-bezier(0,0,.2,1) both; }
}
@keyframes vt-out{ to{ opacity:0 } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px) } }

/* ---------- scroll-driven reveals ----------
   Same visual result as the .rv/.in pair, but driven by the element's
   own position in the scrollport rather than a class toggle — so it
   runs off the main thread and tracks scroll continuously instead of
   popping. The range finishes early on purpose: nothing should still
   be fading in by the time you're trying to read it. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{
      animation: rv-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
  }
}
@keyframes rv-in{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:none }
}

/* ---------- reading progress ----------
   Injected by archive.js on article pages only. Picks up whatever
   --accent the section sets, so the bar is pink in Lifting, violet in
   Mind, lime in Biomechanics. */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  background:var(--accent,var(--lime));
  transform:scaleX(0);transform-origin:0 50%;
  view-transition-name: progress-bar;
}
@supports (animation-timeline: scroll()){
  .progress{
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow{ to{ transform:scaleX(1) } }
@media (prefers-reduced-motion: reduce){ .progress{ display:none } }

/* ---------- pull quotes ----------
   These are the voice moments in a piece, so they get their own,
   slower scrub rather than being lumped in with .rv. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pull{
      animation: pull-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}
@keyframes pull-in{
  from{ opacity:.3; transform:translateY(10px) }
  to{ opacity:1; transform:none }
}

/* ---------- hero drift ----------
   The masthead fades slightly as it leaves rather than just scrolling
   away. Opacity and translate only — scaling live text mid-animation
   makes it look soft. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero h1, .hero .lede{
      animation: hero-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
  }
}
@keyframes hero-out{ to{ opacity:.35; transform:translateY(-10px) } }

/* ---------- touch behaviour ----------
   Stops a horizontal drag inside the timeline from chaining out into
   page scroll or firing pull-to-refresh mid-gesture. */
.scroll, .track{ overscroll-behavior: contain; }

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lime);margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor}

.tag{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid var(--line);
}
.tag.lifting{color:var(--hot)}
.tag.mind{color:var(--violet)}
.tag.biomech{color:var(--lime)}

.grad{background:linear-gradient(90deg,var(--lime),var(--violet) 55%,var(--hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.btn{
  font-family:var(--mono);font-size:13.5px;padding:13px 22px;border-radius:999px;
  border:1px solid var(--line);transition:.2s;display:inline-flex;align-items:center;gap:8px;
}
.btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.solid:hover{background:var(--lime);border-color:var(--lime)}
.btn.ghost:hover{border-color:var(--line-hi);color:var(--ink)}

/* Deliberately visible by default. A reveal effect must never be the
   thing that makes text legible — if the view timeline is inactive (page
   too short to scroll, unusual scroll container, unsupported browser) or
   JS never runs, the content has to still be there. The hidden start
   state is applied by the scroll-driven animation below, or inline by
   archive.js in the fallback path, and only ever by something that is
   definitely going to undo it. */
.rv{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}

/* ---------- landing hero ---------- */
.hero{padding:180px 0 90px}
.hero h1{font-size:clamp(52px,11vw,120px);font-weight:700;letter-spacing:-.035em}
.hero .lede{margin-top:24px;font-size:clamp(16px,2vw,20px);color:var(--ink-2);max-width:620px;line-height:1.6}

/* ---------- the menu ---------- */
.menu{border-top:1px solid var(--line);margin-top:60px}
.menu-item{
  display:grid;grid-template-columns:60px 1fr auto;gap:24px;align-items:center;
  padding:34px 8px;border-bottom:1px solid var(--line);
  transition:background .3s,padding .3s;position:relative;overflow:hidden;
}
.menu-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent,var(--lime));transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.menu-item:hover{background:rgba(255,255,255,.025);padding-left:20px}
.menu-item:hover::before{transform:scaleY(1);transform-origin:top}
.menu-item .idx{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.menu-item h2{font-size:clamp(24px,4.2vw,38px);font-weight:600}
.menu-item .sub{color:var(--ink-2);font-size:15px;margin-top:8px;line-height:1.55;max-width:520px}
.menu-item .go{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap;
  transition:color .25s,transform .25s}
.menu-item:hover .go{color:var(--accent,var(--lime));transform:translateX(4px)}
@media (max-width:640px){
  .menu-item{grid-template-columns:34px 1fr;gap:14px;padding:26px 4px}
  .menu-item .go{display:none}
}

/* ---------- section index pages ---------- */
.page-head{padding:150px 0 56px}
.page-head h1{font-size:clamp(36px,6.5vw,62px);font-weight:700;margin-top:6px}
.page-head .deck{margin-top:22px;color:var(--ink-2);font-size:17.5px;line-height:1.65;max-width:660px}

.topics{display:flex;flex-direction:column;gap:14px;padding-bottom:100px}
.topic{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 30px;transition:.25s;position:relative;
}
.topic:hover{background:var(--card-hi);border-color:var(--line-hi);transform:translateY(-2px)}
.topic .n{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:12px;display:block}
.topic h3{font-size:clamp(19px,2.6vw,24px);font-weight:600;line-height:1.25}
.topic p{color:var(--ink-2);font-size:15px;line-height:1.62;margin-top:12px;max-width:640px}
.topic .read{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:18px;display:inline-flex;gap:8px;align-items:center}
.topic:hover .read{color:var(--ink)}

/* ---------- article ---------- */
.article-head{padding:150px 0 44px;border-bottom:1px solid var(--line)}
.article-head h1{font-size:clamp(32px,5.6vw,54px);font-weight:700;margin:18px 0 0;max-width:900px}
.article-head .deck{margin-top:22px;font-size:19px;color:var(--ink-2);line-height:1.6;max-width:660px}
.article-meta{margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap}

.prose{padding:56px 0 40px;font-size:18px;line-height:1.78;color:#dedcf0}
.prose > * + *{margin-top:26px}
.prose h2{font-size:clamp(24px,3.4vw,31px);font-weight:600;margin-top:56px;color:var(--ink);line-height:1.2}
.prose h3{font-size:20px;font-weight:600;margin-top:40px;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose em{color:var(--ink)}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin-top:12px}
.prose li::marker{color:var(--ink-3)}
.prose a{color:var(--lime);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(196,255,92,.35)}
.prose a:hover{text-decoration-color:var(--lime)}

.pull{
  border-left:2px solid var(--accent,var(--lime));padding:6px 0 6px 26px;margin:44px 0;
  font-family:var(--disp);font-size:clamp(20px,3vw,26px);line-height:1.35;color:var(--ink);
  font-weight:500;letter-spacing:-.015em;
}
.callout{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;padding:24px 26px;
  font-size:16px;line-height:1.7;color:var(--ink-2);
}
.callout strong{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent,var(--lime));margin-bottom:10px;font-weight:500}

.article-foot{border-top:1px solid var(--line);padding:44px 0 100px}
.article-foot .lbl{font-family:var(--mono);font-size:12px;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.next-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;transition:.25s}
.next-card:hover{background:var(--card-hi);border-color:var(--line-hi)}
.next-card h4{font-size:19px;font-weight:600;line-height:1.3}
.next-card span{font-family:var(--mono);font-size:12px;color:var(--ink-3);display:block;margin-top:10px}

.backlink{font-family:var(--mono);font-size:13px;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.backlink:hover{color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0;font-family:var(--mono);font-size:13px;
  color:var(--ink-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a:hover{color:var(--ink)}