/* dials — axis two.
 *
 * ⚠⚠ LOAD ORDER MATTERS: this file must be linked BEFORE framings.css.
 * Class selectors all carry the same specificity, so on a token both a ground
 * and a framing set, whichever is defined LAST wins. Framing is the structural
 * decision and has to win — otherwise a ground paints a mat onto a full-bleed
 * plate. Each token has exactly one owner: geometry and the mat belong to
 * framing, colour belongs to ground. Any of these may be worn by any framing, and any layout
 * family. Plain classes for the same reason framings.css uses them: they must
 * compose on an element, not fight over :root.
 *
 * ground · motion · type here. `label` is not built: it renders the wall label
 * from a work record, and the work record is queue item 1.
 */

/* ─── ground ──────────────────────────────────────────────────────────────
 * Taken wholesale from the neutral family, and the reasoning travels with
 * it because the principle is not taste: a gallery wall, a neutral mid-grey
 * and a darkroom are the three surrounds people actually judge images against.
 * Mid-grey is the standard BECAUSE a neutral surround does not bias colour
 * perception. `paper` is loupe's own fourth, for work that wants warmth.
 * ⚠ The dark grounds want .f-bleed. Matting on near-black reads as
 * letterboxing — the finding in ARCHITECTURE.md §2.5.
 */
.g-wall {
  /* ⚠⚠ THE PLATE BARELY STEPS BACK ON A LIGHT GROUND, and it cannot. --rest
     expresses "the room rather than the subject" by fading the plate toward the
     ground — which works on near-black, where fading means receding, and
     destroys the picture on museum white, where fading means washing out. At
     base's 0.26 this ground composites a dark photograph to about 185/255:
     not a room behind the row, a milky veil over the whole page.
     ⚠ The consequence, stated plainly: on these grounds the step-back is
     essentially retired. If the GESTURE is wanted back it needs a different
     expression — saturation or scale, the way the enlargement's stage already
     uses --stage-lit-saturate — not a smaller number here.
     ⚠⚠ 1, NOT 0.92. Anything below 1 is a veil over EVERY PIXEL of the
     photograph, not a local effect — at 0.92 the whole image was lifted 8%
     toward the paper white, which reads as a page-wide wash no amount of
     tuning the corner lobes can remove. The only things allowed to touch this
     photograph's opacity are the two scrims, and only where they sit.
     Owner's call 2026-08-31. Dark and grey grounds keep base's 0.26, so
     boardwalk and the showcase are untouched. */
  --rest: 1;
  /* ⚠ NO RAIL LOBE. On a light ground the scrim is LIGHT — it lifts rather
     than darkens, because the ink here is dark — so the lobe under the rail
     reads as a bright blob on the photograph instead of disappearing into it
     the way a dark scrim does on a dark ground. It was supplying nothing the
     thumbnails' own borders do not already supply. The credit's lobe stays:
     that one is what makes the title readable, which is the whole purpose.
     Owner's call 2026-08-31, seen on riso. */
  --scrim-rail: 0;
  --chrome-halo: 0 1px 14px rgba(243, 243, 241, 0.92);                                    /* museum white and hairlines */
  --ground: #f3f3f1; --ink: #191a1b; --ink-dim: #54575b; --ink-faint: #7c7f83;
  --accent: #3e4a56; --accent-glow: rgba(62, 74, 86, 0.18);
  --scrim-rgb: 25 26 27; --scrim: 0.74;
  --lit-ground: #edede9; --mount-bg: #fbfbf9; --thumb-bg: #ffffff;
  --thumb-border: 1px solid rgba(25, 26, 27, 0.22);
  --edge-color: rgba(25, 26, 27, 0.4);
  --n-ink: rgba(25, 26, 27, 0.8); --duo-dark: #191a1b; --duo-light: #fbfbf9;
}
.g-grey {
  --chrome-halo: 0 1px 14px rgba(30, 30, 30, 0.9);                     /* ⚠ #666666 exactly — see base.css, load-bearing */
  --ground: #666666; --ink: #f4f4f3; --ink-dim: #e6e6e4; --ink-faint: #c2c2c0;
  --accent: #f0d9a8; --accent-glow: rgba(240, 217, 168, 0.22);
  --scrim-rgb: 30 30 30; --scrim: 0.72;
  --lit-ground: #5e5e5e; --mount-bg: #5c5c5c; --thumb-bg: #5c5c5c;
  --thumb-border: 1px solid rgba(244, 244, 243, 0.28);
  --edge-color: rgba(244, 244, 243, 0.5);
  --n-ink: rgba(244, 244, 243, 0.85); --duo-dark: #1e1e1e; --duo-light: #f4f4f3;
}
.g-dark {
  --chrome-halo: 0 1px 14px rgba(0, 0, 0, 0.9);                    /* neutral charcoal, never blue-black, one amber */
  --ground: #171717; --ink: #ececea; --ink-dim: #a9a9a6; --ink-faint: #6e6e6c;
  --accent: #c6a36a; --accent-glow: rgba(198, 163, 106, 0.28);
  --scrim-rgb: 10 10 10; --scrim: 0.7;
  --lit-ground: #121212; --mount-bg: #1c1c1c; --thumb-bg: #1c1c1c;
  --thumb-border: 1px solid rgba(236, 236, 234, 0.18);
  --edge-color: rgba(236, 236, 234, 0.35);
  --n-ink: rgba(236, 236, 234, 0.85); --duo-dark: #0f0f0f; --duo-light: #ececea;
}
.g-paper {
  /* ⚠⚠ THE PLATE BARELY STEPS BACK ON A LIGHT GROUND, and it cannot. --rest
     expresses "the room rather than the subject" by fading the plate toward the
     ground — which works on near-black, where fading means receding, and
     destroys the picture on museum white, where fading means washing out. At
     base's 0.26 this ground composites a dark photograph to about 185/255:
     not a room behind the row, a milky veil over the whole page.
     ⚠ The consequence, stated plainly: on these grounds the step-back is
     essentially retired. If the GESTURE is wanted back it needs a different
     expression — saturation or scale, the way the enlargement's stage already
     uses --stage-lit-saturate — not a smaller number here.
     ⚠⚠ 1, NOT 0.92. Anything below 1 is a veil over EVERY PIXEL of the
     photograph, not a local effect — at 0.92 the whole image was lifted 8%
     toward the paper white, which reads as a page-wide wash no amount of
     tuning the corner lobes can remove. The only things allowed to touch this
     photograph's opacity are the two scrims, and only where they sit.
     Owner's call 2026-08-31. Dark and grey grounds keep base's 0.26, so
     boardwalk and the showcase are untouched. */
  --rest: 1;
  /* ⚠ NO RAIL LOBE. On a light ground the scrim is LIGHT — it lifts rather
     than darkens, because the ink here is dark — so the lobe under the rail
     reads as a bright blob on the photograph instead of disappearing into it
     the way a dark scrim does on a dark ground. It was supplying nothing the
     thumbnails' own borders do not already supply. The credit's lobe stays:
     that one is what makes the title readable, which is the whole purpose.
     Owner's call 2026-08-31, seen on riso. */
  --scrim-rail: 0;
  --chrome-halo: 0 1px 14px rgba(239, 236, 228, 0.92);                                 /* warm stock, ink rather than light */
  --ground: #efece4; --ink: #1b1917; --ink-dim: #4a4640; --ink-faint: #7d776e;
  --accent: #7c5434; --accent-glow: rgba(124, 84, 52, 0.2);
  /* ⚠ A SMALLER, SOFTER CREDIT LOBE than base's 40% 52% at 0.7. This is the
     only light ground worn by a BLEED preset (riso), so it is the only one
     whose lobe lies across the photograph rather than on a mat — and a light
     scrim there lifts the picture wherever it reaches. Shrinking the ellipse
     and easing the alpha keeps it doing its one job, making the title
     readable, without bleaching a corner of the frame to do it.
     Owner's call 2026-08-31, on riso.
     ⚠⚠ ANCHORED AT THE BOTTOM-LEFT CORNER, and sized in vw/vh so it means what
     it says. `at 0% 100%` is the corner of #shade, whose bottom and left edges
     ARE the viewport's — so the lobe is a quarter ellipse growing out of the
     corner the credit sits in, 31vw across and 30vh up. Drawn to an outline the
     owner marked on a screenshot, 2026-08-31.
     ⚠ Percentages for the SIZE would have been a trap: #shade is 46vh tall, so
     base's `52%` is 24vh, and its `at 4% 94%` puts the centre at 97% of the
     VIEWPORT — below the credit text at 90.5%-96%, lighting the strip beneath
     it rather than the text. That mismatch is why tuning this by percentage
     kept producing shapes nobody predicted. vh and vw resolve against the
     viewport; percentages resolve against the box.
     ⚠⚠ A FAST FALLOFF WAS TRIED HERE AND REVERTED. --scrim-falloff at 0.22
     concentrated the lift beautifully at the lobe's centre and dropped the
     contrast at the credit's RIGHT-HAND end to 1.5:1 — dark ink on a dark
     photograph, effectively unreadable. The radial is centred on the corner and
     the text runs away from it, so any faster decay starves the end of the line
     first. Keep it linear; shorten the ellipse instead.
     ⚠⚠ MEASURE AT THE TEXT, NOT AT THE LOBE'S CENTRE. The centre reads about
     5.6:1 and that number is meaningless, because nothing is drawn there. What
     matters is the far end of the credit line, where the ink runs out of lift.
     Measured at the actual #plate-text box: 5.1:1 at the title's left, 2.7:1 at
     its right, 2.7:1 at the sub-line's right.
     ⚠⚠ SO THE RIGHT-HAND END OF THE CREDIT IS UNDER 4.5:1 AND ALWAYS HAS BEEN —
     it measured about 3.0:1 before any of this session's changes. This shape is
     not the cause and cannot be the cure: a radial centred on the corner starves
     the end of a horizontal line of text no matter how it is tuned. Fixing it
     properly means a different SHAPE — a linear gradient up from the bottom
     edge, or a scrim that follows the text box — not another number here.
     ⚠ ledgerlines and salon share this ground and are MATTED, so their lobe
     sits on the mat, where it was never load-bearing anyway. */
  --scrim-size: 31vw 30vh;
  --scrim-at:   0% 100%;
  --scrim-rgb: 243 241 235; --scrim: 0.64;
  --lit-ground: #e9e6de; --mount-bg: #fbfaf6; --thumb-bg: #f6f4ee;
  --thumb-border: 1px solid rgba(27, 25, 23, 0.24);
  --edge-color: rgba(27, 25, 23, 0.4);
  --n-ink: rgba(27, 25, 23, 0.78); --duo-dark: #2b2721; --duo-light: #f3f0e8;
}

/* ─── motion ──────────────────────────────────────────────────────────────
 * ⚠⚠ MEASURED CORRECTION TO TEMPLATES.md. That document says "13 --settle
 * values collapse to three". They do not. Sorted by --settle the fifteen do
 * not cluster at all: gesso (1700ms) sits beside cyanotype (800ms), and riso
 * (600ms) beside boardwalk (1250ms).
 *
 * What DOES cluster, cleanly and monotonically, is how far things travel and
 * how much they rotate — --scatter-radius with --thumb-tilt and the start
 * scales:
 *     12–47px, 0deg   still       cyanotype graphite gesso blueprint
 *                                 plaster daguerre autochrome obsidian
 *     58–77px, 8–15deg restrained slate safelight newsprint
 *     88–114px, 18–34deg generous midway boardwalk duplex riso
 *
 * ⚠ So motion is TRAVEL, and duration is a second, near-independent axis —
 * tempo. riso is fast AND generous; gesso is slow and still. Each position
 * below sets a tempo that suits its travel, but the two are separable and a
 * preset may override tempo alone. Worth a fourth dial if anyone asks for one.
 */
.m-still {
  --scatter-radius: 24px; --scatter-spread: 56deg; --thumb-tilt: 0deg;
  --thumb-start-scale: 0.9; --plate-start-scale: 0.86; --plate-exit-scale: 1.04;
  --settle: 900ms; --settle-ease: cubic-bezier(0.3, 0.75, 0.28, 1);
  --grow: 1200ms; --grow-ease: cubic-bezier(0.3, 0.7, 0.25, 1);
  --burst: 2000ms; --stagger: 80ms; --fade: 700ms; --grid-stagger: 45ms;
}
.m-restrained {
  --scatter-radius: 64px; --scatter-spread: 100deg; --thumb-tilt: 10deg;
  --thumb-start-scale: 0.68; --plate-start-scale: 0.4; --plate-exit-scale: 1.08;
  --settle: 1300ms; --settle-ease: cubic-bezier(0.2, 0.85, 0.25, 1);
  --grow: 1600ms; --grow-ease: cubic-bezier(0.22, 0.72, 0.22, 1);
  --burst: 2400ms; --stagger: 130ms; --fade: 900ms; --grid-stagger: 70ms;
}
.m-generous {
  /* ⚠⚠ These are boardwalk's own values, not round numbers. Owner's call
     2026-08-30: boardwalk is the showcase gallery, so it DEFINES this position
     rather than approximating it. Changing them changes the showcase. */
  --scatter-radius: 96px; --scatter-spread: 136deg; --thumb-tilt: 23deg;
  --thumb-start-scale: 0.42; --plate-start-scale: 0.13; --plate-exit-scale: 1.16;
  --settle: 1250ms; --settle-ease: cubic-bezier(0.16, 0.9, 0.22, 1);
  --grow: 1500ms; --grow-ease: cubic-bezier(0.14, 0.76, 0.18, 1);
  --burst: 2000ms; --stagger: 130ms; --fade: 700ms;
  /* boardwalk declares no --grid-stagger; its effective value is loupe.js`s
     tok() default of 60, so that is what this position inherits. */
  --grid-stagger: 60ms;
  --drift: 54s;
}

/* ─── type ────────────────────────────────────────────────────────────────
 * Three pairings, not ten. ⚠ the neutral family's three themes share ONE pairing
 * on purpose — same catalogue typography, different wall — and a grotesque is
 * what museum labelling uses. Keep this axis small; it is the one most likely
 * to be grown for no reason. Fonts are declared here but @import belongs on
 * the page, so a gallery fetches only the face it uses.
 */
.ty-grotesque {
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-label:   'IBM Plex Mono', ui-monospace, monospace;
  --title-size: 13px; --title-tracking: 0.2em;  --title-case: uppercase;
  --label-size: 10px; --label-tracking: 0.12em; --label-case: none;
  --sub-size: 10px;
}
.ty-serif {
  --font-display: 'EB Garamond', Garamond, Georgia, serif;
  --font-label:   'EB Garamond', Garamond, Georgia, serif;
  --title-size: 22px; --title-tracking: 0.1em;  --title-case: none;
  --label-size: 13px; --label-tracking: 0.08em; --label-case: none;
  --sub-size: 12px;
}
.ty-mono {
  --font-display: 'IBM Plex Mono', ui-monospace, monospace;
  --font-label:   'IBM Plex Mono', ui-monospace, monospace;
  --title-size: 12px; --title-tracking: 0.34em; --title-case: lowercase;
  --label-size: 11px; --label-tracking: 0.2em;  --label-case: lowercase;
  --sub-size: 10px;
}