/* ============================================================
   pages/about.css
   Styles for /about (about.html).
   Layout: hero with portrait slot · manifesto · journey timeline
   · toolkit · education + languages.
   ============================================================ */

.about-page { background: var(--c-paper); }

/* ─── HERO ──────────────────────────────────────────────── */

.ab-hero {
  padding: var(--space-md) var(--pad) var(--space-2xl);
  position: relative;
}
.ab-hero__body {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap-hero);
  align-items: center;
  padding: var(--space-xl) 0 var(--space-xl);
}
/* min-width: 0 lets grid columns shrink to their fr allocation
   instead of expanding to fit content (prevents portrait squeezing) */
.ab-hero__body > * { min-width: 0; }
.ab-hero__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 180px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: 0;
  overflow-wrap: break-word;
}
.ab-hero__title em { font-style: italic; color: var(--c-accent); }

.ab-hero__lede {
  font-family: var(--f-serif);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--c-ink-2);
  max-width: 38ch;
  margin: 0;
}
.ab-hero__lede em { color: var(--c-accent); font-style: italic; }

/* Portrait placeholder — A4-ish ratio */
.ab-portrait {
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  background: var(--c-paper-2);
  border: var(--bw) solid var(--c-rule);
  position: relative;
  overflow: hidden;
}
.ab-portrait::before {
  /* diagonal hatching = "photo slot" */
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      var(--c-paper-2) 0 10px,
      var(--c-paper-3) 10px 20px);
}
.ab-portrait__label {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--c-paper);
  border: var(--bw) solid var(--c-accent);
  color: var(--c-accent);
  padding: 4px 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
}
.ab-portrait__hint {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  z-index: 2;
  text-align: center;
  padding: 16px;
}
.ab-portrait__hint .big {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--c-ink-2);
  text-transform: none;
}
.ab-portrait__corners::before,
.ab-portrait__corners::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: var(--bw) solid var(--c-accent);
  z-index: 2;
}
.ab-portrait__corners::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.ab-portrait__corners::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.ab-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}

.ab-hero__meta {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gutter);
  padding-top: var(--space-md);
  border-top: var(--bw) solid var(--c-rule);
}

/* ─── MANIFESTO ─────────────────────────────────────────── */

.ab-manifesto {
  padding: var(--space-3xl) var(--pad);
  border-top: var(--bw) solid var(--c-rule);
}
.ab-manifesto__body {
  padding-top: var(--space-xl);
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-gutter);
}
.ab-manifesto__kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.ab-manifesto__text {
  display: flex; flex-direction: column; gap: var(--space-md);
}
.ab-manifesto__text p {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-ink);
}
.ab-manifesto__text p em { color: var(--c-accent); font-style: italic; }
.ab-manifesto__text p .dropcap {
  float: left;
  font-family: var(--f-serif);
  font-size: 4.6em;
  line-height: 0.78;
  padding: 10px 14px 0 0;
  color: var(--c-accent);
}

/* ─── JOURNEY (timeline) ────────────────────────────────── */

.ab-journey {
  padding: var(--space-3xl) var(--pad);
  border-top: var(--bw) solid var(--c-rule);
}
.ab-journey__list {
  margin-top: var(--space-xl);
  border-top: var(--bw2) solid var(--c-rule);
}
.ab-journey__row {
  display: grid;
  grid-template-columns: 1fr 4fr 6fr 1fr;
  gap: var(--space-gutter);
  align-items: baseline;
  padding: var(--space-lg) 0;
  border-bottom: var(--bw) solid var(--c-rule);
}
.ab-journey__year {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-ink-mute);
  text-transform: uppercase;
}
.ab-journey__name {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1;
}
.ab-journey__name em { font-style: italic; color: var(--c-accent); }
.ab-journey__desc {
  font-family: var(--f-grot);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink-2);
}
.ab-journey__role {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

/* ─── TOOLKIT ───────────────────────────────────────────── */

.ab-toolkit {
  padding: var(--space-3xl) var(--pad);
  border-top: var(--bw) solid var(--c-rule);
}
.ab-toolkit__body {
  padding-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-hero);
}
.ab-toolkit__col h3 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--bw) solid var(--c-rule);
  display: flex; justify-content: space-between;
}
.ab-toolkit__col h3 b { color: var(--c-accent); font-weight: 700; }

/* ─── EDU + LANGS ───────────────────────────────────────── */

.ab-edu {
  padding: var(--space-3xl) var(--pad);
  border-top: var(--bw) solid var(--c-rule);
}
.ab-edu__body {
  padding-top: var(--space-xl);
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: var(--gap-hero);
}
.ab-edu__list {
  border-top: var(--bw) solid var(--c-rule);
}
.ab-edu__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: var(--bw) solid var(--c-rule);
  align-items: baseline;
}
.ab-edu__name {
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.005em;
}
.ab-edu__name em { font-style: italic; color: var(--c-accent); }
.ab-edu__name small {
  display: block;
  font-family: var(--f-grot);
  font-size: 13px;
  color: var(--c-ink-mute);
  margin-top: 2px;
  letter-spacing: 0;
}
.ab-edu__year {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.ab-langs {
  border-top: var(--bw) solid var(--c-rule);
}
.ab-langs__row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: var(--space-md) 0;
  border-bottom: var(--bw) solid var(--c-rule);
  align-items: baseline;
}
.ab-langs__n {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.005em;
}
.ab-langs__l {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ─── CTA strip ─────────────────────────────────────────── */

.ab-cta {
  padding: var(--space-2xl) var(--pad);
  border-top: var(--bw) solid var(--c-rule);
}
.ab-cta__row {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: var(--gap-cta);
  align-items: end;
}
.ab-cta__big {
  font-family: var(--f-serif);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 400;
}
.ab-cta__big em { font-style: italic; color: var(--c-accent); }
.ab-cta__row .btn { justify-self: end; }

/* ─── MOBILE ────────────────────────────────────────────── */

/* Medium screens: title 11vw is too large for the narrow 7fr column —
   cap it before the portrait gets squeezed to nothing */
@media (min-width: 961px) and (max-width: 1200px) {
  .ab-hero__title { font-size: clamp(40px, 7.5vw, 96px); }
}

@media (max-width: 960px) {
  .ab-hero__body { grid-template-columns: 1fr; gap: var(--space-xl); padding: var(--space-2xl) 0 var(--space-xl); }
  .ab-portrait { max-width: min(100%, 320px); justify-self: center; }
  .ab-hero__meta { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  .ab-manifesto__body, .ab-edu__body { grid-template-columns: 1fr; gap: var(--space-lg); }
  .ab-journey__row { grid-template-columns: auto 1fr; gap: var(--space-sm); }
  .ab-journey__row .ab-journey__desc, .ab-journey__row .ab-journey__role { grid-column: 1 / -1; }
  .ab-journey__row .ab-journey__role { text-align: left; }

  .ab-toolkit__body { grid-template-columns: 1fr; gap: var(--space-xl); }

  .ab-cta__row { grid-template-columns: 1fr; gap: var(--space-md); }
  .ab-cta__row .btn { justify-self: stretch; }

  .ab-manifesto, .ab-journey, .ab-toolkit, .ab-edu, .ab-cta {
    padding-top: var(--space-2xl); padding-bottom: var(--space-2xl);
  }
}

@media (max-width: 640px) {
  .ab-hero__meta { grid-template-columns: 1fr; }
  /* Smaller minimum so the title doesn't overflow on narrow phones */
  .ab-hero__title { font-size: clamp(32px, 10vw, 56px); }
}