/* ── The rail ─────────────────────────────────────────────────────────
   One navigation for the whole site. Fixed to the left edge on every
   page, including the homepage, so it never shifts as you move around.
   Under 1024px it collapses to a block at the top.                    */

:root{
  /* the rail lives inside the same centred container the homepage used,
     so it sits at the container's left edge rather than the viewport's */
  --rail-maxw: 1560px;
  --rail-gutter: clamp(24px, 4vw, 72px);
  --rail-gap: clamp(30px, 5vw, 88px);
  --rail-w: clamp(290px, 25vw, 368px);
  --rail-top: clamp(34px, 5.6vh, 72px);
  --rail-left: max(var(--rail-gutter),
                   calc(50vw - (var(--rail-maxw) / 2) + var(--rail-gutter)));
  --rail-paper:#FBFAF7; --rail-ink:#12120F; --rail-soft:#6C6A63;
  --rail-faint:#A3A099; --rail-line:#E9E6DF; --rail-accent:#2F6F5E;
}

.ps-rail{
  box-sizing:border-box; background:var(--rail-paper); color:var(--rail-ink);
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; justify-content:space-between; gap:18px;
  padding:var(--rail-top) 0 clamp(24px,3.4vh,42px);
}
.ps-rail *{ box-sizing:border-box; }
.ps-rail a{ color:inherit; text-decoration:none; }

.ps-rail .r-back{ display:inline-block; font-size:13px; color:var(--rail-faint);
  margin-bottom:14px; }
.ps-rail .r-back:hover{ color:var(--rail-accent); }

.ps-rail .r-name{ font-size:clamp(20px,1.62vw,25px); font-weight:600;
  letter-spacing:-.035em; line-height:1.1; margin:0; white-space:nowrap; }
.ps-rail .r-name a:hover{ color:var(--rail-accent); }
.ps-rail .r-role{ font-size:14px; font-weight:500; color:var(--rail-accent);
  margin:11px 0 0; line-height:1.45; }

.ps-rail .r-bio{ font-size:14.5px; line-height:1.62; color:var(--rail-soft);
  margin-top:16px; max-width:40ch; }
.ps-rail .r-bio p + p{ margin-top:11px; }
.ps-rail .r-bio a{ color:var(--rail-accent); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:2px;
  text-decoration-color:rgba(47,111,94,.35); }
.ps-rail .r-bio a:hover{ text-decoration-color:var(--rail-accent); }

.ps-rail .r-menu{ margin-top:24px; display:grid; gap:2px; }
.ps-rail .r-menu a{ display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; font-size:14.5px; padding:7px 0; color:var(--rail-soft);
  border-bottom:1px solid transparent; }
.ps-rail .r-menu a .n{ font-size:11.5px; color:var(--rail-faint);
  font-variant-numeric:tabular-nums; }
.ps-rail .r-menu a:hover{ color:var(--rail-accent); }
.ps-rail .r-menu a.on,
.ps-rail .r-menu a[aria-current="page"]{ color:var(--rail-accent);
  border-bottom-color:var(--rail-accent); }
/* the two outbound links sit a shade back, so the group reads without a rule */
.ps-rail .r-menu a[target="_blank"]{ color:var(--rail-faint); }
.ps-rail .r-menu a[target="_blank"]:first-of-type{ margin-top:12px; }
.ps-rail .r-menu a[target="_blank"]:hover{ color:var(--rail-accent); }

.ps-rail .r-foot{ font-size:12.5px; color:var(--rail-faint);
  display:flex; flex-direction:column; gap:5px; }
.ps-rail .r-foot a:hover{ color:var(--rail-accent); }

@media (min-width:1024px){
  body.has-rail{ padding-left:calc(var(--rail-left) + var(--rail-w) + var(--rail-gap));
    padding-right:var(--rail-gutter); }
  .ps-rail{ position:fixed; top:0; bottom:0; left:var(--rail-left);
    width:var(--rail-w); z-index:60;
    height:100dvh; overflow-y:auto; scrollbar-width:none; }
  .ps-rail::-webkit-scrollbar{ display:none; }
  /* content starts exactly level with the name */
  body.has-rail > main{ padding-top:var(--rail-top); }
}

@media (max-width:1023px){
  /* ── Small screens ──────────────────────────────────────────────────
     The rail becomes a compact header instead of a 600px wall of bio.
     It keeps the name, the section links as a scrollable row, and the
     way to reach me. The bio stays only on the homepage, where it is
     the introduction rather than chrome.                             */
  .ps-rail{ position:static; width:auto; height:auto; gap:0;
    padding:clamp(20px,5vw,30px) clamp(20px,5vw,28px) clamp(14px,3vw,20px);
    border-bottom:1px solid var(--rail-line); }

  .ps-rail .r-back{ margin-bottom:10px; }
  .ps-rail .r-name{ font-size:20px; }
  .ps-rail .r-role{ font-size:12.5px; margin-top:6px; }

  .ps-rail .r-bio{ display:none; }
  .ps-rail--home .r-bio{ display:block; font-size:14.5px; margin-top:12px; max-width:none; }
  .ps-rail--home .r-bio p + p{ margin-top:9px; }

  /* the section links run across, and scroll if they need to */
  /* no negative bleed here: a couple of pages have their own container
     rules that turn it into a wider box and push the page sideways */
  .ps-rail, .ps-rail > div{ max-width:100%; min-width:0; }
  .ps-rail .r-menu{ display:flex; gap:6px; margin-top:16px; max-width:100%;
    overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .ps-rail .r-menu::-webkit-scrollbar{ display:none; }
  .ps-rail .r-menu a{ flex:0 0 auto; padding:7px 13px; border:1px solid var(--rail-line);
    border-radius:999px; font-size:13.5px; white-space:nowrap; }
  .ps-rail .r-menu a .n{ display:none; }
  .ps-rail .r-menu a.on,
  .ps-rail .r-menu a[aria-current="page"]{ background:var(--rail-accent);
    border-color:var(--rail-accent); color:#fff; }
  .ps-rail .r-menu a[target="_blank"]{ margin-top:0; }

  .ps-rail .r-foot{ flex-direction:row; gap:16px; margin-top:14px; }

  /* content needs its own gutters once the rail is not beside it */
  body.has-rail > main{ padding-top:clamp(26px,6vw,40px); }
  /* the homepage column is main itself, so it needs the gutters directly */
  body.has-rail > main.feed{ padding-left:clamp(20px,5vw,28px);
    padding-right:clamp(20px,5vw,28px); }
}

@media (max-width:520px){
  .ps-rail .r-name{ font-size:19px; }
  .ps-rail--home .r-bio{ font-size:14px; }
}