@charset "UTF-8";
/* ==========================================================================
   about.html only. Loaded after main.css.
   Nothing here invents a colour, a size or a rhythm: every value is a token
   already declared in main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paired text/figure rows
   -------------------------------------------------------------------------- */
.pair { align-items: center; }
.pair > figure { margin: 0; }

/* Text stays first in the source; on wider screens the plate moves left, so
   the page does not become a column of identical rows. */
@media (min-width: 40em) {
  .pair--swap > figure { order: -1; }
}

/* --------------------------------------------------------------------------
   The inscription, her own words, cut into the green leaf
   -------------------------------------------------------------------------- */
.inscription { margin: 0; }

.inscription__text {
  margin: 0;
  /* Her own words are ~40 words. Cinzel has no true lowercase, so at this size
     they set as a wall of caps. Body face, held large enough to still read as
     the page's inscription. */
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + 1.5vw, 1.85rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}

.inscription__attr {
  margin-top: var(--s-6);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--paper-2);
}
.inscription__attr strong {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--gold-300);
  margin-bottom: var(--s-2);
}

/* --------------------------------------------------------------------------
   Point list, sentences, not dish names, so the diamonds need more air
   -------------------------------------------------------------------------- */
.points { gap: var(--s-4); }
.points li { max-width: 56ch; }

/* --------------------------------------------------------------------------
   The record, one checkable line per row, ruled like an entry in a register
   -------------------------------------------------------------------------- */
.record {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.record__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem var(--s-5);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.record__k {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.record__v {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
}
:where(.on-red, .on-red-deep, .on-green) .record__k { color: var(--gold-300); }

.record__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-4);
}

/* The line that points at the register itself. */
.verify {
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--paper-2);
  max-width: 46ch;
}
.verify a {
  color: var(--gold-300);
  text-underline-offset: 3px;
}
.verify a:hover { color: var(--gold-200); }