/* Zeved Boards — alastairzeved.com. One page, no scroll; tokens verbatim
   from the app's styles.css (design-system §2, B2). Dark-only. */

:root {
  /* Canonical palette values (B66); component ladders below only alias them. */
  --palette-blue-deep: #020812;
  --palette-blue-card: #08152c;
  --palette-blue-frame: #698ebf;
  --palette-blue-note: #a0d4da;
  --palette-shared-note-ink: #031019;
  --ink-dark: var(--palette-shared-note-ink);
  --palette-blue-water-top: #34697f;
  --palette-blue-water-mid: #255265;
  --palette-blue-water-bot: #163646;
  --palette-blue-water-bot-a: 22 54 70;
  --palette-blue-glow: 109 156 176;

  --palette-violet-deep: #0c0512;
  --palette-violet-card: #1e0f28;
  --palette-violet-frame: #9d80b9;
  --palette-violet-note: #cec6ed;
  --palette-violet-water-top: #6d5b83;
  --palette-violet-water-mid: #534769;
  --palette-violet-water-bot: #382e47;
  --palette-violet-water-bot-a: 56 46 71;
  --palette-violet-glow: 157 128 185;

  --palette-green-card: #001a0e;
  --palette-green-frame: #52997f;
  --palette-green-water-top: #486b49;
  --palette-green-water-mid: #345439;
  --palette-green-water-bot: #1f3825;
  --palette-green-water-bot-a: 31 56 37;
  --palette-green-glow: 82 153 127;

  --palette-rose-card: #260e12;
  --palette-rose-frame: #b57a9b;
  --palette-rose-water-top: #855562;
  --palette-rose-water-mid: #6a414c;
  --palette-rose-water-bot: #472a35;
  --palette-rose-water-bot-a: 71 42 53;
  --palette-rose-glow: 181 122 155;

  --deep: var(--palette-blue-deep);
  --card: var(--palette-blue-card);
  --frame: var(--palette-blue-frame);
  --note: var(--palette-blue-note);
  --note-ink: var(--palette-shared-note-ink);
  --water-top: var(--palette-blue-water-top);
  --water-mid: var(--palette-blue-water-mid);
  --water-bot: var(--palette-blue-water-bot);
  --water-bot-a: var(--palette-blue-water-bot-a);
  --ink-light: #f4f5f1;
  --ink-dim:   rgb(244 245 241 / 0.55);
  --danger:    #E2A08C;
  --glow-blue: var(--palette-blue-glow);
  --elevation: 0 2px 8px rgb(0 0 0 / 0.45);
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The render scale (B30): --rs drives only the selector tabs' type and
     padding; the header band is de-scaled (B58). vh fallback, dvh wins. */
  --rs: min(calc(100vh / 1104.55), calc(100vw / 1440));
  --rs: min(calc(100dvh / 1104.55), calc(100vw / 1440));
  --band-top: calc(15.46 * var(--rs));   /* TheBoards' 14 × 1.10455 (The-Portfolio's `B46`) */
  --rule-y:   77px;                      /* fixed (B58): the band's logical height, de-scaled
                                             from --rs so the header is a constant masthead
                                             (B58 re-measures B56's floor down to 77) */
  --card-pad: calc(16 * var(--rs));      /* the The-Portfolio's `B31` card's 16px logical padding */
}
@media (min-aspect-ratio: 1) {
  :root { --rs: calc(100vh / 1104.55);   /* vh fallback */
          --rs: calc(100dvh / 1104.55); }  /* landscape: the pure height anchor (The-Portfolio's `B46`) */
}

@font-face {
  font-family: "Montserrat Alternates";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/MontserratAlternates-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat Alternates";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/MontserratAlternates-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat Alternates";
  font-weight: 800;
  font-display: swap;
  src: url("fonts/MontserratAlternates-800.woff2") format("woff2");
}

/* Law: one viewport, no scrolling — at any viewport, ever. The whole sheet
   fits one screen; scroll must be impossible because content fits. */
html, body { min-height: 100dvh; overflow: auto; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--deep);
  color: var(--ink-light);
  font: 400 1rem/1.6 "Montserrat Alternates", system-ui, sans-serif;
}

:is(a, button, iframe):focus-visible {
  outline: 2px solid var(--ink-light);
  outline-offset: 2px;
}

/* ---- CTA: the app link gets the loudest style — the "Get it on Github"
   button (.gm-cta) rebuilt borderless in this page's palette. ---- */
.cta {
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-glow-blur: 12px;
  --focus-glow-spread: 2px;
  --focus-ring-size: 4px;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 3px 25px;
  border-radius: 3px;
  background: var(--card);
  color: var(--ink-light);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--elevation), 0 0 6px 0 var(--frame);
  transition:
    box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Hover: the .gm-cta glow lift, verbatim — the --frame ring widens and
   doubles while the card brightens. */
@media (hover: hover) {
  .cta:hover {
    filter: brightness(1.1);
    box-shadow: var(--elevation), 0 0 12px 2px var(--frame), 0 0 24px 4px var(--frame);
  }
}

/* ---- The TopBand: a --card compartment with water falloff, closed by a
   1px --frame rule, two title cards. B30: normalized grammar — cards
   overhang the rule by the The-Portfolio's `B31` 29px hang; de-scaled (B58). ---- */
.topband {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* equal tracks: both
                                       cards centre in identical columns */
  column-gap: 2rem;
  padding-inline: 2rem;             /* symmetric: inline padding equals the column gap */
  justify-items: center;            /* the cards hug their text and centre in their tracks (B41) */
  align-items: start;
  height: var(--rule-y);
  background:
    linear-gradient(color-mix(in srgb, var(--water-top) 35%, transparent),
                    color-mix(in srgb, var(--water-mid) 35%, transparent) 55%,
                    color-mix(in srgb, var(--water-bot) 35%, transparent)),
    var(--card);
  border-bottom: 1px solid var(--frame);
}

/* The card: The-Portfolio's card border, verbatim, on BOTH sides — state by
   ink and fill, never the frame (B4); unselected text is faded + italic (B5);
   the unselected fill follows B33. B30:
   the normalized box — The-Portfolio's
   `B31` min-height (rule-y + 29px) overhang, 12/16/12px padding, 2px
   border, 3px bottom radius — de-scaled (B58). B41: hugs its text,
   superseding B31's shared width. */
.topband__card {
  position: relative;
  z-index: 2;                       /* over the band's rule it occludes */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;               /* the convention's centred card */
  width: max-content;               /* the card hugs its text (B41): the sizer
                                       seats both cards at the widest label */
  max-width: 100%;                  /* capped at its track: a longer line
                                       contains inside its own column */
  min-width: 0;
  min-height: calc(var(--rule-y) + 29px);   /* the The-Portfolio's `B31` overhang —
                                       rule-y + the 29px hang (fixed B58) */
  padding: 12px 16px 12px;         /* tightened (B58): fixed logical values, so the
                                       masthead fits 768px laptop heights without
                                       scrolling */
  border: 2px solid var(--frame);    /* fixed (B58) */
  border-top: 0;
  border-radius: 0 0 3px 3px;        /* only the corners that exist (B58) */
  /* The unselected dim fill (B33, superseding B4's transparent fill): solid
     color-mix(in srgb, var(--card) 55%, var(--deep)); --ink-dim stays above
     4.5:1 (UIUX §2.3). */
  background: color-mix(in srgb, var(--card) 55%, var(--deep));
  box-shadow: none;
  /* The CTA's three-property transition, verbatim — every button on the
     site presses this way. */
  transition:
    box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.topband__card:has(.topband__tab:checked) {
  background: var(--card);
}
/* Each card rebinds its own ladder on itself (B17's idiom, B33): boards
   keeps blue, plugins violet. B43 extends the rebind to --frame and
   --glow-blue, superseding B33's "untouched roles". */
.topband__card--boards {
  --card: var(--palette-blue-card);
  --deep: var(--palette-blue-deep);
  --frame: var(--palette-blue-frame);
}
.topband__card--plugins {
  --card: var(--palette-violet-card);
  --deep: var(--palette-violet-deep);
  --frame: var(--palette-violet-frame);
  --glow-blue: var(--palette-violet-glow);
}
@media (hover: hover) {
  .topband__card:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 32px 4px rgb(var(--glow-blue) / 0.9);
  }
}
.topband__card:has(.topband__tab:focus-visible) {
  outline: 2px solid var(--ink-light);
  outline-offset: 2px;
}
/* The three radio groups use one off-flow, visually hidden input pattern (B67). */
.topband__tab,
.plugins__radio,
.split__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.topband__card-hit {
  position: absolute;
  inset: -2px;
  cursor: pointer;
}

.topband__wordmark {
  margin: 0;
  /* The page's title-card type (B56; B58): the wordmark is the h1 (UIUX §8),
     pinned to 2rem/800/1.3 — the H2/H3 descend from it. Pinned (B58) rather
     than B30's --rs scale; supersedes B41's 15px. */
  font-size: 2rem;              /* fixed 32px, the H1 anchor */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
/* The hidden sizer (B41; re-backed by B56): both cards render one shared
   width — each hugs the widest label. Update the string if a label
   outgrows it. */
.topband__wordmark::before {
  content: "Agentic Plugins";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.topband__oneliner {
  margin: 0;
  /* The page's headline secondary (B56; B58): the oneliner reads at the
     tagline's proportion — 16px/400/1.2 — superseding B41's 10px. Fixed
     with the title (B58). */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--note);
  /* inline-size containment keeps the sentence out of the card's width
     (B41); a plain width: 100% does NOT. Engines without it widen
     unequally, but max-width: 100% caps each. */
  container-type: inline-size;
  /* The two-line wrap (B42; at the B56 type; fixed B58): 280px wraps each
     oneliner to two lines at 16px (B42's ~10% margin over its floor). This
     width is the line's whole intrinsic contribution, so both boxes stay
     equal. */
  width: 280px;
  max-width: 100%;
}
/* Unselected: one dim ink replaces both inks, the line italic; upright-vs-
   italic plus the checked state carry the difference. */
.topband__card:not(:has(.topband__tab:checked)) .topband__wordmark,
.topband__card:not(:has(.topband__tab:checked)) .topband__oneliner {
  color: var(--ink-dim);
  font-style: italic;
}

/* ---- The Agentic tab: the purple repaint, TheBoards' Note Boards ladder
   verbatim (styles.css §2.2.2); leaves glow/ink-light/ink-dim. ---- */
body:has(#topband-tab-plugins:checked) {
  --deep: var(--palette-violet-deep);
  --card: var(--palette-violet-card);
  --frame: var(--palette-violet-frame);
  --note: var(--palette-violet-note);
  --water-top: var(--palette-violet-water-top);
  --water-mid: var(--palette-violet-water-mid);
  --water-bot: var(--palette-violet-water-bot);
  --water-bot-a: var(--palette-blue-water-bot-a);
}
/* The footer: the main page's Parking Lot in the purple ladder — the
   :has() repaint already rebinds its water/frame tokens. */

body:has(#topband-tab-plugins:checked) .split:not(.split--plugins) { display: none; }
.split--plugins { display: none; }
body:has(#topband-tab-plugins:checked) .split--plugins { display: grid; }

/* The right half: the tab's description (B18), the landing split's copy in
   the purple ladder. B40 (superseding B35's plate guard and B37's copy-fill
   clause): copy fills the FULL AREA — width: 100%, type to fit — no
   overflow (UIUX §9, B3). The wrapper is the half's size container. */
.plugins__copy {
  container-type: size;
  --copy-w: 660px;              /* the fallback plate's own width */
  --copy-h: 1125px;            /* its measured height at the landing's
                                   1rem formatting, plus slack (B35) */
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;          /* own the column's full height */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.plugins__copy .split__copy {
  flex: 0 0 auto;
  align-self: auto;             /* the copy centres; no band to own */
  width: 100%;                  /* reflow: the half's own width, like the landing */
  margin-bottom: 0;
}

/* The fit law (B40; cross-engine in B54): the copy fills its half, its type
   scaling by min(1rem, 100cqh · K), K = 1rem / bandH (§3.4) — superseding
   B35's plate guard and B37's copy-fill clause. B54 writes K as a constant
   MULTIPLIED by 100cqh (length × number) instead of B40's division 100cqh /
   bandH: Firefox and WebKit do NOT resolve a length-into-number division,
   so B40's division produced no fit. Typographic, not transform (B35's
   plate, B37's fill); a half taller than its band's H renders 1rem (the
   reflow B35 kept). Constants follow the shipped copy's clamp (§2.4). */
.plugins__copy .split__copy {
  --copy-font: min(1rem, calc(100cqh * 0.01541426));   /* w > 671: 1rem / H(660) 1038px */
}
@container (max-width: 671px) {
  .plugins__copy .split__copy { --copy-font: min(1rem, calc(100cqh * 0.01505174)); }  /* H(601) 1063px */
}
@container (max-width: 601px) {
  .plugins__copy .split__copy { --copy-font: min(1rem, calc(100cqh * 0.01403509)); }  /* H(551) 1140px */
}
@container (max-width: 551px) {
  .plugins__copy .split__copy { --copy-font: min(1rem, calc(100cqh * 0.01314708)); }  /* H(501) 1217px */
}
@container (max-width: 501px) {
  .plugins__copy .split__copy { --copy-font: min(1rem, calc(100cqh * 0.01236476)); }  /* H(451) 1294px */
}
@container (max-width: 451px) {
  .plugins__copy .split__copy { --copy-font: min(1rem, calc(100cqh * 0.01086219)); }  /* H(401) 1473px */
}
@container (max-width: 401px) {
  .plugins__copy .split__copy { --copy-font: min(1rem, calc(100cqh * 0.00999375)); }  /* H(351) 1601px */
}
@container (max-width: 351px) {
  .plugins__copy .split__copy { --copy-font: min(1rem, calc(100cqh * 0.00999375)); }  /* unconditional */
}
.plugins__copy .split__copy {
  font-size: var(--copy-font);
}
.plugins__copy .split__copy .split__title {
  font-size: 1.5em;             /* H2 (UIUX §2.4, B58), em-scaled to the fit copy */
}
.plugins__copy .split__copy .split__tagline {
  font-size: 1.25em;            /* H3 (UIUX §2.4, B58), em-scaled to the fit copy */
}
.plugins__copy .split__copy p {
  margin: 0.9em 0 0;           /* the row gap, the body rhythm */
}
.plugins__copy .split__copy .split__closer {
  margin: 1.25em 0 0;           /* the one wider stacked break */
}
.plugins__copy .split__copy .split__cta {
  margin-top: 1.25em;           /* the closer's own stacked break */
}
.plugins__copy .split__copy .cta {
  font-size: calc(var(--copy-font) * 1.0625);    /* 17px = 1.0625 × 1rem */
  min-height: calc(var(--copy-font) * 4);        /* 64px = 4 × 1rem */
  padding: calc(var(--copy-font) * 0.1875) calc(var(--copy-font) * 1.5625);  /* 3px, 25px of 1rem */
}

/* The left half: the plugin's component atop the selector row; the right
   half carries the description (B18). A size container reads the half's box. */
.plugins__left {
  container-type: size;
  display: flex;
  flex-direction: column;
  align-self: stretch;          /* own the column's full height */
  min-width: 0;
  min-height: 0;

  /* Boards carousel geometry in container units: image height = column
     width × the 2557/1380 aspect; its top edge sits at the boards offset. */
  --boards-img-h: calc(100cqw * 1380 / 2557);
  --boards-plate-top: calc((100cqh - var(--boards-img-h) - 1.25rem) / 2);
  /* The selector row's own height, fluid with the half. Tall enough for
     the longest title to wrap to two lines without clipping. */
  --selector-h: clamp(3.4rem, 10cqw, 5.5rem);
  /* What is left for the stage: boards offset down to the selector row,
     minus the gutter and the selector's bottom float. */
  --stage-h: calc(
    100cqh - var(--boards-plate-top) - var(--selector-h) - 2.5rem);
}

/* The stage: the selected plugin's full component, top edge at the boards
   offset; the plate fills by the scale law below (B37). */
.plugins__stage {
  flex: 0 0 auto;
  container-type: size;
  height: max(0px, var(--stage-h));
  margin-top: max(0px, var(--boards-plate-top));
  min-width: 0;
  overflow: hidden;
}
/* The wrapper owns the stage's full box; the plate centres by offsetting
   half its width, so the scale stays centred in the half. */
.plugin {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}

/* The selector row: the note card again (--note-ink border, 3px radius,
   water fill, elevation), lying horizontally — four cards, evenly spaced. */
.plugins__pane {
  position: relative;           /* anchors the off-flow radios */
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: clamp(0.5rem, 1.25cqw, 1rem);   /* even spacing between the cards */
  flex: 0 0 auto;
  width: 100%;
  height: var(--selector-h);
  margin: 1.25rem 0;            /* floats: gutter above, bottom edge below */
  padding: 0.35rem clamp(0.75rem, 2.5cqw, 1.5rem);   /* equal either side */
  border: 2.1px solid var(--note-ink);   /* the gm-card border, verbatim */
  border-radius: 3px;
  background:                       /* the gm-back water, verbatim */
    radial-gradient(
      118% 76% at 50% 24%,
      rgb(0 0 0 / 0) 32%,
      rgb(var(--water-bot-a) / 0.72) 128%
    ),
    linear-gradient(
      180deg,
      var(--water-top) 0%,
      var(--water-mid) 46%,
      var(--water-bot) 100%
    );
  box-shadow: var(--elevation);
}

/* Both selector rows share one title-card rule (B67); page-specific palette,
   states and the plugins row's ::after glimmer stay separate. */
.plugins__tab,
.split__tab {
  box-sizing: border-box;
  display: flex;                /* the text centres in the card */
  flex: 1 1 0;                  /* four equal cards, evenly spaced */
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: calc(var(--band-top) + calc(8 * var(--rs))) var(--card-pad);
  border: calc(2 * var(--rs)) solid var(--frame);
  border-radius: calc(3 * var(--rs));
  background: var(--card);
  color: var(--ink-light);
  font-weight: 800;
  font-size: calc(20 * var(--rs));
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  position: relative;           /* anchors the glimmer ::after */
  overflow: hidden;
  /* The CTA's three-property transition, verbatim — the click state below
     eases on the same clock. */
  transition:
    box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.plugins__tab::after {         /* the selector title cards' glimmer layer */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 32%,
    color-mix(in srgb, var(--frame) 70%, transparent) 50%,
    transparent 68%
  );
  background-size: 250% 100%;
  background-position: 130% 0;
}
.plugins__pane:not(:has(#plugin-editorial-recension:checked)) label[for="plugin-editorial-recension"],
.plugins__pane:not(:has(#plugin-gregorian-mode:checked)) label[for="plugin-gregorian-mode"],
.plugins__pane:not(:has(#plugin-the-docket:checked)) label[for="plugin-the-docket"],
.plugins__pane:not(:has(#plugin-with-love-math:checked)) label[for="plugin-with-love-math"] {
  color: var(--ink-dim);
  font-style: italic;
}
/* Hover: the "Get it on Github" button's glow, verbatim — the two-layer
   --frame glow at the same 200ms ease, under the same hover guard. */
@media (hover: hover) {
  .plugins__tab:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 12px 2px var(--frame), 0 0 24px 4px var(--frame);
  }
}

.plugins__pane:has(#plugin-editorial-recension:checked) label[for="plugin-editorial-recension"],
.plugins__pane:has(#plugin-gregorian-mode:checked) label[for="plugin-gregorian-mode"],
.plugins__pane:has(#plugin-the-docket:checked) label[for="plugin-the-docket"],
.plugins__pane:has(#plugin-with-love-math:checked) label[for="plugin-with-love-math"] {
  background: var(--card);
  color: var(--ink-light);
}
.plugins__pane:has(#plugin-editorial-recension:focus-visible) label[for="plugin-editorial-recension"],
.plugins__pane:has(#plugin-gregorian-mode:focus-visible) label[for="plugin-gregorian-mode"],
.plugins__pane:has(#plugin-the-docket:focus-visible) label[for="plugin-the-docket"],
.plugins__pane:has(#plugin-with-love-math:focus-visible) label[for="plugin-with-love-math"] {
  outline: 2px solid var(--ink-light);
  outline-offset: 2px;
}

/* The glimmer is the selector title cards' sheen alone (B26); the
   component and background card carry none. Same 6s gm-marquee clock. */
.plugins__tab::after {
  animation: gm-marquee 6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .plugins__tab::after { animation: none; content: none; }
}

/* The stage: the plugin's full component, its 830px plate filling the stage
   box (B37) — scaled by a font-size reading the stage's box, min(width,
   height ratio). B7's 0.65x and B37's transform are retired (B60):
   length-to-number divisions do NOT resolve in Firefox and WebKit. The
   font-size is instead 100cqw · Kw and 100cqh · Kk (constants over the
   plate's width and height) — every engine resolves. The plate's px are
   restated in calc(var(--stage-font) · N)/em (unit translation, PRD §4.4,
   B60). */
.plugins__stage .gregorian-mode {
  --stage-font: min(
    calc(100cqw * 0.019277108),          /* Kw = 1rem / 830px */
    calc(100cqh * var(--plugin-k, 0.019753086)));  /* Kk = 1rem / plate height */
  font-size: var(--stage-font);
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -25.9375em;       /* half the 830px plate width, in em */
}
body:has(#plugin-editorial-recension:checked) .plugin--editorial-recension,
body:has(#plugin-gregorian-mode:checked) .plugin--gregorian-mode,
body:has(#plugin-the-docket:checked) .plugin--the-docket,
body:has(#plugin-with-love-math:checked) .plugin--with-love-math { display: block; }
/* The plate's measured box at 830px (B37): 20px taller than its px design
   heights (790/662/662/598), so the scale reads the real box. Kk = 1rem /
   height here, the constant B60 multiplies 100cqh by (length × number). */
.plugin--editorial-recension { --plugin-k: 0.019753086; }  /* 1rem / 810px */
.plugin--gregorian-mode      { --plugin-k: 0.023460411; }  /* 1rem / 682px */
.plugin--the-docket          { --plugin-k: 0.019753086; }  /* 1rem / 810px */
.plugin--with-love-math      { --plugin-k: 0.025889968; }  /* 1rem / 618px */

/* ---- The plugin component: the four Agentic Plugins share one class set,
   written once here, verbatim from gregorian-mode.md. ---- */
.gregorian-mode {
  --deep: var(--palette-violet-deep);
  --card: var(--palette-violet-card);
  --frame: var(--palette-violet-frame);
  --note: var(--palette-violet-note);
  --water-top: var(--palette-violet-water-top);
  --water-mid: var(--palette-violet-water-mid);
  --water-bot: var(--palette-violet-water-bot);
  --water-bot-a: var(--palette-violet-water-bot-a);
  --ink-light: #f4f5f1;
  --ink: var(--ink-dark);
  --ink-a: 3 16 25;
  --elevation: 0 calc(var(--stage-font) * 0.125) calc(var(--stage-font) * 0.5) rgb(0 0 0 / 0.45);
  --elevation-inset: inset calc(var(--stage-font) * -0.1875) 0 calc(var(--stage-font) * 0.5) rgb(0 0 0 / 0.16),
    inset 0 calc(var(--stage-font) * 0.125) calc(var(--stage-font) * 0.25) rgb(0 0 0 / 0.1);
  --tab-complete: #d3c6e0;
  /* The component's glow triplet: this ladder's --frame hue (B17). The
     presentation glow lives on the background card (B28), but the token
     stays for the ladder's grammar. */
  --glow-blue: var(--palette-violet-glow);
  /* The presentation glow's colour (B28): the Learning Boards rose
     triplet from TheBoards, per B17's sourcing. */
  --glow-rose: var(--palette-rose-glow);
}

.gregorian-mode {
  position: relative;
  box-sizing: border-box;
  width: 51.875em;
  padding: 5.6875em 5.3125em 7.625em;
  background: var(--deep);
  font-family: "Montserrat Alternates", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* The presentation glow left this wrapper (B28): it lives on the
     background card; the wrapper keeps its elevation. */
  box-shadow: var(--elevation);
}
/* The presentation glow (B28): the background card (.gm-back) carries it —
   a breathing bloom in the Learning Boards rose triplet (B17), on a 10s
   loop, sized to reach the wrapper plate's perimeter. */
@keyframes gm-breathe {
  0%, 100% {
    box-shadow:
      var(--elevation),
      0 0 3.75em 1.25em rgb(var(--glow-rose) / 0.25),
      0 0 15em 7.5em rgb(var(--glow-rose) / 0.12);
  }
  50% {
    box-shadow:
      var(--elevation),
      0 0 3.75em 1.25em rgb(var(--glow-rose) / 0.35),
      0 0 15em 7.5em rgb(var(--glow-rose) / 0.18);
  }
}
.gregorian-mode::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.055;
  pointer-events: none;
}
.gm-card {
  box-sizing: border-box;
  border: calc(var(--stage-font) * 0.13125) solid var(--ink);
  border-radius: calc(var(--stage-font) * 0.1875);
  background: var(--note);
  color: var(--ink);
  text-align: center;
  overflow-wrap: break-word;
}

/* Card 3 — the background card */
.gm-back {
  position: absolute;
  inset: 5.625em 10.3125em 5.625em;
  z-index: 0;
  background: radial-gradient(
      118% 76% at 50% 24%,
      rgb(0 0 0 / 0) 32%,
      rgb(var(--water-bot-a) / 0.72) 128%
    ),
    linear-gradient(
      180deg,
      var(--water-top) 0%,
      var(--water-mid) 46%,
      var(--water-bot) 100%
    );
  /* The presentation glow (B28) — the breathing rose bloom (gm-breathe, 10s)
     plus the card's own elevation. */
  box-shadow:
    var(--elevation),
    0 0 3.75em 1.25em rgb(var(--glow-rose) / 0.25),
    0 0 15em 7.5em rgb(var(--glow-rose) / 0.12);
  animation: gm-breathe 10s ease-in-out infinite;
  overflow: hidden;
}

.gm-back::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  border-radius: 0.0625em;
}

/* Card 1 — the title card */
.gm-title {
  position: absolute;
  z-index: 1;
  top: calc(var(--stage-font) * 3.4375);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--stage-font) * 26.6875);
  margin: 0;
  padding: calc(var(--stage-font) * 1.625) calc(var(--stage-font) * 0.75) calc(var(--stage-font) * 1.875);
  border-color: var(--frame);
  background: var(--card);
  color: var(--ink-light);
  font-size: 1.5em;              /* H2 (UIUX §2.4, B58): 'EDITORIAL RECENSION'
                                   still fills the 427px card on one line */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: normal;          /* wrap only if a title asks for it */
  box-shadow: var(--elevation);
  overflow: hidden;
}

@keyframes gm-marquee {
  0%   { background-position: 130% 0; }
  30%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}

/* Under Construction — marker inside the Docket's title card (B27,
   supersedes B19's below-the-card seat); stays lowercase. */
.gm-uc {
  display: block;
  margin-top: calc(var(--stage-font) * 0.5);
  color: var(--ink-light);
  font-size: 0.875em;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: none;
}

/* Card 2 — the description card */
.gm-desc {
  position: relative;
  z-index: 1;
  width: calc(var(--stage-font) * 37.5);
  margin: calc(var(--stage-font) * 5.5625) auto 0;
  padding: calc(var(--stage-font) * 0.625) calc(var(--stage-font) * 1.125);
  border-color: var(--ink);
  background: var(--note);
  color: var(--ink);
  font-size: 1.25em;
  letter-spacing: 0.015em;
  font-weight: 400;             /* H3 (UIUX §2.4, B58): 300 was not a shipped face */
  line-height: calc(var(--stage-font) * 2);
  box-shadow: var(--elevation);
}
.gm-cta {
  --focus-outline-width: calc(var(--stage-font) * 0.125);
  --focus-outline-offset: calc(var(--stage-font) * 0.125);
  --focus-glow-blur: calc(var(--stage-font) * 0.75);
  --focus-glow-spread: calc(var(--stage-font) * 0.125);
  --focus-ring-size: calc(var(--stage-font) * 0.25);
  position: relative;
  z-index: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--stage-font) * 4);
  margin: calc(var(--stage-font) * 1.875) auto 0;
  padding: calc(var(--stage-font) * 0.1875) calc(var(--stage-font) * 1.5625);
  border-radius: calc(var(--stage-font) * 0.1875);
  background: var(--card);
  color: var(--ink-light);
  font-family: inherit;
  font-size: 1.0625em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--elevation), 0 0 calc(var(--stage-font) * 0.375) 0 var(--frame);
  transition:
    box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .gm-cta:hover {
    filter: brightness(1.1);
    box-shadow: var(--elevation), 0 0 calc(var(--stage-font) * 0.75) calc(var(--stage-font) * 0.125) var(--frame), 0 0 calc(var(--stage-font) * 1.5) calc(var(--stage-font) * 0.25) var(--frame);
  }
}
.gm-cta:active {
  filter: brightness(0.92);
  transform: translateY(calc(var(--stage-font) * 0.125));
  box-shadow: var(--elevation-inset);
  transition-duration: 80ms;
}

/* ---- The Deep: centered toggle on top, embed fills the rest. ---- */
.deep {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Top clearance: the title cards overhang the header's rule by the
     The-Portfolio's `B31` 29px hang (B58). */
  padding: 29px 1rem 0.25rem;
  min-height: 0;
}

/* ---- The split: the boards left, what they do right, parted by a ruled
     blue bar a third of the centre area's height, centred. ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: 1fr;
  column-gap: 2rem;             /* this file's existing two-column gutter */
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* The ruled blue bar: the owner's "thin border, about 1/3 the height,
   anchored to the centre". Under the grid's row track 33.333% resolves. */
.split__rule {
  height: 33.333%;
  background: var(--frame);
}

/* The image selector: the plugins page's selector in this page's palette —
   image at full width, title cards beneath; no chevrons, no dots, no script. */
.split__gallery {
  position: relative;           /* anchors the off-flow radios */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;          /* a height-capped plate stays centred */
  align-self: stretch;          /* own the column's full height */
  min-width: 0;
  min-height: 0;

  /* A size container so the row's geometry reads the half's own box — the
     same container-unit scaling the plugins half uses. */
  container-type: size;

  /* The selector row's own height, fluid with the half. Tall enough for
     the longest title to wrap to two lines without clipping. */
  --selector-h: clamp(3.4rem, 10cqw, 5.5rem);
}
.split__plate {
  position: relative;
}
.split__slide { display: none; }
.split__gallery:has(#split-shot-1:checked) .split__slide--1,
.split__gallery:has(#split-shot-2:checked) .split__slide--2,
.split__gallery:has(#split-shot-3:checked) .split__slide--3,
.split__gallery:has(#split-shot-4:checked) .split__slide--4 { display: block; }

/* The plate, at the source's own aspect, bare like the owner's reference.
   Width is capped by band height — plate + selector row must fit the half. */
.split__shot {
  display: block;
  width: min(100%, calc((100cqh - var(--selector-h) - 1.25rem) * (2557 / 1380)));
  height: auto;
  aspect-ratio: 2557 / 1380;    /* the plate is known before the bytes land */
}

/* The selector row: the note card again — --note-ink border, 3px radius,
   the water fill, the elevation — lying horizontally beneath the plate.
   One row, all four title cards across it, evenly spaced. */
.split__pane {
  position: relative;           /* anchors the off-flow radios */
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: clamp(0.5rem, 1.25cqw, 1rem);   /* even spacing between the cards */
  flex: 0 0 auto;
  width: 100%;
  height: var(--selector-h);
  margin-top: 1.25rem;          /* the plate's own stacked break */
  padding: 0.35rem clamp(0.75rem, 2.5cqw, 1.5rem);   /* equal either side */
  border: 2.1px solid var(--note-ink);
  border-radius: 3px;
  background:                       /* the water fill, the checked card's own
                                       family — blue on load */
    radial-gradient(
      118% 76% at 50% 24%,
      rgb(0 0 0 / 0) 32%,
      rgb(var(--water-bot-a) / 0.72) 128%
    ),
    linear-gradient(
      180deg,
      var(--water-top) 0%,
      var(--water-mid) 46%,
      var(--water-bot) 100%
    );
  box-shadow: var(--elevation);
}

.split__gallery:not(:has(#split-shot-1:checked)) label[for="split-shot-1"],
.split__gallery:not(:has(#split-shot-2:checked)) label[for="split-shot-2"],
.split__gallery:not(:has(#split-shot-3:checked)) label[for="split-shot-3"],
.split__gallery:not(:has(#split-shot-4:checked)) label[for="split-shot-4"] {
  color: var(--ink-dim);
  font-style: italic;
}
/* Hover: the topband card's glow, verbatim — the page's own blue hover
   precedent, under the same hover guard. */
@media (hover: hover) {
  .split__tab:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 32px 4px rgb(var(--glow-blue) / 0.9);
  }
}
/* The shared press is B6's one site-wide state (B64); active wins over hover. */
.cta:active,
.topband__card:active,
.plugins__tab:active,
.split__tab:active {
  filter: brightness(0.92);
  transform: translateY(2px);
  box-shadow:
    inset -3px 0 8px rgb(0 0 0 / 0.16),
    inset 0 2px 4px rgb(0 0 0 / 0.1);
  transition-duration: 80ms;
}
/* One focus ring for both CTAs (B64); component-sized values come from each
   surface so the plugin plate keeps its scaled geometry. */
.cta:focus-visible,
.gm-cta:focus-visible {
  outline: var(--focus-outline-width) solid var(--ink-light);
  outline-offset: var(--focus-outline-offset);
  box-shadow:
    var(--elevation),
    0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--frame),
    0 0 0 var(--focus-ring-size) var(--ink-dark);
}
.split__gallery:has(#split-shot-1:checked) label[for="split-shot-1"],
.split__gallery:has(#split-shot-2:checked) label[for="split-shot-2"],
.split__gallery:has(#split-shot-3:checked) label[for="split-shot-3"],
.split__gallery:has(#split-shot-4:checked) label[for="split-shot-4"] {
  background: var(--card);
  color: var(--ink-light);
}

/* The title cards wear their board's own ladder (B17): each repaints
   --card, --frame, --glow-blue with TheBoards' rotated rungs (styles.css
   §2.2.2, so §2.3 ratios hold). To Do Boards is :root's blue, no block. */
.split__gallery label[for="split-shot-1"] {   /* Idea Boards — the green */
  --card: var(--palette-green-card);
  --frame: var(--palette-green-frame);
  --glow-blue: var(--palette-green-glow);
}
.split__gallery label[for="split-shot-2"] {   /* Learning Boards — the rose */
  --card: var(--palette-rose-card);
  --frame: var(--palette-rose-frame);
  --glow-blue: var(--palette-rose-glow);
}
.split__gallery label[for="split-shot-3"] {   /* Notes Boards — the violet */
  --card: var(--palette-violet-card);
  --frame: var(--palette-violet-frame);
  --glow-blue: var(--palette-violet-glow);
}

/* The selector row's water fill follows the checked card's family (B17);
   the row's --note-ink border and --frame sheen stay the page's own. */
.split__gallery:has(#split-shot-1:checked) .split__pane {   /* Idea */
  --water-top: var(--palette-green-water-top);
  --water-mid: var(--palette-green-water-mid);
  --water-bot: var(--palette-green-water-bot);
  --water-bot-a: var(--palette-green-water-bot-a);
}
.split__gallery:has(#split-shot-2:checked) .split__pane {   /* Learning */
  --water-top: var(--palette-rose-water-top);
  --water-mid: var(--palette-rose-water-mid);
  --water-bot: var(--palette-rose-water-bot);
  --water-bot-a: var(--palette-rose-water-bot-a);
}
.split__gallery:has(#split-shot-3:checked) .split__pane {   /* Notes */
  --water-top: var(--palette-violet-water-top);
  --water-mid: var(--palette-violet-water-mid);
  --water-bot: var(--palette-violet-water-bot);
  --water-bot-a: var(--palette-violet-water-bot-a);
}
.split__gallery:has(#split-shot-1:focus-visible) label[for="split-shot-1"],
.split__gallery:has(#split-shot-2:focus-visible) label[for="split-shot-2"],
.split__gallery:has(#split-shot-3:focus-visible) label[for="split-shot-3"],
.split__gallery:has(#split-shot-4:focus-visible) label[for="split-shot-4"] {
  outline: 2px solid var(--ink-light);
  outline-offset: 2px;
}

/* The glimmer lives on the title cards only, verbatim from the plugins
   pane's (B21); the row's background carries none. --frame-based sheen. */
.split__tab::after {           /* the selector title cards' glimmer layer */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 32%,
    color-mix(in srgb, var(--frame) 70%, transparent) 50%,
    transparent 68%
  );
  background-size: 250% 100%;
  background-position: 130% 0;
  animation: gm-marquee 6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .split__tab::after { animation: none; content: none; }
}

/* The copy: title, tagline, four paragraphs, closer — the owner's words,
   verbatim, in the given order and with the given breaks. */
.split__copy {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;          /* the column owns the band down to the footer rule */
  margin-bottom: -0.25rem;      /* ...as far as .deep's own padding-bottom reaches */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* vertical center, like the gallery */
  color: var(--ink-light);
}
.split__title {
  margin: 0;
  font-weight: 600;
  font-size: 1.5rem;            /* H2 (UIUX §2.4, B58): one rung down the size+weight ladder from the 32px/800 h1 */
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;           /* centered on purpose; body copy stays left */
}
.split__copy .split__tagline {
  margin: 0.35rem 0 0;          /* the oneliner's own margin-top, verbatim */
  font-weight: 400;
  font-size: 1.25rem;           /* H3 (UIUX §2.4, B58): fixed scale value; the fluid clamp is retired */
  color: var(--note);
  line-height: 1.4;
  text-align: center;           /* centered on purpose; body copy stays left */
}
.split__copy p { 
  margin: 0.9rem 0 0;     /* the row gap, the body rhythm */
  text-align: left;       /* body copy left-aligned; title/tagline/closer/CTA stay centered */
}
.split__copy .split__closer {
  margin: 1.25rem 0 0;          /* the one wider stacked break */
  font-weight: 600;
  color: var(--note);
  text-align: center;           /* centered on purpose; body copy stays left */
}

/* The app CTA lives under the closer line, sharing one shrink-to-content
   centring context; the gap is the closer's 1.25rem stacked break. */
.split__closer-zone {
  text-align: center;           /* the closer and its CTA share the column's centre */
}
.split__cta {
  margin-top: 1.25rem;          /* the closer's own stacked break */
  margin-inline: auto;          /* .cta is a flex block box, so text-align can't center it — auto margins do */
}


/* ---- Parking Lot: bottom water band. Plain stacked lines, no chrome. ---- */
.parking-lot {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 0.75rem clamp(1.5rem, 5vw, 4rem);
  background:
    linear-gradient(color-mix(in srgb, var(--water-top) 30%, transparent),
                    color-mix(in srgb, var(--water-mid) 30%, transparent) 55%,
                    color-mix(in srgb, var(--water-bot) 45%, transparent)),
    var(--deep);
  border-top: 1px solid color-mix(in srgb, var(--frame) 45%, transparent);
}
/* The divider bar (B34): The-Portfolio's plantsandrocks footer construction,
   1px wide, 3/4 the section's inner length, centred. The stretched item's
   cross size is definite (CSS Flexbox §9.8), so the 75% height resolves; the
   lot keeps space-between, so the bar floats centred. Landing page only. */
.parking-lot__divider {
  align-self: stretch;
  display: flex;
  align-items: center;
  width: 1px;
}
.parking-lot__divider::before {
  content: "";
  height: 75%;          /* 3/4 of the section's inner length */
  width: 1px;
  background: color-mix(in srgb, var(--frame) 45%, transparent);
}
.parking-lot__facts {
  font-size: 0.85rem;
  color: rgb(244 245 241 / 0.7); /* reading text keeps ≥ 4.5:1 */
}
.parking-lot__facts p { margin: 0 0 0.35em; }
.parking-lot__facts p:last-child { margin-bottom: 0; }
/* The install steps: an ordinary ordered list, kept compact so the footer
   stays one short band and the page fits one screen. */
.parking-lot__steps { margin: 0 0 0.35em; padding-left: 1.4em; }
.parking-lot__steps li { margin: 0 0 0.15em; }
.parking-lot__steps a { color: var(--note); }
.parking-lot__install-icon {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
}
.parking-lot__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  font-size: 0.85rem;
  text-align: center;
}
.parking-lot__links a { color: var(--note); text-decoration: underline; }
/* The footer CTA keeps the shared button grammar's label (§5: --ink-light
   on the --card ground, B15). */
.parking-lot__links a.cta { text-decoration: none; color: var(--ink-light); }
/* The footer credit (B44): three centred lines under the Github CTA — the
   owner's words verbatim, one per line. Reading ink (UIUX §2.3). */
.parking-lot__credits {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: center;
  color: rgb(244 245 241 / 0.7);
}
/* The trailing seat (B36): a zero-width flex child so the lot's
   space-between centres the CTA; the bar still floats centred (B34).
   Removed on phone. */
.parking-lot__spacer { width: 0; }

/* ---- Composition C: phone site (≤743px). Full-bleed, 16px gutters;
     mobile view stacks — the boards, the rule, then the copy. ---- */
@media (max-width: 743px) {
  /* On phone the two header cards STACK (B42), the bottom card overhanging
     via B29's stacked hang — the last card's -29px margin hangs it past the
     rule. Literals at logical scale. Supersedes B41's side-by-side. */
  .topband {
    --band-top: 15.46px;
    --rule-y: 93px;
    --card-pad: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0 16px;
    height: auto;
  }
  .topband__card {
    text-align: center;
    min-height: calc(77px + 29px);        /* the title card's logical size (B58) */
    padding: 12px 16px 12px;            /* the tightened B58 paddings */
    margin-bottom: 0;
    border-width: 0 2px 2px;            /* the logical 2px frame — --rs is */
    border-radius: 0 0 3px 3px;         /* 0.26 here, so pin with the band */
  }
  .topband__card:last-child {
    margin-bottom: -29px;               /* the hang: the full logical 29px
                                           past the rule */
    /* Not seated at the band's top, the lower card keeps all four sides —
       the top drops only where the band's edge is the card's fourth (B30). */
    border-top: 2px solid var(--frame);
    border-radius: 3px;
  }
  .topband__card-hit { inset: -2px; }   /* the click surface tracks the pinned
                                           frame (career.html's phone pin) */
  .topband__wordmark { font-size: 32px; font-weight: 800; }   /* the format at the phone block's */
  .topband__oneliner {                                      /* pinned logical scale (B56) */
    font-size: 16px;
    width: 280px;                                           /* the two-line wrap, logical (B42/B56) */
  }
  .deep { padding: 30px 16px 0.75rem; }   /* clears the phone cards' logical 29px overhang */
  .split { display: flex; flex-direction: column; gap: 0.75rem; }
  .split__copy { align-self: center; margin-bottom: 0; }   /* stacked: no band to own */
  .split__cta { margin-top: 1.25rem; }                      /* preserve horizontal centring */
  .split__rule { width: 33.333%; height: 1px; }
  /* Stacked, the gallery is content-sized — size containment reads the auto
     height as 0, so it's dropped; the row stays horizontal. */
  .split__gallery { container-type: normal; }
  .split__pane { margin: 0.75rem 0; }
  body:has(#topband-tab-plugins:checked) .split--plugins {
    display: flex;             /* beats the :has() grid rule's specificity */
    flex-direction: column;
    align-items: stretch;
    row-gap: 0.75rem;
  }
  /* Plugins phone composition = the landing's stack with the stage in the
     gallery's place (B38). The stage drops desktop geometry: size
     containment reads the auto height as 0, so the plate is width-governed
     (the per-plugin aspect below) and the §4.3 scale reads it. */
  .plugins__left { container-type: normal; }
  .plugins__stage { height: auto; margin-top: 0; }   /* the aspect box below
                                                        owns the height */
  body:has(#plugin-editorial-recension:checked) .plugins__stage {
    aspect-ratio: 830 / 810;
  }
  body:has(#plugin-gregorian-mode:checked) .plugins__stage {
    aspect-ratio: 830 / 682;
  }
  body:has(#plugin-the-docket:checked) .plugins__stage {
    aspect-ratio: 830 / 810;
  }
  body:has(#plugin-with-love-math:checked) .plugins__stage {
    aspect-ratio: 830 / 618;
  }
  .plugins__pane { margin: 0.75rem 0; }   /* the row stays horizontal at any
                                             width; only the floats shrink */
  /* Stacked, the copy reflows (B55, superseding B38's plate clause): the
     100cqw / 660px scale is a length division Firefox/WebKit can't resolve,
     so it clipped. It reflows at stacked width; phone may run past one
     viewport (B38, superseding PRD §1.2's phone scope and B3's assertion). */
  .plugins__copy { flex: 0 0 auto; container-type: normal;
                   align-self: stretch; margin-bottom: 0; }
  /* Phone copy's type is the owner's clamp, not B38's transform plate
     (B55); the type and CTA reset to natural sizes here. */
  .plugins__copy .split__copy {
    font-size: clamp(0.875rem, 3vw, 1rem);   /* the owner's phone type size (B55) */
    width: 100%;                              /* reflow: the stacked width, no plate */
  }
  .plugins__copy .split__copy .cta {
    font-size: 17px;
    min-height: 64px;
    padding: 3px 25px;
  }
  .parking-lot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem 16px;
  }
  .parking-lot__facts { font-size: 0.75rem; line-height: 1.45; }
  .parking-lot__facts p { margin: 0 0 0.3em; }
  /* On phone the bar lies down; the lot stacks (align-items: stretch), so
     width: auto stretches the track and ::before measures 75%. */
  .parking-lot__divider { width: auto; }
  .parking-lot__divider::before { width: 75%; height: 1px; }
  .parking-lot__links { flex-direction: column; gap: 0.6rem; align-items: center; }
  .parking-lot__links .cta { flex: none; width: 100%; text-align: center; }
  /* The trailing seat is desktop-only (B36) — the stacked footer's render is
     unchanged. */
  .parking-lot__spacer { display: none; }
}

/* Mandatory kill-switch, verbatim from design-system §8. */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }