pandorga 1.13.0 → 1.14.0

data/assets/css/base.css

@@ -378,6 +378,107 @@ html body {
       color-mix(in srgb, var(--color-tertiary) 2%, transparent) 98%);
 }
 
+/* Highlighter mark tokens */
+html:root,
+html[data-theme="light"] {
+  --mark-a: 18%;
+  --mark-b: 14%;
+  --mark-c: 5%;
+  --mark-strong-a: 28%;
+  --mark-strong-b: 22%;
+  --mark-strong-c: 8%;
+  --mark-facet-a: 14%;
+  --mark-facet-b: 11%;
+  --mark-facet-c: 4%;
+  --mark-hover-a: 30%;
+  --mark-hover-b: 24%;
+  --mark-hover-c: 9%;
+  --mark-quiet-a: 12%;
+  --mark-quiet-b: 9%;
+  --mark-quiet-c: 3%;
+  --facet-ink-mix: 82%;
+  --mk-angle: 104deg;
+  --mk-s0: 0.9%;
+  --mk-s1: 2.6%;
+  --mk-mid: 58%;
+  --mk-end: 98%;
+  --mk-h: 100%;
+  --mk-y: 50%;
+}
+
+html[data-theme="dark"] {
+  --mark-a: 14%;
+  --mark-b: 10%;
+  --mark-c: 4%;
+  --mark-strong-a: 22%;
+  --mark-strong-b: 17%;
+  --mark-strong-c: 6%;
+  --mark-facet-a: 14%;
+  --mark-facet-b: 11%;
+  --mark-facet-c: 4%;
+  --mark-hover-a: 24%;
+  --mark-hover-b: 18%;
+  --mark-hover-c: 7%;
+  --mark-quiet-a: 10%;
+  --mark-quiet-b: 7%;
+  --mark-quiet-c: 3%;
+  /* Not 100%: the YouTube red facet was 4.24:1 on its own dark mark. */
+  --facet-ink-mix: 85%;
+}
+
+/* Shared mark foundation */
+.ledger-mark,
+.ledger-chip,
+.listing-filter-chip:is(:hover, .is-active),
+.lang-pill,
+.source-facet,
+.bib-facet,
+:is(.ledger-cta--emphasis, .ledger-cta--emphasis-alt),
+:is(.detail-action, .detail-type-size-trigger, .article-related-section-pill, .listing-filter-trigger) {
+  --mark-ink: var(--color-primary);
+  --mark-1: var(--mark-a);
+  --mark-2: var(--mark-b);
+  --mark-3: var(--mark-c);
+  background: linear-gradient(var(--mk-angle), transparent var(--mk-s0), color-mix(in srgb, var(--mark-ink) var(--mark-1), transparent) var(--mk-s1), color-mix(in srgb, var(--mark-ink) var(--mark-2), transparent) var(--mk-mid), color-mix(in srgb, var(--mark-ink) var(--mark-3), transparent) var(--mk-end), transparent 100%) 0 var(--mk-y) / 100% var(--mk-h) no-repeat;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+:is(.ledger-chip, .site-rail-link, .listing-filter-chip):nth-child(3n+1) {
+  --mk-angle: 104deg;
+  --mk-s0: 0.9%;
+  --mk-s1: 2.6%;
+  --mk-mid: 58%;
+  --mk-end: 98%;
+  --mk-h: 100%;
+  --mk-y: 50%;
+}
+
+:is(.ledger-chip, .site-rail-link, .listing-filter-chip):nth-child(3n+2) {
+  --mk-angle: 97deg;
+  --mk-s0: 1.8%;
+  --mk-s1: 4%;
+  --mk-mid: 66%;
+  --mk-end: 96%;
+  --mk-h: 88%;
+  --mk-y: 85%;
+}
+
+:is(.ledger-chip, .site-rail-link, .listing-filter-chip):nth-child(3n) {
+  --mk-angle: 111deg;
+  --mk-s0: 0.4%;
+  --mk-s1: 1.8%;
+  --mk-mid: 48%;
+  --mk-end: 92%;
+  --mk-h: 90%;
+  --mk-y: 20%;
+}
+
+:is(.ledger-chip, .listing-filter-chip, .ledger-cta, .detail-action, .detail-type-size-trigger, .site-rail-link, .listing-filter-trigger):focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
 /* ── Page-level accent ────────────────────────────────────────────────
    The shared triad (theme/theme-vars-block.liquid) declares one primary per
    theme, but each section of the site reads in its own hue: Projects and
@@ -692,22 +793,31 @@ a.no-underline:active {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.35rem 0.75rem;
-  border: 1.5px solid var(--border-ink);
+  margin: 1px;
+  /* +0.5px per side keeps the box of the removed 1.5px border (with the margin). */
+  padding: calc(0.35rem + 0.5px) calc(0.75rem + 0.5px);
+  border: 0;
   border-radius: var(--radius-card);
-  background: var(--color-surface-card);
+  --mark-ink: var(--color-on-surface-variant);
+  --mark-1: var(--mark-quiet-a);
+  --mark-2: var(--mark-quiet-b);
+  --mark-3: var(--mark-quiet-c);
   color: var(--color-on-surface-variant);
   cursor: pointer;
   transition: color var(--motion-duration-fast) var(--motion-ease-default),
-    border-color var(--motion-duration-fast) var(--motion-ease-default),
     background-color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
+/* Neutral control: a quiet gray mark at rest, a deeper one on hover and
+   while its panel is open. */
 .listing-filter-trigger:hover,
 .listing-filter-trigger[aria-expanded="true"] {
-  color: var(--color-secondary);
-  border-color: var(--color-secondary);
-  background: var(--color-surface-high);
+  --mark-1: var(--mark-hover-a);
+  --mark-2: var(--mark-hover-b);
+  --mark-3: var(--mark-hover-c);
+  /* Darkened in light like the strong marks: plain secondary on the gray
+     hover mark was 3.65:1. */
+  color: color-mix(in srgb, var(--color-secondary) var(--facet-ink-mix), var(--color-on-surface));
 }
 
 .listing-filter-trigger .material-symbols-outlined {
@@ -816,9 +926,9 @@ a.no-underline:active {
   align-items: center;
   justify-content: center;
   gap: 0.35rem;
-  padding: 0.35rem 0.55rem;
-  border: 1.5px solid var(--border-ink);
-  border-radius: var(--radius-card);
+  padding: calc(0.35rem + 1.5px) calc(0.55rem + 1.5px);
+  border: 0;
+  border-radius: 0;
   background: transparent;
   color: var(--color-on-surface-variant);
   font-family: var(--font-label);
@@ -827,19 +937,22 @@ a.no-underline:active {
   letter-spacing: 0.02em;
   line-height: 1.2;
   cursor: pointer;
-  transition: border-color var(--motion-duration-fast) var(--motion-ease-default), color var(--motion-duration-fast) var(--motion-ease-default), background-color var(--motion-duration-fast) var(--motion-ease-default);
+  transition: color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
 .listing-filter-chip:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border-ink));
-  color: var(--color-primary);
+  --mark-1: var(--mark-quiet-a);
+  --mark-2: var(--mark-quiet-b);
+  --mark-3: var(--mark-quiet-c);
+  color: var(--color-on-surface);
 }
 
+/* Active filter chip uses menu-strength mark and full-contrast text. */
 .listing-filter-chip.is-active {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-  /* High-transparency accent wash — selected cue without a solid green plate. */
-  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  --mark-1: var(--mark-a);
+  --mark-2: var(--mark-b);
+  --mark-3: var(--mark-c);
+  color: var(--color-on-surface);
 }
 
 .listing-filter-swatch {
@@ -860,17 +973,23 @@ a.no-underline:active {
   font-size: var(--type-label);
   font-weight: var(--weight-label);
   letter-spacing: 0.03em;
-  padding: 0.1rem 0.4rem;
-  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  padding: calc(0.1rem + 1px) calc(0.4rem + 1px);
+  border: 0;
   white-space: nowrap;
+  --facet-ink: currentColor;
+  color: color-mix(in srgb, var(--facet-ink) var(--facet-ink-mix), var(--color-on-surface));
+  --mark-ink: currentColor;
+  --mark-1: var(--mark-facet-a);
+  --mark-2: var(--mark-facet-b);
+  --mark-3: var(--mark-facet-c);
 }
 
 .lang-pill--enus {
-  color: var(--color-primary);
+  --facet-ink: var(--color-primary);
 }
 
 .lang-pill--ptbr {
-  color: var(--color-secondary);
+  --facet-ink: var(--color-secondary);
 }
 
 .ledger-chip-row {
@@ -888,77 +1007,32 @@ a.no-underline:active {
   font-weight: var(--weight-label);
   letter-spacing: 0.03em;
   padding: 0.15rem 0.45rem;
-  /* Tags carry the page's accent rather than a neutral grey. Both values mix
-     `--color-primary`, which `.page-accent--*` rebinds per page, so a chip is
-     blue on Projects, green on Articles and the CV, ochre on Rascunhos with
-     no per-page rule anywhere. The fill stays mostly surface so a row of
-     chips reads as metadata and not as a row of buttons; the ink carries
-     most of the hue, which is what makes the tag legible as a tag.
-     Note this is `.ledger-chip` only: the page-header tag line (the CV's
-     "Engineering Leadership. Team Building…") is a separate
-     `data-content-header-tags` span and is deliberately left alone. */
-  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface-high));
+  /* Tags use a borderless felt-pen mark in the page accent, rebound via
+     --color-primary by .page-accent--*. No inset ring or border is applied. */
   color: color-mix(in srgb, var(--color-primary) 82%, var(--color-on-surface));
   text-decoration: none;
-  border-radius: var(--radius-card);
-  /* The hover hairline arrives as an inset ring rather than a border, and is
-     declared transparent here so it has something to transition from. This is
-     not the shadow the system forbids — nothing is offset, blurred or spread,
-     so it draws a 1px line on the chip's own edge, exactly where a border
-     would sit. A real border would be the idiom, but it would have to be
-     present at rest to avoid a 2px jump under the pointer, and the padding
-     compensation that costs only lands exactly at integer device pixel
-     ratios: at 1.75 the browser snaps the border to 0.571px and the chip
-     quietly loses most of a pixel on both axes. The ring takes no space at
-     any ratio, so the resting chip keeps its size, its fill and its square
-     corners. */
-  box-shadow: inset 0 0 0 1px transparent;
-  transition: color var(--motion-duration-fast) var(--motion-ease-default), background-color var(--motion-duration-fast) var(--motion-ease-default), box-shadow var(--motion-duration-fast) var(--motion-ease-default), border-color var(--motion-duration-fast) var(--motion-ease-default);
-}
-
-/* Hover reads `.ledger-card:hover` — one tonal step plus an accent-warmed
-   hairline — at chip scale.
-
-   The step cannot be a ladder rung: the chip's resting fill is already the
-   ladder's top one. What it used to do instead was borrow a rung from the
-   other surface family (`surfaceHigh` → `surfaceContainerHigh`), which is
-   the defect DESIGN.md records under *Two surface families name the same
-   colours* — in dark the two are the same value to the byte, so the hover
-   measured 1.000 : 1 and only the text changed, and in light they are close
-   enough to have read the same way. Tinting the resting fill with the page
-   accent instead is a real step in both palettes — down on paper, up on the
-   dark canvas — and stays right whichever way the light ladder is pointed,
-   which the borrowed rung did not. 8% is the value
-   `.listing-filter-chip.is-active` already uses for an accent-tinted fill.
-
-   The hairline carries the rest, at 35% accent over plain `--border-gentle`
-   rather than the card's 40% over `--border-gentle-hover`. A line drawn
-   around something this small is a far larger share of its ink than the same
-   line around a card, so the quieter mix is the proportionate one. */
+  border: 0;
+  border-radius: 0;
+  transition: color var(--motion-duration-fast) var(--motion-ease-default);
+}
+
+a.ledger-chip {
+  color: color-mix(in srgb, var(--color-primary) 82%, var(--color-on-surface));
+}
+
+/* Hover deepens the mark strength. */
 a.ledger-chip:hover {
+  --mark-1: var(--mark-hover-a);
+  --mark-2: var(--mark-hover-b);
+  --mark-3: var(--mark-hover-c);
   color: var(--color-on-surface);
-  /* Resting fill is 16% accent in light; hover must clear that. */
-  background: color-mix(in srgb, var(--color-primary) 28%, var(--color-surface-high));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 45%, var(--border-gentle));
-  /* No-op for the filled chip, which has no border. It matters on the sources
-     facets, the one place that outlines the chip instead of filling it: the
-     ring would otherwise be drawn just inside that outline and the two
-     hairlines would read as one 2px line. Handing the edge to the ring keeps
-     the hover at a single line there too, and the fill that page expects on
-     hover still arrives. */
   border-color: transparent;
 }
 
 [data-theme="dark"] a.ledger-chip {
-  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-high));
   color: color-mix(in srgb, var(--color-primary) 78%, var(--color-on-surface));
 }
 
-[data-theme="dark"] a.ledger-chip:hover {
-  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-high));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, var(--border-gentle));
-}
-
 /* Dates live here. The chips and language pills inside the strip set their
    own uppercase, so the strip itself leaves case alone — running small caps
    over a date is heavier than the date deserves. */
@@ -998,8 +1072,8 @@ a.ledger-chip:hover {
 }
 
 /* Text CTAs carry a gentle accent underline so the clickable cue is not the
-   same gesture as the marker wash on titles. Emphasis buttons keep a box
-   fill instead — underline would fight the border. */
+   same gesture as the marker wash on titles. Emphasis buttons carry a
+   strong mark instead. */
 .ledger-cta:not(.ledger-cta--emphasis):not(.ledger-cta--emphasis-alt)>span:not(.ledger-cta-arrow):not(.ledger-cta-icon) {
   text-decoration: underline;
   text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
@@ -1049,63 +1123,47 @@ a.ledger-chip:hover {
    Those set real button padding (0.85rem vertical, --space-lg horizontal) and a
    solid filled background for the primary case. `.ledger-cta--emphasis` is the
    one or two truly primary actions per page (e.g. hero "Full Curriculum
-   Vitæ"): still a `.ledger-cta`, just with tight padding and a tinted fill
-   instead of a heavy solid block, so it reads as a real button — with color
-   and contrast — without becoming a bulky box. Reuse this instead of adding
+   Vitæ"): still a `.ledger-cta`, just with tight padding and a strong
+   highlighter mark instead of a tinted box or a heavy solid block, so it
+   reads as a real button without becoming a bulky box; hover fills solid. Reuse this instead of adding
    another one-off CTA class. `--emphasis-alt` swaps the hue to secondary, for
    a second hero-level action (e.g. "Contacts") that needs to read as a
    distinct button next to the primary one rather than a duplicate of it. */
 .ledger-cta--emphasis {
+  margin: 1px;
   padding: 0.35rem 0.85rem;
-  border: 1px solid var(--color-primary);
+  border: 0;
   border-radius: var(--radius-card);
-  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-background));
+  --mark-ink: var(--color-primary);
+  --mark-1: var(--mark-strong-a);
+  --mark-2: var(--mark-strong-b);
+  --mark-3: var(--mark-strong-c);
+  color: color-mix(in srgb, var(--color-primary) var(--facet-ink-mix), var(--color-on-surface));
   transition: color var(--motion-duration-fast) var(--motion-ease-default),
-    border-color var(--motion-duration-fast) var(--motion-ease-default),
     background-color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
 .ledger-cta--emphasis:hover {
   color: var(--color-on-primary, var(--color-surface));
-  border-color: var(--color-link-hover);
   background: var(--color-primary);
 }
 
 .ledger-cta--emphasis-alt {
+  margin: 1px;
   padding: 0.35rem 0.85rem;
-  border: 1px solid var(--color-secondary);
+  border: 0;
   border-radius: var(--radius-card);
-  background: color-mix(in srgb, var(--color-secondary) 22%, var(--color-background));
-  color: var(--color-secondary);
+  --mark-ink: var(--color-secondary);
+  --mark-1: var(--mark-strong-a);
+  --mark-2: var(--mark-strong-b);
+  --mark-3: var(--mark-strong-c);
+  color: color-mix(in srgb, var(--color-secondary) var(--facet-ink-mix), var(--color-on-surface));
   transition: color var(--motion-duration-fast) var(--motion-ease-default),
-    border-color var(--motion-duration-fast) var(--motion-ease-default),
     background-color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
-[data-theme="dark"] .ledger-cta--emphasis {
-  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-background));
-}
-
-[data-theme="dark"] .ledger-cta--emphasis-alt {
-  background: color-mix(in srgb, var(--color-secondary) 18%, var(--color-background));
-}
-
-/* Dark resting mixes sit after the shared :hover fill and match its
-   specificity (attr + class vs class + :hover), so without these the
-   primary button kept the 14% wash under the pointer while the ink
-   stepped to on-primary — dark text on a near-black hero. Alt escaped
-   because its :hover rule already follows the dark rest. */
-[data-theme="dark"] .ledger-cta--emphasis:hover {
-  background: var(--color-primary);
-}
-
-[data-theme="dark"] .ledger-cta--emphasis-alt:hover {
-  background: var(--color-secondary);
-}
-
 .ledger-cta--emphasis-alt:hover {
   color: var(--color-on-secondary, var(--color-surface));
-  border-color: var(--color-secondary);
   background: var(--color-secondary);
 }
 

data/assets/css/ledger/bibliography.css

@@ -122,38 +122,43 @@
   display: inline-flex;
   align-items: center;
   height: var(--bib-facet-height);
-  padding: 0 var(--space-sm);
-  border: 1.5px solid color-mix(in srgb, currentColor 40%, var(--border-ink));
+  padding: 0 calc(var(--space-sm) + 1.5px);
+  border: 0;
   border-radius: var(--radius-card);
-  background: transparent;
   white-space: nowrap;
   font-family: var(--font-label);
   font-size: var(--type-label);
   font-weight: var(--weight-label);
   letter-spacing: 0.03em;
   line-height: 1;
-  color: var(--color-on-surface-variant);
+  --facet-ink: var(--color-on-surface-variant);
+  color: color-mix(in srgb, var(--facet-ink) var(--facet-ink-mix), var(--color-on-surface));
+  --mark-ink: currentColor;
+  --mark-1: var(--mark-facet-a);
+  --mark-2: var(--mark-facet-b);
+  --mark-3: var(--mark-facet-c);
 }
 
 .bib-facet--article {
-  color: var(--color-primary);
+  --facet-ink: var(--color-primary);
 }
 
 .bib-facet--book {
-  color: var(--color-secondary);
+  --facet-ink: var(--color-secondary);
 }
 
 .bib-facet--report {
-  color: var(--color-tertiary);
+  --facet-ink: var(--color-tertiary);
 }
 
 .bib-facet--techreport {
-  color: var(--color-tertiary);
+  --facet-ink: var(--color-tertiary);
 }
 
 .bib-facet--news {
-  /* Hardcoded salmon colors for now, since punctual */
-  color: #b7756e;
+  /* Hardcoded salmon colors for now, since punctual. Pre-mixed toward the
+     text color: plain salmon stayed under 4.5:1 on its mark in light. */
+  --facet-ink: color-mix(in srgb, #b7756e 85%, var(--color-on-surface));
 }
 
 .bib-key {

data/assets/css/ledger/chrome.css

@@ -91,22 +91,13 @@
   box-shadow: none;
   background: linear-gradient(104deg,
       transparent 0.9%,
-      color-mix(in srgb, var(--color-primary) 18%, transparent) 2.4%,
-      color-mix(in srgb, var(--color-primary) 14%, transparent) 58%,
-      color-mix(in srgb, var(--color-primary) 5%, transparent) 98%);
+      color-mix(in srgb, var(--color-primary) var(--mark-a), transparent) 2.4%,
+      color-mix(in srgb, var(--color-primary) var(--mark-b), transparent) 58%,
+      color-mix(in srgb, var(--color-primary) var(--mark-c), transparent) 98%);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
 }
 
-[data-theme="dark"] .site-rail-link.is-active {
-  background: linear-gradient(104deg,
-      transparent 0.9%,
-      color-mix(in srgb, var(--color-primary) 14%, transparent) 2.4%,
-      color-mix(in srgb, var(--color-primary) 10%, transparent) 58%,
-      color-mix(in srgb, var(--color-primary) 4%, transparent) 98%);
-  box-shadow: none;
-}
-
 /* The rail needs room for six labels before it earns its place; below that
    the Explore menu carries the same links. */
 @media (min-width: 1024px) {

data/assets/css/ledger/cv.css

@@ -802,6 +802,27 @@ html[data-theme="light"] .cv-product {
   border: 1.5px solid var(--border-ink);
   border-radius: var(--radius-card);
   overflow: hidden;
+  touch-action: pan-x pan-y;
+}
+
+#timeline-chart-wrapper:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+#timeline-chart {
+  cursor: grab;
+}
+
+#timeline-chart.is-dragging,
+#timeline-chart-wrapper.is-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.cv-timeline-hint {
+  margin: 0;
+  color: var(--color-on-surface-variant);
 }
 
 /* ── Dossier note and contact call to action ──

data/assets/css/ledger/detail.css

@@ -115,14 +115,21 @@ a.back-link .material-symbols-outlined {
   border-top: 1px solid var(--border-gentle-faint);
 }
 
+/* Back, Share, Cite, PDF and the reading-size step are neutral controls: a
+   quiet gray highlighter mark at rest, a deeper one on hover (or while the
+   size menu is open), with the margin standing in for the removed border. */
 .detail-action {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
+  margin: 1px;
   padding: 0.35rem 0.85rem;
-  background: var(--color-surface-card);
-  border: 1px solid var(--border-ink);
+  border: 0;
   border-radius: var(--radius-pill);
+  --mark-ink: var(--color-on-surface-variant);
+  --mark-1: var(--mark-quiet-a);
+  --mark-2: var(--mark-quiet-b);
+  --mark-3: var(--mark-quiet-c);
   font-family: var(--font-label);
   font-size: var(--type-label-lg);
   font-weight: var(--weight-label);
@@ -131,14 +138,14 @@ a.back-link .material-symbols-outlined {
   text-decoration: none !important;
   cursor: pointer;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-default),
-    border-color var(--motion-duration-fast) var(--motion-ease-default),
     color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
 .detail-action:hover {
-  background: var(--color-surface-high);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  --mark-1: var(--mark-hover-a);
+  --mark-2: var(--mark-hover-b);
+  --mark-3: var(--mark-hover-c);
+  color: color-mix(in srgb, var(--color-primary) var(--facet-ink-mix), var(--color-on-surface));
 }
 
 .detail-action .material-symbols-outlined {
@@ -165,10 +172,14 @@ a.back-link .material-symbols-outlined {
   display: inline-flex;
   align-items: center;
   gap: 0.2rem;
+  margin: 1px;
   padding: 0.35rem 0.55rem 0.35rem 0.7rem;
-  background: var(--color-surface-card);
-  border: 1px solid var(--border-ink);
+  border: 0;
   border-radius: var(--radius-pill);
+  --mark-ink: var(--color-on-surface-variant);
+  --mark-1: var(--mark-quiet-a);
+  --mark-2: var(--mark-quiet-b);
+  --mark-3: var(--mark-quiet-c);
   font-family: var(--font-label);
   font-size: var(--type-label-lg);
   font-weight: var(--weight-label);
@@ -177,20 +188,20 @@ a.back-link .material-symbols-outlined {
   color: var(--color-on-surface);
   cursor: pointer;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-default),
-    border-color var(--motion-duration-fast) var(--motion-ease-default),
     color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
 .detail-type-size-trigger:hover,
 .detail-type-size-trigger[aria-expanded="true"] {
-  background: var(--color-surface-high);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  --mark-1: var(--mark-hover-a);
+  --mark-2: var(--mark-hover-b);
+  --mark-3: var(--mark-hover-c);
+  color: color-mix(in srgb, var(--color-primary) var(--facet-ink-mix), var(--color-on-surface));
 }
 
 .detail-type-size-trigger:focus-visible {
-  outline: 1px solid var(--color-primary);
-  outline-offset: 1px;
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
 }
 
 .detail-type-size-trigger .material-symbols-outlined {
@@ -1279,7 +1290,10 @@ nav.text-page-nav:not(:has(a)) {
   padding: 0.2rem 0.7rem;
   min-height: 1.65rem;
   border-radius: 0;
-  background: color-mix(in srgb, var(--color-on-surface-variant) 18%, transparent);
+  --mark-ink: var(--color-on-surface-variant);
+  --mark-1: var(--mark-quiet-a);
+  --mark-2: var(--mark-quiet-b);
+  --mark-3: var(--mark-quiet-c);
   color: var(--color-on-surface-variant);
   font-family: var(--font-label);
   font-size: var(--type-label);

data/assets/css/ledger/home.css

@@ -813,16 +813,20 @@ html[data-theme="light"] .home-hero-plate {
   border-top: 1px solid var(--border-gentle-divider);
 }
 
+/* Solid mark: opaque under the label, fades only in the trailing padding;
+   hover fills solid. */
 .home-featured-foot .home-featured-cta {
   margin-left: auto;
   padding: 0.35rem var(--space-md);
-  background: var(--color-primary);
+  background: linear-gradient(104deg, transparent 0.9%, var(--color-primary) 2.4%, var(--color-primary) calc(100% - 0.8rem), color-mix(in srgb, var(--color-primary) 40%, transparent) 100%);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
   color: var(--color-on-primary);
   font-weight: var(--weight-label);
 }
 
 .home-featured-foot .home-featured-cta:hover {
-  background: color-mix(in srgb, var(--color-primary) 85%, var(--color-on-surface));
+  background: var(--color-primary);
   color: var(--color-on-primary);
   text-decoration: none;
 }