/* metalign — one stylesheet, no build step, no dependencies.

   Two pages load this file. index.html is the landing page — a two-sided ledger that says
   what metalign does and holds the one real action, scrolling like any page. handbook.html
   loads css/handbook.css on top of it — that is how the second page gets the fonts, the
   palette and the wordmark without a second copy of any of them, so a change here reaches
   both pages. The handbook's own layout is .handbook-scoped over there; the landing page's
   own layout is .landing-scoped down here. Neither page's layout may lean on the other's:
   only the tokens, the fonts and the base rules are shared ground. */

/* ---------- Fonts ----------
   XCharter for the headings, Instrument Sans for the text. Both are served from /fonts —
   nothing is fetched from anybody else's server to render this page, which is the same
   promise the app makes about your photographs. Licence texts sit beside the files.
   Mono stays on the system stack.

   font-display: optional, not swap. swap paints the fallback and then re-typesets the page
   when the real font lands, and the two are not the same size: measured here, XCharter is
   9.3% wider than the ui-serif it falls back to and its x-height is 5.7% taller, while
   Instrument Sans runs 14.7% wider than -apple-system. That is the "font size flicker".

   The wordmark used to show it worst, because the lens mark stood in for a letter and was
   sized in ex — it grew with whatever x-height resolved, so a swap resized the logo. The
   lockup is outlines now and is the one thing on the page a missing font cannot touch;
   everything else below still depends on this.

   optional gives the browser a short block period and then commits: if the file is not
   ready, this load uses the fallback and never swaps, so the page is typeset once either
   way. The preloads in index.html start the fetch early enough that "not ready" is rare —
   these are same-origin files, not a round trip to somebody else's CDN — and after the
   first visit they are cached. The cost is that a genuinely slow first load gets the
   fallback for that load, which the stacks below are chosen to survive. */

@font-face {
  font-family: "XCharter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/XCharter-Roman.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "XCharter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/XCharter-Bold.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "XCharter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/XCharter-Italic.woff2") format("woff2");
  font-display: optional;
}

/* Instrument Sans is variable — one file covers 400 through 700. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  src: url("../fonts/InstrumentSans.woff2") format("woff2");
  font-display: optional;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  src: url("../fonts/InstrumentSans-Italic.woff2") format("woff2");
  font-display: optional;
}

/* ---------- Tokens ---------- */

:root {
  /* CHROME — a satin-silver top plate with black engraving. The light half of the camera
     body's two finishes, and since 24.08.2026 the whole site's, not the landing page's alone.

     What it replaced was warm paper and ink with an amber safelight, which the handbook wore
     from the start and the landing page left on 23.08.2026. Taking the finishes site-wide was
     recorded as the owner's open question that whole time ("for now"); it was decided on
     24.08.2026, together with what happens to the amber — see --fault. */
  --paper: #cfcdc7;
  --ink: #1d1b17;
  --ink-2: #3a372f;
  --muted: #575349;
  --rule: #a8a49b;

  /* The working colour IS the ink. There is no hue to change to, so what you act on is a fill
     in the other finish's material and a link is a link by the rule under it — heavier under a
     pointer. This was .landing's rule and is now everyone's. */
  --accent: #1d1b17;

  /* The safelight, and the ONE job it kept (owner's call, 24.08.2026). It used to mark two
     things — what you act on, and what is wrong — and links took the first half. Under a
     monochrome site the first half has nowhere to go, so the amber narrowed to the second and
     got a name that says so. It marks a fault and nothing else: §4's major notice, and the
     rows Fig. 6's ladder raises a warning about. It is not a tint, it is not a link, and it is
     not available for emphasis. Two places on the whole site, and if a third appears the
     question to ask is whether it is really wrong or merely important.

     **Re-tinted for the chrome ground, and it had to be.** The safelight was #9d4715, chosen
     against warm paper (#f7f4ef) where it measured comfortably. The chrome plate is a much
     darker ground, and the same amber lands at **3.95:1** on it — under the 4.5 it owes, on
     0.76rem verdict lines and a 0.78rem notice label, which is the smallest type it sets
     anywhere. Darkened at the same hue with the saturation pushed up to keep the safelight
     reading rather than sliding into brown: **5.20:1 on the paper, 4.60:1 on --band**.

     Not for --field, where it measures 3.99 — the same discipline --muted has always been held
     to, and for the same reason. A fault on a filled head has no legitimate use anyway; if one
     is ever wanted, re-measure rather than assume. The dark half needed nothing: #dd9053 on the
     black paint is 6.91:1. */
  --fault: #8b3104;

  /* Grounds, and the second rule weight. --band stripes and quietly fills; --field is the
     strongest tone on the site — a table head, a notice label, a column head. Text on
     --field is set in --ink-2 or --ink, never --muted, and that rule survived the palette
     change: measured on the chrome field (#b7b4ab), --ink-2 is 5.4:1 and --muted would not
     clear the 4.5 it owes. --rule-2 closes a block and underlines a head where --rule only
     separates rows. */
  --band: #c4c1ba;
  --field: #b7b4ab;
  --rule-2: #8a857b;

  --serif: "XCharter", ui-serif, "Charter", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --measure: 34rem;
  --pad: clamp(1.5rem, 5vw, 4rem);

  /* The space inside a block of the landing page, in one place. */
  --stack: 1.5rem;

  /* Half the separation between the two ledger columns: the pitch pads one of these to the
     left of the hairline and the proof pads the other to its right, so the rule sits
     centred in the channel rather than hard against the text. */
  --gutter: clamp(1.75rem, 3vw, 2.5rem);

}

/* BLACK PAINT — silver engraving on matte, neutral black. A re-tint rather than an inversion,
   and measured against its own ground: ink 13.4:1, ink-2 9.0:1, muted 5.2:1. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191817;
    --ink: #e2e0db;
    --ink-2: #bdbab3;
    --muted: #8f8b83;
    --rule: #3c3936;
    --accent: #e2e0db;
    --fault: #dd9053;
    --band: #201f1d;
    --field: #282624;
    --rule-2: #524e49;

  }
}

/* The finishes used to live here, scoped to body.landing, while the handbook kept the warm
   paper above. They are :root's now (24.08.2026) and this block is gone rather than emptied —
   there is one palette on this site again, which is the state the two-worlds split was always
   described as a temporary departure from. What was `.landing`-scoped and stayed `.landing`-
   scoped is the LAYOUT: the spine, the ledger, the plates. A palette is shared ground; a
   composition is not. */

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  /* svh, not vh: on a phone vh is the viewport with the browser chrome retracted, so a
     page sized to it is taller than what you can actually see. The landing page scrolls
     now, but its footer still belongs on the bottom edge of a window taller than the
     content — same two rows, the 1fr taking the slack. */
  min-height: 100svh;
  margin: 0;
  padding: var(--pad);

  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: clamp(2rem, 6vh, 3.5rem);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* Monochrome link states, site-wide since 24.08.2026. The word has no hue to change to, so
   interaction lives in the RULE under it — heavier under a pointer. This was .landing's own
   rule while the handbook still painted links amber; taking the finishes site-wide took the
   amber off links with them, so the two pages answer a cursor the same way now. */
a:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The last browser surface on these pages still wearing a default. The focus ring, the
   underline offset and the colour-scheme already come from the palette; a selection drawn in
   the OS blue was the one place a stray colour got in.

   **The `color` is not optional**, which is what the first version of this rule got wrong. It
   set only the background, on the reasoning that leaving the colour alone let each piece of
   text keep its own contrast. But contrast is against the ground, and the ground is the one
   thing a selection changes. Measured on the 22% wash: --ink held at 11.80:1, but --muted fell
   to 3.39 in light and 3.87 in dark — under the 4.5 it owes, and --muted is what sets the
   footer, the figure captions, the dateline and the provenance note, which is most of what
   anyone would drag a cursor across. Pinning selected text to --ink puts all three back over
   10:1. The muted-to-ink distinction goes while a selection is up, which is what a selection
   is for.

   Both declarations sit behind @supports together, so a browser without color-mix() keeps its
   own selection pair intact rather than getting our ink on its blue — which would be the same
   mismatch again, in the one place we could not measure. */
@supports (background: color-mix(in srgb, red 22%, transparent)) {
  ::selection {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--ink);
  }
}

/* Present to a screen reader, absent to everything else. The wordmark needs this because
   its 'a' is a graphic, and "met lign" is not the name of anything. */
.reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Wordmark ---------- */

.wordmark {
  margin: 0;
  font-size: clamp(2.75rem, 13vw, 5rem);
  font-weight: 400;
}

/* The lockup is one drawing, not text with a graphic set into it. It used to be live
   'met' + 'lign' in XCharter Bold with the mark between them, which meant the logo was only
   correct where the font had loaded and the mark was sized in ex — so a fallback resized it
   against a different x-height. The design project now exports the same lockup with the
   letters converted to outlines (its 'Wordmark files' sheet; regenerated there by
   tools/build-wordmarks.html), and that is what this is: no font, no measuring, identical
   on every machine.

   Inlined rather than linked, so it takes currentColor — one file for both themes and for
   print, where the exported SVGs' flat #191714 would need a reversed twin kept in step.

   The two numbers come from the sheet and are the drawing's own: it is cropped to the ink at
   4.016 x 0.956em, with the baseline 0.217em above the bottom edge. Both are given in em of
   .wordmark's font-size, so the lockup tracks the clamp exactly as the type did.

   That 0.217em push is what puts the drawing's baseline on the line box's — bottom-aligned,
   the descender of the 'g' would sit on the baseline instead of hanging below it. It is a
   relative offset, so the line box is still the strut's, which is what the -0.4em below is
   measured against. */
.lockup {
  display: inline-block;
  width: 4.016em;
  height: 0.956em;
  position: relative;
  top: 0.217em;
}

/* The name and how to say it are one unit: no gap at all, because the transcription is
   not set below the wordmark but inside it — in the empty quarter under 'metali' that the
   descender of the 'g' opens up. */
.name {
  display: grid;
  gap: 0;
}

/* What closes that gap. The wordmark's line box carries 0.45em of leading below its
   baseline — line-height 1.62 against the strut — and taking almost all of it back drops
   the transcription into the descender's depth. Measured, not picked: at -0.40em the
   transcription's baseline lands on the point the 'g' reaches down to, so the two sit on
   one line. In em, so it tracks the wordmark at every size the clamp gives it. */
.wordmark { margin-bottom: -0.4em; }

/* Neither self-hosted font carries IPA — ɛ, ə, ɪ and the two stress marks are absent from
   both XCharter and Instrument Sans, so those five characters come from a system fallback
   whatever we set here. Given that, the transcription is set in the mono stack, where a
   fallback is expected and the mixed shapes read as notation rather than as a hole in the
   typography. It is also the narrowest way to set it, which is what fits the notch. */
.pronunciation {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* ---------- The landing page ----------
   Everything below is .landing-scoped: the handbook shares the tokens and the base above,
   never this layout. The composition is one spine — at 62rem the hero splits into the
   claim and the proof, and the ledger below splits into the roll's two moments, both on
   the same 1fr / 1.1fr tracks, so the hairline runs down the page in one line. */

.landing main {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  align-self: center;
  display: grid;
  gap: clamp(2.75rem, 7vh, 4.25rem);
}

/* ---------- Hero ---------- */

.landing .hero {
  display: grid;
  gap: var(--stack);
  align-items: start;
}

.landing .pitch {
  display: grid;
  gap: var(--stack);
  align-content: start;
}

.landing .tagline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 4.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.008em;

  /* Evens the two lines instead of leaving "carried." stranded alone on the second. This
     is the largest line of prose on the page, so a bad break shows. A browser that does
     not know the property just wraps normally, which is what it did before. */
  text-wrap: balance;
}

.landing .lede {
  color: var(--ink-2);
  font-size: 1.05rem;
  /* Same idea, but for a paragraph: keeps a single word off the last line. */
  text-wrap: pretty;
}

/* THE COMING-SOON STRIP, in place of the App Store badge until there is a store page to
   send anyone to. Adopted from the design project's `Film Strip Button.html` (owner's call,
   25.08.2026), cut A of the three it offers — "punched", where the perforations are cut out
   of the element and the ground shows through, so the strip really is a strip and changes
   with the page. B is opaque, for grounds we do not control; C adds the rails between the
   perforation strips and the image area, which the sheet calls one detail too many at 52px.

   THE SHEET DID NOT RECOMMEND ADOPTING ANY OF IT — "Nothing here is adopted", and its closing
   note states the objection plainly: the strip introduces a hue to a page whose argument was
   that it has none. What was adopted is the FORM, not the colour; the objection was upheld and
   the hue left behind. See the note on colour below.

   IT IS NOT A LINK AND NOT A BUTTON. There is nothing to link to, so it is a <span>, with no
   hover, no focus ring and no pointer affordance — the design sheet's own copy is an <a>
   because it was drawn as a store link. Making this one interactive would promise a
   destination that does not exist. The page's only action is now "Read the handbook" beside
   it, which is the honest state of a pre-launch page.

   THE GEOMETRY IS FIXED AT 210 x 52 AND MUST NOT BE SCALED. The perforation is the real
   KS-1870 35 mm perf reduced so that a 35 mm film width becomes 52px: hole 4.2 x 3.1 at r 0.7,
   pitch 7, edge margin 2.2. The leader is a drawn path measured off a photograph. At any other
   size the perf geometry stops being the perf geometry, so the mask, the wordmark offset and
   the edge line are all absolute pixels rather than em.

   THE COLOUR IS THE SITE'S, NOT THE SHEET'S. The strip wears what the filled button wore
   before Apple's badge replaced it: `--accent` for the body, `--paper` for the engraving.
   Since the monochrome move of 24.08.2026 `--accent` IS the ink, so that one pair gives the
   control the other finish's material in both themes with nothing to override — black paint
   engraved in chrome on the light plate, chrome engraved in black on the dark one. It is the
   same trick the original button's comment described (the dark theme's --paper is the dark
   ink, which is why one pair works both ways), and it is why there is no media query below.

   THE WORDMARK IS THE PAGE'S OWN INLINE COPY with the fill overridden, NOT a second file. The
   design sheet links icon/metalign-wordmark-serif-reversed.svg, which is the same drawing with
   fill="#f7f4ef" baked in; this repo already carries that geometry inline in the <h1>, and
   adding the reversed file would be one more hand-copied hop down the brand chain — for a
   colour a fill attribute gives us, in a value that would have been wrong here anyway. */
.landing .filmstrip {
  position: relative;
  display: block;
  width: 210px;
  height: 52px;
}

.landing .filmstrip .stock {
  position: absolute;
  inset: 0;
  display: block;
}

.landing .filmstrip .stock rect {
  fill: var(--accent);
}

/* 17px tall at 16px in from the left edge, on the design sheet's numbers. The width is stated
   rather than left auto: an inline SVG with a viewBox and only one dimension set does not size
   the way an <img> does. 71.42 is 17 x the lockup's own 4016.16:956. */
.landing .filmstrip .mark {
  position: absolute;
  left: 16px;
  top: 9px;
  display: block;

  /* Stated, not inherited. The paths are lifted from the <h1> lockup, where they carry no
     fill of their own and take currentColor from the heading; pasted in here with nothing
     set they fall back to black, which on the light plate is black type on a black body. */
  fill: var(--paper);
}

/* The edge line, set on the film itself the way a stock's own markings are. textLength spreads
   it across 182 — the image area's full width — so it runs out along the leader and stops just
   short of the tongue. That spacing is the form, not a flourish: it is what edge printing
   looks like, and it is why the line is two words rather than a sentence. overflow: visible
   because lengthAdjust can push the last glyph a hair past the viewBox. */
.landing .filmstrip .edge {
  position: absolute;
  left: 16px;
  top: 29px;
  display: block;
  overflow: visible;
}

.landing .filmstrip .edge text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.08px;
  fill: var(--paper);
}

.landing .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
}

/* The second door, kept a link on purpose: two buttons would promise two downloads. */
.landing .alt-action {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration-thickness: 1px;
}

.landing .meta {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- The proof ----------
   One scan's fields, before and after — the identity-block form: a bounded ruled field,
   label column on the strongest ground, values on paper, rows separated by hairlines. */

.landing .proof {
  margin: 0;
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.landing .proof-file {
  font-size: 0.85rem;
  color: var(--muted);
  text-wrap: pretty;
}

.landing .proof-file code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ink-2);
}

.landing .proof table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--rule-2);
  border-radius: 0.3rem;
  overflow: hidden;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.landing .proof th,
.landing .proof td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  vertical-align: top;
}

/* Not uppercased, unlike every other filled head on either page: this one names the
   product, and metalign is lowercase always — including when a text-transform would do
   it. The same exemption the handbook's comparison matrix carries, and as there, the
   caps' letterspacing goes with them. */
.landing .proof thead th {
  background: var(--field);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  border-bottom: 2px solid var(--rule-2);
}

.landing .proof tbody th {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
}

.landing .proof tbody tr + tr th,
.landing .proof tbody tr + tr td {
  border-top: 1px solid var(--rule);
}

/* Absence is a value: the delivered column holds a dash, not an empty cell, and the muted
   ink is the point — 4.69:1 on paper, and nothing lower anywhere. */
.landing .proof td.blank { color: var(--muted); }
.landing .proof td:last-child { color: var(--ink); }

/* ---------- The ledger ----------
   One bounded field, two sides, four steps. The sides are not two cards: they are the two
   columns of one comparison, so they share the frame and, once there is room, a single
   dividing hairline — the same spine the hero splits on. */

/* Two objects, not one. Sharing a frame with a hairline between them read as a table with
   two columns; each side is its own bounded field now, and the space between them is real
   rather than a rule. What holds the pair together is that their rows still line up (the
   subgrid below), so it reads as one comparison made of two things. */
.landing .ledger {
  display: grid;
  gap: var(--stack);
}

.landing .side {
  border: 1px solid var(--rule-2);
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--paper);
}

/* A column head, in the voice a filled head speaks on both pages: uppercase label on the
   strongest ground, closed with the heavier rule. */
.landing .ledger h2 {
  margin: 0;
  background: var(--field);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  border-bottom: 2px solid var(--rule-2);
}

.landing .act {
  padding: 1.4rem 1.15rem 1.7rem;
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.landing .act + .act { border-top: 1px solid var(--rule); }

.landing .act h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.008em;
}

/* The step's coordinate. Four steps are a sequence — load, log, check, write is the order
   a roll actually lives — so the numbers carry information, set in the apparatus voice
   rather than as display type. */
.landing .act .no {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 0.7em;
  position: relative;
  top: -0.12em;
}

/* Direct child on purpose: the figcaption below now holds a paragraph of its own, and a
   descendant selector would set the caption in body ink at body size. */
.landing .act > p {
  font-size: 1rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* A control's name on screen is the italic serif, exactly as the handbook sets it. */
.landing .ui {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.04em;
}

/* ---------- Plates ----------
   Each step's capture, sized by height — a framed phone is about 0.49 as wide as it is
   tall, so given the full column it would stand four screens high. That leaves a column
   nearly twice as wide as the plate standing in it, and the phone is the thing being
   shown: the figure takes the whole column and the plate is CENTRED in it (owner's call,
   24.08.2026). It was flush left, hard against the text edge, with all of the slack
   opening to its right — 93px of it on the wider return side.

   The caption block below keeps the text edge and a 24rem measure of its own, so the
   foot-rule still closes a plate in a catalogue — image, rule, caption — rather than
   running the column's full width now that the figure does. */

.landing .act figure {
  margin: 0.3rem 0 0;
  max-width: 100%;
  display: grid;
  /* The plate row keeps its own height. The act is stretched to its band by the subgrid, so
     the figure inherits slack whenever the step opposite runs longer, and auto rows share
     that slack out by default — which pushed the shorter side's foot-rule 9 to 22px below
     its opposite number, after all the work above to line the plates up. Slack collects at
     the foot of the figure now, where nothing is drawn. */
  align-content: start;
}

/* No border, no radius and no ground. The plate used to be a bare screenshot and needed
   all three to read as an object; it carries an Apple device bezel now, which is the
   object. A border draws a second rectangle around a frame that already has rounded
   corners, and a background fills the transparent corners outside them — the same
   rectangle again, in --band. The bezel supplies its own edge. */
.landing .act img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 26rem;
  aspect-ratio: 45 / 92;

  /* All three only ever apply to a plate that FAILED to load: a rendered image is a
     replaced element and ignores them. They are what turns the reserved box from a silent
     rectangle into the description that was written for it. */
  line-height: 1.45;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------- The plate's callouts ----------
   The plates were recordings once, and a recording showed a sequence by moving. A still
   cannot, so the numbers do it instead: a pin on the control, and a numbered line under
   the caption saying what it is. The <ol> carries the meaning and the pins are
   aria-hidden — a screen reader gets an ordered list of the same sentences, in order,
   with no coordinates to make sense of.

   No JavaScript, no hover. This page has no script at all now, and a tooltip would hide
   the text from a phone, from find-in-page and from a printer — the same argument that
   took the carousel out of the handbook. */

/* No line-height: 0 here, and that is the fix rather than an omission. It was set to kill
   the inline baseline gap under the image — which `display: block` on the image below
   already does, so it was belt and braces. What it also did was collapse the leading of the
   ALT TEXT, and the alt text is this page's entire fallback when a plate does not load: the
   box stayed reserved at 203x416 and rendered every line of a sixty-word description on top
   of itself, which reads as an empty rectangle. A missing plate now says what it was.

   fit-content and the auto margins are what centre it in the figure: a box stretched to
   the column has no slack left to share, so the plate has to be its own width first. */
.landing .plate {
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

/* --x and --y are set per pin in the markup. They are computed from the bezel's screen
   aperture, never read off a grid, and the clearance under each one is measured rather than
   judged -- tools/pin-clearance.py, and DESIGN.md § Callout Pins for why both. */
.landing .pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.76rem;   /* xs, the ramp's smallest step */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* The ring is the page's ground, so the pin reads against a screenshot of any tone
     without needing to know what is under it. */
  box-shadow: 0 0 0 2px var(--paper);
}

/* The pins invert with the page because --accent and --paper do: black on the chrome
   finish, silver on the black paint. Nothing here needs a second theme block. */

/* Forced colours (Windows High Contrast) throw away box-shadow and override every
   background and text colour with a system pair — but they leave IMAGES alone. So a pin
   loses the paper ring that is the only reason it reads against a screenshot of any tone,
   and lands as a system-coloured disc on an untouched screenshot. A border survives
   forced colours and is forced to a matching system colour, so the pin keeps an edge. */
@media (forced-colors: active) {
  .landing .pin,
  .landing .legend li::before {
    border: 1px solid CanvasText;
  }
}

.landing .legend {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pin;
  display: grid;
  gap: 0.3rem;
  max-width: 24rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

/* The disc hangs; the line is ordinary inline text. This was a two-column grid, which
   breaks on the one item that contains an element: a <span> inside a grid container is a
   grid ITEM, so `<span class="ui">Metered at</span> — the speed you rate the roll at.` put
   the span in the text track and dropped the sentence after it back into the 1.15rem
   number track, one word per line and 332px tall. Absolute positioning leaves the li's own
   content inline, where a legend line's mixed type belongs. */
.landing .legend li {
  counter-increment: pin;
  position: relative;
  padding-left: 1.65rem;   /* the disc, plus the 0.5rem the grid used to gap by */
}

/* The same disc as the pin, at the same size, so the two read as one system. */
.landing .legend li::before {
  content: counter(pin);
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-size: 0.76rem;   /* xs, the ramp's smallest step */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 0.12em;
}

/* The plate's foot. The legend sits inside this element rather than beside it: a <figure>
   takes flow content followed by one caption, or a caption followed by flow content, and
   plate/caption/legend wedged the caption between two siblings. Nesting keeps the markup
   valid and leaves DOM order, reading order and visual order the same three things. */
.landing .act figcaption {
  /* The figure fills the column now, so the caption states the measure the plate's width
     used to give it — the same 24rem the legend already caps at, and what the foot-rule is
     drawn across. */
  max-width: 24rem;
  margin-top: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- The close ---------- */

/* Capped, because this is the one prose block on the page with nothing holding it in.
   Everything else is inside a column: the lede sits in the hero's 1fr at ~40ch, the act
   paragraphs at ~40ch, the footer at its own 58ch. The close is a direct child of main, so
   above 62rem it took the whole 64rem spine — 92 characters, against a 40-character lede
   three blocks above it, and DESIGN.md's own "don't widen the prose measure to fill a
   monitor". It also meant the close was 34rem in one column and 64rem in two, changing
   width at a breakpoint nothing else changes at.

   34rem is the measure the page uses when it has one column, so the close now reads the
   same at every width. Same move the footer already makes one rule down, for the same
   reason. */
.landing .close {
  max-width: 34rem;
  font-size: 1.05rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- Footer ---------- */

footer {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  align-self: end;
  display: grid;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

footer p { max-width: 58ch; }

/* ---------- The spine, once there is room ----------
   Below this width the page is one column and the measure keeps the prose readable. Above
   it, the hero and the ledger open onto the same two tracks — 1fr for the shutter side,
   1.1fr for the return side, because the return side's prose runs longer — with no column
   gap: the split is drawn once, as a border on the right-hand track, padded half a channel
   each side, so the hero's divider and the ledger's divider sit on one vertical line. */

/* ---------- The coda ----------
   Step 2 continued, for the case step 2 only has a sentence for: the phone in a pocket.
   It is NOT a third moment — everything in it happens at the shutter — so it borrows the
   ledger's own vocabulary rather than inventing a form. Same bounded field, same filled
   head, same rule weights. What it does not borrow is the spine: one object, not two, so
   there is nothing to divide.

   It exists outside the ledger because the ledger has no room. `.act` spans exactly three
   subgrid rows and every step owns one plate; a fifth plate has nowhere to go up there. */
.landing .coda {
  border: 1px solid var(--rule-2);
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--paper);
  margin-top: var(--stack);
}

/* The ledger's column head, said again — uppercase label on the strongest ground, closed
   with the heavier rule. Repeating it is the point: it is what makes this read as another
   field of the same document rather than as a section that arrived from somewhere else. */
.landing .coda > h2 {
  margin: 0;
  background: var(--field);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  border-bottom: 2px solid var(--rule-2);
}

/* ONE COLUMN AT EVERY WIDTH, and this is the only band on the page that is (owner's call,
   26.08.2026). It opened onto the hero's and the ledger's two tracks until the third plate
   landed: three devices will not stand in the 1.1fr return track — 172 + 153 + 153 plus
   gutters against 496px — and shrinking them until they do puts a 416pt watch interface
   into 140px, so the plate row took the whole band. That left the prose stopping on the
   ledger's vertical line above a row that does not, which reads as an indent rather than as
   a measure. Both take the band now, and there is nothing left for a two-track grid here to
   do.

   What still holds this band to the page above it is its LEFT edge, which did not move: the
   prose, the plates and every column head above them start on one line.

   THE PROSE IS WRITTEN FOR THE WIDTH. At 64rem a line here runs about 120 characters, which
   is past what a measure should be — so the copy is three short paragraphs rather than one
   block, and no reader crosses that width more than three times before a break. Anything
   long enough to need a measure belongs in the handbook, not in the coda. */
.landing .coda-body {
  padding: 1.4rem 1.15rem 1.7rem;
  display: grid;
  gap: 1.2rem;
}

.landing .coda-body > p {
  font-size: 1rem;
  color: var(--ink-2);
  text-wrap: pretty;
  margin: 0;
}

/* The three plates share a baseline rather than a box: they are different objects at
   different sizes, and standing them on one line is what says so. */
.landing .coda-plates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1.4rem 1.5rem;
}

/* The CAPTION is what sets this width, not the plate: a phone plate is 172px and a watch
   153px, and a caption held to its own measure made each figure 240px — two of which no
   longer fit the return track the row used to hang in, so they wrapped and the pair stopped
   being a pair. Capping the figure and letting the caption fill it is what keeps all three
   on one line down to the breakpoint. */
.landing .coda-plate {
  margin: 0;
  max-width: 13rem;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

/* Same voice as the ledger's captions, one measure narrower because there is no legend
   under it to hold the column open. */
.landing .coda-plate figcaption {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 100%;
  text-align: center;
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
}

/* TWO DEVICES, TWO ASPECTS, AND THE HEIGHTS ARE NOT TO SCALE — deliberately. A 46mm watch
   beside a 150mm phone, at true relative size, puts a 416pt interface into about 60px and
   nothing on it can be read. The watch is drawn at roughly two thirds the phone's height
   instead, which is the same compromise Apple's own marketing makes, and it survives
   because watch type is physically larger relative to its screen: at 0.33x the watch reads
   about as well as the phone does at 0.45x.

   aspect-ratio is stated per device so a plate that fails to load still reserves the right
   box for its alt text — 45/92 is the phone's 540x1104, 7/11 the watch's 560x880. */
.landing .coda .plate img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  line-height: 1.45;
  font-size: 0.82rem;
  color: var(--muted);
}

.landing .coda .plate-phone img {
  max-height: 22rem;
  aspect-ratio: 45 / 92;
}

.landing .coda .plate-watch img {
  max-height: 15rem;
  aspect-ratio: 7 / 11;
}

/* ---------- The comparison ----------
   The coda's form, one band further down: a bounded field with the ledger's filled head,
   holding the one table on the page that looks sideways rather than before-and-after. The
   left column is deliberately unnamed — the section's markup comment carries the
   reasoning — so it can only describe the field's usual shape, and it does so in the
   muted ink the proof table gives to absence; metalign answers in ink, across a hairline
   that is the page's spine drawn a third time. */
.landing .compare {
  border: 1px solid var(--rule-2);
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--paper);
}

/* The ledger's column head, said once more — same ground, same rule below it — but not
   uppercased: this head names the product, and metalign is lowercase always. The proof
   table's exemption, and as there, the caps' letterspacing goes with them. */
.landing .compare > h2 {
  margin: 0;
  background: var(--field);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.6rem 1.15rem;
  border-bottom: 2px solid var(--rule-2);
}

.landing .compare-body {
  padding: 1.4rem 1.15rem 1.7rem;
  display: grid;
  gap: 1.2rem;
}

.landing .compare-body > p {
  font-size: 1rem;
  color: var(--ink-2);
  text-wrap: pretty;
  margin: 0;
}

.landing .compare table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.94rem;
  line-height: 1.5;
}

.landing .compare th,
.landing .compare td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem 0.7rem 0;
}

/* Unlike every other filled head on the page, not uppercased: the third head names the
   product, and metalign is lowercase always. The proof table's exemption, again. */
.landing .compare thead th {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 2px solid var(--rule-2);
  padding-top: 0;
}

.landing .compare tbody th {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
  width: 8.5rem;
}

.landing .compare tbody tr + tr th,
.landing .compare tbody tr + tr td {
  border-top: 1px solid var(--rule);
}

/* The proof table's grammar, borrowed whole: what the field usually offers is set in the
   muted ink that table gives to absence — 4.69:1 on paper, the site's floor — and what
   metalign does is the answer, in ink. */
.landing .compare td.usual {
  color: var(--muted);
  width: 38%;
}

/* The spine, a third time: the hero and the ledger split on this hairline, and here it
   stands between the field's usual shape and metalign's. */
.landing .compare .metalign {
  border-left: 1px solid var(--rule);
  padding-left: 0.9rem;
  color: var(--ink);
}

/* Below the page's one-column measure, each row becomes a small block — the handbook's
   own move for its tables, at the same width, for the same reason: a table that only
   scrolls sideways on a phone reads as a broken page, and the body must never scroll
   sideways to rescue it. The data-labels in the markup are the header row's replacement,
   not decoration — a cell in a multi-column table that loses its header row becomes an
   unlabelled value. */
@media (max-width: 34rem) {
  .landing .compare table,
  .landing .compare tbody,
  .landing .compare tr,
  .landing .compare th,
  .landing .compare td {
    display: block;
    width: auto;
  }

  .landing .compare thead { display: none; }

  .landing .compare tbody tr { padding: 0.85rem 0; }
  .landing .compare tbody tr:first-child { padding-top: 0; }
  .landing .compare tbody tr + tr { border-top: 1px solid var(--rule); }

  .landing .compare th,
  .landing .compare td {
    padding: 0;
    border: 0;
  }

  /* Said again at the specificity the wide rules carry, or the wide rules win: the row
     hairlines belong to the row down here, and the two column widths to nothing. */
  .landing .compare tbody tr + tr th,
  .landing .compare tbody tr + tr td { border-top: 0; }
  .landing .compare tbody th { width: auto; }
  .landing .compare td.usual { width: auto; }

  .landing .compare .metalign {
    border-left: 0;
    padding-left: 0;
  }

  .landing .compare tbody th { margin-bottom: 0.35rem; }
  .landing .compare td + td { margin-top: 0.55rem; }

  /* The column's name, said before its value — without the filled heads' uppercase,
     because one of the two names the product. */
  .landing .compare td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    margin-bottom: 0.15rem;
  }
}

@media (min-width: 62rem) {
  .landing { --measure: 64rem; }

  .landing .hero {
    grid-template-columns: 1fr 1.1fr;
    column-gap: 0;
  }

  .landing .pitch { padding-right: var(--gutter); }

  .landing .proof {
    border-left: 1px solid var(--rule);
    padding-left: var(--gutter);
  }

  /* Capped below the 5rem it reaches in one column. In a two-column composition the mark
     no longer has to carry the page by itself. */
  .landing .wordmark { font-size: clamp(2.75rem, 13vw, 4.5rem); }

  /* Two changes here, and they answer the same complaint. The steps are a sequence down
     each side — load then log, check then write — not four cells of a table, and the
     ledger was inviting the wrong reading in two ways at once.

     First, the rows now line up. Each side is a subgrid of the ledger's own three rows —
     the column head, then one row per step — so step 1 and step 3 share a baseline and
     their closing rules meet across the spine. Before this each side flowed at its own
     height and the two dividers sat 26px apart, which reads as a misprint rather than as
     two independent columns.

     Second, the text is pushed off the spine. The hero already pads half a channel each
     side of its divider; the ledger did not, so its two columns of prose ran up to the
     hairline with 1.15rem between them and the eye carried straight across it. Same
     --gutter, same reasoning, and the aligned rows above are what make the space read as
     a channel rather than as a gap. */
  .landing .ledger {
    grid-template-columns: 1fr 1.1fr;
    grid-template-rows: repeat(7, auto);
  }

  .landing .side {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 7;
    align-content: start;
  }

  /* Seven rows, not three, because the alignment has to reach one level further in
     (owner's call, 24.08.2026): the head, then THREE rows per step — heading, prose,
     plate. Each act subgrids the three it spans, so the pair of steps sharing a band share
     a prose row, and a paragraph that runs a line longer on one side pushes both plates
     down together. Aligning the acts alone was not enough: their headings met, their
     paragraphs then ran 4 lines against 5, and the two plates sat 25px apart — near enough
     to read as a misregistration rather than as a decision.

     The 1.5rem channel between head and step stays a channel, and a step's own three rows
     stay 0.85rem apart, because a subgrid takes the parent's gutter only until it states
     one of its own — .act already does, above. Nothing to restate here, but it is the
     reason these rows don't all open to 1.5rem. */
  .landing .act {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }

  /* The channel between the two frames. It was half a --gutter of padding either side of a
     shared hairline; it is now the gap between two objects, so the whole --gutter sits
     between them and neither side needs to pad itself off a rule that is no longer there. */
  .landing .ledger { column-gap: var(--gutter); }

  /* The credits pick up the same two tracks, so the bottom of the page is ruled off and
     measured against the same grid as the top instead of trailing after it. */
  .landing footer {
    grid-template-columns: 1fr 1.1fr;
    column-gap: var(--gutter);
    border-top: 1px solid var(--rule);
    padding-top: 1.1rem;
  }
}

/* ---------- The legal pages ----------
   Impressum and Datenschutzerklärung. Deliberately the plainest thing on the site: no
   finishes, no ledger, no datasheet apparatus — they inherit :root's warm paper and get
   headings, a measure and a contact block, and nothing else.

   That is not laziness. § 5 DDG wants the information *leicht erkennbar*, and every bit of
   styling between a reader and an address is working against that. The one thing they do
   share with the other two pages is the wordmark, so a reader can see whose Impressum this
   is without scrolling.

   Scoped to .legal for the same reason .landing is scoped: a rule here must not reach the
   other pages. Everything above this — palette, fonts, wordmark, footer, .reader-only —
   is shared and is where the brand actually lives. */

.legal main,
.legal .masthead {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

.legal .masthead { margin-bottom: 2.5rem; }

.legal .home {
  display: inline-block;
  text-decoration: none;
}

/* The same size the handbook's masthead sets, and for the same reason: here the mark is a
   way back to the site, not the thing carrying the screen. The -0.4em that drops the
   pronunciation into the descender of the 'g' has nothing to sit under here either. */
.legal .wordmark {
  font-size: clamp(1.6rem, 5.5vw, 2rem);
  margin: 0;
}

.legal h1 {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* The English title under the German one. The German is authoritative; this says so
   without a footnote. */
.legal .alt-title {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.legal h2 {
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
}

.legal h3 {
  margin: 1.5rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* German compounds are unbounded and these two pages are German. Measured at 320px:
   "Umsatzsteuer-Identifikationsnummer" is 264px against 272px of measure — eight pixels of
   headroom, and impressum.html's own comment says that section comes back the moment the
   BZSt issues a number. overflow-wrap alone would break it mid-syllable; the pages carry
   lang="de", so hyphens: auto breaks it where German breaks, and the wrap is the backstop
   for anything a hyphenation dictionary does not know (a URL, an address, a long email). */
.legal p,
.legal li,
.legal .entity,
.legal h1,
.legal h2 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal p { margin: 0 0 0.9rem; }
.legal p:last-child { margin-bottom: 0; }

.legal ul {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
}

.legal li { margin-bottom: 0.3rem; }

/* The address block. A <p> with <br>s rather than a table, because it is one datum — an
   address — and a screen reader should read it as one. */
.legal .entity {
  margin: 0 0 1.2rem;
  padding: 1rem 1.15rem;
  background: var(--band);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  line-height: 1.55;
}

/* Anything still carrying a bracketed placeholder. Marked in the page so an unfinished
   Impressum cannot be mistaken for a finished one at a glance — see the go-live comment
   at the top of impressum.html. */
/* --fault, not --accent: a value still in brackets on a page § 5 DDG requires is the closest
   thing this site has to something being wrong, which is exactly the job the amber kept when
   the finishes went site-wide. It was --accent when --accent still meant both. */
.legal .todo {
  padding: 0 0.3em;
  background: var(--field);
  border-bottom: 2px solid var(--fault);
  font-family: var(--mono);
  font-size: 0.86em;
  white-space: nowrap;
}

.legal .updated {
  margin-top: 2.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- Print ----------
   A page in this world gets printed — the sibling datasheet treats print as load-bearing,
   and this one is sent to people. Ink on white, the recordings reduced to their poster
   frames, and the one filled control drawn as a ruled box, since a printed fill is a
   puddle of toner and the URL beside it is what a reader actually keeps. */

@media print {
  /* An Impressum gets printed and filed more than it gets read on screen.

     The literal #fff/#000 here and in .landing below are print's whole point: the screen
     palette is what print is leaving. Both are recorded exceptions in
     .impeccable/config.json rather than palette drift — on screen they would still be. */
  .legal {
    --paper: #fff;
    --ink: #000;
    --ink-2: #000;
    --muted: #444;
    --rule: #bbb;
    --band: #fff;
    --field: #eee;
    --accent: #000;
    --fault: #000;
  }

  body.legal {
    min-height: 0;
    display: block;
    padding: 0.5in 0;
  }

  .legal h2 { break-after: avoid; }
  .legal .entity { break-inside: avoid; }

  .landing {
    --paper: #fff;
    --ink: #000;
    --ink-2: #000;
    --muted: #444;
    --rule: #bbb;
    --rule-2: #888;
    --band: #fff;
    --field: #eee;
    --accent: #000;
    --fault: #000;
  }

  body.landing {
    min-height: 0;
    display: block;
    padding: 0.5in 0;
  }

  .landing .hero,
  .landing .proof,
  .landing .act,
  .landing .close { break-inside: avoid; }

  .landing .act h3,
  .landing .ledger h2 { break-after: avoid; }

  .landing .compare tr { break-inside: avoid; }
  .landing .compare > h2 { break-after: avoid; }

  /* No ruled box drawn round it any more — the badge is artwork and prints as itself, and
     the light source is what a printer resolves, so it is the black cut on white paper.

     Back to inline flow for one reason: the ::after below prints the URL, and on the
     screen's inline-flex control that pseudo-element becomes a flex ITEM — laid out beside
     the artwork and inheriting line-height: 0, which is a collapsed line of type sitting
     on the badge. Inline puts the address back after it, where a reader can copy it. */
  /* The strip prints as the engraving it is: black body, white wordmark and edge line, which
     is what it already is on the light plate. Its perforations let the paper through, so it
     needs no print-only fill of its own.

     What used to stand here was the badge's print block and a rule printing the addresses of
     the two links that left this site. Neither link leaves it now — the hero's action and the
     close both point at handbook.html — so printing "(handbook.html)" after them would be
     noise on a page whose other internal links print nothing. Both rules come back with the
     badge. */
  .landing .filmstrip .stock rect {
    fill: #000;
  }

  .landing .filmstrip .mark,
  .landing .filmstrip .edge text {
    fill: #fff;
  }
}