/* ==========================================================================
   AN AUSTRIAN ECONOMIST · V4 · ABOUT (the V3 page, returned)
   --------------------------------------------------------------------------
   The creator's ruling (feedback ledger items 14-16, July 2026): the V3
   about layout and copy verbatim, the COLOR photograph with its slight
   vintage filter, set in the V4 faces with the V4 frame treatment (the
   plate well with crop marks and the intaglio mark) as the portrait's
   frame. The V4 duotone portrait, the Æ cartouche, and the colophon-page
   concept retired; colophon-page.css stays on disk, unreferenced.
   Geometry lifted from V3 journal.css/revamp.css. Page layer only.
   ========================================================================== */

@layer page {

.about-grid {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: var(--s-5) var(--s-8);
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "left intro"
    "left bio";
  grid-template-rows: auto 1fr;
  gap: var(--s-3) 3.5rem;
}
.about-intro { grid-area: intro; }
.about-col-left {
  grid-area: left;
  border-right: 1px solid var(--paper-line);
  padding-right: 1.75rem;
}
.about-bio { grid-area: bio; }

/* ----- The introduction ----- */
.about-kicker { margin-bottom: var(--s-2); }
.about-title {
  font-size: clamp(2.125rem, 1.7rem + 1.9vw, 3rem);   /* V3's 34 -> 48 cap */
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin-bottom: var(--s-2);
}

/* ----- The portrait: the color photograph in the V4 frame ----- */
.about-portrait { margin: 0 0 var(--s-4); }
.about-portrait__well {
  padding: clamp(0.75rem, 0.55rem + 1vw, 1.25rem);
}
.about-portrait__well img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;                 /* V3's plate proportion */
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.9);               /* V3's slight vintage filter, verbatim */
}

/* ----- The précis (V3's stacked table) ----- */
.about-table {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--paper-line);
}
.about-table dt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-1);
}
.about-table dd {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px dotted var(--paper-line);
  text-wrap: balance;
}
.about-table dd:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ----- The author's words (the .prose register carries the body) ----- */
.about-bio p { color: var(--ink); }

/* ----- Elsewhere ----- */
.about-bio__elsewhere-h {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--s-6) 0 var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--paper-line);
}
.about-bio__elsewhere-list {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* The engraved-card direct: V3's btn-royal, set in the V4 faces. A solid
   paper card (composite surfaces are solids, never translucent floats)
   with the ink frame and the inner gold double rule. */
.btn-royal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 12px 22px 12px 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  position: relative;
}
.btn-royal::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-top: 1px solid rgba(148, 105, 26, 0.45);
  border-bottom: 1px solid rgba(148, 105, 26, 0.45);
  pointer-events: none;
}
.btn-royal__glyph {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold-deep);
  color: var(--paper);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.btn-royal__glyph svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.btn-royal__label { line-height: 1; position: relative; }
.btn-royal__label em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.btn-royal:hover,
.btn-royal:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.btn-royal:hover::before,
.btn-royal:focus-visible::before { border-color: var(--gold); }
.btn-royal:hover .btn-royal__glyph,
.btn-royal:focus-visible .btn-royal__glyph {
  background: var(--gold);
  color: var(--ink);
}
.btn-royal:hover .btn-royal__label em,
.btn-royal:focus-visible .btn-royal__label em { color: var(--gold); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn-royal {
    transition: background var(--dur-ui) var(--ease-out),
                color var(--dur-ui) var(--ease-out),
                transform var(--dur-ui) var(--ease-out);
  }
  .btn-royal::before { transition: border-color var(--dur-ui) var(--ease-out); }
  .btn-royal__glyph {
    transition: background var(--dur-ui) var(--ease-out),
                color var(--dur-ui) var(--ease-out);
  }
  .btn-royal__label em { transition: color var(--dur-ui) var(--ease-out); }
  .btn-royal:hover { transform: translateY(-1px); }
}

/* ----- Tablet and pocket: V3's stacking order. Intro centered, the
   portrait beside the précis in one compact block, the words beneath. ----- */
@media (max-width: 939.9px) {
  .about-grid {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding-block: var(--s-4) var(--s-6);
  }
  .about-intro { order: 1; text-align: center; }
  .about-col-left {
    order: 2;
    max-width: 32.5rem;
    margin-inline: auto;
    width: 100%;
    padding-right: 0;
    border-right: 0;
    display: grid;
    grid-template-columns: minmax(140px, 44%) 1fr;
    gap: var(--s-5);
    align-items: center;
  }
  .about-portrait { margin-bottom: 0; }
  .about-col-left .about-table {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .about-col-left .about-table dd {
    font-size: 1.125rem;
    margin-bottom: var(--s-2);
    padding-bottom: var(--s-2);
  }
  .about-bio { order: 3; max-width: 40rem; margin-inline: auto; }
}
@media (max-width: 599.9px) {
  .about-col-left { max-width: 27.5rem; gap: var(--s-4); }
  .about-col-left .about-table dd { font-size: 1rem; }
}

} /* @layer page */