/* About — /about/. Tokens, header, footer, join-card, capture, and the
   homepage hero/shader/hosts chrome come from golden.css. This file is
   the about-only pieces: companion-hero sizing, origin block, host bios,
   and the resources fan. */

/* Companion to the homepage hero: same .hero shell + shader, slightly
   shorter greeting so it can sit large without wrapping into three lines. */
.about-hero{padding:var(--space-section) 0}
.about-hero h1.head{max-width:none}
.about-hero-lede{
  font-family:var(--font-serif);
  font-size:var(--fs-lead);
  line-height:var(--fs-lead-lh);
  color:var(--ink);
  max-width:62ch;
  margin:var(--space-24) auto 0;
  text-wrap:balance;
}

.about-shot{margin:0}
.about-shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center 20%;
  border:1px solid var(--border);
}
/* Both portraits share the 3:4 frame; Tim's crop keeps the jump and its shadow. */
.about-shot-tim img{object-position:center 60%}

.about-block{padding:var(--space-section) 0;border-top:1px solid var(--hair)}
/* One text edge: the origin prose and both bios start on the same column. The portraits
   fill the left column below; here the origin heading does, so the column is never empty
   (Tim, 2026-10-05: an empty left column read as a missing image). */
.about-reading{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);column-gap:var(--space-48);align-items:start}
.about-reading > h2{grid-column:1;grid-row:1}
.about-reading > .about-prose{grid-column:2;grid-row:1;margin-top:0}
.about-block h2,.about-person-copy h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-section);
  letter-spacing:var(--fs-section-ls);
  line-height:var(--fs-section-lh);
  color:var(--ink);
}
.about-rx-copy h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-section);
  letter-spacing:var(--fs-section-ls);
  line-height:var(--fs-section-lh);
  color:var(--ink);
}
.about-prose{
  font-family:var(--font-serif);
  font-size:var(--fs-prose);
  line-height:var(--fs-prose-lh);
  color:var(--ink);
  margin-top:var(--space-16);
}
.about-prose p{margin:0 0 var(--space-16);max-width:62ch}
.about-prose p:last-child{margin-bottom:0}
.about-prose a{color:var(--clay);border-bottom:1px solid var(--border)}
.about-prose a:hover{color:var(--ink)}

.about-person{padding:var(--space-section) 0;border-top:1px solid var(--hair)}
.about-person-grid{
  display:grid;
  grid-template-columns:minmax(220px,340px) minmax(0,1fr);
  gap:var(--space-48);
  align-items:start;
}
.about-person-shot{max-width:340px;width:100%}
/* The role is the name's byline (SYSTEM.md Type): mono --fs-meta, muted. */
.about-role{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  letter-spacing:var(--fs-meta-ls);
  color:var(--muted);
  margin:10px 0 0;
}
.about-person-copy .about-prose{margin-top:var(--space-24)}
/* SYSTEM.md meta links: clay, underlined on hover only. 44px tall at ≤680 (see the media query). */
.about-site{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  color:var(--clay);
  text-decoration:underline 1px transparent;
  text-underline-offset:4px;
  transition:text-decoration-color .16s;
  margin-top:var(--space-24);
}
.about-site:hover{text-decoration-color:currentColor}

/* Join card chrome is golden.css; this stylesheet only loads on /about/. */
.join{padding:var(--space-32) 0 var(--space-24)}
.join-msg:empty{display:none}

/* Resources promo — one link; the whole row goes to /resources/.
   Copy on top, full-width fan underneath so the interactive tools can show a
   real strip of UI. Each card is a 16:9 window with the screenshot pinned
   top-left (the tool chrome), then the *frame* is stepped and lightly
   tilted. Later cards sit on top, so the visible strip of every covered
   card is its left edge — the same top-left crop. Do not transform the
   <img>: rotating the bitmap made the UIs look warped. */
/* Unboxed: the join card is the closing beat, and this row sits under it on the paper. */
.about-rx-sec{padding:var(--space-block) 0 var(--space-section)}
.about-rx{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  color:inherit;
  overflow:hidden;
}
.about-rx-copy p{
  font-family:var(--font-serif);
  font-size:var(--fs-prose);
  line-height:var(--fs-prose-lh);
  color:var(--ink);
  margin-top:12px;
  max-width:54ch;
}
.about-rx-go{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  color:var(--clay);
  margin-top:16px;
  border-bottom:1px solid transparent;
  transition:border-color .16s,color .16s;
}
.about-rx:hover .about-rx-go,.about-rx:focus-visible .about-rx-go{
  color:var(--ink);
  border-bottom-color:var(--ink);
}

.about-rx-fan{
  /* Eight cards: keep the same overall span the seven-card fan used
     (6×100px), so --step is 6/7 of the old values. */
  --step:86px;
  --tilt:4deg;
  --card-w:240px;
  --card-h:135px;
  position:relative;
  height:228px;
  pointer-events:none;
}
.about-rx:hover .about-rx-fan,.about-rx:focus-visible .about-rx-fan{
  --step:98px;
  --tilt:5deg;
}
.about-rx-card{
  position:absolute;
  left:50%;
  bottom:40px;
  width:var(--card-w);
  height:var(--card-h);
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--border);
  transform:translateX(calc(-50% + (var(--n) * var(--step)))) rotate(calc(var(--n) * var(--tilt)));
  transform-origin:50% 100%;
  z-index:var(--z);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.about-rx-card img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top left;
  transform:none;
}
/* Must match resourceFan in about.njk — eight interactive tools, no
   reading list. Even count means no card sits on the midline. */
.about-rx-card:nth-child(1){--n:-3.5;--z:1}
.about-rx-card:nth-child(2){--n:-2.5;--z:2}
.about-rx-card:nth-child(3){--n:-1.5;--z:3}
.about-rx-card:nth-child(4){--n:-0.5;--z:4}
.about-rx-card:nth-child(5){--n:0.5;--z:5}
.about-rx-card:nth-child(6){--n:1.5;--z:6}
.about-rx-card:nth-child(7){--n:2.5;--z:7}
.about-rx-card:nth-child(8){--n:3.5;--z:8}

@media (max-width:980px){
  /* The bio column drops under ~30 characters a line below this, so the two columns stack. */
  .about-reading,.about-person-grid{grid-template-columns:1fr;gap:var(--space-24)}
  .about-reading > h2,.about-reading > .about-prose{grid-column:auto;grid-row:auto}
  .about-rx-fan{--step:67px;--tilt:3.5deg;--card-w:200px;--card-h:112px;height:196px}
  .about-rx:hover .about-rx-fan,.about-rx:focus-visible .about-rx-fan{--step:75px;--tilt:4deg}
}
@media (max-width:680px){
  .about-site{padding:15px 0;margin-top:5px}
  .about-block,.about-person{padding:var(--space-block) 0}
  .about-person-shot{max-width:none}
  .about-rx-fan{--step:34px;--tilt:3deg;--card-w:148px;--card-h:83px;height:168px}
  .about-rx-card{bottom:32px}
  .about-rx:hover .about-rx-fan,.about-rx:focus-visible .about-rx-fan{--step:39px;--tilt:3.5deg}
}
@media (max-width:400px){
  .about-rx-fan{--step:24px;--tilt:2.5deg;--card-w:124px;--card-h:70px;height:148px}
  .about-rx:hover .about-rx-fan,.about-rx:focus-visible .about-rx-fan{--step:27px;--tilt:3deg}
}
@media (prefers-reduced-motion:reduce){
  .about-rx-card{transition:none}
}

/* The browse link names the destination; its reach covers the surrounding row. */
.about-rx{position:relative;overflow:visible;container-type:inline-size}
.about-rx-go::after{content:"";position:absolute;inset:0}
.about-rx:focus-within{outline:2px solid var(--clay);outline-offset:var(--space-2)}
.about-rx-go:focus-visible{outline:none}
/* Fit all eight rotated cards to the fan's available width, including hover. */
.about-rx-fan{--card-w:clamp(124px,22vw,240px);--card-h:calc(var(--card-w) * 9 / 16);--step:calc((100cqw - var(--card-w) - var(--space-64) - var(--space-32)) / 7);--tilt:3deg}
.about-rx:hover .about-rx-fan,.about-rx:focus-within .about-rx-fan{--step:calc((100cqw - var(--card-w) - var(--space-64) - var(--space-32)) / 7);--tilt:3.5deg}
.about-rx:hover .about-rx-go,.about-rx:focus-within .about-rx-go{color:var(--clay);border-bottom-color:currentColor}
@media (max-width:680px){.about-rx-go{min-width:44px;min-height:44px;display:inline-flex;align-items:center;gap:var(--space-8)}}
/* SYSTEM-CANDIDATE: this page's reduced-motion gate includes colour fades. */
@media (prefers-reduced-motion:reduce){body *,body *::before,body *::after{transition:none!important;animation:none!important}}