main.about-main {
      max-width: 760px;
      margin: 0 auto;
      padding: 48px clamp(16px, 4vw, 48px) 96px;
    }
    .about-hero { text-align: center; padding: 24px 0 48px; }
    .about-hero .eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 16px;
      border: 1px solid var(--line);
      padding: 4px 12px;
      border-radius: 999px;
    }
    .about-hero h1 {
      font-size: clamp(32px, 5vw, 48px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin: 0 auto 18px;
      max-width: 640px;
    }
    .about-hero h1 .accent { color: var(--accent); }

    .about-portrait {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
      border: 2px solid var(--line);
      margin: 0 auto 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-sans);
      font-size: 48px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--accent);
    }

    .about-body {
      font-size: 16px;
      line-height: 1.7;
      color: var(--text-2);
    }
    .about-body h2 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 48px 0 14px;
      color: var(--text);
    }
    .about-body h2:first-child { margin-top: 0; }
    .about-body p { margin: 0 0 16px; }
    .about-body p strong { color: var(--text); font-weight: 600; }
    .about-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
    .about-body a:hover { color: var(--accent-hot); }

    /* Quote block — heavy italic serif + amber drop-cap-ish opening
       glyph. No side-stripe border (banned per impeccable absolute
       bans). Typographic emphasis instead of decoration. */
    .about-quote {
      font-family: var(--font-serif, var(--font-sans));
      font-size: 24px;
      font-style: italic;
      color: var(--text);
      line-height: 1.45;
      padding: 28px 32px;
      margin: 32px 0;
      background: color-mix(in oklab, var(--accent) 5%, var(--bg-1));
      border-radius: 12px;
      position: relative;
    }
    .about-quote::before {
      content: "\201C";
      font-family: var(--font-serif, Georgia, serif);
      font-size: 56px;
      font-style: normal;
      font-weight: 400;
      color: var(--accent);
      line-height: 1;
      position: absolute;
      top: 12px;
      left: 14px;
      opacity: 0.8;
    }
    .about-quote > * { position: relative; }
    .about-quote p { padding-left: 32px; }

    .about-meta {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin: 32px 0;
    }
    @media (max-width: 600px) { .about-meta { grid-template-columns: 1fr; } }
    .about-meta .meta-row {
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 14px 18px;
    }
    .about-meta .meta-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 4px;
    }
    .about-meta .meta-value {
      font-size: 14px;
      color: var(--text);
      font-weight: 500;
    }

    .about-cta {
      margin-top: 56px;
      padding: 32px 28px;
      text-align: center;
      background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
      border: 1px solid var(--line);
      border-radius: 14px;
    }
    .about-cta p { margin: 0 0 18px; color: var(--text-2); }