/* ==========================================================================
   about.css — the About page's composition. Loaded after components.css.
   Uses ONLY existing tokens. Lifted out of the page's inline <style> when the
   page became generated (scripts/build-about.js), so the template carries
   content and this carries look — the same split every other page uses.
   ========================================================================== */

/* Section titles — large, bold, sentence case (matches the home treatment) */
.section-title { margin: 0 0 clamp(32px,5vh,56px); font-size: var(--type-h1);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }

/* §01 Hero split: oversized intro left, registration-circle portrait right.
   §01 and §02 are built to read as ONE opening panel: the headline sits over
   the bio in the same 7 columns, and the portrait sits over the quick facts in
   the same 5. They were pushed apart by the hero's bottom padding stacking on
   the next section's top padding — up to 332px of gap — which dropped the bio
   and the facts below the fold. Both are pulled in so the four pieces read
   together on one screen. */
.ab-hero { padding-top: clamp(88px,11vh,132px); padding-bottom: clamp(20px,3vh,36px); }
.ab-hero + .section { padding-top: clamp(20px,3vh,36px); }
.ab-hero__intro { font-size: clamp(30px,4vw,60px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.06; margin: 20px 0 0; }
.ab-portrait { width: 100%; max-width: min(360px, 60vw); aspect-ratio: 1;
  margin: 0 0 0 auto; border-radius: var(--radius-circle); overflow: hidden;
  background: var(--surface-2); }
.ab-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ab-portrait .img-ph { width: 100%; height: 100%; border: 0; border-radius: 0; }
@media (max-width: 1024px) {
  .ab-portrait { max-width: 300px; margin: 40px 0 0; }
}
/* Phones: the portrait fills the full content width, inside the page's side
   margins, instead of sitting as a small disc under the headline. It keeps the
   1:1 registration-circle crop (BRAND_GUIDE §5). */
@media (max-width: 640px) {
  .ab-portrait { max-width: none; width: 100%; margin: 40px 0 0; }
}

/* §02 Narrative + quick-facts table */
.ab-bio p { max-width: 46ch; }
.ab-bio p + p { margin-top: 20px; }

/* §03 Experience — timeline rows, separated by space */
.xp-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--gutter);
  padding: clamp(18px,2.4vh,28px) 0; align-items: start; }
.xp-when { font-family: var(--font-tech); font-size: var(--type-index);
  letter-spacing: 0.04em; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.xp-co { font-size: var(--type-h3); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.xp-role { color: var(--ink-60); margin: 4px 0 12px; }
.xp-note { max-width: 62ch; }
@media (max-width: 640px) { .xp-row { grid-template-columns: 1fr; gap: 8px; } }

/* §04 Skills — three accent-tick columns (no bars) */
.sk-col h3 { font-size: var(--type-h3); margin: 0 0 20px; }

/* Desktop: three columns side by side, no filter bar. */
.sk-tabs { display: none; }

/* Stacked (≤1024px): the three lists become one filtered list behind three
   buttons, so the section is a screen instead of three screens of scrolling.
   Gated on .js — without scripting every column stays visible and the heading
   inside each one still labels it. */
@media (max-width: 1024px) {
  .js .sk-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: clamp(28px, 4vh, 40px);
  }
  .sk-tab {
    padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--radius);
    background: transparent; color: var(--ink-60); cursor: pointer;
    font-size: var(--type-label); font-weight: 500;
    letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1;
    transition: color var(--t-micro) var(--ease-out),
                border-color var(--t-micro) var(--ease-out);
  }
  .sk-tab:hover { color: var(--ink); }
  .sk-tab.is-active { color: var(--accent); border-color: var(--accent); }
  /* The active column is the only one in flow; the rest are removed outright so
     they leave no gap in the stack. */
  .js .sk-col { display: none; }
  .js .sk-col.is-active { display: block; }
  /* The panel repeats its own heading, which the button already says. */
  .js .sk-col.is-active h3 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sk-tab { transition: none; } }

/* §05 Awards — image badge grid + list, cross-linked */
.aw-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: clamp(40px,6vh,64px); }
.aw-grid .badge { height: 96px; width: auto; padding: 12px; border-radius: var(--radius);
  display: inline-flex; align-items: center; overflow: hidden;
  background: var(--surface); }
.aw-grid .badge img { height: 100%; width: auto; display: block; object-fit: contain; }
.aw-list { }
.aw-row { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: baseline;
  padding: 12px 0; color: inherit; }
.aw-title { font-size: var(--type-h3); font-weight: 600; letter-spacing: -0.01em;
  transition: color var(--t-micro) var(--ease-out); }
/* Only an actual link reacts to hover — a row without an award URL renders as a
   <div>, and colouring it would promise a click that does nothing. */
a.aw-row:hover .aw-title { color: var(--accent); }
.aw-project { color: var(--ink-60); font-size: var(--type-caption); }
.aw-year { font-family: var(--font-tech); font-size: var(--type-index); color: var(--ink-30); }
@media (max-width: 640px) { .aw-row { grid-template-columns: 1fr auto; } .aw-project { display: none; } }

/* §06 Process — candid workshop photos in a 3-column grid. Was a horizontal
   swipe strip; a grid shows every shot at once instead of hiding most of them
   off the right edge, and the images are the craft evidence, so they should all
   be visible. Steps down to 2 columns below 900px. */
.ab-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter); margin-top: clamp(40px,6vh,64px); }
.ab-process > figure { margin: 0; }
@media (max-width: 900px) { .ab-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* §07 CTA band (dark) */
.ab-cta { text-align: left; }
.ab-cta__head { font-size: var(--type-h2); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.1; max-width: 20ch; }
.ab-cta__row { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 40px; margin-top: clamp(32px,5vh,48px); }
.ab-cta__email { font-size: var(--type-h3); font-weight: 500; color: var(--paper-on-dark);
  background-image: linear-gradient(var(--accent-on-dark), var(--accent-on-dark));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 200ms var(--ease-out), color 200ms var(--ease-out); }
.ab-cta__email:hover { color: var(--accent-on-dark); background-size: 100% 1px; }