/* justin.fm: the shell every page shares. The ink rail on the left (J mark, portrait), the
   paper side on the right, the links row at the bottom. The homepage and the inner pages
   (blog, about, fun) all load this, so the rail never moves between pages. */
:root{
  --ink:#101214;
  --ink-2:#14161A;
  --text:#3B3F48;
  --muted:#5A6072;
  --faint:#8A8F99;
  --paper:#FAFAFA;
  --white:#FFFFFF;
  --hair:rgba(20,22,26,.12);
  --dm:#2F5DFF;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --rail:clamp(380px,42vw,680px);
  --pad:clamp(28px,4.4vw,72px);
  --ease:cubic-bezier(.65,0,.35,1);
  --out:cubic-bezier(.2,.8,.2,1);
  --grid:
    repeating-linear-gradient(to right,rgba(255,255,255,.045) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0 1px,transparent 1px 64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);color:var(--ink-2);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;line-height:1.5;
  display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--dm);color:var(--white)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
}
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused !important}
/* page to page within the site: the rail is the same panel, so it holds still while the paper
   side cross-fades (cross-document view transitions; browsers without them just navigate) */
@view-transition{navigation:auto}
.rail{view-transition-name:rail}
::view-transition-old(rail),::view-transition-new(rail){animation:none}
::view-transition-old(rail){display:none}

/* ---------- rail ---------- */
.rail{
  position:sticky;top:0;height:100vh;
  background:var(--grid),var(--ink);color:var(--white);
  display:flex;flex-direction:column;
  padding:28px 30px 26px 46px;overflow:hidden;
}
.rail-top{display:flex;align-items:center}
.mark{display:flex;align-items:center}
.mark:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
/* the J: three copies; the coloured two only show during a glitch */
.jm{position:relative;width:22px;height:22px;display:block}
.jm svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.jm .jr,.jm .jc{opacity:0;mix-blend-mode:screen}
.jm.glitch .j0{animation:j0 .44s steps(1,end)}
.jm.glitch .jr{animation:jr .44s steps(1,end)}
.jm.glitch .jc{animation:jc .44s steps(1,end)}
@keyframes j0{
  0%{transform:none;clip-path:inset(0)}
  12%{transform:translateX(-1px);clip-path:inset(0 0 0 0)}
  30%{transform:translateX(2px);clip-path:inset(0 0 46% 0)}
  46%{transform:none;clip-path:inset(0)}
  62%{transform:translateX(-2px);clip-path:inset(30% 0 0 0)}
  78%,100%{transform:none;clip-path:inset(0)}
}
@keyframes jr{
  0%{opacity:.9;transform:translate(-3px,0);clip-path:inset(12% 0 58% 0)}
  18%{opacity:.9;transform:translate(4px,1px);clip-path:inset(62% 0 8% 0)}
  36%{opacity:.8;transform:translate(-2px,0);clip-path:inset(0 0 74% 0)}
  54%{opacity:.9;transform:translate(3px,0);clip-path:inset(40% 0 34% 0)}
  72%{opacity:.7;transform:translate(-1px,0);clip-path:inset(80% 0 0 0)}
  88%,100%{opacity:0;transform:none;clip-path:inset(0)}
}
@keyframes jc{
  0%{opacity:.9;transform:translate(3px,0);clip-path:inset(54% 0 20% 0)}
  18%{opacity:.8;transform:translate(-4px,0);clip-path:inset(6% 0 70% 0)}
  36%{opacity:.9;transform:translate(2px,-1px);clip-path:inset(70% 0 4% 0)}
  54%{opacity:.8;transform:translate(-3px,0);clip-path:inset(22% 0 52% 0)}
  72%{opacity:.6;transform:translate(1px,0);clip-path:inset(0 0 86% 0)}
  88%,100%{opacity:0;transform:none;clip-path:inset(0)}
}

.portrait{flex:1;min-height:0;position:relative;margin:22px -30px 18px -46px}
/* desktop: the portrait fills the whole rail, meeting its right and bottom edges */
@media (min-width:761px){.portrait{position:absolute;inset:0;margin:0}}
.rail-top,.rail-foot{position:relative;z-index:1}
.portrait canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rail-name{display:none}

/* ---------- links: the row along the bottom of every page ---------- */
.links{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;
  padding-top:16px;border-top:1px solid var(--hair);margin-top:clamp(18px,3vh,28px);
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;
}
.links a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);transition:color .2s}
.links a svg{width:10px;height:10px;opacity:.45;transition:transform .3s var(--out),opacity .2s}
.links a:hover{color:var(--dm)}
.links a:hover svg{opacity:1;transform:translate(1px,-1px)}
.links a:focus-visible{outline:2px solid var(--dm);outline-offset:3px;border-radius:2px}
.links a[aria-current="page"]{color:var(--dm)}

/* ---------- inner pages: the paper side scrolls, the rail stays ---------- */
.page{
  min-width:0;min-height:100vh;
  display:flex;flex-direction:column;
  padding:calc(var(--pad) * .78) var(--pad) calc(var(--pad) * .5);
}
.page > .links{margin-top:auto}
.page-body{width:100%;max-width:720px;padding-bottom:clamp(56px,9vh,96px)}
.crumbs{
  display:flex;gap:10px;align-items:center;color:var(--faint);
  margin-bottom:clamp(48px,11vh,120px);
}
.page .crumbs a{color:var(--muted);border:0;transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.page-title{
  font-size:clamp(48px,6vw,96px);font-weight:600;letter-spacing:-.05em;line-height:.92;
  color:var(--ink);margin-left:-.04em;
}
.page-lede{
  margin-top:clamp(14px,2vh,22px);
  font-size:clamp(18px,1.55vw,23px);line-height:1.38;letter-spacing:-.012em;color:var(--muted);max-width:40ch;
}

/* ---------- phone ---------- */
@media (max-width:760px){
  body{display:flex;flex-direction:column;min-height:100svh}
  .rail{flex:none}
  /* a title beside the whole face, no mark: the portrait box takes the art's own aspect, so
     the bottom-right cover fit never crops the crown */
  .rail{
    position:relative;height:auto;display:grid;
    grid-template-columns:1fr 50%;column-gap:10px;align-items:end;
    padding:24px 16px 0 16px;
  }
  .rail-top{display:none}
  .portrait{grid-column:2;grid-row:1;margin:0 -16px 0 0;flex:none;min-height:0;aspect-ratio:78 / 105}
  .rail-name{display:block;grid-column:1;grid-row:1;align-self:end;margin-bottom:20px;
    font-size:clamp(40px,12.5vw,56px);font-weight:600;letter-spacing:-.05em;line-height:.9;margin-left:-.03em}
  /* inner pages: a shorter band, the mark back on, the name beside the face */
  .rail.compact{grid-template-columns:1fr 34%;padding-top:18px}
  .rail.compact .rail-top{display:flex;grid-column:1;grid-row:1;align-self:start}
  .rail.compact .rail-name{font-size:clamp(28px,8.4vw,36px);margin-bottom:16px}
  .page{min-height:0;flex:1;padding:22px 16px 22px}
  .crumbs{margin-bottom:28px}
  .page-title{font-size:clamp(40px,11vw,52px)}
  .page-lede{font-size:18px}
  /* seven links as a 4 + 3 grid, columns aligned, never a ragged wrap */
  .links{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:12px 10px;margin-top:18px;padding-top:14px;font-size:14px}
}
/* the narrowest phones: the arrows go so four still fit across */
@media (max-width:379px){.links a svg{display:none}}