/* ============================================================================
   FOW TRAVEL — THE PUBLISHED PAGE
   The durable reading surface for a fully published guide, briefing, decision
   guide or operational reference.

     MAP BOOK → FOLIO operational index → S2 spatial detail → PUBLISHED PAGE

   This is the reusable path. One paper, one type system, three families:

     A  EDITORIAL ATLAS        story leads      PLACE → IMAGE → THESIS → MAP
     B  CARTOGRAPHIC OPERATION the plate leads  QUESTION → PLATE → REGISTER
                                                → DECISION
     C  LIVING FOLIO HYBRID    both, authored   PLACE → WORLD + INTELLIGENCE
                                                → ACTION

   THE FOLIO PLATE. Each family's FIRST SHEET is composed as one complete
   plate — masthead, register, dominant image or map, operation index, lower
   field — and extended reading continues below it on the same stock. That is
   the difference between a folio and a long web article, and it is a layout
   decision, not a decoration one.

   NOT a second design system. Every colour resolves from the shared
   --fow-paper-* material (FOW_TRAVEL_TYPOGRAPHY_TOKENS_v0_1.css, the same
   stock the city-hub FOLIO stands on) and every face from the shared
   --fow-font-editorial / --fow-font-instrument roles. The --fow-pub-* tokens
   are component roles: they choose FROM the global system, never restate it.

   Required load order:
     FOW_TRAVEL_TYPOGRAPHY_TOKENS_v0_1.css   material + type contract
     fow_type.css                            face loading + semantic bridge
     fow_pub.css                             this file
   ============================================================================ */

/* ================================================================== §0 RESET
   The Published Page is a standalone surface: it deliberately does NOT load
   v2.css (the city hub's sheet), so it cannot inherit that file's reset. This
   is the same reset, scoped to the surfaces this file owns — without it the
   sheet's own padding lands outside its width and pushes the page sideways. */

.pub-ground, .pub-ground *, .pub-ground *::before, .pub-ground *::after { box-sizing: border-box; }
body.pub-ground { margin: 0; }
.pub-ground { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.pub h1, .pub h2, .pub h3, .pub h4, .pub p, .pub figure, .pub figcaption,
.pub dl, .pub dd, .pub ul, .pub ol, .pub blockquote, .pub table { margin: 0; padding: 0; }
.pub ul, .pub ol { list-style: none; }
.pub img, .pub svg { display: block; max-width: 100%; }
.pub table { border-collapse: collapse; }
.pub-ground :target { scroll-margin-top: 3rem; }

/* ========================================================= §0.1 COMPONENT TOKENS
   The brief's hierarchy, kept intact:
     loaded family → global semantic role → Published Page component role   */

.pub {
  /* ---- type: family ---- */
  --fow-pub-title-family:  var(--fow-font-editorial);
  --fow-pub-body-family:   var(--fow-font-editorial);
  --fow-pub-meta-family:   var(--fow-font-instrument);

  /* ---- type: size ---- */
  /* the sheet's PLACE identity — the Published Page's own instance of the
     global place-display role. The board sets it at roughly 7% of the
     sheet's inner width on every candidate, which is what this tracks. */
  --fow-pub-mast-size:     clamp(3.1rem, 6.4vw, 6.8rem);
  --fow-pub-title-size:    var(--fow-type-display);
  --fow-pub-sub-size:      var(--fow-type-h2);
  --fow-pub-dek-size:      var(--fow-type-body-lg);
  --fow-pub-h2-size:       var(--fow-type-h2);
  --fow-pub-h3-size:       var(--fow-type-h3);
  --fow-pub-body-size:     var(--fow-type-body);
  --fow-pub-body-leading:  var(--fow-leading-body-active, 1.66);
  --fow-pub-meta-size:     var(--fow-type-label);
  --fow-pub-micro-size:    var(--fow-type-micro);

  /* ---- type: fit ---- */
  --fow-pub-meta-track:    var(--fow-track-instrument-caps);
  --fow-pub-title-track:   var(--fow-track-editorial-display);
  --fow-pub-measure:       66ch;   /* the reading column, never wider */

  /* ---- material: this page's ink on this page's paper ---- */
  --fow-pub-face:    var(--fow-paper-face);
  --fow-pub-face-2:  var(--fow-paper-face-2);
  --fow-pub-face-3:  var(--fow-paper-face-3);
  --fow-pub-cloud:   var(--fow-paper-cloud);
  --fow-pub-sunk:    var(--fow-paper-sunk);
  --fow-pub-edge:    var(--fow-paper-edge);
  --fow-pub-edge-d:  var(--fow-paper-edge-dark);
  --fow-pub-edge-l:  var(--fow-paper-edge-light);
  --fow-pub-ink:     var(--fow-paper-ink);
  --fow-pub-ink-2:   var(--fow-paper-ink-soft);
  --fow-pub-ink-3:   #64635f;
  --fow-pub-ink-4:   var(--fow-paper-ink-quiet-semantic);
  --fow-pub-brass:   var(--fow-paper-brass);
  --fow-pub-brass-s: var(--fow-paper-brass-semantic);
  --fow-pub-status:  var(--fow-paper-status);
  --fow-pub-hot:     var(--fow-paper-hot);
  --fow-pub-rule:    var(--fow-rule-on-paper);
  --fow-pub-hair:    var(--fow-rule-on-paper-soft);
  --fow-pub-water:   var(--fow-paper-water);

  /* letterpress: type struck INTO the sheet, lit from above */
  --press: 0 1px 0 rgba(255, 253, 246, .62), 0 -1px 0 rgba(60, 48, 30, .10);
  --press-lg: 0 1.5px 0 rgba(255, 253, 246, .7), 0 -1px 0 rgba(60, 48, 30, .14);

  /* ---- space: an editorial rhythm, not a UI scale ---- */
  --pu1: .375rem;  --pu2: .625rem;  --pu3: 1rem;    --pu4: 1.5rem;
  --pu5: 2.25rem;  --pu6: 3.25rem;  --pu7: 4.75rem; --pu8: 7rem;

  --pub-max: 1480px;
  --pub-pad: clamp(1.5rem, 3.4vw, 4.25rem);
  --pub-gap: clamp(1.75rem, 3vw, 3.75rem);
}

/* ================================================================ §1 THE GROUND
   The sheet is a physical object; it needs somewhere to lie. Warm near-black
   with one quiet light source, so the paper reads as lit rather than pasted. */

.pub-ground {
  min-height: 100%;
  padding: clamp(1rem, 3vw, 3.5rem) clamp(.75rem, 2.5vw, 3rem) clamp(3rem, 6vw, 7rem);
  background:
    radial-gradient(120% 66% at 50% -8%, #1c1813 0%, #100e0b 46%, #0a0908 100%);
  color: var(--fow-world-ink, rgba(241, 234, 216, .92));
}

/* the shell carries the contact shadow, because the sheet itself is masked to
   a deckled edge and a mask clips its own shadow away */

/* ================================================================== §2 THE SHEET
   ONE PAPER. Face, clouding, fibre, speckle, fold memory, a cut edge with
   real stock thickness, and a deckle where the sheet was torn from the run.
   The fibre is discovered at close range; it is never a background pattern. */

.pub {
  position: relative; z-index: 1;
  isolation: isolate;
  padding: clamp(1.5rem, 3vw, 3.25rem) var(--pub-pad) clamp(2rem, 3.4vw, 3.5rem);
  color: var(--fow-pub-ink);
  background:
    radial-gradient(120% 52% at 16% 4%, rgba(255, 253, 246, .6), transparent 58%),
    radial-gradient(84% 48% at 88% 82%, rgba(150, 137, 106, .11), transparent 62%),
    linear-gradient(168deg, var(--fow-pub-cloud) 0%, var(--fow-pub-face) 34%,
                            var(--fow-pub-face-2) 80%, var(--fow-pub-face-3) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,      /* lit head           */
    0 -1px 0 rgba(90, 78, 56, .2) inset,        /* sunk foot          */
    0 2px 0 var(--fow-pub-edge),                /* stock thickness    */
    0 3px 0 var(--fow-pub-edge-d);
  font-family: var(--fow-pub-body-family);
  font-size: var(--fow-pub-body-size);
  line-height: var(--fow-pub-body-leading);

  /* the deckle — a torn edge at low amplitude, so it reads as handmade stock
     rather than as a themed effect */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='900' preserveAspectRatio='none'><filter id='d' x='-6%25' y='-4%25' width='112%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='0.035 0.07' numOctaves='4' seed='11' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.4' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='4' y='4' width='592' height='892' fill='white' filter='url(%23d)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='900' preserveAspectRatio='none'><filter id='d' x='-6%25' y='-4%25' width='112%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='0.035 0.07' numOctaves='4' seed='11' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.4' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='4' y='4' width='592' height='892' fill='white' filter='url(%23d)'/></svg>");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* laid fibre + speckle — Awagami kozo tooth. Multiply, low, fine.
   The speckle is the reference board's "organic fiber / speckle" detail:
   discrete inclusions in the pulp, not film grain over the whole page. */

/* fold memory — one quiet crease where the sheet was folded once */
.pub::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(38% - 22px),
      rgba(150, 137, 106, .028) calc(38% - 8px),
      rgba(255, 253, 246, .11) 38%,
      rgba(150, 137, 106, .028) calc(38% + 8px),
      transparent calc(38% + 22px));
}
/* the deboss frame the press left inside the trim */
.pub::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: clamp(.5rem, .9vw, .95rem);
  border: 1px solid rgba(150, 137, 106, .2);
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5), 0 -1px 0 rgba(255, 253, 246, .28) inset;
}

/* corner registration — printers' ticks, not decoration */
.pub__reg { position: absolute; inset: clamp(.9rem, 1.5vw, 1.5rem); pointer-events: none; z-index: 0; }
.pub__reg i { position: absolute; width: 15px; height: 15px; border: 0 solid var(--fow-pub-edge-d); opacity: .72; }
.pub__reg i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.pub__reg i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.pub__reg i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.pub__reg i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ============================================================ §3 SHARED VOICES */

/* instrument — measures the world */
.pub__kicker, .pub__state, .pub__datum dt, .pub__eyebrow, .pub__ops, .pub__foot,
.pub figcaption, .pub__reg-list, .pub__stamp, .pub__flag, .pub__ladder-axis,
.pub__tags, .pub__map-band, .pub__read, .pub__key dd, .pub__index b {
  font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-meta-size);
  line-height: var(--fow-leading-label);
  letter-spacing: var(--fow-pub-meta-track);
  font-variant-numeric: tabular-nums lining-nums;
  text-transform: uppercase;
}

/* editorial — speaks about the world */
.pub__title, .pub__sub, .pub__dek, .pub h2, .pub h3, .pub p, .pub li, .pub blockquote {
  font-family: var(--fow-pub-body-family);
  text-transform: none;
  letter-spacing: var(--fow-track-editorial);
}

.pub a { color: inherit; text-decoration-color: var(--fow-pub-edge); text-underline-offset: .2em; }
.pub a:hover { text-decoration-color: var(--fow-pub-brass-s); }
.pub :focus-visible { outline: 2px solid var(--fow-pub-hot); outline-offset: 3px; }

/* --------------------------------------------------------- §3.1 PRINTED MARKS */

.pub__seal { width: 100%; height: auto; }
/* the bed is the patch of sheet the stamp was struck onto: without it a red
   seal multiplied over a night photograph simply disappears */
.pub__seal .s-bed { fill: rgba(240, 234, 218, .5); }
.pub__seal .s-ring { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1.6; opacity: .62; }
.pub__seal .s-ring--in { stroke-width: .8; opacity: .45; }
.pub__seal .s-tick { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1.4; opacity: .5; }
.pub__seal .s-t {
  font-family: var(--fow-pub-meta-family); font-size: 10px; letter-spacing: .1em;
  fill: var(--fow-pub-hot); opacity: .78; text-transform: uppercase;
}
.pub__seal .s-t--lg { font-size: 13px; letter-spacing: .04em; opacity: .9; }

.pub__rose { width: 100%; height: auto; }
.pub__rose .r-ring { fill: none; stroke: var(--fow-pub-edge-d); stroke-width: .9; opacity: .55; }
.pub__rose .r-star { fill: var(--fow-pub-ink-2); opacity: .8; }
.pub__rose .r-star--o { fill: var(--fow-pub-edge-d); opacity: .55; }
.pub__rose .r-tick { fill: none; stroke: var(--fow-pub-edge-d); stroke-width: 1; }

.pub__glyph { width: 100%; height: 100%; }
.pub__glyph path { fill: none; stroke: var(--fow-pub-brass-s); stroke-width: 1.3;
  stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------- §3.2 MASTHEAD

   THE PLACE IDENTITY BAND. All three of the board's candidates open on the
   same three-part row — stamped folio mark, the place set as the sheet's
   dominant printed identity, scale and coordinate register — and only then
   on the sheet's own line of argument. It is one component here for the same
   reason: it is one design decision, made once. */

/* the toponym line under a TITULAR identity. Specific enough to beat
   `.pub__title small`, whose .21em is relative to a display-sized h1 — on
   this h1 the display size lives on the name span, so .21em resolves against
   the body size and prints the local name at three pixels. */




.pub__title {
  margin: var(--pu5) 0 0;
  font-family: var(--fow-pub-title-family);
  font-size: var(--fow-pub-title-size);
  font-weight: var(--fow-weight-editorial-emphasis);
  line-height: var(--fow-leading-display);
  letter-spacing: var(--fow-pub-title-track);
  text-wrap: balance;
  text-shadow: var(--press-lg);
}
.pub__title small {
  display: block; margin-top: .3em;
  font-size: .21em; font-weight: var(--fow-weight-editorial-regular);
  letter-spacing: .14em; line-height: 1.3; color: var(--fow-pub-ink-3);
  text-shadow: var(--press);
}
.pub__sub {
  margin: var(--pu3) 0 0;
  font-size: var(--fow-pub-sub-size);
  font-style: italic; font-weight: var(--fow-weight-editorial-regular);
  line-height: var(--fow-leading-heading); color: var(--fow-pub-ink-2);
  max-width: 34ch; text-shadow: var(--press);
}
.pub__dek {
  margin: var(--pu4) 0 0; max-width: 46ch;
  font-size: var(--fow-pub-dek-size); line-height: 1.58; color: var(--fow-pub-ink-2);
}

/* ------------------------------------------------ §3.3 THE TECHNICAL REGISTER
   The reference board's right-hand column: scale, district, landmark,
   connectivity, operations, last update, registration. Dense and printed,
   rather than laid out as UI rows. */

.pub__datum { margin: 0; display: grid; gap: var(--pu3) var(--pu5); }
.pub__datum > div { display: grid; gap: .12em; align-content: start; }
.pub__datum dt { margin: 0; color: var(--fow-pub-ink-4); font-size: var(--fow-pub-micro-size); }
.pub__datum dd {
  margin: 0;
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-body-sm);
  letter-spacing: var(--fow-track-instrument);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fow-pub-ink);
}
.pub__datum dd b { font-weight: var(--fow-weight-instrument-medium); }
.pub__datum .is-strong dd { font-size: var(--fow-type-body); }

/* --------------------------------------------- §3.4 OPERATION STRIP (folio) */

/* The board prints this as a RULED, SLIGHTLY SUNKEN BAND boxed on all four
   sides, and stacks each cell — struck glyph, then the numbered caps label,
   then the plain-language note. Not a row of buttons: a printed index. */

.pub__ops {
  display: grid; grid-template-columns: repeat(var(--ops-n, 4), minmax(0, 1fr));
  border: 1px solid var(--fow-pub-rule);
  background: linear-gradient(rgba(150, 137, 106, .055), rgba(150, 137, 106, .025));
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5),
              0 1px 2px rgba(60, 48, 30, .05) inset;
}
.pub__op {
  display: grid; align-content: start; gap: .5rem;
  padding: var(--pu4) var(--pu4) calc(var(--pu4) - .2rem);
  text-decoration: none; color: inherit;
  transition: background 160ms cubic-bezier(.2,.7,.25,1);
}
.pub__op + .pub__op { border-left: 1px solid var(--fow-pub-hair); }
a.pub__op:hover { background: rgba(138, 116, 66, .07); }
.pub__op .pub__glyph {
  width: 2.15rem; height: 2.15rem; padding: .42rem;
  border: 1px solid var(--fow-pub-rule); border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5);
}
.pub__op b {
  display: flex; gap: .55em; align-items: baseline;
  font-weight: var(--fow-weight-instrument-medium); color: var(--fow-pub-ink);
  letter-spacing: var(--fow-track-instrument-caps);
}
.pub__op b i { font-style: normal; color: var(--fow-pub-brass-s); }
.pub__op span {
  color: var(--fow-pub-ink-3); text-transform: none; letter-spacing: 0;
  font-size: var(--fow-type-body-sm); font-family: var(--fow-pub-body-family);
  line-height: 1.45;
}

/* ------------------------------------------------------------- §3.5 NOTICES */


/* ---------------------------------------------------- §3.6 THE LOWER FIELD
   The reference board's OVERVIEW / KEY INDEX / NOTES row: the band that makes
   the first sheet read as complete rather than cut off. */


/* the board's C candidate boxes its lower field instead of ruling it — the
   panels read as two mounted instruments rather than two more columns */

/* ------------------------------------------------- §3.6a THE CLOSING BAND
   The board's sheet ENDS on a registration strip — registration, last update,
   scale, and the rose — so the plate is signed off rather than trailing away.
   This is the plate's own band; the publication's colophon is the foot. */


/* ---------------------------------------------------- §3.6b THE INTERPRETATION
   BAND — what belongs to the sheet but will not fit the plate without
   collapsing its hierarchy. Same stock, immediately below the plate. */


.pub__index { display: grid; gap: .4rem; }
.pub__index li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .8rem;
  align-items: baseline; padding-left: .95rem; position: relative;
}
.pub__index li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 4px; height: 4px; background: var(--fow-pub-brass-s);
}
.pub__index b { color: var(--fow-pub-ink); font-weight: var(--fow-weight-instrument-medium); }
/* A folio index entry that names a route: the ROW is the link, not a word
   inside it, so the anchor takes over the row's own two-column grid instead
   of collapsing into its first cell. The row keeps the family's marker and
   rhythm — only the target changes. */
.pub__index li > .pub__go {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .8rem;
  align-items: baseline; text-decoration: none;
}
/* The family drops the underline only where a link earns another affordance —
   `.pub__op` has its ruled glyph and hover wash, `.pub__next` its border and
   shift. A folio index row has neither, and without one the five routes read
   as five statements. So the LABEL carries the family's own text-link
   treatment (`.pub a`): edge at rest, brass under the cursor. The value stays
   undecorated, so the row still reads as a register line. */
.pub__index li > .pub__go b {
  text-decoration: underline; text-decoration-color: var(--fow-pub-edge);
  text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.pub__index li > .pub__go:hover b,
.pub__index li > .pub__go:focus-visible b {
  text-decoration-color: var(--fow-pub-brass-s);
}
.pub__index span {
  grid-column: 2; font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-sm);
  color: var(--fow-pub-ink-3); letter-spacing: 0; text-transform: none;
}
/* Narrow: the family already collapses its two-column grids at 720 (utility
   fields, trade, why). A folio row's value is a full phrase rather than a short
   reading, so it hangs badly in a shrunken second column and stacks under the
   label instead, on the family's own breakpoint. The value's `grid-column: 2`
   has to be released with it — pinning an item to column 2 of a one-column
   template just conjures the second column back as an implicit track. */
@media (max-width: 720px) {
  .pub__index li,
  .pub__index li > .pub__go { grid-template-columns: minmax(0, 1fr); gap: .05rem; }
  .pub__index span { grid-column: auto; }
}

/* ------------------------------------------------------------- §3.7 SECTIONS */

.pub__section + .pub__section { margin-top: var(--pu7); }
.pub__section-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem var(--pu4); align-items: baseline;
  padding-bottom: var(--pu3); margin-bottom: var(--pu5);
  border-bottom: 1px solid var(--fow-pub-rule);
}
.pub__section-head .n {
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-h3);
  font-weight: var(--fow-weight-instrument-regular);
  letter-spacing: var(--fow-track-instrument); color: var(--fow-pub-brass-s);
  font-variant-numeric: tabular-nums lining-nums;
}
.pub__section-head h2 { margin: 0; font-size: var(--fow-pub-h2-size);
  font-weight: var(--fow-weight-editorial-emphasis); line-height: var(--fow-leading-heading);
  text-shadow: var(--press); }
.pub__section-head .pub__eyebrow { color: var(--fow-pub-ink-4); justify-self: end; text-align: right; }

.pub__lead { max-width: 58ch; margin: 0 0 var(--pu5);
  font-size: var(--fow-type-body-lg); line-height: 1.6; color: var(--fow-pub-ink-2); }
.pub__prose { max-width: var(--fow-pub-measure); }
.pub__prose > p + p { margin-top: var(--pu3); }
.pub__prose p { font-size: var(--fow-pub-body-size); line-height: var(--fow-pub-body-leading); }
.pub__prose h3 { margin: var(--pu5) 0 var(--pu2); font-size: var(--fow-pub-h3-size);
  font-weight: var(--fow-weight-editorial-emphasis); line-height: var(--fow-leading-heading); }
.pub__prose em { font-style: italic; }
.pub__prose strong { font-weight: var(--fow-weight-editorial-strong); }
.pub__eyebrow { color: var(--fow-pub-ink-4); }

.pub__note { max-width: 62ch; margin: var(--pu4) 0 0;
  font-size: var(--fow-type-body-sm); line-height: 1.62; color: var(--fow-pub-ink-2); }
.pub__rail .pub__note, .pub__interp .pub__note, .pub__aside .pub__note,
.pub__field-col .pub__note { max-width: none; margin-top: var(--pu3); color: var(--fow-pub-ink-3); }

/* ---------------------------------------------------------------- §3.8 MEDIA
   Archival treatment: the image is printed INTO the sheet, so it carries the
   paper's own ink range and grain rather than sitting on top as a photo. */

.pub__fig { margin: 0; }
.pub__fig-plate { position: relative; display: block; overflow: hidden;
  border: 1px solid var(--fow-pub-edge);
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5),
              0 0 0 1px rgba(150, 137, 106, .18) inset; }
.pub__fig-plate img {
  width: 100%; height: auto; display: block;
  filter: saturate(.62) contrast(1.06) brightness(1.02) sepia(.16);
}
/* ink absorption + press grain, keyed to the paper rather than the photo */
.pub__fig-ink {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(38, 30, 18, .3) 100%),
    linear-gradient(rgba(237, 231, 214, .1), rgba(150, 137, 106, .14)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='0.3'/></svg>");
  background-size: auto, auto, 140px 140px;
  mix-blend-mode: multiply; opacity: .85;
}
/* A USER-ACCEPTED MASTER publishes at its own proportion. The container takes
   the image's aspect ratio rather than the image being cut to the
   container's, because the accepted composition is what was accepted —
   `object-fit: cover` on a frozen master is a crop, and a crop is a new
   visual decision this page is not entitled to make. */
.pub__fig--exact .pub__fig-plate { aspect-ratio: var(--fig-ar, auto); }
.pub__fig--exact .pub__fig-plate img { width: 100%; height: 100%; object-fit: contain; }

.pub__fig figcaption {
  display: flex; flex-wrap: wrap; gap: .35rem var(--pu3); align-items: baseline;
  padding: var(--pu2) 0 0; color: var(--fow-pub-ink-3);
  text-transform: none; letter-spacing: var(--fow-track-instrument);
}
.pub__fig figcaption b {
  color: var(--fow-pub-ink-4); text-transform: uppercase;
  letter-spacing: var(--fow-pub-meta-track); white-space: nowrap;
  font-weight: var(--fow-weight-instrument-medium);
}
.pub__fig figcaption span { font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-body-sm); line-height: 1.5; letter-spacing: 0; }

/* ============================================== §3.9 THE CARTOGRAPHIC PLATE
   Real geography, engraved onto the sheet. The relief raster is GSI DEM;
   everything drawn over it is vector at the same projection. Ink weights
   follow an atlas hierarchy — graticule quietest, coast firm, corridors and
   nodes loudest — because that is the order the reader needs them in. */

.pub__map { margin: 0; }
.pub__map-band {
  display: flex; justify-content: space-between; gap: var(--pu3);
  padding: .5rem var(--pu3); color: var(--fow-pub-ink-4);
  font-size: var(--fow-pub-micro-size);
  border: 1px solid var(--fow-pub-rule); border-bottom: 0;
}
.pub__map-body {
  position: relative; border: 1px solid var(--fow-pub-rule);
  background: rgba(255, 253, 246, .3);
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5) inset;
}
.pub__map-relief {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; mix-blend-mode: multiply;
  /* the DEM is inked for paper at generation time; this is the last stop of
     contrast that separates the water body and the hill shadow from the
     plain, so the vector layers have something to sit against */
  filter: contrast(1.16) saturate(1.08);
}
.pub__mapsvg { position: relative; width: 100%; height: auto; display: block; }
.pub__map-rose { position: absolute; right: 1.2%; bottom: 3%; width: clamp(38px, 4.4%, 58px); opacity: .72; }

.pub__mapsvg text {
  font-family: var(--fow-pub-meta-family);
  font-variant-numeric: tabular-nums lining-nums; text-transform: uppercase;
}
.m-grat path { fill: none; stroke: var(--fow-pub-edge-d); stroke-width: .6;
  stroke-dasharray: 2 5; opacity: .5; vector-effect: non-scaling-stroke; }

/* the built-up extent — a tint with its own edge, not a fill. It has to say
   WHERE THE CITY IS without becoming the loudest thing on the plate. */
.m-urban path { fill: rgba(150, 137, 106, .2); fill-rule: evenodd;
  stroke: var(--fow-pub-ink-3); stroke-width: .8;
  opacity: .62; vector-effect: non-scaling-stroke; }

/* the road network: a casing under each expressway so a corridor reads as a
   corridor where it crosses the rail, exactly as it would on a printed plate */
.m-road--major path { fill: none; stroke: var(--fow-pub-brass-s); stroke-width: 1;
  opacity: .62; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.m-road--case path { fill: none; stroke: var(--fow-pub-face); stroke-width: 4.2;
  opacity: .72; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.m-road--express path { fill: none; stroke: var(--fow-pub-brass); stroke-width: 2;
  opacity: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.m-place .m-place-dot { fill: var(--fow-pub-ink-3); }
.m-place text { font-size: 10px; letter-spacing: .12em; fill: var(--fow-pub-ink-3); }
.m-gratt text { font-size: 10px; letter-spacing: .12em; fill: var(--fow-pub-ink-4); opacity: .8; }
/* CONTEXT INKS, in the order the reader needs them. Each is deliberately
   quieter than the layer above it — density only reads as craft when it is
   ordered. */
.m-admin path { fill: none; stroke: var(--fow-pub-edge-d); stroke-width: .7;
  stroke-dasharray: 6 4 1.5 4; opacity: .34; vector-effect: non-scaling-stroke; }
.m-river path { fill: none; stroke: var(--fow-pub-water); stroke-width: 1.6;
  stroke-linecap: round; opacity: .85; vector-effect: non-scaling-stroke; }
/* rail is the layer this page's question actually turns on, so it is the
   loudest thing on the plate short of the operational overlay. Trunk lines
   carry a tie pattern the way a printed atlas draws a railway. */
.m-rail path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: butt; }
.m-rail--branch path { stroke: var(--fow-pub-ink-2); stroke-width: 1;
  stroke-dasharray: 5 3; opacity: .72; }
/* a trunk railway is drawn the way an atlas draws one — a solid rule with
   ties struck across it. Two strokes of the same path, not two datasets. */
.m-rail--trunk path { stroke: var(--fow-pub-ink); stroke-width: 1.4; opacity: .9; }
/* the ties: the SAME trunk paths struck a second time with a heavy, mostly
   empty dash, which is how a printed atlas hatches a railway */
.m-rail--tie path { stroke: var(--fow-pub-ink); stroke-width: 4.6;
  stroke-dasharray: .9 8; opacity: .7; }
.m-coast path { fill: none; stroke: var(--fow-pub-ink); stroke-width: 1.6;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m-ring path { fill: none; stroke: var(--fow-pub-brass-s); stroke-width: .8;
  stroke-dasharray: 5 4; opacity: .62; vector-effect: non-scaling-stroke; }
.m-ringt text { font-size: 9.5px; letter-spacing: .1em; fill: var(--fow-pub-brass-s); opacity: .9; }
.m-corr path { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1.3;
  stroke-dasharray: 9 4 2 4; opacity: .78; vector-effect: non-scaling-stroke; }
.m-node .n-halo { fill: none; stroke: var(--fow-pub-ink); stroke-width: .9; opacity: .5; }
.m-node .n-cross { fill: none; stroke: var(--fow-pub-ink); stroke-width: .9; opacity: .65; }
.m-node .n-dot { fill: var(--fow-pub-hot); }
.m-node .n--core .n-dot { fill: var(--fow-pub-ink); }
.m-node .n--place .n-dot { fill: var(--fow-pub-ink-3); }
.m-lbl .l { font-size: 13px; letter-spacing: .11em; fill: var(--fow-pub-ink);
  paint-order: stroke; stroke: rgba(240, 234, 218, .82); stroke-width: 3px; }
.m-lbl .l--q { font-size: 10px; letter-spacing: .1em; fill: var(--fow-pub-ink-3); }
.m-lbl .l--m { font-size: 9.5px; letter-spacing: .1em; fill: var(--fow-pub-brass-s); }
.m-scale path { fill: none; stroke: var(--fow-pub-ink-2); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.m-scale-fill { fill: var(--fow-pub-ink-2); opacity: .8; }
.m-scale text { font-size: 9.5px; letter-spacing: .12em; fill: var(--fow-pub-ink-3); }
.m-frame { fill: none; stroke: var(--fow-pub-ink-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.m-idxtick path { fill: none; stroke: var(--fow-pub-ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-idx text { font-size: 10px; letter-spacing: .14em; fill: var(--fow-pub-ink-4); }

/* legend + readings + provenance, as ordinary DOM under the plate */
.pub__legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--pu3) var(--pu5);
  padding: var(--pu3);
  border: 1px solid var(--fow-pub-rule); border-top: 0;
}
.pub__legend-col > .pub__eyebrow { display: block; margin-bottom: var(--pu2); }
.pub__key { display: grid; gap: .26rem; }
.pub__legend .pub__reg-list { gap: .2rem; }
.pub__key > div { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .55rem; align-items: center; }
.pub__key dt { height: 0; position: relative; }
.pub__key .k--core::before, .pub__key .k--gate::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  transform: translate(-50%, -50%); border-radius: 50%;
}
.pub__key .k--core::before { background: var(--fow-pub-ink); box-shadow: 0 0 0 3px rgba(25, 24, 24, .18); }
.pub__key .k--gate::before { background: var(--fow-pub-hot); box-shadow: 0 0 0 3px rgba(178, 58, 30, .18); }
.pub__key .k--ring { border-top: 1px dashed var(--fow-pub-brass-s); }
.pub__key .k--express { border-top: 2px solid var(--fow-pub-brass-s); }
.pub__key .k--road { border-top: 1px solid var(--fow-pub-brass-s); opacity: .6; }
.pub__key .k--urban { height: 10px; background: rgba(150, 137, 106, .3);
  border: 1px solid var(--fow-pub-ink-3); }
.pub__key .k--rail { border-top: 1.5px solid var(--fow-pub-ink-2); }
.pub__key .k--admin { border-top: 1px dashed var(--fow-pub-edge-d); }
.pub__key .k--river { border-top: 1.5px solid var(--fow-pub-water); }
.pub__key .k--grat { border-top: 1px dashed var(--fow-pub-edge-d); }
.pub__key .k--sea { height: 10px; background: var(--fow-pub-water); opacity: .5; }
.pub__key dd { color: var(--fow-pub-ink-2); text-transform: none;
  letter-spacing: var(--fow-track-instrument); font-size: var(--fow-pub-micro-size); }

.pub__read { width: 100%; font-size: var(--fow-pub-micro-size); }
.pub__read th, .pub__read td { text-align: right; padding: .2rem 0 .2rem .7rem;
  border-bottom: 1px solid var(--fow-pub-hair); }
.pub__read thead th { color: var(--fow-pub-ink-4); font-weight: var(--fow-weight-instrument-regular); }
.pub__read tbody th { text-align: left; padding-left: 0; color: var(--fow-pub-ink);
  font-weight: var(--fow-weight-instrument-medium); }
.pub__read td { color: var(--fow-pub-ink-2); }

/* ------------------------------------------------------- §3.10 SMALL PLATES */

.pub__locator { margin: 0; }
/* a locator is a marginal plate. Left uncapped it grows to whatever column it
   lands in and stops reading as an inset. */
.pub svg.pub__locsvg { width: 100%; max-width: 9.5rem; height: auto; }
.pub__locator figcaption { margin-top: var(--pu2); max-width: 22ch; }
.lc-land path { fill: rgba(150, 137, 106, .22); stroke: var(--fow-pub-ink-3);
  stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lc-mark path { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-halo { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1; opacity: .6; }
.lc-dot { fill: var(--fow-pub-hot); }
.lc-t { font-family: var(--fow-pub-meta-family); font-size: 11px; letter-spacing: .14em;
  fill: var(--fow-pub-ink-2); text-transform: uppercase; }

.pub__polar { margin: 0; display: grid; gap: var(--pu3); }
.pub svg.pub__polarsvg { width: 100%; height: auto; max-width: 15rem; margin-inline: auto; }
.pub__polarsvg text { font-family: var(--fow-pub-meta-family); text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums; }
.p-spoke path { fill: none; stroke: var(--fow-pub-edge-d); stroke-width: .5;
  opacity: .4; vector-effect: non-scaling-stroke; }
.p-ring circle { fill: none; stroke: var(--fow-pub-edge-d); stroke-width: .7;
  opacity: .55; vector-effect: non-scaling-stroke; }
.p-ringt text { font-size: 8.5px; letter-spacing: .1em; fill: var(--fow-pub-ink-4); }
.p-card { font-size: 10px; letter-spacing: .12em; fill: var(--fow-pub-ink-3); }
.p-ray { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1.2; opacity: .8; vector-effect: non-scaling-stroke; }
.p-dot { fill: var(--fow-pub-hot); }
.p-core { fill: var(--fow-pub-ink); }
.p-l { font-size: 11px; letter-spacing: .1em; fill: var(--fow-pub-ink); }
.p-l--q { font-size: 8.5px; fill: var(--fow-pub-ink-3); }

/* -------------------------------------------------- §3.11 THE LADDER (evidence)
   Routes plotted against a shared time axis. A measured drawing, not a chart
   widget: a hairline track with the measure inked over it. */

.pub__ladder { margin: 0; border-top: 1px solid var(--fow-pub-rule); }
.pub__rung {
  display: grid;
  grid-template-columns: minmax(7.5rem, .9fr) minmax(0, 1.9fr) minmax(5.5rem, auto);
  gap: .2rem var(--pu4); align-items: baseline;
  padding: var(--pu3) var(--pu1) var(--pu3) 0;
  border-bottom: 1px solid var(--fow-pub-hair);
}
.pub__rung > .k { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.pub__rung .k b { display: block; font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-body); font-weight: var(--fow-weight-editorial-emphasis);
  line-height: 1.25; letter-spacing: 0; text-transform: none; }
.pub__rung .k i { display: block; font-style: normal; margin-bottom: .16em;
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__bar {
  grid-column: 2; grid-row: 1; position: relative; height: .34rem; align-self: center;
  background: rgba(150, 137, 106, .16);
  border-bottom: 1px solid rgba(150, 137, 106, .3);
}
.pub__bar span {
  position: absolute; inset: 0 auto -1px 0; width: calc(var(--v) / var(--vmax) * 100%);
  background: rgba(104, 87, 48, .78); border-bottom: 1px solid var(--fow-pub-brass-s);
}
.pub__rung--lead .pub__bar span { background: rgba(178, 58, 30, .82); border-bottom-color: var(--fow-pub-hot); }
.pub__m {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: right;
  font-family: var(--fow-pub-meta-family); font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--fow-track-instrument);
}
.pub__m b { display: block; font-size: var(--fow-type-body); font-weight: var(--fow-weight-instrument-medium); }
.pub__m i { display: block; font-style: normal; font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__tags { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: .25rem .9rem;
  font-size: var(--fow-pub-micro-size); color: var(--fow-pub-ink-4); }
.pub__tags .s { color: var(--fow-pub-brass-s); }
.pub__ladder-axis {
  display: grid;
  grid-template-columns: minmax(7.5rem, .9fr) minmax(0, 1.9fr) minmax(5.5rem, auto);
  gap: var(--pu4); padding-top: var(--pu2);
  color: var(--fow-pub-ink-4); font-size: var(--fow-pub-micro-size);
}
.pub__ladder-axis .scale { grid-column: 2; display: flex; justify-content: space-between;
  border-top: 1px solid var(--fow-pub-hair); padding-top: .3rem; }
.pub__ladder-axis .scale i { font-style: normal; }

/* --------------------------------------------------- §3.12 COMPARISON PLATES
   Rules run ACROSS, not between: a vertical rule drawn with `+ *` lands on
   the wrong edge the moment an auto-fit row wraps. */

.pub__compare {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0 var(--pub-gap); border-bottom: 1px solid var(--fow-pub-rule);
}
.pub__compare > * { padding: var(--pu4) 0 var(--pu5); border-top: 1px solid var(--fow-pub-rule); }
.pub__compare h3 { margin: 0; display: flex; align-items: baseline; gap: .6rem;
  font-size: var(--fow-pub-h3-size); font-weight: var(--fow-weight-editorial-emphasis); }
.pub__compare h3 code { font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-meta-size);
  letter-spacing: var(--fow-pub-meta-track); color: var(--fow-pub-brass-s); }
/* a compared item that names a route — the heading becomes the link and has
   to keep the h3's own title/code baseline row, so the anchor inherits the
   flex line rather than re-stacking it */
.pub__compare h3 > .pub__go {
  display: flex; align-items: baseline; gap: .6rem; text-decoration: none;
}
.pub__compare h3 > .pub__go .pub__go-t {
  text-decoration: underline; text-decoration-color: var(--fow-pub-edge);
  text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.pub__compare h3 > .pub__go:hover .pub__go-t,
.pub__compare h3 > .pub__go:focus-visible .pub__go-t {
  text-decoration-color: var(--fow-pub-brass-s);
}
.pub__compare p { margin: var(--pu2) 0 0; max-width: 40ch;
  font-size: var(--fow-type-body-sm); line-height: 1.6; color: var(--fow-pub-ink-2); }

/* ------------------------------------------------ §3.13 FLIPS — what changes */

.pub__flips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 var(--pub-gap); border-bottom: 1px solid var(--fow-pub-rule);
}
.pub__flip { padding: var(--pu4) 0 var(--pu5); border-top: 1px solid var(--fow-pub-rule); }
.pub__flip .n { display: block; margin-bottom: var(--pu2);
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-meta-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__flip h3 { margin: 0 0 var(--pu2); font-size: var(--fow-type-h3);
  font-weight: var(--fow-weight-editorial-emphasis); line-height: var(--fow-leading-heading); }
.pub__flip p { margin: 0; font-size: var(--fow-type-body-sm); line-height: 1.6; color: var(--fow-pub-ink-2); }
/* a flag marks a VERDICT and is allowed to be loud; registration lines belong
   in the item's register, in register ink */
.pub__flip .pub__flag { display: inline-block; margin-top: var(--pu3); color: var(--fow-pub-hot);
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase; }
.pub__flip .pub__reg-list { margin-top: var(--pu3); }

/* --------------------------------------------------------- §3.14 THE DECISION */

.pub__decision {
  padding: var(--pu4) var(--pu4) var(--pu4) calc(var(--pu4) - 3px);
  border-top: 1px solid var(--fow-pub-rule);
  border-bottom: 1px solid var(--fow-pub-rule);
  border-left: 3px solid var(--fow-pub-brass);
  background: linear-gradient(135deg, rgba(138, 116, 66, .07), rgba(138, 116, 66, 0) 62%);
}
.pub__decision .pub__eyebrow { display: block; margin-bottom: var(--pu2); }
.pub__decision h2 {
  margin: 0; max-width: 28ch;
  font-size: clamp(1.4rem, 2.05vw, 2.15rem);
  font-weight: var(--fow-weight-editorial-emphasis);
  line-height: var(--fow-leading-tight); text-wrap: balance;
  text-shadow: var(--press);
}
.pub__decision p { margin: var(--pu3) 0 0; max-width: 46ch;
  font-size: var(--fow-type-body-sm); line-height: 1.62; color: var(--fow-pub-ink-2); }
.pub__decision .pub__reg-list { margin-top: var(--pu3); }

/* -------------------------------------------------- §3.15 SOURCE / PROVENANCE
   Empty slots are shown empty. Filling them with plausible-looking sources is
   the one thing an evidence system must never do. */

.pub__reg-list { display: grid; gap: .28rem; margin: 0; padding: 0; list-style: none;
  color: var(--fow-pub-ink-4); font-size: var(--fow-pub-micro-size); }
/* the term column is CAPPED, not `auto`. A long source label — "rail, admin
   edges, rivers, built-up extent" — sized the column to itself and squeezed
   the value column to one character per line. */
.pub__reg-list > * { display: grid;
  grid-template-columns: minmax(4.5rem, 11rem) minmax(5.5rem, 1fr);
  gap: .15rem var(--pu3); }
.pub__reg-list dt, .pub__reg-list .k { color: var(--fow-pub-ink-4); }
.pub__reg-list dd, .pub__reg-list .v { margin: 0; color: var(--fow-pub-ink-2);
  text-transform: none; letter-spacing: var(--fow-track-instrument); }
.pub__reg-list .v--none { color: var(--fow-pub-ink-4); font-style: italic; }

.pub__rail { align-self: start; }
.pub__rail h2 { margin: 0 0 var(--pu3); font-size: var(--fow-type-h3);
  font-weight: var(--fow-weight-editorial-emphasis); }
.pub__rail p { font-size: var(--fow-type-body-sm); line-height: 1.6; color: var(--fow-pub-ink-2); }
.pub__rail > * + * { margin-top: var(--pu4); }

/* ---------------------------------------------------------------- §3.16 FOOT
   A ruled registration band, the way the reference board closes its sheet —
   labelled cells, one rule, the rose, the imprint, then the next action. */

.pub__next {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  display: grid; gap: .25rem; text-decoration: none; text-align: right;
  padding: var(--pu3) 0 var(--pu3) var(--pu5);
  border-left: 1px solid var(--fow-pub-hair);
  transition: padding-right 220ms cubic-bezier(.16,.86,.22,1);
}
.pub__next:hover { padding-right: .4rem; }
.pub__next b { font-family: var(--fow-pub-body-family); font-size: var(--fow-type-h3);
  font-weight: var(--fow-weight-editorial-emphasis); color: var(--fow-pub-ink);
  letter-spacing: 0; text-transform: none; }
.pub__next span { color: var(--fow-pub-ink-4); font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; }

/* ============================================ §3.9b THE OPERATIONAL PLATE
   Family B's dominant object. It is the same printed plate the cartographic
   hero is — band, ruled body, key beneath — so a sheet whose operational
   visual is a comparison rather than a map still reads as the same family.

   Ink hierarchy follows the atlas rule: grid quietest, axis firm, rejected
   candidates present but struck, the answer loudest. Nothing is coloured in
   to attract attention; the one hot mark on the plate is the answer. */

.pub__plate { margin: 0; display: grid; }
.pub__plate-band {
  display: flex; justify-content: space-between; gap: var(--pu3); margin: 0;
  padding: .5rem var(--pu3); color: var(--fow-pub-ink-4);
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  border: 1px solid var(--fow-pub-rule); border-bottom: 0;
}
.pub__plate-body {
  position: relative; padding: var(--pu3) var(--pu3) var(--pu2);
  border: 1px solid var(--fow-pub-rule);
  background: rgba(255, 253, 246, .3);
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5) inset;
}
.pub svg.pub__plotsvg { width: 100%; height: auto; display: block; }

.pub__plotsvg text {
  font-family: var(--fow-pub-meta-family);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .08em;
}
.pl-grid path { fill: none; stroke: var(--fow-pub-edge-d); stroke-width: .6;
  stroke-dasharray: 2 5; opacity: .45; vector-effect: non-scaling-stroke; }
.pl-axis path { fill: none; stroke: var(--fow-pub-ink-2); stroke-width: 1.1;
  vector-effect: non-scaling-stroke; }
.pl-tick text { font-size: 11px; fill: var(--fow-pub-ink-4); }
.pl-tick .pl-axis-k { font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; fill: var(--fow-pub-ink-3); }

/* a stated filter is a hairline; the answer's own line is struck in brass */
.pl-rule path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-rule .r--threshold { stroke: var(--fow-pub-ink-3); stroke-dasharray: 5 4; }
.pl-rule .r--answer { stroke: var(--fow-pub-brass-s); stroke-dasharray: 0; }
.pl-rule text { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.pl-rule text.r--threshold { fill: var(--fow-pub-ink-4); }
.pl-rule text.r--answer { fill: var(--fow-pub-brass-s); }

.pl-pt .p { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pl-pt .p--in { fill: rgba(104, 87, 48, .68); stroke: var(--fow-pub-brass-s); }
/* rejected candidates stay on the plate — hollow and struck, never deleted */
.pl-pt .p--out { fill: rgba(255, 253, 246, .45); stroke: var(--fow-pub-ink-3); }
.pl-pt .p-strike { fill: none; stroke: var(--fow-pub-ink-3); stroke-width: 1.1;
  vector-effect: non-scaling-stroke; }
.pl-pt .p--lead { fill: var(--fow-pub-hot); stroke: var(--fow-pub-hot); }
.pl-pt .p-ring { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1;
  opacity: .5; vector-effect: non-scaling-stroke; }

.pl-lbl .l-lead { fill: none; stroke: var(--fow-pub-ink-3); stroke-width: .8;
  vector-effect: non-scaling-stroke; }
.pl-lbl text { font-size: 11.5px; fill: var(--fow-pub-ink); letter-spacing: .1em; }
.pl-lbl text.l--lead { fill: var(--fow-pub-hot);
  font-weight: var(--fow-weight-instrument-medium); }
.pl-lbl text.l--q { font-size: 9.5px; fill: var(--fow-pub-ink-4); }

/* the threshold plate's own marks */
.pl-line .l { fill: none; stroke: var(--fow-pub-ink-2); stroke-width: 1.6;
  vector-effect: non-scaling-stroke; }
.pl-line .l--lead { stroke: var(--fow-pub-brass-s); stroke-width: 1.8; }
.pl-line-t { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  fill: var(--fow-pub-ink-3); }
.pl-line-t.t--lead { fill: var(--fow-pub-brass-s); }
/* the trip marker is a reference line and the gap is a measurement taken at
   it — dashed against solid, so the two do not disappear into each other */
.pl-mark .m-now { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1.1;
  stroke-dasharray: 3 4; opacity: .8; vector-effect: non-scaling-stroke; }
.pl-mark .m-now-t { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  fill: var(--fow-pub-hot); }
.pl-mark .m-gap { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1;
  vector-effect: non-scaling-stroke; }
.pl-mark .m-gap-t { font-size: 12px; fill: var(--fow-pub-hot);
  font-weight: var(--fow-weight-instrument-medium); letter-spacing: .06em; }
.pl-mark .m-cross { fill: var(--fow-pub-ink); }
.pl-mark .m-cross-ring { fill: none; stroke: var(--fow-pub-ink-2); stroke-width: 1;
  vector-effect: non-scaling-stroke; }
.pl-mark .m-cross-lead { fill: none; stroke: var(--fow-pub-ink-3); stroke-width: .8;
  vector-effect: non-scaling-stroke; }
.pl-mark .m-cross-t { font-size: 11px; fill: var(--fow-pub-ink);
  letter-spacing: .1em; }

/* the key, printed under the plate the way the atlas prints its legend */
.pub__plate-key {
  display: flex; flex-wrap: wrap; gap: .4rem var(--pu4); margin: 0;
  padding: var(--pu3); list-style: none;
  border: 1px solid var(--fow-pub-rule); border-top: 0;
  color: var(--fow-pub-ink-2); font-size: var(--fow-pub-micro-size);
}
.pub__plate-key li { display: flex; align-items: center; gap: .5rem; }
.pub__plate-key i { width: 12px; height: 12px; flex: 0 0 auto; position: relative; }
.pub__plate-key .k--in i { border-radius: 50%; background: rgba(104, 87, 48, .68);
  box-shadow: 0 0 0 1px var(--fow-pub-brass-s); }
.pub__plate-key .k--out i { border-radius: 50%; background: rgba(255, 253, 246, .45);
  box-shadow: 0 0 0 1px var(--fow-pub-ink-3); }
.pub__plate-key .k--lead i { border-radius: 50%; background: var(--fow-pub-hot);
  box-shadow: 0 0 0 3px rgba(178, 58, 30, .2); }
.pub__plate-key .k--rule i { height: 0; border-top: 1px dashed var(--fow-pub-ink-3); }
.pub__plate-key .k--answer i { height: 0; border-top: 1px solid var(--fow-pub-brass-s); }
.pub__plate-key .k--line i { height: 0; border-top: 1.6px solid var(--fow-pub-ink-2); }
.pub__plate-key .k--lineb i { height: 0; border-top: 1.8px solid var(--fow-pub-brass-s); }
.pub__plate-key .k--now i { height: 0; border-top: 1.2px solid var(--fow-pub-hot); }

.pub__plate-read { padding: var(--pu3); gap: .2rem;
  border: 1px solid var(--fow-pub-rule); border-top: 0; }
.pub__plate figcaption { margin-top: var(--pu2); }

/* the narrow state keeps the plate a plate: the drawing scales with its
   viewBox, and the key stacks rather than the axes being dropped */
@media (max-width: 720px) {
  .pub__plate-body { padding: var(--pu2) var(--pu2) 0; }
  .pub__plate-key { gap: .35rem var(--pu3); }
}

/* the chip and the sample stamps, kept from the printed result card the
   decision plate supersedes — the card said the answer without its reasons,
   which made it the same statement twice once the plate existed */
.pub__card-chip .c-body { fill: rgba(150, 137, 106, .22); stroke: var(--fow-pub-brass-s);
  stroke-width: 1; vector-effect: non-scaling-stroke; }
.pub__card-chip .c-core { fill: none; stroke: var(--fow-pub-brass-s);
  stroke-width: 1; vector-effect: non-scaling-stroke; }
.pub__card-chip .c-trace { fill: none; stroke: var(--fow-pub-brass-s);
  stroke-width: 1; opacity: .8; vector-effect: non-scaling-stroke; }

.pub__card-stamps { grid-column: 2; grid-row: 6; margin: 0; justify-self: end;
  align-self: end; display: flex; flex-wrap: wrap; gap: .4rem; }
.pub__card-stamps span {
  padding: .14em .55em; border: 1px dashed var(--fow-pub-ink-3);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-3);
}
/* ============================================== §3.9d THE UTILITY INTERACTION
   The slot where the reader does the job. It is set as part of the sheet, not
   as a widget dropped onto it: paper, rules, instrument voice, the same
   register grammar as the evidence beneath it. No panel chrome, no card stack,
   no form that arrives before the reader knows what it is for.

   The controls are compact and the RESULT is the loud thing — a utility whose
   form outweighs its answer has the hierarchy backwards. */

.pub__util {
  display: grid; gap: var(--pu4);
  padding: var(--pu5) 0;
  border-top: 1px solid var(--fow-pub-rule);
  border-bottom: 1px solid var(--fow-pub-rule);
}
.pub__util-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem var(--pu3); }
.pub__util-head b { font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-h3); font-weight: var(--fow-weight-editorial-emphasis);
  color: var(--fow-pub-ink); text-shadow: var(--press); }
.pub__util-head i { font-style: normal; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__util-lede { margin: 0; max-width: 62ch; font-size: var(--fow-type-body-sm);
  line-height: 1.6; color: var(--fow-pub-ink-2); }

/* ---- the controls: a ruled row of small instruments, not a form wall ---- */
.pub__util-form { margin: 0; }
.pub__util-fields {
  margin: 0; padding: var(--pu3) 0 0; border: 0; border-top: 1px solid var(--fow-pub-hair);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--pu3) var(--pu5);
}
.pub__util-legend { padding: 0; margin-bottom: var(--pu2);
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  color: var(--fow-pub-ink-4); }
.pub__util-f { display: grid; gap: .3rem; }
.pub__util-fk { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__util-fn { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); color: var(--fow-pub-ink-3); }
.pub__util-f select,
.pub__util-f input {
  width: 100%; min-height: 2.75rem;         /* touch target */
  padding: .5rem .7rem;
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-body-sm);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fow-pub-ink);
  background: rgba(255, 253, 246, .55);
  border: 1px solid var(--fow-pub-ink-3); border-radius: 0;
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5) inset;
  appearance: none; -webkit-appearance: none;
}
.pub__util-f select {
  padding-right: 1.9rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--fow-pub-ink-3) 50%),
                    linear-gradient(135deg, var(--fow-pub-ink-3) 50%, transparent 50%);
  background-position: right 1rem center, right .68rem center;
  background-size: .32rem .32rem, .32rem .32rem;
  background-repeat: no-repeat;
}
.pub__util-f select:hover, .pub__util-f input:hover { border-color: var(--fow-pub-ink-2); }
.pub__util-f select:focus-visible, .pub__util-f input:focus-visible {
  outline: 2px solid var(--fow-pub-brass); outline-offset: 2px; border-color: var(--fow-pub-ink);
}

/* ---- the result: the loud half ---- */
.pub__util-out {
  display: grid; gap: var(--pu3);
  padding: var(--pu4);
  border: 1px solid var(--fow-pub-rule);
  background: linear-gradient(158deg, rgba(255, 253, 246, .5), rgba(255, 253, 246, 0) 60%),
              var(--fow-pub-cloud);
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5) inset;
}
.pub__util-eyebrow { margin: 0; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-hot); }
.pub__util-answer { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .3rem var(--pu4); font-family: var(--fow-pub-meta-family);
  font-variant-numeric: tabular-nums lining-nums; }
.pub__util-answer b { font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: .96;
  font-weight: var(--fow-weight-instrument-medium); color: var(--fow-pub-ink);
  text-shadow: var(--press-lg); }
.pub__util-answer i { font-style: normal; font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: var(--fow-weight-instrument-medium); color: var(--fow-pub-ink); }
.pub__util-answer span { font-size: var(--fow-pub-meta-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  color: var(--fow-pub-ink-3); }
.pub__util-answer small { font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); color: var(--fow-pub-ink-4); }
.pub__util-answer--ic b { color: var(--fow-pub-hot); }
.pub__util-rel { margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem var(--pu3); font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); color: var(--fow-pub-ink-4); }

.pub__util-why-list { margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--pu2) var(--pu4); padding-top: var(--pu3);
  border-top: 1px solid var(--fow-pub-hair); }
.pub__util-why-list dt { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__util-why-list dd { margin: .1em 0 0; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-type-body-sm); color: var(--fow-pub-ink);
  font-variant-numeric: tabular-nums lining-nums; }

.pub__util-trade, .pub__util-why { margin: 0; display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr); gap: .2rem var(--pu3);
  align-items: baseline; padding-top: var(--pu3);
  border-top: 1px solid var(--fow-pub-hair); }
.pub__util-trade i { font-style: normal; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__util-trade.is-verdict i { color: var(--fow-pub-hot); }
.pub__util-trade span, .pub__util-why { font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-body-sm); line-height: 1.55; color: var(--fow-pub-ink-2); }

.pub__util-state { margin: 0; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-type-body-sm); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; }
.pub__util-state.is-bad { color: var(--fow-pub-hot); }
.pub__util-state.is-none { color: var(--fow-pub-ink-2); }

/* the limits every result inherits from the data it was computed on */
.pub__util-stamp { margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem var(--pu3); padding-top: var(--pu3);
  border-top: 1px solid var(--fow-pub-hair);
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  color: var(--fow-pub-ink-4); }
.pub__chip--sample { color: var(--fow-pub-ink-3); border-style: dashed; }
.pub__chip--fact { color: var(--fow-pub-ink-2); }
.pub__chip--derived { color: var(--fow-pub-ink-3); border-style: dotted; }
.pub__chip--unknown { color: var(--fow-pub-hot); border-style: dashed; }

/* a yen fact projected into the reader's reference currency: an
   approximation with its date, printed beside the fact, never instead of it */
.pub__util-fx { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem;
  font-family: var(--fow-pub-meta-family); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fow-type-body-sm); color: var(--fow-pub-ink-2); }
.pub__util-fx small { font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__util-vp.is-eligible i { color: var(--fow-pub-brass-s); }
.pub__util-vp.is-not_eligible i { color: var(--fow-pub-ink-3); }
.pub__util-ctxhost { display: grid; gap: var(--pu2); }
.pub__util-ctxhost::before { content: ""; display: block; border-top: 1px solid var(--fow-pub-hair); }

/* the fit-finder prints a classified list, never a ranked recommendation */
.pub__util-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 0;
  border-top: 1px solid var(--fow-pub-hair); }
.pub__util-rows li { display: grid;
  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto;
  gap: .2rem var(--pu3); align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--fow-pub-hair); }
.pub__util-rows b { font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-body-sm); font-weight: var(--fow-weight-editorial-emphasis);
  color: var(--fow-pub-ink); }
.pub__util-rows span { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  color: var(--fow-pub-ink-3); font-variant-numeric: tabular-nums lining-nums; }
.pub__util-rows i { font-style: normal; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; text-align: right; color: var(--fow-pub-ink-4); }
.pub__util-rows .is-fits i { color: var(--fow-pub-brass-s); }
.pub__util-rows .is-unknown_reach i { color: var(--fow-pub-hot); }
.pub__util-rows .is-too_far, .pub__util-rows .is-off_tier { opacity: .55; }

.pub__util-ctx { gap: .2rem; }
.pub__util-note { margin: 0; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); color: var(--fow-pub-ink-3); }
/* the served baseline's inert state — the controls are visibly not live and
   the sheet says so, instead of offering a control that does nothing */
.pub__util-inert { padding-top: var(--pu2); color: var(--fow-pub-ink-4); }
.pub__util-f select[disabled], .pub__util-f input[disabled] {
  background: rgba(150, 137, 106, .08); border-style: dashed;
  color: var(--fow-pub-ink-3); cursor: default;
}

/* ---------------------------------------------------- §3.13d PROJECTION
   A context-dependent statement: an operator's own eligibility condition,
   evaluated for the reader's declared context and printed with the dimensions
   it read. With nothing chosen it names what it depends on. */
.pub__projection { display: grid; gap: var(--pu2); padding: var(--pu3) 0;
  border-top: 1px solid var(--fow-pub-hair); }
.pub__projection-state { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr);   /* the tag over its sentence at every width: a long tag never squeezes the answer */
  gap: .3rem var(--pu3); align-items: baseline; }
.pub__projection-state b { font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase; color: var(--fow-pub-ink-2); }
.pub__projection-state.is-eligible b, .pub__projection-state.is-exempt b { color: var(--fow-pub-brass-s); }
.pub__projection-state.is-not_eligible b, .pub__projection-state.is-not_exempt b { color: var(--fow-pub-hot); }
.pub__projection-state span { font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-sm);
  line-height: 1.55; color: var(--fow-pub-ink-2); max-width: 64ch; text-wrap: pretty; }
.pub__projection-reg { gap: .2rem; }
@media (max-width: 640px) { .pub__projection-state { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 720px) {
  .pub__util-fields { grid-template-columns: minmax(0, 1fr); }
  .pub__util-out { padding: var(--pu3); }
  .pub__util-trade, .pub__util-why { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================== §3.9c THE READER-FIRST B HEROES
   Two plates that answer before they explain. Neither has an axis, a legend
   or a formula in it: the analytical plates are still on these sheets, below,
   where working belongs.

   Both are set on the same paper, in the same frame, at the same ink
   hierarchy as the cartographic hero — the modality changes with the reader's
   job, the family does not. */

/* A PLATE IN THE HERO SLOT FILLS THE SLOT. The operational column is as tall
   as the register and the decision standing beside it; a plate that stopped
   short of that left exactly the dead field this repair exists to close. The
   extra height goes into the plate's own rhythm — air between its zones —
   never into filler, so nothing is added to the sheet that is not already
   true. Scoped to the hero slot, so the same plate set as evidence below
   keeps its natural height. */

/* --------------------------------------------------------- DECISION PLATE */

.pub__dec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pu3) var(--pu4);
  padding: clamp(1.1rem, 2.3vw, 2.1rem);
  font-family: var(--fow-pub-meta-family);
}
.pub__dec-need {
  grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .4rem var(--pu3);
  padding-bottom: var(--pu3); border-bottom: 1px solid var(--fow-pub-rule);
}
.pub__dec-need i { font-style: normal; font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  color: var(--fow-pub-ink-4); }
.pub__dec-need b { font-size: var(--fow-type-body); color: var(--fow-pub-ink);
  font-weight: var(--fow-weight-instrument-medium); }

.pub__dec-answer {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .35rem var(--pu4); align-items: end;
}
.pub__dec-eyebrow { grid-column: 1 / -1; grid-row: 1; margin: 0;
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-hot); }
.pub__dec-name { grid-column: 1; grid-row: 2; margin: 0; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .2rem .9rem; }
.pub__dec-name b { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: .95;
  letter-spacing: .01em; font-weight: var(--fow-weight-instrument-medium);
  color: var(--fow-pub-ink); text-shadow: var(--press-lg);
  font-variant-numeric: tabular-nums lining-nums; }
.pub__dec-name span { font-size: var(--fow-pub-meta-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  color: var(--fow-pub-ink-3); }
.pub__dec-price { grid-column: 2; grid-row: 2; margin: 0; justify-self: end; align-self: end;
  display: flex; align-items: baseline; gap: .18rem;
  font-variant-numeric: tabular-nums lining-nums; }
.pub__dec-price i { font-style: normal; font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--fow-pub-ink-3); }
.pub__dec-price b { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: .95;
  letter-spacing: -.01em; font-weight: var(--fow-weight-instrument-medium);
  color: var(--fow-pub-ink); text-shadow: var(--press-lg); }
.pub__dec-price span { margin-left: .5rem; font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); color: var(--fow-pub-ink-4); }
.pub svg.pub__card-chip { width: clamp(40px, 4.2vw, 54px); height: auto; }
.pub__dec-answer > svg.pub__card-chip { grid-column: 3; grid-row: 2; justify-self: end;
  align-self: end; }
.pub__dec-rel { grid-column: 1 / -1; grid-row: 3; margin: .2rem 0 0; display: flex;
  flex-wrap: wrap; align-items: center; gap: .4rem var(--pu3);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }

/* the stated conditions, each with the threshold it was tested against */
.pub__dec-crit {
  grid-column: 1 / -1; margin: 0; padding: var(--pu3) 0 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pu3) var(--pu5); border-top: 1px solid var(--fow-pub-rule);
}
.pub__dec-crit li { display: grid; grid-template-columns: 1.1rem auto minmax(0, 1fr);
  gap: .1rem .5rem; align-items: baseline; }
.pub__dec-crit b { font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  color: var(--fow-pub-ink-4); font-weight: var(--fow-weight-instrument-regular); }
.pub__dec-crit span { grid-column: 2 / -1; font-size: var(--fow-type-body-sm);
  color: var(--fow-pub-ink); font-weight: var(--fow-weight-instrument-medium);
  font-variant-numeric: tabular-nums lining-nums; }
.pub svg.pub__tick { grid-row: 1 / span 2; width: 1.1rem; height: 1.1rem;
  align-self: center; }
.pub__tick path { fill: none; stroke: var(--fow-pub-brass-s); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pub__tick--no path { stroke: var(--fow-pub-ink-3); }

.pub__dec-why, .pub__dec-caveat {
  grid-column: 1 / -1; margin: 0; display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
  gap: .2rem var(--pu3); align-items: baseline;
  padding-top: var(--pu3); border-top: 1px solid var(--fow-pub-hair);
}
.pub__dec-why i, .pub__dec-caveat i { font-style: normal;
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__dec-why span { font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-body-sm); line-height: 1.55; color: var(--fow-pub-ink); }
.pub__dec-caveat i { color: var(--fow-pub-hot); }
.pub__dec-caveat span { font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-body-sm); line-height: 1.55; color: var(--fow-pub-ink-2); }

.pub__dec-issue { grid-column: 1; margin: 0; display: grid; gap: .15em;
  padding-top: var(--pu3); border-top: 1px solid var(--fow-pub-hair);
  font-size: var(--fow-pub-micro-size); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fow-pub-ink-3); }
.pub__dec-issue small { letter-spacing: var(--fow-pub-meta-track);
  color: var(--fow-pub-ink-4); }
.pub__dec > .pub__card-stamps { grid-column: 2; margin: 0; align-self: end;
  justify-self: end; padding-top: var(--pu3); }

/* ------------------------------------------------------ OPERATIONAL SCENE */

.pub__scene {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pu4) var(--pu6);
  padding: clamp(1.4rem, 2.8vw, 2.6rem);
  font-family: var(--fow-pub-meta-family);
}
.pub__scene-fig { grid-column: 1; grid-row: 1; align-self: center; }
.pub svg.pub__scenesvg { width: clamp(178px, 19vw, 268px); height: auto; display: block; }
.pub__scenesvg .s-ped { fill: none; stroke: var(--fow-pub-ink-3); stroke-width: 1.2;
  vector-effect: non-scaling-stroke; }
.pub__scenesvg .s-panel { fill: rgba(150, 137, 106, .16); stroke: var(--fow-pub-ink-2);
  stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pub__scenesvg .s-target { fill: none; stroke: var(--fow-pub-ink-2); stroke-width: 1.2;
  vector-effect: non-scaling-stroke; }
.pub__scenesvg .s-target--in { fill: var(--fow-pub-hot); stroke: none; }
.pub__scenesvg .s-tick { fill: none; stroke: var(--fow-pub-ink-3); stroke-width: 1;
  vector-effect: non-scaling-stroke; }
.pub__scenesvg .s-wave { fill: none; stroke: var(--fow-pub-hot); stroke-width: 1.6;
  stroke-linecap: round; opacity: .8; vector-effect: non-scaling-stroke; }
.pub__scenesvg .s-card { fill: rgba(255, 253, 246, .72); stroke: var(--fow-pub-ink-2);
  stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pub__scenesvg .s-card-chip { fill: rgba(150, 137, 106, .3); stroke: var(--fow-pub-brass-s);
  stroke-width: 1; vector-effect: non-scaling-stroke; }
.pub__scenesvg .s-card-rule { fill: none; stroke: var(--fow-pub-ink-3); stroke-width: 1;
  vector-effect: non-scaling-stroke; }

.pub__scene-lede { grid-column: 2; grid-row: 1; margin: 0; align-self: center;
  font-family: var(--fow-pub-body-family); font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.35; color: var(--fow-pub-ink); text-wrap: balance;
  text-shadow: var(--press); }
.pub__scene-lede b { font-weight: var(--fow-weight-editorial-emphasis);
  font-variant-numeric: tabular-nums lining-nums; }

/* the trip, counted the way the trip is actually shaped */
.pub__scene-tally { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .7rem var(--pu4); align-self: start;
  padding-top: var(--pu3); border-top: 1px solid var(--fow-pub-hair); }
.pub__scene-tally li { display: grid; gap: .3rem; justify-items: start; }
.pub__scene-tally .d { grid-column: 1 / -1; font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); color: var(--fow-pub-ink-4); }
.pub__scene-tally li { grid-template-columns: repeat(4, .68rem); }
.pub__scene-tally i { width: .68rem; height: .68rem; border-radius: 50%;
  background: rgba(178, 58, 30, .8); box-shadow: 0 0 0 1px rgba(178, 58, 30, .25); }

.pub__scene-verdict { grid-column: 1 / -1; margin: 0; display: flex;
  flex-wrap: wrap; align-items: baseline; gap: .4rem var(--pu3);
  padding-top: var(--pu3); border-top: 1px solid var(--fow-pub-rule); }
.pub__scene-verdict i { font-style: normal; font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  color: var(--fow-pub-ink-4); }
.pub__scene-verdict b { font-family: var(--fow-pub-body-family);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1;
  font-weight: var(--fow-weight-editorial-emphasis); color: var(--fow-pub-ink);
  text-shadow: var(--press-lg); }
.pub__scene-why { grid-column: 1 / -1; margin: 0; max-width: 52ch;
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-sm);
  line-height: 1.55; color: var(--fow-pub-ink-2); }
/* the fare truth the simplification must not swallow */
.pub__scene-caveat { grid-column: 1 / -1; margin: 0; display: flex;
  flex-wrap: wrap; align-items: baseline; gap: .35rem var(--pu3);
  padding-top: var(--pu3); border-top: 1px solid var(--fow-pub-hair); }
.pub__scene-caveat i { font-style: normal; font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  color: var(--fow-pub-ink-4); }
.pub__scene-caveat b { font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: var(--fow-weight-instrument-medium); color: var(--fow-pub-hot);
  font-variant-numeric: tabular-nums lining-nums; }
.pub__scene-caveat span { font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-body-sm); color: var(--fow-pub-ink-2); }

@media (max-width: 720px) {
  .pub__dec, .pub__scene { grid-template-columns: minmax(0, 1fr); }
  .pub__dec > *, .pub__scene > * { grid-column: 1 !important; grid-row: auto !important;
    justify-self: start !important; }
  .pub__dec-answer { grid-template-columns: minmax(0, 1fr); }
  .pub__dec-answer > * { grid-column: 1 !important; grid-row: auto !important;
    justify-self: start !important; }
  .pub__dec-price { justify-self: start; }
  .pub__scene-fig { justify-self: start; }
}

/* ------------------------------------------------- §3.11c THE COMPARISON TABLE
   The whole candidate set, including the rows that did not qualify and the
   reason each was dropped. A ranking a reader cannot audit is not a
   recommendation, so nothing here is hidden behind a control and nothing is
   deferred to a script.

   The table is wide by nature: it scrolls inside its OWN region — focusable,
   so a keyboard can reach the scroll — and the sheet never scrolls sideways. */

.pub__tableblock { display: grid; gap: var(--pu3); }
.pub__tablewrap {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--fow-pub-rule);
  background: rgba(255, 253, 246, .3);
}
.pub__tablewrap:focus-visible { outline: 2px solid var(--fow-pub-brass); outline-offset: 2px; }
.pub__table {
  width: 100%; min-width: 46rem; border-collapse: collapse;
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-track-instrument);
  font-variant-numeric: tabular-nums lining-nums;
}
.pub__table caption {
  text-align: left; padding: .55rem var(--pu3); color: var(--fow-pub-ink-4);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  border-bottom: 1px solid var(--fow-pub-rule);
}
.pub__table th, .pub__table td {
  padding: .46rem var(--pu3); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--fow-pub-hair);
}
.pub__table thead th {
  color: var(--fow-pub-ink-4); font-weight: var(--fow-weight-instrument-regular);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  border-bottom: 1px solid var(--fow-pub-rule);
}
.pub__table tbody th { color: var(--fow-pub-ink);
  font-weight: var(--fow-weight-instrument-medium); }
.pub__table td { color: var(--fow-pub-ink-2); }
.pub__table .n { text-align: right; }
.pub__table .s { color: var(--fow-pub-brass-s); }
.pub__table .q { color: var(--fow-pub-ink-4); }
.pub__table tbody tr:last-child th, .pub__table tbody tr:last-child td { border-bottom: 0; }

/* the lead row is the one the card was printed from — marked, not coloured in */
.pub__table tr.is-lead th, .pub__table tr.is-lead td {
  background: rgba(178, 58, 30, .06); color: var(--fow-pub-ink);
}
.pub__table tr.is-lead th:first-child { box-shadow: inset 3px 0 0 var(--fow-pub-hot); }

/* an EXCLUDED row is still printed. Hatched, so it reads as struck from the
   ranking rather than absent from it, and never by colour alone — the rank
   cell says an em dash and the last cell says why. */
.pub__table tr.is-out th, .pub__table tr.is-out td {
  color: var(--fow-pub-ink-4);
  background-image: repeating-linear-gradient(135deg,
    rgba(120, 108, 84, .13) 0 1px, transparent 1px 6px);
}

/* -------------------------------------------------------- §3.13b COMMERCIAL
   Money is set in the same dry register as evidence. An organic action and a
   paid action are deliberately IDENTICAL objects: what differs is the
   disclosure chip and the printed link relationship. A candidate with no
   commercial relationship discloses that too. */

.pub__commercial { display: grid; gap: var(--pu4); }
.pub__disclosure {
  margin: 0; max-width: 62ch; font-size: var(--fow-type-body-sm); line-height: 1.6;
  color: var(--fow-pub-ink-2);
  padding-left: var(--pu3); border-left: 1px solid var(--fow-pub-brass);
}
.pub__offers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 var(--pub-gap); border-bottom: 1px solid var(--fow-pub-rule);
}
.pub__offer {
  padding: var(--pu4) 0 var(--pu5); border-top: 1px solid var(--fow-pub-rule);
  display: grid; gap: var(--pu2); align-content: start;
}
.pub__offer h3 { margin: 0; display: flex; align-items: baseline; gap: .6rem;
  font-size: var(--fow-type-h3); font-weight: var(--fow-weight-editorial-emphasis);
  line-height: var(--fow-leading-heading); }
.pub__offer h3 code { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-meta-size); letter-spacing: var(--fow-pub-meta-track);
  color: var(--fow-pub-brass-s); }
.pub__offer-meta { margin: 0; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4);
  font-variant-numeric: tabular-nums lining-nums; }
.pub__offer-price { margin: 0; font-family: var(--fow-pub-meta-family);
  font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1;
  font-weight: var(--fow-weight-instrument-medium); color: var(--fow-pub-ink);
  font-variant-numeric: tabular-nums lining-nums; text-shadow: var(--press); }
/* the ACTION. Identical for organic and affiliate, by design. */
.pub__offer-cta { margin: 0; display: block; text-decoration: none;
  padding: .62rem var(--pu3); text-align: center;
  border: 1px solid var(--fow-pub-ink-3);
  background: linear-gradient(180deg, rgba(255, 253, 246, .5), rgba(255, 253, 246, 0));
  color: var(--fow-pub-ink); }
.pub__offer-cta b { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-meta-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; font-weight: var(--fow-weight-instrument-medium); }
a.pub__offer-cta:hover { border-color: var(--fow-pub-ink); }
.pub__offer-rel { margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem var(--pu3); }
.pub__offer-rel code { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); color: var(--fow-pub-ink-4); }
.pub__offer-body { margin: 0; max-width: 42ch; font-size: var(--fow-type-body-sm);
  line-height: 1.6; color: var(--fow-pub-ink-2); }
/* no commercial path in this market — the judgement stays, the action goes */
.pub__offer--none .pub__offer-price, .pub__offer--none h3 { color: var(--fow-pub-ink-4); }
.pub__offer--none .pub__offer-meta { text-decoration: line-through; }
/* sponsored inventory: outside the ranking, never between its rows */
.pub__offer--sponsored { border: 1px dashed var(--fow-pub-ink-3);
  padding: var(--pu4); background: rgba(150, 137, 106, .06); }

.pub__chip { display: inline-block; padding: .14em .55em;
  border: 1px solid currentColor; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__chip--organic { color: var(--fow-pub-ink-2); }
.pub__chip--affiliate { color: var(--fow-pub-brass-s); }
.pub__chip--sponsored { color: var(--fow-pub-ink-3); border-style: dashed; }

/* ---------------------------------------------------------- §3.13c DERIVATION
   An editorial plate states a fact; a utility result has to show the working.
   Especially when the working DISAGREES with the answer — that is precisely
   when a reader needs to see it, and a result plate that can only agree with
   itself is decoration. */

.pub__derive { display: grid; gap: var(--pu3); }
.pub__derive-in { margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--pu2) var(--pu4); padding-bottom: var(--pu3);
  border-bottom: 1px solid var(--fow-pub-rule); }
.pub__derive-in dt { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__derive-in dd { margin: .1em 0 0; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-type-body-sm); color: var(--fow-pub-ink);
  font-weight: var(--fow-weight-instrument-medium);
  font-variant-numeric: tabular-nums lining-nums; }
.pub__derive-rail { list-style: none; margin: 0; padding: 0; }
.pub__derive-rail li { display: grid;
  grid-template-columns: minmax(6rem, .85fr) minmax(0, 1.7fr) minmax(5rem, auto);
  gap: .2rem var(--pu4); align-items: baseline;
  padding: var(--pu3) 0; border-bottom: 1px solid var(--fow-pub-hair); }
.pub__derive-rail p { margin: 0; }
.pub__derive-rail .k { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__derive-rail .x { font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); color: var(--fow-pub-ink-2);
  font-variant-numeric: tabular-nums lining-nums; }
.pub__derive-rail .v { text-align: right; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-type-body-sm); font-weight: var(--fow-weight-instrument-medium);
  color: var(--fow-pub-ink); font-variant-numeric: tabular-nums lining-nums; }
.pub__derive-rail li.is-lead .v { color: var(--fow-pub-hot); }
.pub__derive-delta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem var(--pu3); padding: var(--pu3) 0;
  border-bottom: 1px solid var(--fow-pub-rule); }
.pub__derive-delta i { font-style: normal; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__derive-delta b { font-family: var(--fow-pub-meta-family);
  font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1;
  font-weight: var(--fow-weight-instrument-medium); color: var(--fow-pub-hot);
  font-variant-numeric: tabular-nums lining-nums; }
.pub__derive-delta span { font-size: var(--fow-type-body-sm); color: var(--fow-pub-ink-2); }
.pub__derive-verdict { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem var(--pu3); }
.pub__derive-verdict i { font-style: normal; font-family: var(--fow-pub-meta-family);
  font-size: var(--fow-pub-micro-size); letter-spacing: var(--fow-pub-meta-track);
  text-transform: uppercase; color: var(--fow-pub-ink-4); }
.pub__derive-verdict b { font-family: var(--fow-pub-body-family);
  font-size: var(--fow-type-h3); font-weight: var(--fow-weight-editorial-emphasis);
  color: var(--fow-pub-ink); text-shadow: var(--press); }

/* ============================================================ §3.17 KO
   The Korean edition is not the English page with Korean in it.

   RIDIBatang ships ONE weight and no italic, so both are asked for honestly
   rather than synthesised — a faux-bold or faux-oblique Batang is the fastest
   way to make an archival page look counterfeit. Korean also does not break
   inside a word; left at `normal`, Chrome breaks Hangul anywhere and the
   reading column fills with orphaned syllables. And a measure counted in `ch`
   is a Latin measure: Korean glyphs run roughly twice as wide. */

html[lang="ko"] .pub { --fow-pub-measure: 42ch; --fow-pub-title-track: -0.01em; }
html[lang="ko"] .pub :is(h1, h2, h3, p, li, dt, dd, b, i, span, a, figcaption) {
  word-break: keep-all; overflow-wrap: break-word;
}
html[lang="ko"] .pub__title,
html[lang="ko"] .pub__sub,
html[lang="ko"] .pub h2,
html[lang="ko"] .pub h3,
html[lang="ko"] .pub__next b,
html[lang="ko"] .pub__rung .k b,
html[lang="ko"] .pub__prose strong { font-weight: var(--fow-weight-editorial-regular); }
html[lang="ko"] .pub__sub { font-style: normal; }
html[lang="ko"] .pub__datum dd, html[lang="ko"] .pub__m, html[lang="ko"] .pub__tags {
  letter-spacing: var(--fow-track-instrument);
}

/* ============================================================ §4 FAMILY A
   EDITORIAL ATLAS — the reference board's Candidate A.

   A centred masthead over a dominant panorama, the operation index, then a
   lower field carrying the thesis beside the locator plate. The first sheet
   is complete on its own; the essay continues below it in one wide column.

   First read: PLACE → IMAGE → EDITORIAL THESIS → SMALL MAP / CONTEXT. */


/* the board's A sets its argument as a CENTRED THESIS under the place
   identity, not as a second masthead — so the title is the thesis line here,
   sized to lead the page without competing with TOKYO above it */


/* the dominant plate. An accepted master keeps its own proportion (§3.8); a
   non-exact hero still takes the board's letterbox slot. */
/* THE MOUNTED PLATE. The board's A slot is a 16:6.2 letterbox and the
   accepted master is 16:9, so the sheet has to give the image more height
   than the board did. Cropping it back is forbidden and would be the wrong
   answer anyway; mounting it with a margin is ordinary page-level sizing, and
   it keeps the operation strip and the lower field on the same sheet instead
   of pushing them off the bottom of it. */
/* BLOCK.seal returns a wrapper, so the wrapper is what gets placed — sizing
   the inner <svg> instead leaves the wrapper at full column width and the
   seal fills the hero. */
/* the seal struck on the SHEET rather than on a frozen master — the board
   prints it in the margin just above the plate, at the right */

/* the lower editorial field: the board gives its widest track to the written
   argument and prints the register and the locator beside it */


/* ============================================================ §5 FAMILY B
   CARTOGRAPHIC OPERATION — the reference board's Candidate B.

   The plate IS the hero and takes the widest column on the sheet; the
   technical register stands beside it, the decision under that, and the lower
   field carries overview / key index / notes. Everything needed to answer the
   question is on the first sheet.

   First read: QUESTION → MAP / PLATE → OPERATIONAL REGISTER → DECISION. */


/* the board's B is left-weighted: the identity starts beside the stamp and
   the operational subtitle hangs under it, rather than centring the sheet */

/* the board's B lower field: overview · key index · notes */

/* B's extended reading was single-block until the rollout: every section on
   the accepted operation sheet holds exactly one ladder, so nothing ever
   stacked and no rhythm was needed. A utility section stacks — a derivation,
   then a table, then a register — and without this they touch.

   Scoped to the block classes the accepted canary does not contain, so the
   canary's own spacing is provably untouched rather than merely believed to
   be: its sections carry a bare ladder wrapper, `.pub__flips` and
   `.pub__note`, none of which match. */


/* ============================================================ §6 FAMILY C
   LIVING FOLIO HYBRID — the reference board's Candidate C.

   Editorial identity and operational intelligence composed into ONE plate:
   the image world on the left, the register / interpretation / bearing polar
   on the right, both inside the same grid and the same rules. The operational
   layer is visible in the first sheet, not discovered below it.

   First read: PLACE → VISUAL WORLD + OPERATIONAL INTELLIGENCE → ACTION. */


/* TOP — identity and thesis run the full width, as the board sets them */

/* MIDDLE — the accepted plate and the operational register, as one object */

/* ================================================================ §7 CONTROLS
   Real controls, on the ground rather than on the sheet — the page's own
   language selector. Keyboard-visible, and inert only when script is absent. */

.pub-bar {
  width: min(100%, var(--pub-max)); margin: 0 auto clamp(.75rem, 1.6vw, 1.4rem);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-family: var(--fow-font-instrument); font-size: var(--fow-type-label);
  letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase;
  color: var(--fow-world-ink-soft, rgba(226, 216, 194, .66));
}
.pub-bar a { color: inherit; text-decoration: none; }
.pub-bar a:hover { color: var(--fow-world-ink, rgba(241, 234, 216, .92)); }
.pub-bar__seg { display: flex; border: 1px solid rgba(197, 163, 95, .35); }
.pub-bar__seg button {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: .38em .85em; font: inherit; letter-spacing: inherit;
  color: rgba(226, 216, 194, .6);   /* the language not in use: quieter than the chosen one, still at reading contrast on the dark bar */
}
.pub-bar__seg button + button { border-left: 1px solid rgba(197, 163, 95, .25); }
.pub-bar__seg button[aria-pressed="true"] {
  background: rgba(197, 163, 95, .16);
  color: rgba(214, 180, 112, .98);
}
.pub-bar__seg button:focus-visible { outline: 2px solid rgba(197, 163, 95, .8); outline-offset: 2px; }

/* the traveler-context control: the smallest useful row of instruments on the
   ground, beside the language control — only the dimensions the page reads.
   Nothing is chosen until the reader chooses it. */
.pub-bar__ctxslot { flex: 1 1 100%; }
.pub-bar__ctx { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; align-items: end; }
.pub-bar__ctx-f { display: grid; gap: .25rem; min-width: 9.5rem; }
.pub-bar__ctx-f span { font-size: var(--fow-type-label); letter-spacing: inherit;
  color: rgba(226, 216, 194, .6); }
.pub-bar__ctx select { appearance: none; -webkit-appearance: none; min-height: 2.25rem; padding: .35rem 1.8rem .35rem .6rem;
  font: inherit; letter-spacing: normal; text-transform: none; color: var(--fow-world-instrument, rgba(197, 163, 95, .84));
  background: rgba(197, 163, 95, .08); border: 1px solid rgba(197, 163, 95, .35); border-radius: 0;
  background-image: linear-gradient(45deg, transparent 50%, rgba(197, 163, 95, .6) 50%),
                    linear-gradient(135deg, rgba(197, 163, 95, .6) 50%, transparent 50%);
  background-position: right .9rem center, right .6rem center; background-size: .3rem .3rem, .3rem .3rem;
  background-repeat: no-repeat; }
.pub-bar__ctx select:focus-visible { outline: 2px solid rgba(197, 163, 95, .8); outline-offset: 2px; }
.pub-bar__ctx select option { color: #1b1812; background: #f1ead8; }

.pub-skip { position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--fow-paper-face); color: var(--fow-paper-ink); padding: .75rem 1.25rem; }
.pub-skip:focus { left: 1rem; top: 1rem; }

/* ============================================================ §8 RESPONSIVE
   The narrow state is the same publication, re-imposed — the reading order is
   the family's first-read order, never a reshuffle. */


/* THE MASTHEAD'S NARROW STATE. Three columns — stamp, place identity, scale
   register — have a combined min-content width of roughly 470px whatever the
   viewport says, because none of the three can wrap below its own longest
   token. Left at three tracks the sheet simply refuses to be 390 wide. It
   stacks instead, in the same reading order: mark, identity, register. */


@media (max-width: 720px) {
  .pub { --fow-pub-title-size: clamp(2.6rem, 11vw, 4rem); }

  .pub__ops { grid-template-columns: minmax(0, 1fr); }
  .pub__op + .pub__op { border-left: 0; border-top: 1px solid var(--fow-pub-hair); padding-left: 0; }

  .pub__rung { grid-template-columns: minmax(0, 1fr) auto; row-gap: .4rem; }
  .pub__rung > .k, .pub__m { grid-row: auto; }
  .pub__bar, .pub__tags { grid-column: 1 / -1; }
  .pub__ladder-axis { grid-template-columns: minmax(0, 1fr); }
  .pub__ladder-axis .scale { grid-column: 1; }

  .pub__section-head { grid-template-columns: auto minmax(0, 1fr); }
  .pub__section-head .pub__eyebrow { grid-column: 2; justify-self: start; text-align: left; }

          .pub__next { padding-left: 0; padding-top: var(--pu3); text-align: left;
    border-left: 0; border-top: 1px solid var(--fow-pub-hair); width: 100%; }
      .pub__map-rose { width: 34px; }

  /* the derivation keeps its three readings; the expression takes its own row
     rather than being squeezed to one character per line */
  .pub__derive-rail li { grid-template-columns: minmax(0, 1fr) auto; row-gap: .35rem; }
  .pub__derive-rail .x { grid-column: 1 / -1; grid-row: 2; }
  .pub__derive-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* very wide: the sheet stops growing and the reading measure holds. A page
   that spans 3440px of glass is not a publication. */
@media (min-width: 2200px) {
  .pub { --pub-max: 1760px; }
  .pub-sheet, .pub-bar { width: min(100%, 1760px); }
}

@media (prefers-reduced-motion: reduce) {
  .pub *, .pub-bar * { transition: none !important; animation: none !important; }
}

@media print {
  .pub-ground { background: none; padding: 0; }
  .pub-bar, .pub-skip { display: none; }
    .pub { box-shadow: none; -webkit-mask-image: none; mask-image: none; }
}

/* ===================================================== §3.18 THE NAVIGATION FIELD
   Content-side navigation as an ADDITIVE layer under the accepted macro
   (Rollout WO v0.1.4 §5). Five roles, five printed grammars, so a reader can
   tell them apart before hovering and without reading a URL:

     § in this sheet     the ops strip, now captioned — in-page anchors
     → related sheets    an editorial ruled list, one basis line per item
     ≡ scope contents    an archive index, boxed like the ops strip, the
                         current sheet printed but not linked
     → next sheet        one full-width handoff band
     ↩ return            the folio and the atlas, in the foot's third column

   Nothing here is a card. Everything is set in the family's own two voices —
   instrument for codes, states and role lines; editorial for titles — on the
   same stock, with the same rules and the same brass. */

/* the role line — one grammar for every region */
.pub__ops-role, .pub__way-role, .pub__next-role, .pub__return-role {
  display: flex; gap: .55em; align-items: baseline; margin: 0;
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-meta-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  line-height: var(--fow-leading-label); color: var(--fow-pub-ink-4);
}
.pub__ops-role i, .pub__way-role i, .pub__next-role i, .pub__return-role i {
  font-style: normal; color: var(--fow-pub-brass-s);
  font-weight: var(--fow-weight-instrument-medium); letter-spacing: 0;
}
.pub__way-role small {
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-sm);
  text-transform: none; letter-spacing: 0; color: var(--fow-pub-ink-3);
}

/* § LOCAL_TOC — the caption row over the strip's cells */
.pub__ops-role {
  grid-column: 1 / -1; padding: .5rem var(--pu4) .45rem;
  font-size: var(--fow-pub-micro-size);
  border-bottom: 1px solid var(--fow-pub-hair);
}

/* state chips — the record's own production state, printed on the item */
.pub__chip {
  display: inline-block; padding: .18em .55em .14em;
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  line-height: var(--fow-leading-micro); white-space: nowrap;
  border: 1px solid var(--fow-pub-rule); color: var(--fow-pub-ink-3);
  background: rgba(255, 253, 246, .35);
}
.pub__chip--source { color: var(--fow-pub-status); border-color: var(--fow-pub-status); }
.pub__chip--hold   { color: var(--fow-pub-hot); border-color: var(--fow-pub-hot); }
.pub__chip--draft, .pub__chip--sample { color: var(--fow-pub-ink-4); border-style: dashed; }
.pub__chip--scope  { color: var(--fow-pub-brass-s); border-color: var(--fow-pub-brass-s); }
.pub__chip--folio  { color: var(--fow-pub-ink-2); }
.pub__chip--here   { color: var(--fow-pub-brass-s); border-color: transparent; background: none; padding-inline: 0; }

/* the field itself: related on the reading side, the archive beside it */
.pub__wayfield {
  margin-top: var(--pu7); padding-top: var(--pu4);
  border-top: 2px solid var(--fow-pub-rule);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--pu5) var(--pub-gap); align-items: start;
}
.pub__way-role { margin-bottom: var(--pu3); }

/* → RELATED_CONTENT — an editorial ruled list. The title is the link; the
   basis says WHY it is here; the chips say what state it is in. A row shifts
   under the cursor the way `.pub__next` does: the family's "another sheet"
   affordance, not an underline. */
.pub__way-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pub__way-item { border-top: 1px solid var(--fow-pub-rule); }
.pub__way-item:last-child { border-bottom: 1px solid var(--fow-pub-rule); }
.pub__way-go {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: .3rem var(--pu4); align-items: start;
  padding: var(--pu3) 0; text-decoration: none; color: inherit;
  transition: padding-left 220ms cubic-bezier(.16,.86,.22,1);
}
.pub__way-go:hover { padding-left: .45rem; }
.pub__way-code {
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums; color: var(--fow-pub-brass-s);
}
.pub__way-go .pub__way-code, .pub__way-t, .pub__way-line { grid-column: 1; }
.pub__way-t {
  font-family: var(--fow-pub-body-family); font-size: var(--fow-pub-h3-size);
  font-weight: var(--fow-weight-editorial-emphasis); line-height: var(--fow-leading-heading);
  letter-spacing: 0; text-transform: none; color: var(--fow-pub-ink); text-shadow: var(--press);
}
.pub__way-go:hover .pub__way-t, .pub__way-go:focus-visible .pub__way-t { color: var(--fow-pub-brass-s); }
.pub__way-line {
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-sm);
  line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--fow-pub-ink-3);
}
.pub__way-meta {
  grid-column: 2; grid-row: 1 / span 3; justify-self: end; align-self: start;
  display: grid; gap: .4rem; justify-items: end; text-align: right;
}
.pub__way-basis {
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-sm);
  font-style: italic; line-height: 1.45; letter-spacing: 0; text-transform: none;
  color: var(--fow-pub-ink-2);
}
.pub__way-meta .pub__chip + .pub__chip { margin-top: -.1rem; }

/* ≡ SCOPE_CONTENTS — the archive. Boxed and faintly sunk like the ops strip,
   because both are printed indexes; ruled rows, not tiles. The current sheet
   is a row with a brass margin bar and no link. */
.pub__way--scope {
  padding: var(--pu3) var(--pu4) var(--pu4);
  border: 1px solid var(--fow-pub-rule);
  background: linear-gradient(rgba(150, 137, 106, .055), rgba(150, 137, 106, .025));
  box-shadow: 0 1px 0 rgba(255, 253, 246, .5), 0 1px 2px rgba(60, 48, 30, .05) inset;
}
.pub__way--scope .pub__way-role { margin-bottom: var(--pu2); }
.pub__way-index + .pub__way-role { margin-top: var(--pu4); }
.pub__way-index { list-style: none; margin: 0; padding: 0; display: grid; }
/* an archive aligns its columns: the code track is fixed so every title starts
   on the same line, and the state track is capped so three chips wrap under
   each other instead of squeezing the title to a word a line */
.pub__way-row, .pub__way-row > a {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr);
  gap: .15rem var(--pu3); align-items: baseline;
}
.pub__way-row { padding: .6rem 0; border-top: 1px solid var(--fow-pub-hair); position: relative; }
.pub__way-row:has(> a) { display: block; padding: 0; }
.pub__way-row > a { padding: .6rem 0; text-decoration: none; color: inherit; }
.pub__way-row .pub__way-code { color: var(--fow-pub-ink-4); }
.pub__way-row b {
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body);
  font-weight: var(--fow-weight-editorial-emphasis); letter-spacing: 0; text-transform: none;
  color: var(--fow-pub-ink); line-height: 1.35;
  text-decoration: underline; text-decoration-color: var(--fow-pub-edge);
  text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.pub__way-row > a:hover b, .pub__way-row > a:focus-visible b { text-decoration-color: var(--fow-pub-brass-s); }
/* the state line sits under the title, in the title's own column: the archive
   box is half the sheet wide, and a third track pushed a long held-state chip
   into the title */
.pub__way-state {
  grid-column: 2; justify-self: start; display: flex; flex-wrap: wrap; gap: .3rem;
  justify-content: flex-start; text-align: left; max-width: 100%; margin-top: .1rem;
}
.pub__way-row[aria-current="page"] { padding-left: .85rem; }
.pub__way-row[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 3px;
  background: var(--fow-pub-brass-s);
}
.pub__way-row[aria-current="page"] b { text-decoration: none; }

/* → NEXT_CONTENT — the handoff. One band, full width, the target's title set
   large, the record's own note beneath, a struck arrow that travels on hover.
   `.pub__next` is kept on it so the sheet still ends on the same element it
   always did; the modifier overrides the foot-column placement. */
.pub__next--handoff {
  grid-column: auto; grid-row: auto; align-self: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem var(--pu5); align-items: center; text-align: left;
  margin-top: var(--pu6); padding: var(--pu4) var(--pu4) var(--pu4) calc(var(--pu4) - 3px);
  border: 1px solid var(--fow-pub-rule); border-left: 3px solid var(--fow-pub-brass-s);
  background: linear-gradient(rgba(255, 253, 246, .45), rgba(255, 253, 246, .15));
  text-decoration: none; color: inherit;
  transition: padding-left 220ms cubic-bezier(.16,.86,.22,1);
}
.pub__next--handoff:hover { padding-right: var(--pu4); padding-left: calc(var(--pu4) + .35rem); }
.pub__next--handoff > * { grid-column: 1; }
.pub__next--handoff .pub__next-role { margin-bottom: .3rem; font-size: var(--fow-pub-meta-size); color: var(--fow-pub-ink-4); }
.pub__next--handoff b {
  font-family: var(--fow-pub-body-family); font-size: var(--fow-pub-h2-size);
  font-weight: var(--fow-weight-editorial-emphasis); line-height: var(--fow-leading-heading);
  letter-spacing: 0; text-transform: none; color: var(--fow-pub-ink); text-shadow: var(--press);
}
.pub__next--handoff .pub__next-code {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: baseline; margin-top: .2rem;
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase; color: var(--fow-pub-brass-s);
}
.pub__next--handoff .pub__next-note {
  max-width: 62ch; margin-top: .35rem;
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-sm); line-height: 1.55;
  letter-spacing: 0; text-transform: none; color: var(--fow-pub-ink-2);
}
.pub__next--handoff .pub__next-arrow {
  grid-column: 2; grid-row: 1 / span 4; align-self: center;
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-display); line-height: 1;
  letter-spacing: 0; color: var(--fow-pub-brass-s); text-shadow: var(--press-lg);
  transition: transform 220ms cubic-bezier(.16,.86,.22,1);
}
.pub__next--handoff:hover .pub__next-arrow { transform: translateX(.2em); }

/* ↩ CITY_ATLAS_RETURN — the foot's third column, where the next action used
   to sit: the folio this sheet belongs to, then the atlas. */
.pub__return {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  display: grid; gap: .55rem; justify-items: end; text-align: right;
  padding: var(--pu3) 0 var(--pu3) var(--pu5); border-left: 1px solid var(--fow-pub-hair);
}
.pub__return-role { font-size: var(--fow-pub-micro-size); }
.pub__return a { display: grid; gap: .1rem; justify-items: end; text-decoration: none; color: inherit; }
.pub__return a b {
  font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body);
  font-weight: var(--fow-weight-editorial-emphasis); letter-spacing: 0; text-transform: none;
  color: var(--fow-pub-ink); text-decoration: underline; text-decoration-color: var(--fow-pub-edge);
  text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.pub__return a:hover b, .pub__return a:focus-visible b { text-decoration-color: var(--fow-pub-brass-s); }
.pub__return a span {
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-pub-micro-size);
  letter-spacing: var(--fow-pub-meta-track); text-transform: uppercase; color: var(--fow-pub-ink-4);
}

/* narrow: the field stacks, related over archive; rows go label-over-value;
   the handoff keeps its arrow but below the title; the return joins the foot's
   single column with a rule above, the way the old next action did. */
@media (max-width: 1080px) {
  .pub__wayfield { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pub__way-go { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .pub__way-meta { grid-column: 1; grid-row: auto; justify-self: start; justify-items: start; text-align: left; margin-top: .2rem; }
  .pub__way-row, .pub__way-row > a { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .pub__way-state { grid-column: 1; }
  .pub__next--handoff { grid-template-columns: minmax(0, 1fr); padding: var(--pu4) var(--pu3) var(--pu4) calc(var(--pu3) - 3px);
    border-top: 1px solid var(--fow-pub-rule); width: auto; }
  .pub__next--handoff:hover { padding-left: calc(var(--pu3) + .35rem); }
  .pub__next--handoff .pub__next-arrow { grid-column: 1; grid-row: auto; font-size: var(--fow-type-h1); justify-self: end; }
  .pub__return { padding-left: 0; padding-top: var(--pu3); border-left: 0; border-top: 1px solid var(--fow-pub-hair);
    justify-items: start; text-align: left; width: 100%; }
  /* the sheet's torn-edge mask is drawn in sheet-relative units, so on a long
     narrow page its bottom band grows to ~60px and would take the last return
     line with it; the foot keeps that much clear below its final row */
    .pub__return a { justify-items: start; }
}