/* batman.codes. Same family as the AnimateReactNative, Catastif and Stash sites: paper and ink
   tokens, floating pill bars, two-tone headings, a mono kicker per section, one accent per project. */
:root {
  --paper: #F6F6F3; --raised: #FFFFFF; --ink: #131315; --ink-2: #5A5A61; --ink-3: #8D8D94; --on-ink: #FFFFFF;
  --line: rgba(0, 0, 0, .09); --fill: #ECECE8;
  --shadow: 0 30px 60px -32px rgba(20, 20, 30, .3), 0 1px 3px rgba(20, 20, 30, .05);
  --glass: rgba(255, 255, 255, .5); --glass-rim: rgba(255, 255, 255, .75); --glass-edge: rgba(0, 0, 0, .07);
  --glass-shadow: 0 12px 32px -14px rgba(20, 20, 30, .28), 0 2px 6px -2px rgba(20, 20, 30, .08);
  --blue: #2F7BF6; --blue-w: #DCE9FF; --green: #2E9C63; --green-w: #D9F2E3;
  --lilac: #7C5CE0; --lilac-w: #E9E2FB; --peach: #E0712E; --peach-w: #FCE6D8;
  --yellow: #B98A12; --yellow-w: #FBF0CC; --pink: #D2558A; --pink-w: #FBE0EB; --teal: #2E9C9C; --teal-w: #D8F1F0;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0B0B0C; --raised: #161618; --ink: #F2F2F0; --ink-2: #ADADB3; --ink-3: #77777E; --on-ink: #131315;
  --line: rgba(255, 255, 255, .1); --fill: #1D1D20;
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .3);
  --glass: rgba(34, 34, 38, .46); --glass-rim: rgba(255, 255, 255, .16); --glass-edge: rgba(255, 255, 255, .07);
  --glass-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --blue: #6AA5F0; --blue-w: #1A2A42; --green: #5CC184; --green-w: #1B3526;
  --lilac: #AE8DF0; --lilac-w: #2A2240; --peach: #F29C62; --peach-w: #3D2719;
  --yellow: #E3B940; --yellow-w: #383016; --pink: #EE84AC; --pink-w: #3C1F2E; --teal: #52C2C2; --teal-w: #173535;
  color-scheme: dark;
}
.a-blue { --c: var(--blue); --w: var(--blue-w); } .a-green { --c: var(--green); --w: var(--green-w); }
.a-lilac { --c: var(--lilac); --w: var(--lilac-w); } .a-peach { --c: var(--peach); --w: var(--peach-w); }
.a-yellow { --c: var(--yellow); --w: var(--yellow-w); } .a-pink { --c: var(--pink); --w: var(--pink-w); }
.a-teal { --c: var(--teal); --w: var(--teal-w); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--blue) 28%, transparent); }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
.narrow { max-width: 760px; }
.mono { font-family: var(--mono); }
.dim { color: var(--ink-3); }
/* Going from page to page: the old one lifts away as it fades, the new one rises into place. The bars stay where they are.
   Only navigations carry the "page" type, so the theme switch and the filters keep their plain crossfade. */
@view-transition { navigation: auto; types: page; }
@keyframes page-out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(28px); } }
html:active-view-transition-type(page)::view-transition-old(root) { animation: page-out .18s cubic-bezier(.4, 0, 1, 1) both; mix-blend-mode: normal; }
html:active-view-transition-type(page)::view-transition-new(root) { animation: page-in .45s cubic-bezier(.2, .8, .2, 1) .1s both; mix-blend-mode: normal; }

/* Bars: the site on the left, the theme switch in a bar of its own. Both 54px tall. */
.nav { position: sticky; top: 12px; z-index: 50; margin: 12px auto 0; max-width: 1120px; padding: 0 16px; display: flex; justify-content: space-between; gap: 10px; }
/* Glass: what is behind the bar is blurred and brightened, the top edge catches the light, the bottom edge sits in shade.
   The transition name is on each bar, not on .nav: an ancestor that has one cuts the blur off from the page behind it. */
.bar { position: relative; display: flex; align-items: center; min-height: 54px; border-radius: 999px; border: 1px solid var(--glass-edge);
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.06); backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-edge), inset 0 0 14px -4px var(--glass-rim), var(--glass-shadow); }
.bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-rim), transparent 46%); opacity: .35; }
.bar > * { position: relative; }
.bar-main { view-transition-name: nav-main; }
.bar-theme { view-transition-name: nav-theme; }
.bar-main { gap: 28px; padding: 7px 24px 7px 8px; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 14px var(--mono); letter-spacing: -.01em; }
.brand img { width: 38px; height: 38px; border-radius: 50%; }
.brand i { font-style: normal; color: var(--ink-3); }
.links { display: flex; gap: 22px; font: 13px var(--mono); color: var(--ink-2); }
.links a { padding: 6px 0; transition: color .2s; }
.links a:hover, .links a[aria-current] { color: var(--ink); }
.bar-theme { padding: 7px; }
.theme { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: background .2s, color .2s; }
.theme:hover { background: var(--fill); color: var(--ink); }
.theme svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .moon, :root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
@media (max-width: 520px) { .brand span { display: none; } .bar-main { gap: 16px; padding-right: 18px; } .links { gap: 16px; } }

/* Type */
h1, h2 { font-weight: 650; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(44px, 8.2vw, 92px); }
h2 { font-size: clamp(32px, 5vw, 54px); letter-spacing: -.04em; line-height: 1.04; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
h1 span, h2 span { color: var(--ink-3); }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 620px; margin-top: 20px; text-wrap: pretty; }
.kicker { display: inline-flex; align-items: center; gap: 9px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink-3)); }
main > section { padding-top: 110px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Hero */
.hero { padding-top: 64px; text-align: center; }
.hero .lead { margin-inline: auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); font: 500 13px var(--mono); color: var(--ink-2); margin-bottom: 26px; transition: border-color .2s, color .2s; }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 46px auto 0; max-width: 860px; border-radius: 24px; border: 1px solid var(--line); background: var(--raised); box-shadow: var(--shadow); }
.stats li { padding: 22px 12px; text-align: center; }
.stats li + li { border-left: 1px solid var(--line); }
.stats b { display: block; font-size: clamp(26px, 3.6vw, 38px); font-weight: 650; letter-spacing: -.04em; line-height: 1.1; }
.stats span { font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { .stats li { padding: 20px 8px; } .stats span { font-size: 10.5px; letter-spacing: .04em; } }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats li:nth-child(3) { border-left: 0; } .stats li:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 380px) { .stats li { padding: 18px 4px; } .stats span { font-size: 9.5px; letter-spacing: .02em; } }

/* Social: round buttons that fill with ink on hover, like the arrow on a card. The mark changes colour in one step, mid-fade. */
.social { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--raised); color: var(--ink-2);
  transition: background .3s, border-color .3s, color 0s .08s, transform .4s var(--ease); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social a:hover { background: var(--ink); border-color: transparent; color: var(--on-ink); transform: translateY(-3px); }
.social a:active { transform: scale(.94); }

/* Filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }
.filter { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); font: 500 13px var(--mono); color: var(--ink-2); transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.filter:hover { color: var(--ink); border-color: var(--ink-3); }
.filter:active { transform: scale(.96); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.filter sup { font-size: 10px; opacity: .6; margin-left: 4px; vertical-align: 3px; }

/* Project cards */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.icon { width: 64px; height: 64px; border-radius: 22.5%; flex: none; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); object-fit: cover; }
.icon.glyph { display: grid; place-items: center; background: var(--tile, var(--ink)); color: var(--tile-ink, var(--on-ink)); }
.icon.glyph svg { width: 56%; height: 56%; }
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feat { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 28px; border-radius: 30px; background: var(--w); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feat-top { display: flex; align-items: center; gap: 14px; }
.feat-top h3 { font-size: 20px; }
.feat-top small { display: block; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.go { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent); transition: background .3s, color 0s .08s; }
/* The arrow switches colour in one step while the circle is mid-fade. Fading both makes them meet at the same grey, and the arrow blinks out. */
.go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
a:hover > .go, a:hover .feat-top .go { background: var(--ink); color: var(--on-ink); }
a:hover > .go svg, a:hover .feat-top .go svg { transform: rotate(45deg); }
.feat-line { margin-top: auto; padding-top: 40px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 650; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.feat-line span { color: color-mix(in srgb, var(--ink) 42%, transparent); }
.feat-about { margin-top: 12px; font-size: 16px; color: var(--ink-2); max-width: 460px; text-wrap: pretty; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.tags span { padding: 4px 10px; border-radius: 999px; font: 500 11.5px var(--mono); color: var(--ink-2); background: color-mix(in srgb, var(--ink) 7%, transparent); white-space: nowrap; }
.tags .hot { background: var(--c); color: var(--paper); }
.rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.row { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 24px; border: 1px solid var(--line); background: var(--raised); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.row:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.row .icon { width: 56px; height: 56px; }
.row-t { min-width: 0; flex: 1; }
.row-t p { font-size: 15px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; text-wrap: pretty; }
.row .tags { margin-top: 8px; }
.row .go { width: 34px; height: 34px; flex: none; }
@media (max-width: 800px) { .feats, .rows { grid-template-columns: 1fr; } .feat { min-height: 300px; } }

/* Plain lists: open source, talks */
.list { border-radius: 24px; border: 1px solid var(--line); background: var(--raised); overflow: hidden; }
.list a { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto; align-items: baseline; gap: 18px; padding: 15px 20px; transition: background .2s; }
.list a + a { border-top: 1px solid var(--line); }
.list a:hover { background: var(--fill); }
.list b { font: 500 14px var(--mono); display: flex; align-items: center; gap: 10px; min-width: 0; }
.list b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink-3)); flex: none; }
.list span { font-size: 15px; color: var(--ink-2); }
.list em { font: 500 13px var(--mono); font-style: normal; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 700px) { .list a { grid-template-columns: 1fr auto; } .list span { grid-column: 1 / -1; grid-row: 2; margin-top: -10px; } }
.two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 800px) { .two { grid-template-columns: 1fr; } }
.before { margin-top: 26px; font: 13px var(--mono); color: var(--ink-3); text-align: center; }
.before b { color: var(--ink-2); font-weight: 500; }

/* Text pages: now, about */
.page-head { padding-top: 64px; text-align: center; }
.page-head img { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 22px; }
.prose { padding-top: 56px; }
.prose h2 { font-size: 28px; letter-spacing: -.03em; margin: 52px 0 14px; }
.prose p, .prose li { color: var(--ink-2); font-size: 18px; text-wrap: pretty; }
.prose p + p { margin-top: 14px; }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose :is(p, li) a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.prose ul.dots li { position: relative; padding-left: 22px; margin-top: 10px; }
.prose ul.dots li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink-3)); }
.prose blockquote { margin-top: 30px; padding: 22px 26px; border-radius: 22px; background: var(--fill); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { padding: 20px; border-radius: 22px; background: var(--w, var(--fill)); }
.tile b { display: block; font-size: 34px; font-weight: 650; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); }
.tile span { font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.when { font: 500 13px var(--mono); color: var(--ink-3); }

/* Footer */
footer { margin-top: 130px; border-top: 1px solid var(--line); padding: 46px 0 60px; }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.foot h3 { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.foot li { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.foot li a:hover { color: var(--ink); }
.foot .motto { font: 500 14px/1.6 var(--mono); color: var(--ink-2); max-width: 280px; }
.foot .motto i { font-style: normal; color: var(--c, var(--peach)); }
.foot .follow a { display: inline-flex; align-items: center; gap: 9px; }
.foot .follow svg { width: 15px; height: 15px; fill: currentColor; color: var(--ink-3); transition: color .2s; }
.foot .follow a:hover svg { color: var(--ink); }
.foot small { display: block; margin-top: 14px; font: 12px var(--mono); color: var(--ink-3); }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}

[hidden] { display: none !important; }

/* Icons that carry their own shape (and a dark twin) are left as drawn. */
.icon.shaped { border-radius: 0; box-shadow: none; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .22)); }
.icon.on-dark, :root[data-theme="dark"] .icon.on-light { display: none; }
:root[data-theme="dark"] .icon.on-dark { display: block; }
.list span i { font-style: normal; color: var(--ink-3); }
.prose [id] { scroll-margin-top: 90px; }
@media (min-width: 701px) { .list.short a { grid-template-columns: 130px minmax(0, 1fr) auto; } }

/* An app's own page */
.app-hero { padding-top: 34px; }
.back { display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--mono); color: var(--ink-3); transition: color .2s; }
.back:hover { color: var(--ink); }
.back svg, .site svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back svg { transition: transform .3s var(--ease); }
.back:hover svg { transform: translateX(-3px); }
.app-id { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 34px 0 26px; }
.app-id .icon { width: 96px; height: 96px; }
.app-id b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.app-id small { display: block; margin-top: 2px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.app-hero h1 { font-size: clamp(42px, 7vw, 80px); }
.get { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.badge { display: block; border-radius: 9px; transition: transform .3s var(--ease), opacity .2s; }
.badge:hover { transform: translateY(-2px); }
.badge:active { transform: scale(.97); }
.badge img { height: 48px; width: auto; }
:root[data-theme="dark"] .badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.soon, .site { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; }
.soon { background: var(--ink); color: var(--on-ink); }
.soon i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.site { border: 1px solid var(--line); background: var(--raised); color: var(--ink); transition: border-color .2s, transform .3s var(--ease); }
.site:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.site svg { color: var(--ink-3); transition: transform .3s var(--ease); }
.site:hover svg { transform: translate(2px, -2px); }
.facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font: 500 12.5px var(--mono); color: var(--ink-3); }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }

/* Screenshots: one row that scrolls sideways, on the app's own colour. */
main > .shots-wrap { padding-top: 64px; }
.shots { display: flex; gap: 16px; overflow-x: auto; padding: 34px max(16px, calc((100vw - 1088px) / 2)); background: var(--w); scroll-snap-type: x proximity; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shots figure { flex: none; scroll-snap-align: center; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); }
.shots img { height: min(560px, 68vh); width: auto; }
.shots .on-dark, :root[data-theme="dark"] .shots .on-light, .show .on-dark, :root[data-theme="dark"] .show .on-light { display: none; }
:root[data-theme="dark"] .shots .on-dark, :root[data-theme="dark"] .show .on-dark { display: block; }
main > section:has(.points) { padding-top: 56px; }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.point { padding: 24px; border-radius: 24px; border: 1px solid var(--line); background: var(--raised); }
.point h3::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-bottom: 14px; }
.point p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); text-wrap: pretty; }

/* What the app does: each card is a piece of its interface, on the colour its own site gives it. */
main > section:has(.shows) { padding-top: 72px; }
.shows { column-count: 2; column-gap: 16px; }
.show { break-inside: avoid; margin-bottom: 16px; padding: 22px 22px 26px; border-radius: 30px; background: var(--w); }
.show.wide { column-span: all; }
.show figure { margin-bottom: 22px; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); }
.show figure img { width: 100%; height: auto; }
.show .kicker { color: var(--c); margin-bottom: 8px; }
.show h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 650; letter-spacing: -.035em; line-height: 1.08; }
.show h3 span { color: color-mix(in srgb, var(--ink) 42%, transparent); }
.show p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); max-width: 520px; text-wrap: pretty; }
.more-on { margin-top: 12px; text-align: center; font: 13px var(--mono); color: var(--ink-3); }
.more-on a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.more-on a:hover { color: var(--ink); }
@media (max-width: 800px) { .shows { column-count: 1; } .points { grid-template-columns: 1fr; } .shots img { height: min(460px, 62vh); } }