/* About (vision §E10): the painter, off-centre; his own sentence; the quote and the signature writing
   itself beneath it; one painting per motif; materials and the counted facts; owner slots (local preview
   only); originals and commissions. Asymmetric splits on the 12-column grid, the umber wall throughout. */
@layer pages {
  .about { --about-section: clamp(72px, 8vw, 144px); }
  .about .section { padding-block: var(--about-section); }

  .about-head { margin-block-end: clamp(36px, 4vw, 64px); }
  .about-head__title {
    margin: 0;
    font-size: var(--step-4);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }

  /* ------------------------------------------------------------------ 1. opening */
  .about-open { padding-block: clamp(24px, 4vw, 64px) clamp(56px, 7vw, 120px); }
  .about-open__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-7);
    align-items: end;
  }
  /* The portrait hangs off-centre (cols 1–5), true to its proportions, never filtered. */
  .about-open__portrait {
    grid-column: 1 / span 5;
    margin: 0;
    max-block-size: min(78svh, 760px);
    aspect-ratio: 700 / 869;
    max-inline-size: 100%;
  }
  .about-open__portrait picture { display: block; }
  .about-open__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    box-shadow: 0 1px 2px var(--hang-contact-color);
  }
  .about-open__text {
    grid-column: 7 / -1;
    display: grid;
    gap: var(--space-5);
    padding-block-end: clamp(8px, 3vw, 48px);
  }
  .about-open__eyebrow { margin: 0; }
  .about-open__title {
    margin: 0;
    font-size: var(--step-6);
    font-weight: 340;
    line-height: 0.92;
    letter-spacing: -0.02em;
  }
  .about-open__lead {
    margin: var(--space-2) 0 0;
    max-inline-size: 30rem;
    font-size: var(--step-1);
    line-height: 1.45;
    color: var(--ink-2);
    text-wrap: pretty;
  }

  /* ------------------------------------------------------------------ 2. the quote, signed */
  .about-quote { padding-block: clamp(48px, 6vw, 112px); }
  .about-quote__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .about-quote__fig { grid-column: 2 / span 9; display: grid; gap: var(--space-5); margin: 0; }
  .about-quote__text {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-5);
    font-weight: 340;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
  }
  .about-quote__text p { margin: 0; }
  /* The signature signs off under the quote, at its end, like a letter. */
  .about-quote__sign { justify-self: end; inline-size: clamp(168px, 18vw, 240px); }
  .about-quote__sign .signature { inline-size: 100%; block-size: auto; }

  /* ------------------------------------------------------------------ 3. what he paints */
  /* Four picks side by side: their motif names share a line, their paintings hang bottom-aligned (true
     proportions, never wider than three columns) so the labels line up, as on a wall. */
  .about-paints__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .about-pick { display: grid; grid-row: span 4; grid-template-rows: subgrid; min-inline-size: 0; }
  .about-pick__motif { margin: 0; align-self: end; font-size: var(--step-2); }
  .about-pick > .tile { align-self: end; }
  .about-pick .tile { --tile-glow: clamp(32px, 1rem + 2.6vw, 64px); }
  .about-pick .tile__img { box-shadow: 0 1px 2px var(--hang-contact-color); }
  .about-pick__all { margin: 0; align-self: start; }
  .about-pick > .draft-note { align-self: start; justify-self: start; }
  @media (max-width: 1023.98px) {
    .about-paints__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
    .about-pick { grid-row: auto; grid-template-rows: none; gap: var(--space-4); align-content: end; }
  }
  @media (max-width: 599.98px) {
    .about-paints__list { grid-template-columns: minmax(0, 1fr); }
    .about-pick .tile { max-inline-size: 22rem; }
  }

  /* ------------------------------------------------------------------ 4. materials and facts */
  .about-materials__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-7);
    align-items: end;
  }
  .about-materials__text { grid-column: 1 / span 5; display: grid; gap: var(--space-5); }
  .about-materials__copy { margin: 0; max-inline-size: 30rem; font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
  .about-facts {
    grid-column: 7 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start;
    gap: var(--space-5) clamp(24px, 4vw, 72px);
    margin: 0;
    padding: var(--space-5) 0 0;
    border-block-start: 1px solid var(--rule);
    list-style: none;
  }
  .about-facts__item { display: grid; }
  .about-facts__link { display: grid; gap: var(--space-1); color: inherit; text-decoration: none; }
  .about-facts__link:is(:hover, :focus-visible) .about-facts__label { color: var(--ink); text-decoration: underline 1px var(--accent); text-underline-offset: 0.25em; }
  .about-facts__n {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 360;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink);
  }
  .about-facts__label {
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  @media (max-width: 1023.98px) {
    .about-materials__text, .about-facts { grid-column: 1 / -1; }
  }
  @media (max-width: 599.98px) {
    .about-facts { grid-template-columns: repeat(2, minmax(0, auto)); }
  }

  /* ------------------------------------------------------------------ 5. owner slots (local preview) */
  .about-slots { border-block: 1px dashed color-mix(in oklab, var(--lamp) 45%, transparent); }
  .about-slots__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-8);
  }
  .about-slots__head { grid-column: 1 / -1; display: grid; gap: var(--space-4); justify-items: start; }
  .about-slots__intro { margin: 0; max-inline-size: 40rem; color: var(--ink-2); }
  .about-slot { grid-column: span 4; display: grid; gap: var(--space-3); align-content: start; }
  .about-slot__title { margin: 0; font-size: var(--step-2); }
  .about-slot__placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border: 1px dashed var(--edge);
    color: var(--ink-2);
    font-size: var(--step--1);
    text-align: center;
    padding: var(--space-4);
  }
  .about-slot p { margin: 0; color: var(--ink-2); }
  .about-legacy { grid-column: 1 / span 8; display: grid; gap: var(--space-6); }
  .about-legacy__part { display: grid; gap: var(--space-3); }
  .about-legacy__part h3 { margin: 0; font-size: var(--step-1); }
  .about-legacy__part p { margin: 0; max-inline-size: var(--measure); color: var(--ink-2); }
  .about-legacy__quote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink-2); }
  @media (max-width: 1023.98px) {
    .about-slot { grid-column: span 6; }
    .about-legacy { grid-column: 1 / -1; }
  }
  @media (max-width: 599.98px) {
    .about-slot { grid-column: 1 / -1; }
  }

  /* ------------------------------------------------------------------ 6. originals and commissions */
  .about-originals__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-5);
    align-items: end;
  }
  .about-originals__grid > .about-head__title { grid-column: 1 / span 6; }
  .about-originals__body { grid-column: 7 / -1; display: grid; gap: var(--space-5); }
  .about-originals__copy { margin: 0; font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
  .about-originals__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin: 0; }
  @media (max-width: 1023.98px) {
    .about-originals__grid > .about-head__title, .about-originals__body { grid-column: 1 / -1; }
  }

  /* ------------------------------------------------------------------ narrow screens */
  @media (max-width: 1023.98px) {
    .about-open__grid { align-items: start; }
    .about-open__portrait { grid-column: 1 / -1; inline-size: min(100%, 30rem); }
    .about-open__text { grid-column: 1 / -1; padding: 0; }
    .about-quote__fig { grid-column: 1 / -1; }
  }
  @media (max-width: 599.98px) {
    .about-originals__ctas { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
    .about-open__portrait { inline-size: 100%; }
    .about-quote__text { font-size: var(--step-4); }
  }
}