/* ============================================================
   MINTSTREET · THE JOURNAL · ARTICLE SHEET
   The one stylesheet every Journal article links. Decided by the user on
   2026-08-22 and logged in logs/2026-08-22-the-journal-gets-article-pages.md:
   a case is published to be circulated, a hash route never reaches the server,
   so a case lives at its own path instead of behind a # inside journal.html.

   THIS IS NOT A tokens.css. A shared stylesheet for the three documents was
   rejected on 2026-08-11 and is still rejected: it would cost index.html its
   claim to be one file anybody can read end to end, which is the product's own
   argument about its methodology. An article makes no such claim, and nobody
   audits a methodology by reading one, so the family that does not carry the
   argument shares a sheet. The three documents keep their copies.

   THE TOKEN BLOCK BELOW IS A COPY, AND IT IS THE FOURTH. index.html is the
   origin; method.html, journal.html and this file mirror it. Same names, same
   values, same three stocks, same ms-theme key. A token that moves there moves
   in all three in the same commit, unedited.
   THIS COPY IS THE ONE THAT WILL NOT ANNOUNCE THE DRIFT. The other three are
   pages: get a value wrong and something looks wrong on a screen somebody
   opens. This is a stylesheet with no page of its own, read by however many
   articles exist. It is also why the articles share it rather than each
   carrying a block: four copies, whatever the number of cases, instead of one
   per article and a silent divergence by the twentieth.

   WHAT THIS FILE MAY NOT CARRY: a grade, a figure, a price, a copy of P or
   PROGRAMS or UNIVERSE, or a call to the API. An article names a letter by the
   id index.html already uses and links back to it. Two files disagreeing about
   a grade is the one failure this project cannot survive.
============================================================ */

:root {
  color-scheme: light;

  /* ---- surface ---- */
  --paper:       #F2EDE2;
  --paper-deep:  #E9E2D2;
  --ground:      var(--paper);
  --hairline:    rgba(22,19,14,.18);

  /* ---- ink ---- */
  --ink:         #16130E;
  --ink-soft:    #4A443A;
  --gray:        #6A6454;

  /* ---- brand ---- */
  --green:       #1B5E4A;
  --green-tint:  #D7E8DF;

  /* ---- money ---- */
  --brand:       #e6135c;
  --brand-ink:   #C40F4E;
  --brand-on:    #FFFFFF;
  --brand-wash:  color-mix(in srgb, var(--brand) 8%, transparent);

  /* ---- semantics, reserved ----
     --red marks a real flag only (freeze, latent whitelist, ownerless
     delegate, zombie). It does NOT mark a downgrade: a letter that moved is
     a verdict, and a verdict is never coloured by its value. */
  --green-zero:     #00A651;
  --green-zero-ink: #00753A;
  /* Mirrored from index.html. This file has no permanently dark surface and so
     never spends it, exactly as it carries --dark-ink and --dark-hair without
     spending those: the block is mirrored, not pruned per file. */
  --green-zero-dark: #00E070;
  --red:            #C43E1C;
  --red-ink:        #A63316;

  /* ---- typography ---- */
  --display: "Anton", Impact, sans-serif;
  --serif:   "Spectral", Georgia, serif;
  --sans:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --radius: 3px;
  --radius-stamp: 4px;

  /* ---- type scale ---- */
  --fs-3xs: 11px;
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 40px;
  --fs-hero: clamp(30px, 3.8vw, 46px);
  /* MIRRORED FROM journal.html, WHERE IT WAS ADDED, AND NOT A NEW STEP. The
     front page sets the lead headline at this size and the article sets the
     same headline at the top of its own page, so the two have to agree: a case
     that shouts on the docket and murmurs on its own page is two cases. The
     reasoning for the step lives in journal.html and is not repeated here. It
     is still the second and last fluid step in the system. */
  --fs-lead: clamp(34px, 5.2vw, 68px);
  --fs-dot: 7px;
  --fs-mark: 25px;
  --fs-grade-sm: 20px;
  --fs-grade-md: 34px;
  --fs-grade-xl: 62px;

  /* ---- the measure ----
     Mirrored from index.html. One length and not a `ch`: prose here stacks
     faces inside one column, and the same `ch` value ends at two places at two
     sizes. 620px is 73 characters of the body face and 52 of the serif lede.
     One value, one right edge. */
  --measure: 620px;

  /* ---- spacing ---- */
  --sp-2: 2px;   --sp-4: 4px;   --sp-6: 6px;   --sp-8: 8px;
  --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px;
  --sp-18: 18px; --sp-20: 20px; --sp-22: 22px; --sp-24: 24px;
  --sp-26: 26px; --sp-30: 30px; --sp-32: 32px; --sp-36: 36px;
  --sp-40: 40px; --sp-44: 44px;

  /* ---- derived, still tokens ---- */
  --wash:        color-mix(in srgb, var(--ink) 4%, transparent);
  --wash-2:      color-mix(in srgb, var(--ink) 8%, transparent);
  --band:        color-mix(in srgb, var(--ink) 5%, transparent);
  --red-wash:    color-mix(in srgb, var(--red) 8%, transparent);
  /* --green-wash removed 2026-08-11, here and in index.html, used by neither.
     The reasoning lives in index.html with the rest of the block. */
  --zero-wash:   color-mix(in srgb, var(--green-zero) 12%, transparent);
  --dark-ground: #12100C;
  --dark-ink:    #F2EDE2;
  --dark-soft:   #C9C2B4;
  --dark-gray:   #8E8676;
  --dark-hair:   rgba(242,237,226,.16);
}

[data-theme="ledger"] {
  color-scheme: light;
  --paper:      #FFFFFF;
  --paper-deep: #F7FAFE;
  --ground:     #F0F4FA;
  --hairline:   rgba(19,30,46,.16);
  --ink:        #131E2E;
  --ink-soft:   #324157;
  --gray:       #465873;
}
/* the white-sheet green: written for two white stocks, and bond is gone */
[data-theme="ledger"] { --green: #127E5E; }

[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #12100C;
  --paper-deep: #1B1813;
  --ink:        #F2EDE2;
  --ink-soft:   #C9C2B4;
  --gray:       #8E8676;
  --hairline:   rgba(242,237,226,.16);
  --green:      #4ECB8F;
  --green-tint: rgba(78,203,143,.12);
  --green-zero:     var(--green-zero-dark);
  --green-zero-ink: var(--green-zero-dark);
  --red-ink:    #F0663C;
  --brand-ink:  #FF4D82;
  --brand-wash: color-mix(in srgb, var(--brand) 16%, transparent);
  --wash:       color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-2:     color-mix(in srgb, var(--ink) 11%, transparent);
  --band:       color-mix(in srgb, var(--ink) 7%, transparent);
}

/* ============ THE GRADE RAMP ============
   Five steps, one hue, one direction: A holds the most colour the sheet can
   carry and F holds none. Sequential and not the retired semaphore, which ran
   green to red and gave the scale two ends. A letter drains as it falls; it is
   not accused. The whole argument, the hue and the measured contrast per step
   live in index.html above the same block and are not repeated here.

   AN ARTICLE PRINTS LETTERS, WHICH IS WHY THIS SHEET CARRIES THE RAMP. The
   verdict block sets one with the gate that fixed it, and the share card at
   the foot prints a move and a seal. It still holds no product data: a case
   names its subject by the id index.html already uses and links back, and the
   ramp only ever colours a letter the article was written with.

   Declared in full, both halves, on the same terms as the other three files:
   a partial mirror is a trap, and the rule that a value moving in index.html
   moves here in the same commit is only mechanical if both halves are present
   to move. */
:root {
  --gr-a: #00417B;
  --gr-b: #194C7F;
  --gr-c: #305680;
  --gr-d: #495E76;
  --gr-f: #5E6369;
  --gr-a-dark: #8CC2FE;
  --gr-b-dark: #8BB9ED;
  --gr-c-dark: #8CB1DA;
  --gr-d-dark: #95A9C0;
  --gr-f-dark: #9EA3A8;
}
[data-theme="dark"] {
  --gr-a: var(--gr-a-dark);
  --gr-b: var(--gr-b-dark);
  --gr-c: var(--gr-c-dark);
  --gr-d: var(--gr-d-dark);
  --gr-f: var(--gr-f-dark);
}
/* --gr is the level's own ink, set by one class on the mark and read by every
   part of it. Anything that is not a level of the published scale never sets
   it and falls back to --ink, which is how the rest of the page stays the
   colour it was. */
.lv-A { --gr: var(--gr-a); }
.lv-B { --gr: var(--gr-b); }
.lv-C { --gr: var(--gr-c); }
.lv-D { --gr: var(--gr-d); }
.lv-F { --gr: var(--gr-f); }
/* ============ THE NAMEPLATE ============
   The Journal's face, and the second file to carry it. journal.html declared
   it on 2026-08-12 by an explicit decision from the user, with the note that
   if the name were ever set anywhere else the token moves up into the mirrored
   :root in the same commit.
   IT DOES NOT MOVE UP, AND THIS IS THE READING. The trigger was the name being
   set on a surface that is not the Journal. An article is the Journal: it is
   the same section printing the same nameplate, one directory down. So the
   token belongs to the Journal family, which is now two files, and it is
   mirrored between those two on the same terms as :root is mirrored between
   the four. The day index.html or method.html prints this name, it moves up.

   A serif, because a masthead is not a headline. The face survives being faked
   into small caps, which a didone does not: the full argument is in
   journal.html and in logs/2026-08-12-the-nameplate-changes-its-mind.md. */
:root {
  --nameplate: "Libre Baskerville", Baskerville, "Times New Roman", Georgia, serif;
}

/* ============ THE READING REGISTER ============
   Two steps, taken from method.html by name and by value. They are NOT new:
   that file declared five of them on 2026-08-11 for the same reason this one
   needs two, which is that the UI scale tops out where a table cell does and
   an article is long-form. --fs-read-lede sets the body, --fs-read-sub sets
   the deck. A third comes from method.html's list (--fs-gate, --fs-h1,
   --fs-h2) rather than being invented here.
   They are not part of the mirrored block: index.html does not carry them. */
:root {
  --fs-read-lede: 19px;
  --fs-read-sub:  20px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:var(--fs-md); -webkit-font-smoothing:antialiased; }
a { color: var(--brand-ink); }
::selection { background: var(--green-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius); }
img { max-width:100%; }
@media (prefers-reduced-motion:reduce){ *, *::before, *::after { animation:none!important; transition:none!important; } }
/* ---- motion · the house's two curves. Mirrored from index.html: same names,
   same values, same commit. The reasoning lives there. */
:root { --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
html.stock-swap, html.stock-swap *, html.stock-swap *::before, html.stock-swap *::after { transition:none!important; }

/* ============ THE PRINT REGISTER ============
   The sheet has a tooth. Same values as index.html: the reader crossing from
   the table to the Journal must not feel the paper change under them. */
:root      { --tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23t)'/%3E%3C/svg%3E"); --tooth-opacity:.40; }
/* Both white stocks are smooth and take a trace, and both have to be declared
   HERE, after the :root above, or the cream's .40 wins on equal specificity.
   Same fix and same reasoning as index.html, 2026-08-11. */
[data-theme="ledger"] { --tooth-opacity:.14; }
[data-theme="dark"] { --tooth-opacity:.5;
  --tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23t)'/%3E%3C/svg%3E"); }
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:var(--tooth-opacity); background-image:var(--tooth);
}
/* ============================================================
   THE ARTICLE
   One filed case, at its own address. The order is the docket row's, opened
   out: what kind of case it is, who it is against, the headline, the deck,
   the byline, then the argument, then the card that carries it away.
============================================================ */

/* ---- the bar, reduced, and it is the one departure from the house rule ----
   index.html, method.html and journal.html carry the WHOLE bar: the same three
   items, the same two menus, the same search. The rule was paid for twice (see
   logs/2026-08-11-three-sheets-one-house.md) and its reason is that the two
   menus are the site's map, so a bar that shrinks as you walk into a section
   tells the reader they have left the site.
   AN ARTICLE IS NOT A SECTION, IT IS A PAGE INSIDE ONE, and it is the only
   surface here a reader arrives at from somebody else's timeline rather than
   from the site. What that reader needs first is what they are holding and
   where it came from, so the nameplate is the object on the left and it is the
   way back. Markets and Method stay, because they are the two things a case
   argues against. The search field and the two menus do not: a case is read,
   and a menu over a document being read is the aggregator silhouette this
   house already refused once. Decided with the article family, 2026-08-22. */
.masthead {
  display:flex; gap:var(--sp-16); align-items:center; flex-wrap:wrap;
  padding:var(--sp-12) var(--sp-24); background:var(--paper); border-bottom:1px solid var(--ink);
  position:sticky; top:0; z-index:50;
}
/* THE SMALL CAPS ARE OURS, NOT THE BROWSER'S, from 2026-08-27, and this rule
   exists because journal.html's nameplate changed on the same day and these
   two may not disagree about what the name of the section looks like. Libre
   Baskerville ships no `smcp`, so font-variant-caps was being faked by scaling
   the capitals to .69 of the cap, under the .75 to .80 a cut face uses, and
   the browser does not expose the scale. .82 here and .82 there, a shade over
   true small caps because scaling a capital thins its stems and a real small
   cap is cut to hold the capital's colour.
   IT IS BUILT IN THE MARKUP, one .sc span per word, so every article's back
   bar has to carry it: journal/_template.html and every filed case. A case
   that ships with a bare "The Mint Street Journal" in this bar gets the
   browser's .69 and is the odd one out, and nothing here will say so. */
.masthead .back {
  display:inline-flex; align-items:baseline; gap:var(--sp-10); text-decoration:none; color:var(--ink);
  font-family:var(--nameplate); font-weight:400;
  letter-spacing:.03em; font-size:var(--fs-xl); line-height:1.1;
  min-width:0;
}
/* The transform is on the nameplate span and not on .back, because .back also
   holds the arrow, which is mono, grey and a sentence rather than a name. */
.masthead .back .np { text-transform:uppercase; }
.masthead .back .np .sc { font-size:.82em; }
/* The arrow is the whole affordance: the nameplate is the name of the thing
   you are inside, and on its own it does not read as a way out. */
.masthead .back .arw { font-family:var(--mono); font-size:var(--fs-2xs); color:var(--gray); letter-spacing:0; flex:none; }
@media (hover:hover) and (pointer:fine){ .masthead .back:hover .arw { color:var(--ink); } }
.masthead nav.top-nav { display:flex; gap:var(--sp-4); align-items:center; margin-left:auto; }
.masthead nav.top-nav > a {
  color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:var(--fs-base);
  padding:var(--sp-8) var(--sp-14); border-radius:var(--radius); white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
@media (hover:hover) and (pointer:fine){ .masthead nav.top-nav > a:hover { color:var(--ink); border-bottom-color:var(--hairline); } }
/* A BAR ITEM WITH ITS DOOR SHUT, and this is the fourth copy of it: the rule
   is written out in index.html, journal.html and method.html and it moves in
   all three at once. Markets and Method are switched off at the bar until the
   Method and the gradations publish; an article still cites both in its body
   and in its foot, because a citation is the argument and the bar is only the
   way in. Not a link and not hidden: a label in the disabled colour, with the
   reason beside it. */
.masthead nav.top-nav > .nav-off {
  display:inline-flex; align-items:center; gap:var(--sp-6);
  color:var(--gray); font-weight:500; font-size:var(--fs-base);
  padding:var(--sp-8) var(--sp-14); white-space:nowrap; cursor:default;
  border-bottom:2px solid transparent;
}
.masthead nav.top-nav > .nav-off .np-soon {
  font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray);
}
.theme-toggle {
  display:inline-flex; align-items:center; gap:var(--sp-6); cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); background:transparent; border:1px solid var(--hairline);
  border-radius:var(--radius); padding:var(--sp-6) var(--sp-10); transition:border-color .15s, color .15s;
}
@media (hover:hover) and (pointer:fine){ .theme-toggle:hover { border-color:var(--ink); color:var(--ink); } }
.theme-toggle:active { background:var(--wash); border-color:var(--ink); color:var(--ink); transition:none; }
.theme-toggle svg { display:block; }

/* ---- the sheet ----
   Narrower than the Journal's 1240: that page is a register and this one is a
   column of prose. The measure is set on the column itself, in ch, so it holds
   at any font size the reader has set. */
.a-sheet { max-width:960px; margin:0 auto; padding:0 var(--sp-24) var(--sp-40); }

/* ---- the case header ---- */
.a-head { padding:var(--sp-30) 0 var(--sp-24); border-bottom:2px solid var(--ink); }
.a-kicker { display:flex; align-items:center; gap:var(--sp-12); flex-wrap:wrap; }
.fmt-tag { display:inline-block; font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.2em; text-transform:uppercase; color:var(--paper); background:var(--ink); padding:var(--sp-4) var(--sp-10); border-radius:var(--radius); }
.case-tag { display:inline-block; font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.12em; text-transform:uppercase; color:var(--gray); }
/* The stamp sits at the end of the kicker line and keeps its own rotation, so
   it is the one thing on the page that is not square to the grid. */
.a-kicker .stamp { margin-left:auto; }
.a-title {
  font-family:var(--display); font-weight:400; font-size:var(--fs-lead); line-height:.98;
  text-transform:uppercase; letter-spacing:.005em; margin:var(--sp-20) 0 0; text-wrap:balance;
}
/* The same mark the front page makes, for the same clause: the tint sits under
   the half that carries the accusation, and it is the house green being the
   house and nothing else. */
.a-title .under { box-shadow:inset 0 -0.14em 0 var(--green-tint); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.a-accused { font-family:var(--sans); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:var(--sp-22); }
.a-accused b { color:var(--ink); font-weight:600; }
.a-deck { font-family:var(--serif); font-style:italic; font-size:var(--fs-read-sub); line-height:1.5; color:var(--ink-soft); margin:var(--sp-16) 0 var(--sp-24); max-width:56ch; }
.a-byline { font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.14em; text-transform:uppercase; color:var(--gray); display:flex; gap:var(--sp-18); flex-wrap:wrap; align-items:baseline; }
.a-byline b { color:var(--ink); font-weight:600; }

/* ---- the hero ----
   A plate, on the same terms as a figure in the body: its own ground a step off
   the sheet, the stock's own dose of tooth, and the picture inside it bare. It
   sits in the header rather than in the body because the header is the house's
   furniture around the piece and the body is the piece.
   It is NOT capped at the reading measure: .a-body is 68ch and this is not in
   it, so the plate runs the full width of the sheet, which is what an opener
   does and what the 1200 by 630 was drawn for. */
.a-hero { position:relative; margin:var(--sp-30) 0 0; }
.a-hero img { display:block; width:100%; height:auto; border:1px solid var(--hairline); border-radius:var(--radius); background-color:color-mix(in srgb, var(--ink) 4%, var(--paper)); }
.a-hero figcaption { font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.06em; line-height:1.7; color:var(--gray); margin-top:var(--sp-10); text-transform:uppercase; max-width:68ch; }
.a-hero figcaption b { color:var(--ink-soft); font-weight:600; }

/* ---- the argument ----
   Serif, because Spectral is the face that argues in this house. The measure
   is 68ch and the size is the reading register's, not the UI's. */
.a-body { font-family:var(--serif); font-size:var(--fs-read-lede); line-height:1.7; color:var(--ink); max-width:68ch; padding-top:var(--sp-30); }
.a-body p { margin:0 0 var(--sp-22); }
.a-body a { color:var(--brand-ink); text-decoration:underline; text-underline-offset:3px; }
.a-body b, .a-body strong { font-weight:600; }
.a-body h2 { font-family:var(--display); font-weight:400; font-size:var(--fs-2xl); line-height:1.06; text-transform:uppercase; letter-spacing:.005em; margin:var(--sp-40) 0 var(--sp-16); }
.a-body h3 { font-family:var(--sans); font-size:var(--fs-2xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); margin:var(--sp-30) 0 var(--sp-12); }
/* A count is a charge, numbered, and it is the one list on the page that is
   set in the machine's voice: it is what the record shows, not what we argue
   from it. Numbered by hand in the markup, so a count keeps its number if the
   order of the prose around it changes. */
.a-counts { list-style:none; margin:var(--sp-24) 0; padding:0; border-top:1px solid var(--ink); }
.a-counts li { border-bottom:1px solid var(--hairline); padding:var(--sp-14) 0; display:grid; grid-template-columns:auto 1fr; gap:var(--sp-16); align-items:baseline; }
.a-counts .n { font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.12em; text-transform:uppercase; color:var(--gray); white-space:nowrap; }
.a-counts .c { font-family:var(--sans); font-size:var(--fs-md); line-height:1.55; color:var(--ink); }
.a-counts .c .prov { display:block; margin-top:var(--sp-6); }

/* ---- a figure, with its caption in the machine's voice ----
   NOTHING IS PRINTED LARGER THAN ITS OWN FILE. `width:100%` is not "fill the
   column", it is "stretch to the column whatever you are": six of the nine
   charts in case 026-001 are 640 to 667px wide against a measure of about 650,
   so the file that most needs help would be blurred to gain four pixels.
   `width:auto` prints every file at its own size and `max-width:100%` keeps
   the wide ones inside the measure. No `max-width:none` here either: the cap
   it would lift is on .a-body, not on the figure.
   EVERY IMG CARRIES ITS INTRINSIC width AND height. The page is 1.2MB of
   chart; without the attributes the browser has no box to reserve and the
   column jumps nine times while a reader is in the first paragraph. */
.a-body figure { margin:var(--sp-30) 0; }
.a-body figure img { display:block; width:auto; max-width:100%; height:auto; border:1px solid var(--hairline); border-radius:var(--radius); }
/* The picture is a link to itself, which is the whole of the phone answer and
   the literal reading of "at the largest resolution there is": the file. The
   OS image viewer pinches to fit and to the axis label, saves, prints, and the
   back button is the close. No script of ours beats it and none is written. */
.a-body figure a { display:block; text-decoration:none; }
.a-body figcaption { font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.06em; line-height:1.7; color:var(--gray); margin-top:var(--sp-10); text-transform:uppercase; }
.a-body figcaption b { color:var(--ink-soft); font-weight:600; }

/* ---- COMPONENT · the plate, opened ----
   WHAT THIS IS NOT: a lightbox. A lightbox is a panel lifted off a dimmed page
   on a shadow, and this house has no shadow to lift it with, no scrim to dim
   with, and a Hairline Rule that says if a rule is not enough then they are not
   two things. The figure and the sheet are not two things. So the figure does
   not rise off the sheet, it TAKES the sheet: on :target it stays exactly where
   it is in the flow, in the same DOM, with its caption still under it, and
   widens to the sheet's own edge while the picture inside it goes to its own
   pixels in a port the reader can pan. Nothing is covered and nothing floats.
   The route in is a URL fragment, which is the only router an article owns,
   and it is the same move /map already makes: a route that strips the page
   rather than a panel that covers it.
   ONLY WHERE THERE IS SOMETHING BEHIND THE GLASS. In case 026-001 six of the
   nine files are 640 to 667px against a measure of about 650, so an Enlarge on
   them would open something the size of what is already printed. Three earn it:
   1556, 2904 and 2952 wide. A control that does not do what it says is the
   thing DESIGN.md's Don'ts name outright, so the other six carry no control.
   Marked by hand, per figure, on the one test that decides it: is the file
   wider than the sheet. */
.a-body figure.plate .plate-port { overflow:hidden; }
/* Open: the picture drops to its own scale and the port becomes the window.
   THIS is the 1:1 the ask is about. Widening alone never gets there: on a
   1440px screen the sheet gives fig-6 about 912 of its 2952, which is 31 per
   cent and still unreadable. Natural pixels in a pannable port is the only
   thing on this page that is actually full resolution, other than the file. */
.a-body figure.plate:target .plate-port {
  overflow:auto; overscroll-behavior:contain;
  max-height:80vh; max-height:min(80svh, 900px);
  background-color:color-mix(in srgb, var(--ink) 4%, var(--paper));
  border:1px solid var(--hairline); border-radius:var(--radius);
}
.a-body figure.plate:target .plate-port img { width:auto; max-width:none; border:0; border-radius:0; }
/* The picture is a link to its own file. While the plate is open that link
   would swallow every drag, so it stops taking the pointer and the port pans. */
.a-body figure.plate:target .plate-port a { pointer-events:none; }
/* The sheet is 960 with 24 of padding, so its content edge is at 912. The
   figure reaches it by growing to the right only, which is where the room is:
   .a-body is left aligned in the sheet, not centred. Below 1000px the column
   is already most of the sheet, the gain would be a few pixels, and the
   arithmetic would have to guess at a scrollbar; so the reach starts here and
   the port carries the win at every width under it. */
@media (min-width:1000px){
  .a-body figure.plate:target { margin-right:calc(-1 * max(0px, 912px - 100%)); }
}
/* Landing under the sticky bar is the classic fault of a fragment router. */
.a-body figure.plate, .plate-back { scroll-margin-top:var(--sp-44); }
.plate-back { display:block; height:0; }

/* The controls sit in the caption, in the caption's own voice, never floating
   on the picture: a labelled chip over a chart is the app gesture this whole
   object exists to avoid. Open and Fold back are the same slot in two states,
   so the line never grows. */
.plate-ctl { display:flex; gap:var(--sp-16); flex-wrap:wrap; margin-top:var(--sp-8); }
.plate-ctl a { color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--hairline); }
@media (hover:hover) and (pointer:fine){ .plate-ctl a:hover { color:var(--ink); border-bottom-color:var(--ink); } }
.plate-ctl a:active { background:var(--wash-2); color:var(--ink); border-bottom-color:var(--ink); transition:none; }
.plate-ctl .plate-close { display:none; }
.a-body figure.plate:target .plate-ctl .plate-open { display:none; }
.a-body figure.plate:target .plate-ctl .plate-close { display:inline; }
@media (max-width:640px){ .plate-ctl a { min-height:44px; display:inline-flex; align-items:center; } }

/* ---- the document, quoted ----
   Two ink rules and a measure, the same shape the Marginal takes: this is the
   document answering for itself, so it is set in the serif and signed with the
   source underneath. It is not a pull quote and it never quotes us.
   THE 3px INK RULE IS THE HOUSE'S AND IT IS DELIBERATE. A mechanical scan reads
   any left rule over 1px as the accent-bar tell, and it is right to, which is
   why the sort callout gave one up on 2026-08-11: a bar down one side is the
   flag's shape and a callout is not a flag. A quotation is the one place this
   house has always drawn it, in ink and never in colour: method.html sets its
   epigraph at exactly these values, and a quoted document on an article is the
   same object on a different sheet. Ink, 3px, no hue: that is what separates
   it from the pattern the scan is looking for. */
.a-body blockquote { margin:var(--sp-30) 0; padding:var(--sp-4) 0 var(--sp-4) var(--sp-22); border-left:3px solid var(--ink); max-width:60ch; }
.a-body blockquote p { font-style:italic; color:var(--ink); margin:0 0 var(--sp-10); }
.a-body blockquote cite { display:block; font-family:var(--mono); font-style:normal; font-size:var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--gray); line-height:1.6; }

/* ---- a table of figures, when the case is about a number ----
   Mono, tabular, right aligned, and it takes the house's table rules: head on
   paper-deep under a firm ink rule, rows on hairlines, no colour anywhere. */
.a-table { width:100%; border-collapse:collapse; margin:var(--sp-26) 0; font-family:var(--sans); font-size:var(--fs-sm); }
.a-table caption { text-align:left; font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.12em; text-transform:uppercase; color:var(--gray); padding-bottom:var(--sp-10); }
.a-table th { font-family:var(--sans); font-size:var(--fs-3xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--paper-deep); border-bottom:1px solid var(--ink); padding:var(--sp-10) var(--sp-12); text-align:left; }
.a-table td { border-bottom:1px solid var(--hairline); padding:var(--sp-10) var(--sp-12); color:var(--ink-soft); vertical-align:baseline; }
.a-table td.n, .a-table th.n { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; color:var(--ink); }
.a-table tr.total td { border-bottom:2px solid var(--ink); color:var(--ink); font-weight:600; }
.a-table .prov { display:block; margin-top:var(--sp-4); }
.a-scroll { overflow-x:auto; }

/* ---- the verdict block: the letter this case ends on ----
   The letter is NOT computed here and never will be. It is written into the
   markup by the editor, from the register in index.html, and the block links
   to the version it belongs to so a reader can check it against the table that
   owns it. Same three states as everywhere else, and the gate always rides
   underneath. */
.a-verdict { display:flex; gap:var(--sp-24); align-items:flex-start; flex-wrap:wrap; border:1px solid var(--ink); border-radius:var(--radius); background:var(--wash); padding:var(--sp-22) var(--sp-24); margin:var(--sp-30) 0; }
.a-verdict .vt { flex:1 1 320px; min-width:0; font-family:var(--sans); font-size:var(--fs-md); line-height:1.6; color:var(--ink-soft); }
.a-verdict .vt .k { display:block; font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.16em; text-transform:uppercase; color:var(--gray); margin-bottom:var(--sp-8); }
.a-verdict .vt b { color:var(--ink); font-weight:600; }

/* ---- COMPONENT · Marginal ----
   The note an examiner writes in the margin of a document being marked up,
   documented in DESIGN.md and built to that spec: two ink rules and a measure,
   the label in the label tier, the argument in Spectral because Spectral is
   the face that argues here, and a signature under it. Not a card, not an
   alert, and never a ground of its own. No motion: a printed note does not
   fade in, it is on the sheet or it is not.
   ON AN ARTICLE IT HAS ONE JOB AND IT IS NOT THE INTERACTIVE ONE. The Journal
   publishes pieces the house did not write (a syndicated analysis, an issuer's
   reply) and it annotates them rather than editing them. This is that
   annotation, and it is a STANDING note: it is true for as long as the piece
   is on the sheet, so it does not fire and cannot be dismissed. It has to be
   unmistakably the house talking over somebody else's text, which is why it
   keeps the two rules and the label and never borrows the body's measure. */
.a-marginal { border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:var(--sp-18) 0; margin:var(--sp-36) 0; max-width:60ch; }
.a-marginal .k { display:block; font-family:var(--sans); font-size:var(--fs-3xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); margin-bottom:var(--sp-10); }
.a-marginal p { font-family:var(--serif); font-style:italic; font-size:var(--fs-lg); line-height:1.6; color:var(--ink); margin:0 0 var(--sp-10); }
.a-marginal p:last-of-type { margin-bottom:0; }
/* THE MARGINAL'S SIGNATURE CITES MARKETS AND DOES NOT LINK TO IT, since
   2026-09-07. Markets is written and shut until the gradations publish, so an
   article names where the gates live and stops there: a citation is the
   argument, a link is a door, and the doors are what came out. The words did
   not change and neither did the sentence. When Markets opens, the anchors go
   back into the four articles that carry one. */
.a-marginal .sig { font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-top:var(--sp-12); }
.a-marginal .sig a { color:var(--ink); text-decoration:none; font-weight:600; }
@media (hover:hover) and (pointer:fine){ .a-marginal .sig a:hover { text-decoration:underline; text-underline-offset:3px; } }

/* ---- the provenance line under a piece the house did not write ----
   Where it was published first, when, and by whom. It sits with the byline
   rather than in the foot: a reader deciding whether to spend eight minutes on
   a piece is entitled to know whose masthead it appeared under before they
   start, not after. */
.a-first { font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-top:var(--sp-14); line-height:1.7; }
.a-first a { color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--hairline); }
@media (hover:hover) and (pointer:fine){ .a-first a:hover { border-bottom-color:var(--ink); } }

/* ---- the foot: back to the docket, and the signature ---- */
.a-foot { display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-16); flex-wrap:wrap; font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--gray); border-top:1px solid var(--ink); padding-top:var(--sp-20); margin-top:var(--sp-40); }
.a-foot a { color:var(--ink); text-decoration:none; font-weight:600; }
@media (hover:hover) and (pointer:fine){ .a-foot a:hover { text-decoration:underline; text-underline-offset:3px; } }

.footer-note { max-width:960px; margin:0 auto; padding:var(--sp-20) var(--sp-24) var(--sp-36); font-size:var(--fs-xs); color:var(--gray); line-height:1.6; border-top:1px solid var(--hairline); }
.footer-note strong { color:var(--ink); font-weight:600; }
.footer-note a { color:var(--ink-soft); text-decoration:none; font-weight:600; }
@media (hover:hover) and (pointer:fine){ .footer-note a:hover { color:var(--ink); text-decoration:underline; } }

/* ============ COMPONENT · SignatureLine ============
   Mirrored from journal.html: same rules, same values. The version inside it
   is written into the markup of each article, because this file has no script
   and an article is a dated document that must not be silently restamped. */
.signature {
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.04em; color:var(--gray);
  line-height:1.6; padding:var(--sp-10) var(--sp-14); border-top:1px solid var(--hairline);
}
.signature b { color:var(--ink-soft); font-weight:600; letter-spacing:.08em; }

/* ============ COMPONENT · the social line ============
   WHERE THE PUBLICATION IS, and it is the one row of links the foot carries.
   The rule above it says the foot carries no links, and this does not reopen
   it: that decision is about doors INTO this house that are written and not
   open, and a reader sent to a shut room learns the site is empty. This
   points OUT, at the one place the house is already publishing, from the
   surface a reader most often lands on off somebody else's timeline. If the
   two ever conflict, the foot's rule wins and this row goes with it.
   IT GOES UNDER THE SIGNATURE AND TAKES NO RULE OF ITS OWN, because who made
   the page and where to follow it read as one thought and not two. On an
   article the signature sits inside the piece, so this lands under the
   disclaimer instead; the hairline above it is whichever of the two drew one.
   On the front page the API's status line still prints below it: that is a
   fault message about this page, not part of the masthead's own sign-off.
   EACH ENTRY NAMES THE NETWORK AND THE NAME ON IT. A row of bare glyphs is a
   guess about which grey circle is which; the handle is the thing a reader
   actually checks against. The icon is scanning help, never the label. */
.social {
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.04em; color:var(--gray);
  line-height:1.6; padding:var(--sp-10) var(--sp-14);
  display:flex; gap:var(--sp-14); align-items:center; flex-wrap:wrap;
}
.social a { display:inline-flex; align-items:center; gap:var(--sp-6); color:var(--ink-soft); text-decoration:none; font-weight:600; }
.social a svg { display:block; flex:none; }
@media (hover:hover) and (pointer:fine){ .social a:hover { color:var(--ink); } }
.social a:active { color:var(--ink); }
/* The row is small type in a foot, so the target gets the 44px it owes on a
   phone without the line growing on a desk. */
@media (max-width:640px){ .social a { min-height:44px; } }

/* ============ COMPONENT · Provenance ============
   Three labels, and no figure in this house may go without one of them.
   MEASURED · <source> · <date>  /  DECLARED BY ISSUER  /  ESTIMATED · <date>
   Mirrored from index.html, values unedited. The label is per CLAIM: a block
   may declare it once, and then the exceptions stay inline. Never both off. */
.prov {
  font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--gray); white-space:nowrap; font-weight:500;
}
.prov--block { display:block; white-space:normal; margin-top:var(--sp-2); line-height:1.5; }
.prov::before { content:""; display:inline-block; width:5px; height:5px; margin-right:var(--sp-6); vertical-align:.08em; border:1px solid currentColor; }
.prov--measured::before { background:currentColor; }
.prov--declared::before { transform:rotate(45deg); }
.prov--estimated::before { background:transparent; border-style:dotted; }

/* ============================================================
   THE JOURNAL'S FIVE, ON AN ARTICLE
   Stamp, Flag, MoveLine, RailGrade and ShareCard are documented in DESIGN.md
   and live in journal.html. Their CSS is mirrored here unedited, on the same
   terms as the token block: same names, same values, same commit. An article
   prints four of them at most, and the card at the foot is the whole reason
   the case has an address of its own.
============================================================ */

/* The letter standing at the end of the row, in the three states the house
   already publishes. It is a bare letterform rather than the boxed Grade
   component: this rail is a list of what moved, and five stamped boxes down
   the side of a front page reads as a scoreboard. The states are the same
   three and they are told apart without colour, which is the part that
   matters: solid is earned, outlined is capped by missing disclosure, struck
   is out of its window. */
.rail-grade { font-family:var(--display); font-size:var(--fs-2xl); line-height:1; color:var(--gr, var(--ink)); flex:none; }
/* A centred stroke eats the counters of a condensed face from both sides, so
   the weight has to travel with the size or the letter closes up: at 28px in
   the rail 2px reads as an outline, at 17px in a status line the same 2px
   reads as a blob. Two values, one per place the letter is set. */
.rail-grade--hollow { color:transparent; -webkit-text-stroke:2px var(--gr, var(--ink)); }
/* `.move-line .g` sets the letter's colour at two classes deep, so the hollow
   rule has to match it or the letter comes back filled with a stroke painted
   over the top, which reads as a blob rather than an outline. Same fix both
   ways: match the specificity, thin the stroke for the smaller size. */
.move-line .g.rail-grade--hollow { color:transparent; -webkit-text-stroke-width:1px; }
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .rail-grade--hollow, .move-line .g.rail-grade--hollow { color:var(--paper); text-shadow:-1px -1px 0 var(--gr, var(--ink)),1px -1px 0 var(--gr, var(--ink)),-1px 1px 0 var(--gr, var(--ink)),1px 1px 0 var(--gr, var(--ink)); }
}
/* An expired letter gives the colour back, exactly as .grade--expired does in
   index.html. The ramp says where a level sits on the scale, and a letter out
   of its window is no longer making that claim: it is history, and history is
   printed in ink. Struck through and drained, in that order. */
.rail-grade--expired { --gr: var(--ink); text-decoration:line-through; text-decoration-thickness:3px; opacity:.55; }
.move-line .g.rail-grade--expired { --gr: var(--ink); text-decoration:line-through; text-decoration-thickness:2px; opacity:.55; }/* ---- COMPONENT · Stamp ----
   The one transgression the house allows itself, and it is in the OBJECT, not
   in the system: a stamp is rotated because a stamp is pressed by a hand. It
   is ink in every state. Colour carries nothing here: a filed fact takes a
   solid rule, a fact still waiting on somebody else takes a dashed one, which
   is the same grammar a hollow letter already speaks. The words are the
   meaning, and they are restricted to what a record can show. */
.stamp {
  display:inline-block; white-space:nowrap; font-family:var(--mono); font-weight:600;
  font-size:var(--fs-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  padding:var(--sp-8) var(--sp-12); border:2px solid currentColor; border-radius:var(--radius-stamp);
  transform:rotate(-4deg);
}
.stamp--pending { color:var(--gray); border-style:dashed; transform:rotate(-2deg); }
/* A move is a letter that moved, printed as letters and an arrow. Neither end
   is coloured: the direction is in the arrow and in the word on the stamp. */
.move-line { font-family:var(--mono); font-size:var(--fs-2xs); color:var(--ink-soft); margin-top:var(--sp-12); letter-spacing:.06em; }
.move-line .g { font-family:var(--display); font-size:var(--fs-lg); letter-spacing:.02em; color:var(--gr, var(--ink)); }
.move-line .arrow { color:var(--ink); }
/* the one place --red is allowed on this page: a real flag, with its words */
.case-flag { display:inline-flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-8); font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--red-ink); }

/* ---- COMPONENT · Grade ----
   Mirrored from index.html, values unedited, and only the sizes an article
   sets. The letter takes its level's step off the ramp; the state is carried
   by form, so all three read with colour switched off. An expired letter gives
   the colour back, because a closed window is not a live claim.
   THE LETTER IS WRITTEN BY THE EDITOR, NEVER COMPUTED. This file has no data
   and no script: the article names the letter index.html already publishes and
   links back to the version that owns it. */
.grade { display:inline-flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.grade__box {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--gr, var(--ink)); border-radius:var(--radius); background:transparent;
  font-family:var(--display); font-weight:400; color:var(--gr, var(--ink)); line-height:1; flex:none;
}
.grade--sm .grade__box { width:30px; height:30px; font-size:var(--fs-grade-sm); }
.grade--md .grade__box { width:46px; height:46px; font-size:var(--fs-grade-md); }
.grade--xl .grade__box { width:78px; height:78px; font-size:var(--fs-grade-xl); border-width:2px; }
.grade__letter { display:block; transform:translateY(.04em); }
.grade--hollow .grade__box { border-style:dashed; }
.grade--hollow .grade__letter { color:transparent; -webkit-text-stroke:1.2px var(--gr, var(--ink)); }
.grade--xl.grade--hollow .grade__letter { -webkit-text-stroke-width:2px; }
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .grade--hollow .grade__letter { color:var(--paper); text-shadow:-1px -1px 0 var(--gr, var(--ink)),1px -1px 0 var(--gr, var(--ink)),-1px 1px 0 var(--gr, var(--ink)),1px 1px 0 var(--gr, var(--ink)); }
}
.grade--expired { --gr: var(--ink); }
.grade--expired .grade__box::after {
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px));
}
.grade--expired .grade__letter { opacity:.55; }
.grade__gate {
  font-family:var(--sans); font-size:var(--fs-3xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gray); text-align:center; line-height:1.3;
}
.grade__expiry { font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.06em; color:var(--gray); white-space:nowrap; }
/* the standing hollow note. Never an accusation, and it says so. */
.hollow-note { border:1px dashed var(--hairline); border-radius:var(--radius); background:var(--wash); padding:var(--sp-10) var(--sp-12); margin-top:var(--sp-8); font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.5; }
.hollow-note b { color:var(--ink); }


/* ---- COMPONENT · ShareCard ----
   The distribution object, and on an article it is the point of the address:
   this page exists so the case can be pasted somewhere, and the card is what
   that somewhere shows. One per case, capped at 1200, which is the width it is
   exported at: on a wide enough window what is below is the object and not a
   picture of it. Nothing rasterises it yet.
   The annex around it on journal.html does not come with it. An article is the
   case, so the card sits at the foot with a caption and no essay: the page it
   is on has already made the argument. */
.a-card { border-top:1px solid var(--ink); margin-top:var(--sp-40); padding-top:var(--sp-26); }
.a-card .k { font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.2em; text-transform:uppercase; color:var(--gray); display:block; margin-bottom:var(--sp-16); }
/* THE CARD IS NOT AT SIZE ON AN ARTICLE, AND THE LABEL SAYS SO NOW. The sheet
   is 960 with 24 of padding, so this frame gets 912 however high the cap is
   set, and 1cqw resolves to 9.12px rather than 12: the 66px headline arrives
   at 50. It said "1200 x 630, at size" until 2026-08-23, which was a measured
   claim that was false on every article. The one surface that can show the
   object at its real width is journal.html#/specimen, on a wide window, and
   that page says so in its own words. */
.a-card .frame { max-width:1200px; }
/* THE CARD IS A SCALE MODEL, NOT A PANEL.
   It is 1200 by 630 and it is exported at that size, so every measurement in
   it is a fraction of its OWN width, not of the viewport: `cqw` against a
   container of 1200 means 1cqw = 12px, and the px value each rule resolves to
   at 1200 is named in the comment beside it. This is the one component in the
   house whose type does not come from --fs-*, and the reason is that the
   --fs-* scale is a page scale: the same 34px headline that is right on a
   1200px card is wrong on a 600px preview of the same card, because the card
   did not get smaller, the picture of it did.
   min-height:0 and overflow:hidden are load-bearing. Without them the content
   floors the box and the frame silently stops being 1200 by 630, which is the
   one claim the annex makes about it. An over-long headline now clips in the
   specimen, where an editor can see it, instead of quietly deforming the
   export nobody looks at until it is on somebody else's timeline.
   THE TYPE IS SIZED FOR THE PLACE IT IS READ, WHICH IS NOT THIS PAGE. X and
   Slack render a 1200-wide card at roughly 500, so everything on it is seen
   at 40 per cent. A 34px headline arrives as 14px in a scrolling timeline and
   is furniture. The headline is 66px here, which lands at about 27: the size
   the docket sets a headline at, on the surface where it has one second to
   work. The study this came from looked denser than it was, because its type
   was sized in vw against a card drawn at half width; read at true size it
   sets the same 34px. This is the correction, not a departure. */
.share-card {
  container-type:inline-size;
  aspect-ratio:1200/630; min-height:0; overflow:hidden;
  background:var(--paper); color:var(--ink); position:relative;
  border:1px solid var(--ink); border-radius:var(--radius); transform:rotate(-1.2deg);
  padding:3.33cqw 3.75cqw;                   /* 40 / 45 at 1200 */
  display:flex; flex-direction:column; justify-content:space-between; gap:1.67cqw;
}
.share-card .tape { position:absolute; top:-1.33cqw; left:50%; transform:translateX(-50%) rotate(-2deg); width:13cqw; height:2.83cqw; background:var(--wash-2); border-left:1px dashed var(--hairline); border-right:1px dashed var(--hairline); }
.share-card .sc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:1.67cqw; }
.share-card .sc-fmt { font-family:var(--mono); font-size:1.5cqw; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }   /* 18 at 1200 */
.share-card .stamp { font-size:1.5cqw; letter-spacing:.16em; padding:.83cqw 1.17cqw; border-width:.25cqw; transform:rotate(6deg); }   /* 18 at 1200 */
.share-card h4 { font-family:var(--display); font-weight:400; font-size:5.5cqw; line-height:1; text-transform:uppercase; letter-spacing:.005em; margin:0; max-width:17ch; }  /* 66 at 1200 */
/* THE INK BLOCK, AND IT IS PAINTED AS A BAND RATHER THAN AS A BACKGROUND.
   An inline background fills the CONTENT BOX, which is the face's own em box
   and has nothing to do with the line box: Anton's ascent plus descent is
   1.575em, so at line-height 1 every highlighted line painted .29em of ink
   above its own line and .29em below. Ink over ink is invisible, which is why
   a headline whose em starts on the first line has looked right since the card
   shipped; the moment a third line pushed the em clear of the top, the block
   ate the line above it. Found on the specimen opinion, 2026-08-27, and it was
   never a specimen-only fault: any card title long enough to wrap three times
   had it, on the one surface in this house that is read with no document
   around it.
   THE BAND IS ONE LINE BOX TALL AND CENTRED, AND THE CENTRING IS EXACT RATHER
   THAN TUNED. Half-leading is symmetric by definition, so the middle of the
   content box IS the line box, whatever the face and whatever the size: there
   is no magic number here to go stale when either changes. `1lh` says one line
   box in the browsers that have the unit; `1em` is the same number for as long
   as the rule above says line-height:1, which is the only reason the fallback
   is not a degradation. CHANGE THAT LINE-HEIGHT AND CHECK THIS RULE.
   box-decoration-break is the other half. Without it a wrapped em takes its
   padding at the two outer ends only, so an inner fragment sits flush against
   its own ink on one side and not the other. It is the same treatment .under
   already carries for the green mark. */
.share-card h4 em {
  font-style:normal; color:var(--paper); padding:0 1.17cqw;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;
  background-size:100% 1em;
  background-size:100% 1lh;
  background-position:0 50%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.share-card .sc-move { font-family:var(--mono); font-size:2cqw; color:var(--ink-soft); margin-top:1.67cqw; letter-spacing:.06em; }   /* 24 at 1200 */
.share-card .sc-move .g { font-family:var(--display); font-size:3.5cqw; color:var(--gr, var(--ink)); }   /* 42 at 1200 */
/* ---- THE EXHIBIT, the clipping mounted on the card ----
   Added 2026-08-23. The card was type and nothing else, and a case that owns
   nine charts arrived on a timeline as a paragraph. This is the chart, cropped
   into a band that runs off both trims, with a 1px ink seam where it is
   mounted: the Hairline Rule satisfied rather than dodged, since a rule is
   exactly what separates two things here.
   IT IS NOT FOR READING. At the 500px a timeline renders this card at, the
   band is 80px tall and no axis label survives. Its job is to say, in the one
   second the card has, that there is measured data behind the headline. That
   is why `cover` and a crop are acceptable here and would not be in the
   article: the article prints the whole chart, this prints that a chart exists.
   THE CROP IS AN EDITORIAL ACT AND IT IS PER CASE. --sc-crop is the focus
   point. On a chart whose argument is the distance between two ends of a bar,
   a crop that shows one end argues the opposite of the piece, so it is chosen
   by the editor and written on the element, never left to the default.
   flex:none is load-bearing: the card is justify-content:space-between, and a
   band that could be squeezed would deform the one object whose 1200 by 630 is
   the only claim the annex makes about it.
   A CASE WITH NO CHART CARRIES NO BAND. Its hero is its letter, which the seal
   at the foot already prints, and the card is byte-identical to what shipped
   before this existed. */
.share-card .sc-plate {
  flex:none; height:16cqw; margin:0 -3.75cqw; overflow:hidden;
  border-top:1px solid var(--ink); background:var(--paper-deep);
}
.share-card .sc-plate img {
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:var(--sc-crop, 50% 50%);
}
.share-card .sc-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:1.67cqw; font-family:var(--mono); font-size:1.33cqw; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }  /* 16 at 1200 */
.share-card .sc-foot b { color:var(--ink); font-weight:600; }
.share-card .seal { width:6cqw; height:6cqw; border:.25cqw solid var(--gr, var(--ink)); color:var(--gr, var(--ink)); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:3cqw; flex:none; }  /* 72 box, 36 letter */

/* ---- responsive ----
   Two rules and no third: the column is already one column. Below 640 the bar
   takes the same 44px touch target every other file gives it, from a width
   query and not (pointer:coarse), because the bar has to be the same object
   wherever it is drawn. */
@media (max-width:820px) {
  .masthead nav.top-nav { margin-left:0; }
  .masthead .back { flex:1 1 100%; }
}
@media (max-width:640px) {
  .masthead { padding:var(--sp-10) var(--sp-14); gap:var(--sp-10) var(--sp-12); }
  .masthead .back { font-size:var(--fs-lg); }
  .theme-toggle { min-height:44px; }
  .masthead nav.top-nav > a { min-height:44px; display:inline-flex; align-items:center; }
  .a-sheet { padding:0 var(--sp-14) var(--sp-32); }
  .footer-note { padding:var(--sp-18) var(--sp-14) var(--sp-30); }
  .a-kicker .stamp { margin-left:0; }
  .a-counts li { grid-template-columns:1fr; gap:var(--sp-6); }
}