/* Post theme engine. An element with data-pt (set by PUB.applyTheme or PUB.themeAttrs in themes.js)
   recolours the accent for everything inside it, and data-pat / data-fig / data-head pick the
   pattern, the figure style and the headline style. Light and dark mode each get their own accent. */

[data-pt] {
  --accent: var(--t-l);
  --accent-soft: color-mix(in srgb, var(--t-l) 10%, transparent);
  --pc: color-mix(in srgb, var(--t-l) 20%, transparent);
}
:root[data-theme="dark"][data-pt], :root[data-theme="dark"] [data-pt] {
  --accent: var(--t-d);
  --accent-soft: color-mix(in srgb, var(--t-d) 15%, transparent);
  --pc: color-mix(in srgb, var(--t-d) 22%, transparent);
}

/* ---- patterns: drawn in --pc, applied wherever .t-pat sits inside a themed element ---- */
[data-pat="dots"] .t-art::before, .t-art[data-pat="dots"]::before, [data-pat="dots"] .t-pat, .t-pat[data-pat="dots"], [data-pat="dots"].t-tile { background-image: radial-gradient(var(--pc) 1.3px, transparent 1.6px); background-size: 14px 14px; }
[data-pat="grid"] .t-art::before, .t-art[data-pat="grid"]::before, [data-pat="grid"] .t-pat, .t-pat[data-pat="grid"], [data-pat="grid"].t-tile { background-image: linear-gradient(var(--pc) 1px, transparent 1px), linear-gradient(90deg, var(--pc) 1px, transparent 1px); background-size: 18px 18px; }
[data-pat="blueprint"] .t-art::before, .t-art[data-pat="blueprint"]::before, [data-pat="blueprint"] .t-pat, .t-pat[data-pat="blueprint"], [data-pat="blueprint"].t-tile { background-image: linear-gradient(var(--pc) 1.4px, transparent 1.4px), linear-gradient(90deg, var(--pc) 1.4px, transparent 1.4px), linear-gradient(color-mix(in srgb, var(--pc) 50%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pc) 50%, transparent) 1px, transparent 1px); background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px; }
[data-pat="lines"] .t-art::before, .t-art[data-pat="lines"]::before, [data-pat="lines"] .t-pat, .t-pat[data-pat="lines"], [data-pat="lines"].t-tile { background-image: repeating-linear-gradient(0deg, var(--pc) 0 1px, transparent 1px 16px); }
[data-pat="stripes"] .t-art::before, .t-art[data-pat="stripes"]::before, [data-pat="stripes"] .t-pat, .t-pat[data-pat="stripes"], [data-pat="stripes"].t-tile { background-image: repeating-linear-gradient(90deg, var(--pc) 0 6px, transparent 6px 22px); }
[data-pat="diag"] .t-art::before, .t-art[data-pat="diag"]::before, [data-pat="diag"] .t-pat, .t-pat[data-pat="diag"], [data-pat="diag"].t-tile { background-image: repeating-linear-gradient(45deg, var(--pc) 0 1.5px, transparent 1.5px 12px); }
[data-pat="rings"] .t-art::before, .t-art[data-pat="rings"]::before, [data-pat="rings"] .t-pat, .t-pat[data-pat="rings"], [data-pat="rings"].t-tile { background-image: repeating-radial-gradient(circle at 100% 0, var(--pc) 0 1.5px, transparent 1.5px 14px); }
[data-pat="waves"] .t-art::before, .t-art[data-pat="waves"]::before, [data-pat="waves"] .t-pat, .t-pat[data-pat="waves"], [data-pat="waves"].t-tile { background-image: radial-gradient(circle at 50% 0, transparent 7px, var(--pc) 7px 8.5px, transparent 8.5px), radial-gradient(circle at 50% 100%, transparent 7px, var(--pc) 7px 8.5px, transparent 8.5px); background-size: 20px 12px; background-position: 0 0, 10px 6px; }
[data-pat="checker"] .t-art::before, .t-art[data-pat="checker"]::before, [data-pat="checker"] .t-pat, .t-pat[data-pat="checker"], [data-pat="checker"].t-tile { background-image: conic-gradient(var(--pc) 25%, transparent 0 50%, var(--pc) 0 75%, transparent 0); background-size: 20px 20px; }
[data-pat="zigzag"] .t-art::before, .t-art[data-pat="zigzag"]::before, [data-pat="zigzag"] .t-pat, .t-pat[data-pat="zigzag"], [data-pat="zigzag"].t-tile { background-image: linear-gradient(135deg, var(--pc) 25%, transparent 25%), linear-gradient(225deg, var(--pc) 25%, transparent 25%); background-size: 16px 16px; background-position: 0 0, 0 0; }

[data-pat="cross"] .t-art::before, .t-art[data-pat="cross"]::before, [data-pat="cross"] .t-pat, .t-pat[data-pat="cross"], [data-pat="cross"].t-tile { background-image: radial-gradient(var(--pc) 1.6px, transparent 2px), repeating-linear-gradient(45deg, transparent 0 17px, var(--pc) 17px 18px); background-size: 9px 9px, auto; }

/* ---- list tile: a square in the theme colour with its pattern and motif ---- */
.t-tile { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background-color: var(--accent-soft); color: var(--accent); overflow: hidden; flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.t-tile svg { position: relative; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; background: var(--card); border-radius: 50%; padding: 7px; box-sizing: content-box; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 14px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.t-tile.lg { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
.t-tile.lg svg { width: 34px; height: 34px; padding: 12px; }
.t-tile.sm { width: 40px; height: 40px; border-radius: 10px; }
.t-tile.sm svg { width: 18px; height: 18px; padding: 5px; }

/* ---- headline styles ---- */
[data-head="accent"] .t-h1 em { color: var(--accent); }
[data-head="marker"] .t-h1 em { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 24%, transparent) 58% 92%, transparent 92%); padding: 0 .06em; }
[data-head="caps"] .t-kicker .tag { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-head="caps"] .t-h1 em { color: var(--accent); font-style: normal; font-weight: 400; }

/* ---- figure styles: the panels in the margins and above each section ---- */
[data-pt] .sv-fig { position: relative; overflow: hidden; }
[data-pt] .sv-fig::after { content: ""; position: absolute; right: 0; top: 0; width: 96px; height: 70px; pointer-events: none; opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 100% 0, #000 20%, transparent 70%); }
[data-pat="dots"] .sv-fig::after { background: radial-gradient(var(--pc) 1.3px, transparent 1.6px) 0 0 / 10px 10px; }
[data-pat="grid"] .sv-fig::after, [data-pat="blueprint"] .sv-fig::after { background: linear-gradient(var(--pc) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, var(--pc) 1px, transparent 1px) 0 0 / 12px 12px; }
[data-pat="lines"] .sv-fig::after { background: repeating-linear-gradient(0deg, var(--pc) 0 1px, transparent 1px 9px); }
[data-pat="stripes"] .sv-fig::after { background: repeating-linear-gradient(90deg, var(--pc) 0 4px, transparent 4px 13px); }
[data-pat="diag"] .sv-fig::after, [data-pat="zigzag"] .sv-fig::after { background: repeating-linear-gradient(45deg, var(--pc) 0 1.5px, transparent 1.5px 9px); }
[data-pat="rings"] .sv-fig::after, [data-pat="waves"] .sv-fig::after { background: repeating-radial-gradient(circle at 100% 0, var(--pc) 0 1.5px, transparent 1.5px 10px); }
[data-pat="checker"] .sv-fig::after { background: conic-gradient(var(--pc) 25%, transparent 0 50%, var(--pc) 0 75%, transparent 0) 0 0 / 14px 14px; }
[data-pat="cross"] .sv-fig::after { background: radial-gradient(var(--pc) 1.5px, transparent 1.9px) 0 0 / 8px 8px; }

[data-fig="tinted"] .sv-fig { background: color-mix(in srgb, var(--accent) 7%, var(--card)); border-color: color-mix(in srgb, var(--accent) 30%, var(--rule)); }
[data-fig="tinted"] .sv-eyebrow { color: var(--accent); }
[data-fig="outline"] .sv-fig { background: var(--paper); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--rule)); box-shadow: none; }
[data-fig="outline"] .sv-node { border-style: dashed; }
[data-fig="ink"] .sv-fig { --card: #17161a; --paper: #222127; --paper-2: #2b2a31; --ink: #f0ece2; --ink-2: #c4bfb3; --ink-3: #9a958a; --rule: #38363d;
  --accent: var(--t-d); --accent-soft: color-mix(in srgb, var(--t-d) 18%, transparent); --pc: color-mix(in srgb, var(--t-d) 30%, transparent); --accent-ink: #111;
  background: var(--card); color: var(--ink); border-color: #000; }
:root[data-theme="dark"] [data-fig="ink"] .sv-fig { --card: #23222a; --paper: #2c2b33; border-color: #3a3940; }
[data-fig="ink"] .sv-cta { background: var(--accent); color: var(--accent-ink); }
[data-fig="card"] .sv-fig { border-top: 3px solid var(--accent); }

/* the call-to-action card always takes the theme accent on hover */
[data-pt] .sv-cta:hover { background: var(--accent); color: var(--accent-ink); }

/* ---- post cards: each post wears its theme in lists ---- */
.pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcard { min-width: 0; }
.pcard > a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.pcard > a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--accent) 70%, transparent); color: inherit; }
.pc-art { position: relative; min-height: 150px; background-color: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--rule)); padding: 18px; display: flex; align-items: flex-end; overflow: hidden; }
.pc-motif { position: absolute; right: 14px; top: 14px; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 22px -12px var(--accent); transform: rotate(-4deg); transition: transform .4s var(--ease); }
.pcard > a:hover .pc-motif { transform: rotate(0) scale(1.05); }
.pc-motif svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; position: relative; max-width: calc(100% - 70px); }
.pc-steps li { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule)); border-radius: 999px; padding: 4px 10px 4px 6px; font: 500 12px var(--sans); color: var(--ink); position: relative; }
.pc-steps li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; border-top: 1.5px dashed var(--accent); }
.pc-steps svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-meta { display: flex; gap: 10px; align-items: center; font: 12px var(--mono); color: var(--ink-3); }
.pc-body h3 { font: 400 23px/1.18 var(--serif); letter-spacing: -.01em; margin: 0; }
.pc-body h3 em { font-weight: 300; }
.pc-body p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.pc-go { margin-top: auto; padding-top: 6px; font: 600 13px var(--sans); color: var(--accent); }
.pcard.big { grid-column: 1 / -1; }
.pcard.big > a { display: grid; grid-template-columns: 1.1fr 1fr; }
.pcard.big .pc-art { min-height: 300px; border-bottom: 0; border-right: 1px solid color-mix(in srgb, var(--accent) 22%, var(--rule)); align-items: center; padding: 28px; }
.pcard.big .pc-motif { width: 76px; height: 76px; border-radius: 22px; right: 24px; top: 24px; }
.pcard.big .pc-motif svg { width: 36px; height: 36px; }
.pcard.big .pc-steps { flex-direction: column; gap: 14px; }
.pcard.big .pc-steps li { font-size: 14px; padding: 7px 14px 7px 9px; align-self: flex-start; }
.pcard.big .pc-steps li + li::before { left: 18px; top: -14px; width: 0; height: 14px; border-top: 0; border-left: 1.5px dashed var(--accent); }
.pcard.big .pc-body { padding: 30px 32px; justify-content: center; }
.pcard.big .pc-body h3 { font-size: clamp(28px, 3vw, 40px); }
.pcard.big .pc-body p { font-size: 17px; }
.pcard.hide { display: none; }
@media (max-width: 980px) { .pcards { grid-template-columns: 1fr 1fr; } .pcard.big > a { grid-template-columns: 1fr; } .pcard.big .pc-art { border-right: 0; border-bottom: 1px solid var(--rule); min-height: 220px; } }
@media (max-width: 620px) { .pcards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pcard > a, .pc-motif { transition: none; } }

/* =====================================================================
   Surfaces. .t-art is a themed picture area (card art, article hero, library card).
   Its tone decides the surface, so lists alternate pale, deep, vivid and paper
   in both light and dark mode. Layers: tone background, pattern (::before), grain (::after).
   ===================================================================== */
.t-art { position: relative; isolation: isolate; overflow: hidden; }
.t-art::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.t-art::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* tint: pale in light mode, deep and glowing in dark mode */
[data-tone="tint"] .t-art, .t-art[data-tone="tint"] {
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--t-2l) 26%, transparent), transparent 60%),
              radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--t-l) 26%, transparent), transparent 65%),
              color-mix(in srgb, var(--t-l) 8%, #fbf9f4); --pc: color-mix(in srgb, var(--t-l) 26%, transparent); }
:root[data-theme="dark"] [data-tone="tint"] .t-art, :root[data-theme="dark"] .t-art[data-tone="tint"] {
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--t-2d) 30%, transparent), transparent 60%),
              radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--t-d) 26%, transparent), transparent 65%),
              color-mix(in srgb, var(--t-d) 12%, #141418); --pc: color-mix(in srgb, var(--t-d) 30%, transparent); }

/* deep: rich and dark in both modes, so it stands out on a light page */
[data-tone="deep"] .t-art, .t-art[data-tone="deep"] {
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--t-2l) 55%, transparent), transparent 60%),
              radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--t-l) 70%, transparent), transparent 70%),
              color-mix(in srgb, var(--t-l) 45%, #07070c); --pc: rgba(255,255,255,.13); color: #fff; }

/* bright: a vivid two-colour gradient in both modes, so it stands out on a dark page */
[data-tone="bright"] .t-art, .t-art[data-tone="bright"] {
  background: radial-gradient(80% 100% at 85% 10%, rgba(255,255,255,.35), transparent 55%),
              linear-gradient(135deg, var(--t-l), color-mix(in srgb, var(--t-2l) 85%, #fff)); --pc: rgba(255,255,255,.22); color: #fff; }
:root[data-theme="dark"] [data-tone="bright"] .t-art, :root[data-theme="dark"] .t-art[data-tone="bright"] {
  background: radial-gradient(80% 100% at 85% 10%, rgba(255,255,255,.22), transparent 55%), linear-gradient(135deg, var(--t-l), var(--t-2l)); }

/* paper: warm printed paper with the pattern inked in the accent, in both modes */
[data-tone="paper"] .t-art, .t-art[data-tone="paper"] {
  background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--t-l) 14%, transparent), transparent 60%), #f1e9d8;
  --pc: color-mix(in srgb, var(--t-l) 32%, transparent); color: #1b1914; box-shadow: inset 0 0 0 1px rgba(60,40,10,.06); }
:root[data-theme="dark"] [data-tone="paper"] .t-art, :root[data-theme="dark"] .t-art[data-tone="paper"] { background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--t-l) 18%, transparent), transparent 60%), #e6dcc6; }

/* ---- raised motif tile: lit from the top left, with a coloured shadow and a plate behind ---- */
.pc-motif { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, #fff) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, #000) 100%) !important;
  color: #fff !important; transform: rotate(-6deg);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,0,0,.22), 0 16px 26px -12px color-mix(in srgb, var(--accent) 80%, #000), 0 3px 6px rgba(0,0,0,.14) !important; }
.pc-motif::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transform: translate(7px, 7px) rotate(9deg); z-index: -1;
  background: color-mix(in srgb, var(--t-2l) 70%, #fff); opacity: .55; }
.pc-motif svg { filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.3)); stroke-width: 1.9 !important; }
[data-tone="deep"] .pc-motif, [data-tone="bright"] .pc-motif { background: linear-gradient(160deg, #fff 0%, #f1efe9 60%, #dcd8ce 100%) !important; color: var(--t-l) !important;
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -4px 8px rgba(0,0,0,.12), 0 18px 30px -12px rgba(0,0,0,.55), 0 3px 6px rgba(0,0,0,.18) !important; }
[data-tone="deep"] .pc-motif svg, [data-tone="bright"] .pc-motif svg { filter: none; }
[data-tone="deep"] .pc-motif::before, [data-tone="bright"] .pc-motif::before { background: rgba(255,255,255,.35); }

/* step pills sit on the art; connectors follow the surface */
[data-tone="deep"] .pc-steps li + li::before, [data-tone="bright"] .pc-steps li + li::before { border-color: rgba(255,255,255,.75) !important; }
.pc-steps li { box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); }
[data-tone="paper"] .pc-steps li { background: #fffdf7; color: #1b1914; }

/* raised icon tiles inside figures */
[data-pt] .sv-ico { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 6%, var(--card)), color-mix(in srgb, var(--accent) 20%, var(--card)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 5px 10px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
:root[data-theme="dark"] [data-pt] .sv-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 5px 12px -6px rgba(0,0,0,.6); }
[data-pt] .sv-ico.warn { background: linear-gradient(150deg, color-mix(in srgb, var(--warn) 6%, var(--card)), color-mix(in srgb, var(--warn) 20%, var(--card))); }
[data-pt] .sv-node .sv-n { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 40%, var(--ink)), var(--ink)); box-shadow: 0 3px 6px -2px rgba(0,0,0,.4); }
[data-pt] .sv-node.on .sv-n { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent)); }

/* cards: a coloured edge in every tone */
.pcard > a { border-color: color-mix(in srgb, var(--accent) 28%, var(--rule)); }
.pc-art { border-bottom: 0 !important; }
.pc-body { border-top: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--card)); }

/* =====================================================================
   The article wears its theme: a full-width hero in the same surface as its card,
   a tinted page, and coloured section numbers. Light text on deep and bright heroes.
   ===================================================================== */
html[data-pt] body { background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.hero { padding: 6px 0 34px; margin-bottom: 30px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--rule)); }
[data-tone="deep"] .hero, [data-tone="bright"] .hero { --ink: #fff; --ink-2: rgba(255,255,255,.88); --ink-3: rgba(255,255,255,.72); --rule: rgba(255,255,255,.28); }
[data-tone="deep"] .hero .t-h1 em, [data-tone="bright"] .hero .t-h1 em { color: #fff !important; background: none !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-decoration-thickness: 3px; text-underline-offset: .12em; }
[data-tone="deep"] .hero .tag, [data-tone="bright"] .hero .tag { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); }
[data-tone="deep"] .hero .toc li::before, [data-tone="bright"] .hero .toc li::before, [data-tone="deep"] .hero .toc a:hover, [data-tone="bright"] .hero .toc a:hover { color: #fff; }
[data-tone="deep"] .hero .by .av, [data-tone="bright"] .hero .by .av { background: #fff; color: #111; }
[data-tone="paper"] .hero { --ink: #1b1914; --ink-2: #45403a; --ink-3: #6b655a; --rule: rgba(60,40,10,.18); --card: #fffbf2; --paper: #f7f0e2; --paper-2: #ece3d0; --accent: var(--t-l); --accent-ink: #fff; }
.hero .glance { box-shadow: 0 18px 40px -26px rgba(0,0,0,.5); }
.hero .h-motif { position: absolute; right: max(16px, calc(50% - 600px)); bottom: 36px; width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; z-index: 0; }
.hero .h-motif svg { width: 50px; height: 50px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
html[data-pt] .card h2 .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-size: 12px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 50%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 14px -8px var(--accent); }
html[data-pt] .card { border-top: 3px solid var(--accent); }

/* the list card's picture grows into the article hero when the browser supports page transitions */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }