/* =============================================================================
   04 Blueprint · css/about.css · Sheet 04, The architect (about.html)
   Page styles only. Shared tokens and components live in css/base.css.
   Sections: #the-architect (hero + Detail P portrait, SM7), #designers-note,
   #section-a-a, #revisions, #general-notes, #checked-by.
   Order: layout, components, sections, motion, media queries (min-width).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Hero: h1, portrait, lede (the portrait sits between them below 64rem)
   ----------------------------------------------------------------------------- */
.page-hero > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.portrait-fig {
  order: 1;
}

.page-hero .page-lede {
  order: 2;
}

/* Detail P: a 400 x 440 drawing box. The portrait is the cleared circle (r 188 of 400); the
   callout SVG on top carries the detail circle (r 197), the leader and the label. */
.portrait-fig {
  position: relative;
  width: min(21.25rem, 100%);
  aspect-ratio: 400 / 440;
  margin-top: var(--s-6);
  justify-self: center;
}

.portrait {
  position: absolute;
  top: 2.727%;
  left: 3%;
  width: 94%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--paper);
}

/* The engraving is one alpha mask (tools/make_assets.py): ink shows through the cut lines */
.portrait-engraving {
  position: absolute;
  inset: 0;
  background: var(--ink);
  -webkit-mask: url("../assets/engraving.webp") center / 100% no-repeat;
  mask: url("../assets/engraving.webp") center / 100% no-repeat;
}

.portrait-callout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pc-ring,
.pc-leader {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.pc-leader {
  stroke: var(--ink-2);
  stroke-width: 1.25;
}

.pc-dot {
  fill: var(--ink-2);
}

.pc-label {
  fill: var(--ink-2);
  font-family: var(--font-text);
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* Plotter pass (SM7): one paper cover per engraving line, with an accent cutter mark on its
   leading edge. js/about.js creates the covers (with --n, the line, and --d, the start delay)
   and removes them at the end. The slide is a CSS animation on translate, so the compositor
   runs it and the main thread stays free. */
.plot {
  position: absolute;
  inset: 0;
}

.plot i {
  position: absolute;
  top: calc(var(--n) * 100% * 7 / 768);
  left: 0;
  width: 100%;
  height: calc(100% * 7 / 768 + 0.6px);
  background: var(--paper);
}

.plot.is-cutting i {
  animation: plot-cut 320ms linear var(--d) both;
}

@keyframes plot-cut {
  to {
    translate: 101% 0;
  }
}

.plot i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -3px; /* on the cut side of the edge, so a waiting cover shows no mark */
  width: 3px;
  background: var(--accent);
}

/* -----------------------------------------------------------------------------
   2. Designer's note: a NOTE box with a revision delta
   ----------------------------------------------------------------------------- */
.note-box {
  position: relative;
  display: grid;
  gap: var(--s-5);
  max-width: 60rem;
  padding: var(--s-5) var(--s-5) var(--s-6);
}

.note-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.note-outline rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.note-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: none;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
}

/* Revision delta: a triangle with the note number */
.note-delta {
  position: relative;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--accent);
}

.note-delta svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.note-delta b {
  position: relative;
  padding-top: 0.5rem;
  font-size: var(--fs-micro);
  line-height: 1;
}

.note-box blockquote {
  max-width: 22em;
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.note-box blockquote::before {
  content: "\201C";
  color: var(--accent);
}

.note-box blockquote::after {
  content: "\201D";
  color: var(--accent);
}

.note-box figcaption {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-2);
}

.note-box figcaption::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--accent);
}

/* -----------------------------------------------------------------------------
   3. Section A-A: a cutting plane over a bar in two hatched halves
   ----------------------------------------------------------------------------- */

/* Cutting plane: thick ends with a view arrow and the letter A, a chain line between them */
.plane {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--s-3);
}

.plane-end {
  position: relative;
  flex: none;
  width: 2rem;
  padding-top: 0.875rem;
  border-top: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-stretch: 62.5%;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* View arrow: a 1px shaft and a filled 3:1 head that points at the section */
.plane-end::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.25rem;
  width: 1px;
  height: 0.875rem;
  background: var(--ink);
}

.plane-end::after {
  content: "";
  position: absolute;
  top: 0.375rem;
  left: calc(0.25rem - 1.25px);
  width: 3.5px;
  height: 10px;
  background: var(--ink);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.plane-end:last-child::before {
  right: 0.25rem;
  left: auto;
}

.plane-end:last-child::after {
  right: calc(0.25rem - 1.25px);
  left: auto;
}

/* Chain line 12 3 2 3 (ISO 128) */
.plane-line {
  flex: 1;
  height: 1px;
  margin-top: 1px;
  background: repeating-linear-gradient(to right, var(--construction) 0 12px, transparent 12px 15px, var(--construction) 15px 17px, transparent 17px 20px);
  transform-origin: left;
}

.halves {
  display: grid;
  gap: var(--s-7);
}

.half {
  min-width: 0;
}

/* Section bar: 45 degree hatch for the trading half, the opposite hatch for the software half */
.hatch {
  position: relative;
  height: 3.5rem;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(45deg, var(--ink-2) 0 1px, transparent 1px 8px);
}

.half--software .hatch {
  background: repeating-linear-gradient(-45deg, var(--ink-2) 0 1px, transparent 1px 8px);
}

/* Hatch cover: slides off from the cut in the middle (motion only, see section 6) */
.hatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  scale: 0 1;
  transform-origin: left;
}

.half--software .hatch::after {
  transform-origin: right;
}

.half-name {
  margin-top: var(--s-5);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.half-list {
  margin-top: var(--s-4);
  border-top: 1px solid var(--rule);
  columns: 2;
  column-gap: var(--gutter);
}

.half-list li {
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--fs-small);
  break-inside: avoid;
}

.aa-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  max-width: none;
  margin-top: var(--s-6);
  color: var(--ink-3);
}

/* -----------------------------------------------------------------------------
   4. Revision history: a real table with the 8+ years dimension. Below 48rem the
   dimension lies under the table, so the table has the full width of the column;
   from 48rem it stands on the right of the table.
   ----------------------------------------------------------------------------- */
.rev-wrap {
  display: grid;
  gap: var(--s-5) var(--s-4);
  max-width: 60rem;
}

.rev-table {
  width: 100%;
  border: 2px solid var(--ink);
}

.rev-table :is(th, td) {
  padding: var(--s-3);
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.rev-table thead th {
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.rev-table tbody th {
  width: 3rem;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-stretch: 62.5%;
  font-weight: 700;
  line-height: 1;
}

.rev-table td {
  color: var(--ink-2);
}

.rev-table td b {
  color: var(--ink);
}

.rev-status {
  width: 1%; /* as narrow as its one word */
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  line-height: 1.9;
  text-transform: uppercase;
  white-space: nowrap;
}

.rev-now {
  color: var(--accent);
}

.rev-dim {
  --ext-below: 0.75rem;
}

/* Under the table: the object is above this dimension, so the extension lines point up */
.rev-dim--under::before,
.rev-dim--under::after {
  top: calc(-1 * var(--ext-below));
  bottom: calc(50% - 6px);
}

.rev-dim--beside {
  display: none;
}

/* Beside the table: the object is on the left, so the extension lines point left */
.rev-dim--beside::before,
.rev-dim--beside::after {
  right: calc(50% - 6px);
  left: calc(-1 * var(--ext-below));
}

.rev-dim--beside .dim-line {
  transform-origin: top;
}

/* -----------------------------------------------------------------------------
   5. General notes, Checked by clients
   ----------------------------------------------------------------------------- */
.note-list > li {
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

/* Three receipts, each under its report number (as the field notes on the Reviews sheet) */
.checked {
  display: grid;
  max-width: var(--measure);
  border-bottom: 1px solid var(--rule);
}

.checked-item {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
}

.checked-no {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

.checked .receipt blockquote {
  font-size: var(--fs-body);
}

.checked-more {
  margin-top: var(--s-7);
}

/* -----------------------------------------------------------------------------
   6. Motion (motion allowed only; .rv and .is-in come from BP.onEnter)
   ----------------------------------------------------------------------------- */

/* Hero: the portrait waits for the plotter pass, with the same 400ms deadline as the headline:
   if the scripts are late, CSS prints the finished portrait and js/about.js does not plot. */
html.motion-ok:not(.intro-on) :is(.portrait-engraving, .portrait-callout)[data-intro] {
  animation: intro-deadline 1ms linear 400ms forwards;
}

/* Note box: the outline draws (stroke offset on pathLength 1), then the quote rises */
.note-box.rv .note-outline rect {
  stroke-dasharray: 1;
  stroke-linecap: square;
  transition: stroke-dashoffset var(--dur-5) var(--ease-draft);
}

.note-box.rv > :not(.note-outline) {
  transition:
    opacity var(--dur-3) var(--ease-settle) var(--step, 300ms),
    translate var(--dur-3) var(--ease-settle) var(--step, 300ms);
}

.note-box.rv > blockquote {
  --step: 420ms;
}

.note-box.rv > figcaption {
  --step: 540ms;
}

.note-box.rv:not(.is-in) .note-outline rect {
  stroke-dashoffset: 1;
}

.note-box.rv:not(.is-in) > :not(.note-outline) {
  opacity: 0;
  translate: 0 0.75rem;
}

/* Section A-A: the plane line draws, the hatch covers slide off, the lists rise */
.section-aa.rv .plane-line {
  transition: scale var(--dur-4) var(--ease-draft);
}

.section-aa.rv .plane-end {
  transition: opacity var(--dur-2) var(--ease-settle);
}

.section-aa.rv .plane-end:last-child {
  transition-delay: 600ms;
}

.section-aa.rv .hatch::after {
  transition: scale var(--dur-4) var(--ease-draft) 300ms;
}

.section-aa.rv :is(.half-name, .half-list, .aa-caption) {
  transition:
    opacity var(--dur-3) var(--ease-settle) var(--step, 600ms),
    translate var(--dur-3) var(--ease-settle) var(--step, 600ms);
}

.section-aa.rv :is(.half-list, .aa-caption) {
  --step: 690ms;
}

.section-aa.rv:not(.is-in) .plane-line {
  scale: 0 1;
}

.section-aa.rv:not(.is-in) .plane-end {
  opacity: 0;
}

.section-aa.rv:not(.is-in) .hatch::after {
  scale: 1 1;
}

.section-aa.rv:not(.is-in) :is(.half-name, .half-list, .aa-caption) {
  opacity: 0;
  translate: 0 0.75rem;
}

/* Revisions: the dimension line draws along the table, then its text appears */
.rev-wrap.rv .dim-line {
  transition: scale var(--dur-4) var(--ease-draft) 200ms;
}

.rev-wrap.rv .dim-text {
  transition: opacity var(--dur-3) var(--ease-settle) 700ms;
}

.rev-wrap.rv:not(.is-in) .rev-dim--under .dim-line {
  scale: 0 1;
}

.rev-wrap.rv:not(.is-in) .rev-dim--beside .dim-line {
  scale: 1 0;
}

.rev-wrap.rv:not(.is-in) .dim-text {
  opacity: 0;
}

/* -----------------------------------------------------------------------------
   7. Media queries
   ----------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .note-box {
    padding: var(--s-6) var(--s-7) var(--s-7);
  }

  .rev-table :is(th, td) {
    padding: var(--s-4) var(--s-5);
  }

  .rev-table tbody th {
    width: 5rem;
  }

  .rev-status {
    width: 8rem;
  }

  .rev-wrap {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
  }

  .rev-dim--under {
    display: none;
  }

  .rev-dim--beside {
    display: flex;
  }
}

@media (min-width: 64rem) {
  /* Hero: h1 and lede on the left (cols 1 to 7), the portrait on the right (cols 8 to 12) */
  .page-hero > .wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--gutter);
    align-items: start;
  }

  .page-hero .page-kicker {
    grid-column: 1 / -1;
  }

  .page-hero .page-h1,
  .page-hero .page-lede {
    grid-column: 1 / 8;
  }

  .portrait-fig {
    grid-column: 8 / 13;
    grid-row: 2 / span 3; /* the spare height goes to the empty fourth row, not between h1 and lede */
    width: min(25.5rem, 100%);
    margin-top: var(--s-6);
    justify-self: end;
  }

  /* The halves meet at the cut: one bar, two hatches */
  .halves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .half--software .hatch {
    border-left-width: 0;
  }

  .half--trading :is(.half-name, .half-list) {
    margin-right: var(--s-6);
  }

  .half--software :is(.half-name, .half-list) {
    margin-left: var(--s-6);
  }

  .note-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  /* The note box and the revision table hold the full 12 columns, as the sections around them */
  .note-box,
  .rev-wrap {
    max-width: none;
  }

  .rev-status {
    width: 12rem;
  }

  /* Three receipts in a row, at the quote size */
  .checked {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
    max-width: none;
  }

  .checked .receipt blockquote {
    font-size: var(--fs-quote);
    line-height: 1.4;
  }

  /* The leader sits on the first text line of the larger quote */
  .checked .receipt::before {
    margin-top: calc(var(--fs-quote) * 0.7 - 1.5px);
  }
}