/* jonasfriedman.com — About page only (/about-2).
   The homepage's chrome (tokens, fixed header with the fade, timecode
   readout, faces, amber) and its layered desk photograph, with the live
   page's copy verbatim. Chrome rules are copied from home.css rather than
   shared, so nothing here can move the approved homepage. Loads after
   main.css. */

/* ── Tokens (same values as home.css) ───────────── */
body.about {
  --sc-canvas:      #0d0d0d;
  --sc-surface:     #141414;
  --sc-ink:         #ebebeb;
  --sc-ink-soft:    #9a9389;
  --sc-accent:      #e0873f;
  --sc-accent-ink:  #14100c;
  --sc-font-display: 'Big Shoulders Display', 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sc-font-text:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sc-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sc-shadow-color: 20 20% 2%;
  --sc-r-sm: 3px; --sc-r-md: 3px; --sc-r-lg: 3px;

  --about-muted: var(--sc-ink-soft);
  --about-header-h: 4.6rem;

  background-color: var(--sc-canvas);
  background-image: none;
  color: var(--sc-ink);
  overflow-x: clip;
}

/* ── Fixed header (as on home) ──────────────────── */
.site-header--about {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,0.55), rgba(8,8,8,0));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.site-header--about::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,8,8,0.96), rgba(14,14,14,0.9));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.5);
  backdrop-filter: blur(calc(var(--hdr, 0) * 14px));
  -webkit-backdrop-filter: blur(calc(var(--hdr, 0) * 14px));
  opacity: var(--hdr, 0);
}
.site-header--about .site-nav { position: relative; z-index: 1; }

/* ── Timecode chrome (as on home) ───────────────── */
.nav-left { display: flex; align-items: center; gap: 1.5rem; }
.tc__read--bar {
  font-family: var(--sc-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
  opacity: 0.85;
}
.tc {
  position: fixed;
  left: var(--sc-gutter);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: var(--sc-z-chrome);
  pointer-events: none;
  font-family: var(--sc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--about-muted);
  font-variant-numeric: tabular-nums;
}
.tc__read { margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--sc-ink); }
.tc .tc__read--float { display: none; }
.tc__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.is-end .tc__dot { opacity: 0.35; }
.tc__label { opacity: 0.55; }

.textlink {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.textlink:hover { opacity: 0.65; }
.textlink:active { transform: translateY(1px); }

/* ── The desk (hero) ────────────────────────────── */
.desk { background: #0a0a0a; }
.desk__plane {
  position: absolute;
  inset: -7vh 0;
  z-index: 1;
  pointer-events: none;
}
.desk__plane img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 28% 50%;
}
.desk__plane--subject { z-index: 3; }
/* The title sits between the planes, as the name does on the homepage. */
.desk__title {
  position: absolute;
  z-index: 2;
  left: var(--sc-gutter);
  right: var(--sc-gutter);
  bottom: clamp(4rem, 15vh, 10rem);
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 900;
  font-size: clamp(4rem, 13vw, 16rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--sc-ink);
  text-align: right;
  opacity: calc(0.94 - var(--sc-p, 0) * 0.2);
  pointer-events: none;
  user-select: none;
}
.desk__floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 22%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 55%, var(--sc-canvas) 100%);
}

/* ── The bio ────────────────────────────────────── */
.about-body-act { padding: clamp(3rem, 7vh, 5rem) 0 0; background: var(--sc-canvas); }
.about { padding-bottom: clamp(3rem, 7vh, 5rem); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.about__bio p {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.65;
  color: var(--sc-ink);
  opacity: 0.92;
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0 0 1.4rem;
}
.about__bio p a { border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent); transition: border-color var(--sc-d-fast) var(--sc-ease-out); }
.about__bio p a:hover { border-color: var(--sc-ink); }
.about__bio em { font-style: italic; }

/* Paragraph-by-paragraph reveal under the wheel. Each paragraph is held
   until its top crosses the lower quarter of the viewport, then rises in;
   about.js sets .is-in once. Guarded on .js so the copy is plain without it. */
.js .about__bio [data-bio-in] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 720ms var(--sc-ease-out), transform 720ms var(--sc-ease-out);
}
.js .about__bio [data-bio-in].is-in { opacity: 0.92; transform: none; }
/* Reduced motion keeps the paragraph-by-paragraph arrival (an opacity fade
   is not motion) and drops only the rise. */
@media (prefers-reduced-motion: reduce) {
  .js .about__bio [data-bio-in] { transform: none; transition-property: opacity; }
}
.about__more { margin-top: 0.6rem; }
.about__side .poster-slideshow {
  aspect-ratio: 2 / 3;
  border-radius: var(--sc-r-sm);
  overflow: hidden;
  box-shadow: var(--sc-e2), var(--sc-edge);
  margin: 0;
  max-width: none;
}

.about-body-act .site-footer { margin-top: clamp(2rem, 5vh, 4rem); padding-bottom: 6rem; }

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .desk__title { opacity: 0.94; }
}

/* ── Phone: its own design, not a resize ────────── */
@media (max-width: 860px) {
  body.about { --about-header-h: 4rem; }
  /* Two-row phone header (main.css, 740px and under). */
  @media (max-width: 740px) { body.about { --about-header-h: 5.8rem; } }

  .tc__read--bar { display: none; }
  .tc .tc__read--float {
    display: flex;
    font-size: 0.6rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--sc-r-pill);
    background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--sc-e1), var(--sc-edge);
  }

  /* Photo up top, the title across the lower part on a band. */
  .desk__plane img { object-position: 24% 30%; }
  /* On a phone he fills the frame, so the title sits in front of him, on
     the floor's band, instead of behind him where it cannot be read. */
  .desk__title {
    z-index: 4;
    font-size: clamp(3rem, 19vw, 7rem);
    bottom: clamp(3rem, 9vh, 6rem);
    text-align: left;
    opacity: 0.96;
  }
  .desk__floor { height: 44%; z-index: 3; }

  .about-body-act { padding-top: 2.5rem; }
  .about__grid { display: block; }
  .about__side .poster-slideshow { max-width: 320px; margin: 2.5rem auto 0; }
  .about-body-act .site-footer { padding-bottom: 4.5rem; }
}

/* Tablet portrait: the title spans the width so it reads past his head. */
@media (min-width: 600px) and (max-width: 860px) {
  .desk__title { font-size: clamp(6rem, 18vw, 11rem); }
  .desk__plane img { object-position: 28% 36%; }
}