/* About page (about.html) — shared pieces: header, labels, timeline, tiles, CTA, scroll reveal.
   Figma: Portfolio / Main (756:18866). Each version keeps its own layout CSS inline. */
:root { --faint: #a3a3a3; --label: #5e5e5e; }
:root[data-theme="dark"] { --faint: #6f6f6f; --label: #9a9a9a; }

/* Header: name + chips (same as Home) */
.name { font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: .4px; color: var(--brand); white-space: nowrap; }
.chips { display: flex; margin-top: 12px; }
.chip { background: var(--chip); color: var(--chip-ink); font: 400 14px/10px Inter, sans-serif; letter-spacing: -.56px; padding: 8px 12px; border-radius: 30px; white-space: nowrap; }

/* Section label: BIO / EXPERIENCE / EDUCATION / OUTSIDE WORK */
.lbl { font-weight: 500; font-size: 16px; letter-spacing: -.32px; color: var(--label); text-transform: uppercase; }

/* Bio paragraphs */
.bio { display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.3; color: var(--muted); }

/* Timeline: orange dot per entry, a 1px line joins each dot to the next */
.tl { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.tl li { position: relative; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.tl li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.tl li:not(:last-child)::after { content: ""; position: absolute; left: 3.5px; top: 12px; bottom: -32px; width: 1px; background: var(--brand); }
.tl .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.tl .who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl h3 { font-weight: 500; font-size: 18px; letter-spacing: -.36px; color: var(--cs-title); }
.tl .org, .tl time { font-size: 14px; line-height: 1.282; letter-spacing: -.28px; color: var(--label); }
.tl time { flex: none; white-space: nowrap; }
.tl li h3 { transition: color .25s; }
.tl li:hover h3 { color: var(--brand); }
.tl p { font-size: 14px; line-height: 1.282; letter-spacing: -.28px; color: var(--faint); }
.tl-group { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 600px) {
  .tl .row { flex-direction: column; gap: 4px; }
}

/* Outside work: photo tiles. A tile without a photo shows a grey placeholder until one is added. */
.tile { display: flex; flex-direction: column; gap: 12px; }
.tile .ph { position: relative; overflow: hidden; border-radius: 8px; background: var(--sheet); aspect-ratio: 1; }   /* square: photos support the text, they don't dominate it */
.tile .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover .ph img { transform: scale(1.015); }
.tile .ph:not(:has(img))::after { content: "Photo"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--muted); }
.tile h3 { font-weight: 500; font-size: 18px; letter-spacing: -.36px; color: var(--cs-title); }
.tile p { margin-top: -6px; font-size: 14px; line-height: 1.282; letter-spacing: -.28px; color: var(--faint); }

/* Closing line + button */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cta p { font-size: 24px; line-height: 1.2; letter-spacing: -.24px; color: var(--text); }
.cta p em { font-style: normal; color: var(--brand); }
.btn { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 36px; background: var(--active-bg); color: var(--active-ink);
       font-size: 14px; letter-spacing: -.28px; transition: opacity .2s, transform .25s cubic-bezier(.2,.7,.2,1); }
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.97); }

/* Scroll reveal (about.js): blocks below the first screen fade + rise in once */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
.rv.in { opacity: 1; transform: none; }

/* ---- Home skeleton, reused by the one-screen versions J / K / L (same rules as index.html):
   one viewport tall — header (name, chips, intro) · spacer · toolbar · content that takes the leftover height ---- */
:root { --space: 114px; --tick-off: #b5b5b5; }
:root[data-theme="dark"] { --tick-off: #4a4a4a; }
.page { height: 100svh; min-height: 600px; display: flex; flex-direction: column; padding: var(--pad) 0; }
.top { flex: none; padding: 0 var(--pad); max-width: calc(606px + 2 * var(--pad)); }
.top p { margin-top: 12px; font-size: 16px; line-height: 1.282; letter-spacing: -.32px; color: var(--muted); }
.spacer { flex: 1 1 0; min-height: 24px; max-height: var(--space); }
.bar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 var(--pad); margin-bottom: 32px; min-height: 30px; }
.ticks { display: flex; gap: 10px; }
.ticks button { display: flex; align-items: center; padding: 10px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; transition: background .3s; }
.ticks i { display: block; width: 2px; height: 10px; border-radius: 4px; background: var(--tick-off); transition: background .3s; }
.ticks button.on { background: var(--chip); }
.ticks button.on i { background: var(--text); }
.ticks button:not(.on):hover i { background: var(--muted); }
.views { display: flex; margin-left: auto; }
.views button { display: flex; align-items: center; gap: 6px; padding: 6px 13px; border: 0; border-radius: 24px; background: transparent; color: #7c7c7c;
                font: inherit; font-size: 14px; letter-spacing: -.28px; line-height: 18px; cursor: pointer; transition: background .3s, color .3s; }
.views button[aria-pressed="true"] { background: var(--chip); color: var(--text); }
.views button:not([aria-pressed="true"]):hover { color: var(--text); }
.views svg { width: 18px; height: 18px; display: block; }
.t { font-size: 12px; line-height: 1.282; letter-spacing: -.24px; padding: 6px 8px; border-radius: 23px; border: 1px solid currentColor; white-space: nowrap; }
.t-work { color: var(--brand); }
.t-study { color: var(--info); }
.t-life { color: var(--muted); }
.ph-label { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; text-align: center; font-size: 14px; color: var(--muted); }
.ph-label small { font-size: 12px; color: var(--faint); }
@media (max-width: 900px) { :root { --space: 80px; } }
@media (max-width: 600px) {
  :root { --space: 48px; }
  .top { padding-top: 65px; }
  .top p { font-size: 15px; }
  .bar { margin-bottom: 20px; }
}