/* About: a white cover opening — the headline, the intro and the facts
   beside the portrait — then two ruled sections, How I build and Where to
   look. Every size comes from a shell type role; the indigo is spent on
   links and the portrait's light, nowhere else. */
@layer components {

  .about-cover { padding-block: clamp(32px, 4vw, 64px) clamp(48px, 6vw, 96px); }

  /* ── the cover ──────────────────────────────────────────────────── */
  .about-opening {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: clamp(36px, 6vw, 112px); align-items: end;
    padding-bottom: clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--rule);
  }
  .about-opening h1 {
    max-width: 20ch; font-size: var(--t-display); font-weight: 550;
    line-height: var(--lh-display, 1.02); letter-spacing: var(--ls-display, -0.035em);
    text-wrap: balance;
  }
  .about-lede {
    max-width: 50ch; margin-top: clamp(20px, 2.4vw, 32px);
    font-size: var(--t-lede); line-height: var(--lh-prose); color: var(--ink-2);
    text-wrap: pretty;
  }

  .about-facts {
    display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start;
    gap: var(--s4) clamp(24px, 4vw, 56px); margin-top: clamp(28px, 3.4vw, 44px);
  }
  .about-facts > div { display: grid; gap: 2px; }
  .about-facts dt {
    font-family: var(--mono); font-size: var(--t-machine); letter-spacing: 0.02em;
    color: var(--graphite);
  }
  .about-facts dd { font-size: var(--t-small); color: var(--ink); }
  .about-facts dd a {
    color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    transition: color var(--d-hover) var(--ease-out), text-decoration-color var(--d-hover) var(--ease-out);
  }
  .about-facts dd a:hover { color: var(--accent); text-decoration-color: var(--accent); }

  /* The portrait sits in its own light: a soft field of ink
     and the accent behind a hairline frame, so the card reads as lit
     rather than pasted in. It develops once on arrival — the page's one
     orchestrated moment — and holds still under reduced motion. */
  .about-portrait { position: relative; margin: 0; }
  .about-portrait::before {
    content: ""; position: absolute; inset: 8% -10% -6% -10%; z-index: -1;
    border-radius: 50%; filter: blur(48px); opacity: 0.55;
    background: radial-gradient(closest-side at 40% 45%,
      color-mix(in srgb, var(--accent) 38%, transparent),
      color-mix(in srgb, var(--paper-ink) 18%, transparent) 60%, transparent);
  }
  .about-frame {
    position: relative; overflow: hidden; aspect-ratio: 4 / 5;
    border-radius: var(--r-xl); background: var(--paper-2);
  }
  .about-frame::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  }
  .about-photo {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  }
  .about-frame .about-mark { display: grid; place-items: center; height: 100%; }
  [data-page="about"] .about-frame .glyph { width: 64px; height: 64px; }

  .about-place {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4);
    margin-top: var(--s3); white-space: nowrap;
    font-family: var(--mono); font-size: var(--t-machine); color: var(--graphite);
    font-variant-numeric: tabular-nums;
  }

  @media (prefers-reduced-motion: no-preference) {
    .about-photo { animation: about-develop 900ms var(--ease-out) both; }
    .about-portrait::before { animation: about-light 1400ms var(--ease-out) both; }
  }
  @keyframes about-develop {
    from { filter: blur(8px) saturate(0.6); transform: scale(1.04); opacity: 0.6; }
    to   { filter: none; transform: none; opacity: 1; }
  }
  @keyframes about-light { from { opacity: 0; } }

  /* ── the sections ───────────────────────────────────────────────── */
  .about-section {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--s6) clamp(36px, 6vw, 112px);
    padding-top: clamp(40px, 5vw, 72px);
  }
  .about-section + .about-section {
    margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule);
  }
  .about-section-head h2 {
    text-wrap: balance; font-size: var(--t-section); font-weight: 550; line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading, -0.025em);
  }
  .about-section-head p {
    max-width: 28ch; margin-top: var(--s3);
    font-size: var(--t-small); line-height: var(--lh-body); color: var(--graphite);
  }

  .about-principles, .about-disciplines { list-style: none; margin: 0; padding: 0; }

  /* Ruled rows: the index, the claim, then the work behind it. */
  .about-principles { display: grid; border-top: 1px solid var(--rule-soft); }
  .about-principles li {
    display: grid; grid-template-columns: 4ch minmax(0, 1fr) auto;
    gap: var(--s2) var(--s6); align-items: baseline;
    padding-block: var(--s6); border-bottom: 1px solid var(--rule-soft);
  }
  .about-index {
    grid-row: span 2; font-family: var(--mono); font-size: var(--t-machine);
    color: var(--graphite); font-variant-numeric: tabular-nums;
  }
  .about-principles h3 {
    font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.015em; line-height: var(--lh-snug);
  }
  .about-principles p {
    grid-column: 2; max-width: 60ch;
    font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2);
  }
  .about-principles .arrow {
    grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap;
    font-size: var(--t-small); padding-block: 11px; margin-block: -11px;
  }

  /* Four doors, one per discipline, each pointing at its evidence. */
  .about-disciplines {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
  }
  .about-disciplines li {
    display: grid; grid-template-rows: auto 1fr auto; gap: var(--s2);
    padding: var(--s6); border: 1px solid var(--rule); border-radius: var(--r-lg);
    background: var(--paper);
    transition: border-color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out);
  }
  .about-disciplines li:has(a:hover) { border-color: var(--rule-strong); background: var(--paper-2); }
  .about-disciplines h3 {
    font-family: var(--mono); font-size: var(--t-machine); font-weight: 500;
    letter-spacing: 0.02em; color: var(--graphite);
  }
  .about-disciplines p { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); max-width: 40ch; }
  .about-disciplines .arrow { justify-self: start; margin-top: var(--s3); font-size: var(--t-small); padding-block: 11px; margin-bottom: -11px; }

  /* ── narrower screens ───────────────────────────────────────────── */
  @media (max-width: 960px) {
    .about-section { grid-template-columns: minmax(0, 1fr); }
    .about-section-head p { max-width: 48ch; }
  }
  @media (max-width: 860px) {
    .about-opening { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .about-portrait { order: -1; width: min(64%, 240px); }
    .about-facts { grid-template-columns: minmax(0, 1fr); }
    .about-facts > div {
      grid-template-columns: 10ch minmax(0, 1fr); gap: var(--s4); align-items: baseline;
      padding-block: var(--s3); border-bottom: 1px solid var(--rule-soft);
    }
    .about-facts > div:first-child { border-top: 1px solid var(--rule-soft); }
    .about-facts { gap: 0; }
  }
  @media (max-width: 640px) {
    .about-principles li { grid-template-columns: 3ch minmax(0, 1fr); }
    .about-principles .arrow { grid-column: 2; grid-row: auto; justify-self: start; margin-top: var(--s1); }
    .about-disciplines { grid-template-columns: minmax(0, 1fr); }
  }
}