/* ==========================================================================
   AN AUSTRIAN ECONOMIST · V4 · THE LETTERPRESS EDITION KIT
   --------------------------------------------------------------------------
   Shared furniture for the essay leaves (and the catalogue's entry grammar
   where it overlaps): headpiece seat, cover, running folio, edition prose,
   the two quote forms, plate figures with the fold-out affordance, and the
   close of the leaf (tailpiece · essay colophon · next leaf). Loads after
   gazette-motion.css; writes only into the page layer.
   ========================================================================== */

/* The measure, resolved once in the BODY face (creator ledger item 26,
   July 2026). `ch` is element-relative: a 66ch cap on a Playfair h2 at
   38px resolved to more than the leaf, so section heads printed hard left
   of the centered text column. Registering the property makes the length
   compute against .edition-body's own body-size EB Garamond, and every
   child inherits the same resolved pixels: one column axis for headings,
   paragraphs, and quotes. Engines without @property fall back to the
   element-relative measure (the pre-fix rendering), never to nothing. */
@property --measure-resolved {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@layer page {

/* --------------------------------------------------------------------------
   The headpiece: a retoned engraving band above the cover. Wider than the
   text column (the plates' luxury), hairline-framed, intaglio plate mark at
   desktop, caption + credit beneath. The seat paints its own field.
   -------------------------------------------------------------------------- */
.headpiece-fig {
  max-width: 54rem;
  margin: var(--s-2) auto 0;
}
.headpiece-fig__frame {
  position: relative;
  background-color: var(--paper);
  background-image: var(--paper-tile);
  background-size: var(--paper-tile-size);
}
.headpiece-fig__frame img {
  width: 100%;
  border: 1px solid var(--paper-line);
}
@media (min-width: 720px) {
  .headpiece-fig__frame::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(107, 90, 62, 0.30);
    pointer-events: none;
  }
}
.headpiece-fig figcaption { margin-top: var(--s-3); text-align: center; }
.fig-caption {
  font-family: var(--font-apparatus);
  font-style: italic;
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
  color: var(--ink-3);
  text-wrap: pretty;
  max-inline-size: 60ch;
  margin-inline: auto;
}
.fig-credit {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   The cover: kicker · two-tone title · standfirst · publication line.
   Centered, under the masthead's double rule.
   -------------------------------------------------------------------------- */
.cover {
  text-align: center;
  margin-top: var(--flow-band);
}
.cover__kicker {
  font-size: var(--type-small);
  letter-spacing: 0.09em;
  color: var(--ink-3);
}
.cover__title {
  margin-top: var(--s-2);
  margin-inline: auto;
  max-inline-size: 16em;
}
.cover__standfirst {
  margin: var(--s-4) auto 0;
  max-inline-size: 44rem;
  font-family: var(--font-text);
  font-size: var(--type-md);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}
.cover__pub {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-wrap: balance;
}
.cover__rule {
  max-width: 30rem;
  margin: var(--s-6) auto 0;
}

/* --------------------------------------------------------------------------
   The running folio: a hairline running head that appears once the cover
   scrolls away. Typography, with the reading thread beneath it. Desktop
   only; phones scroll, print folios do not stick to thumbs.
   -------------------------------------------------------------------------- */
.folio {
  display: none;
}
@media (min-width: 1000px) {
  .folio {
    display: block;
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: var(--z-running-head);
    background-color: var(--paper);
    background-image: var(--paper-tile);
    background-size: var(--paper-tile-size);
    border-bottom: 1px solid var(--paper-line);
    transform: translateY(-101%);
  }
  .folio.folio--on { transform: translateY(0); }
  @media (prefers-reduced-motion: no-preference) {
    .folio { transition: transform 220ms var(--ease-out); }
  }
  .folio__inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: 0.55rem;
  }
  .folio__title {
    font-size: var(--type-small);
    letter-spacing: 0.08em;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .folio__part { white-space: nowrap; }
  .folio .progress-hair { position: absolute; left: 0; right: 0; bottom: -1px; }
}

/* The edge reading thread (creator ledger item 32, July 2026). The folio
   BAR stays desktop-only (fixed chrome costs a phone reading room), but
   the 2px gold thread it carried costs nothing, so below 1000px it rides
   the sheet's own top edge instead of vanishing with its host. Same
   scroll(root) engine, styled in gazette-motion; where the scroll-timeline
   API or motion is absent it simply never prints (resting state complete). */
.progress-hair--edge {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-running-head);
  pointer-events: none;
}
@media (min-width: 1000px) {
  .progress-hair--edge { display: none; }
}

/* --------------------------------------------------------------------------
   The edition body: one text grammar for every essay. The measure locks,
   paragraphs rag right, headings carry the two-tone play.
   -------------------------------------------------------------------------- */
.edition-body {
  margin-top: var(--flow-band);
  /* N1 fix: the reserved sidenote margin is deferred with the sidenotes
     themselves, so the measure centers and the text column and the plates
     compose on one axis (remove when the sidenote rail ships). */
  margin-inline: auto;
  /* The container spans the leaf; the measure lives on the CHILDREN
     (.edition-body > * below). With .prose's own 66ch cap also on the
     container, no plate or pull quote could ever print wider than the
     text column: the plates' luxury (and ledger item 19's plate scale)
     needs the container open. */
  max-inline-size: none;
  /* 66ch resolved HERE, in the body face, then inherited as pixels: see
     the @property registration above the layer block (ledger item 26). */
  --measure-resolved: var(--measure);
}
.edition-body > * {
  max-inline-size: min(var(--measure), 100%);
  max-inline-size: min(var(--measure-resolved, var(--measure)), 100%);
  margin-inline: auto;
}
.edition-body p { text-wrap: pretty; }
.edition-body p + p { margin-top: 0.85em; }
.edition-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-xl);
  line-height: var(--leading-head);
  letter-spacing: 0.002em;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
  margin-top: calc(var(--flow-band) * 1.15);
  margin-bottom: var(--space-head-below);
}
.edition-body h2 em,
.edition-body h2 .display-accent {
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
}
.edition-body h2 + p { margin-top: 0; }

/* Evidentiary block quotes: the quieter indented form, closed by an italic
   Name · Year line. No bar of any color; the indent is the register. */
.edition-body blockquote {
  margin: 1.5em auto;
  padding-inline: clamp(1.25rem, 0.5rem + 3vw, 2.5rem) clamp(0.5rem, 2vw, 1.5rem);
}
.edition-body blockquote p {
  font-size: calc(var(--type-body) * 0.97);
  line-height: 1.62;
  color: var(--ink-2);
}
.edition-body blockquote cite {
  display: block;
  margin-top: 0.55em;
  font-style: italic;
  font-size: var(--type-small);
  color: var(--ink-3);
}

/* Pull quotes: ONE grammar for every essay (creator ledger item 35, July
   2026, superseding the two-grammar tolerance): the gold burin sidebar.
   The engraved swelled rule stands upright on the inline-start, thick at
   the waist and dying to points, and the pulled line steps a full display
   register above the body in Playfair italic, set left on the column. The
   bar is the house's margin-mark: it asserts that the house itself pulled
   this line. The old centered rule-stub form is retired site-wide. */
.pullquote {
  position: relative;
  margin: calc(var(--flow-band) * 1.1) auto;
  text-align: left;
  max-inline-size: min(var(--measure), 100%);
  max-inline-size: min(var(--measure-resolved, var(--measure)), 100%);
  padding-inline-start: clamp(1.625rem, 1.1rem + 2.2vw, 2.75rem);
}
.pullquote::before {
  /* The vertical burin bar: the swelled-rule asset transposed (same
     displacement doctrine as the rule library; filter region pinned in
     userSpaceOnUse per the zero-bbox trap). Stretch, never tile: the lens
     must die to points at exactly the quote's own height. */
  content: '';
  position: absolute;
  inset-block: 0.3em;
  inset-inline-start: 0;
  width: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='480' viewBox='0 0 9 480' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-3' y='-8' width='15' height='496'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22 0.01' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4.5 4 Q1.0 240 4.5 476 Q8.0 240 4.5 4 Z' fill='%2394691A' filter='url(%23r)'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
}
.pullquote blockquote { margin: 0; padding: 0; }
/* Three-part selector so the pull outranks the evidentiary grammar's
   .edition-body blockquote p (which was quietly winning and printing the
   pull at body size); sized a full register up (~23 to 29px) per the
   item-35 ruling: the old ~1.4x step still read as body text. */
.pullquote blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4375rem, 1.15rem + 1.2vw, 1.8125rem);
  line-height: 1.38;
  color: var(--ink);
  text-wrap: pretty;
}
.pullquote__attr {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

/* --------------------------------------------------------------------------
   Plate figures. Raster engravings seat multiply on a painted field inside
   a hairline frame with the intaglio mark; self-framed inlined SVG plates
   keep their own chrome (.plate-well--selfchromed). Fold-out beneath.
   -------------------------------------------------------------------------- */
.plate-fig {
  margin-inline: auto;
  text-align: center;
  /* Plate scale (creator ledger item 19): the coin-cannon essay's 880px
     wells are the sitewide standard. Inside .edition-body every direct
     child inherits the 66ch measure cap via max-inline-size; a plate
     figure escapes it so its own max-width governs, and the plates print
     at the plates' scale, wider than the text column (their luxury). */
  max-inline-size: none;
}
/* Deep links land ON the plate (the front page's Plate of the Week direct,
   copy deck §13.3 cabinet): clear the fixed folio bar at >=1000 so the
   plate's own top register is never hidden under it on arrival. */
svg[id^="svg-plate-"] { scroll-margin-top: 4rem; }
.plate-fig--portrait { max-width: min(40rem, 100%); }
.plate-fig--band { max-width: min(54rem, 100%); }
.plate-fig--selfchromed { max-width: min(55rem, 100%); }
.plate-fig__seat {
  position: relative;
  background-color: var(--paper);
  background-image: var(--paper-tile);
  background-size: var(--paper-tile-size);
}
.plate-fig__seat img {
  width: 100%;
  border: 1px solid var(--paper-line);
}
@media (min-width: 720px) {
  .plate-fig__seat::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(107, 90, 62, 0.30);
    pointer-events: none;
  }
}
.plate-fig figcaption { margin-top: var(--s-3); }
.foldout-row { display: flex; justify-content: center; margin-top: 2px; }

/* --------------------------------------------------------------------------
   The close of the leaf: tailpiece · essay colophon · the next leaf.
   -------------------------------------------------------------------------- */
/* .tailpiece-fig lives in gazette.css components; essay leaves give it a
   graver approach, and the SUUM CUIQUE TRIBUE allegory prints with real
   presence: THE end-of-essay plate, and only here (creator ledger item 8). */
.essay-close .tailpiece-fig {
  margin-top: calc(var(--flow-section) * 0.8);
  width: clamp(14rem, 32vw, 19rem);
}

.essay-colophon {
  margin: var(--flow-band) auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 2.1;
  color: var(--ink-3);
  text-transform: uppercase;
  max-inline-size: 46rem;
}
.essay-colophon > span { display: block; }

.next-leaf {
  margin: var(--s-6) auto 0;
  text-align: center;
}
.next-leaf a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Sub-leaf page heads (catalogue, cabinet, colophon page share the form):
   centered display head with a swelled rule beneath.
   -------------------------------------------------------------------------- */
.leafhead {
  text-align: center;
  margin-top: var(--flow-band);
}
.leafhead__title { margin-inline: auto; }
.leafhead__deck {
  margin: var(--s-4) auto 0;
  /* ~60ch (was 42rem/~74-82ch on the wide sub-leaf heads): the essays and
     apps intro deks join the same reading measure as the body, so no element
     on the page runs a wider line than the prose the reader settles into. */
  max-inline-size: 34rem;
  font-family: var(--font-text);
  font-size: var(--type-md);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.leafhead__rule {
  margin: var(--s-6) auto 0;
}

} /* @layer page */