@font-face { font-family: "AJC Mono"; src: url("../assets/roboto-mono-regular.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400 }
@font-face { font-family: "AJC Mono"; src: url("../assets/roboto-mono-700.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 700 }
:root { color-scheme: dark; --theme-bg: 210deg 22% 10%; --theme-bg-elevated: 213deg 22% 14%; --theme-bg-soft: 212deg 19% 18%; --theme-link: 334deg 78% 76%; --theme-link-soft: 334deg 56% 58%; --theme-text: 210deg 18% 82%; --theme-text-muted: 215deg 14% 66%; --theme-accent: 160deg 67% 47%; --theme-accent-2: 0deg 0% 96%; --theme-border: 159deg 36% 26%; --theme-quote: 98deg 100% 87%; --theme-shadow: 220deg 46% 4% }
html { scroll-behavior: smooth; scroll-padding-top: 5rem }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { background:
  radial-gradient(circle at top left, hsl(var(--theme-link) / 0.14), transparent 30%),
  radial-gradient(circle at top right, hsl(var(--theme-accent) / 0.14), transparent 32%),
  linear-gradient(180deg, hsl(var(--theme-bg-soft) / 0.25), transparent 18rem),
  hsl(var(--theme-bg) / 1);
  color: hsl(var(--theme-text) / 1) }
:before, :after { --tw-content: "" }
:disabled { cursor: default }
*, :before, :after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / .5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: }
*, :before, :after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb }
[hidden] { display: none }
a { color:inherit;text-decoration:inherit }
a:hover { background-image:none;--tw-text-opacity: 1;color:hsl(var(--theme-link) / var(--tw-text-opacity));text-decoration-line:none }
:focus-visible { outline: 2px solid hsl(var(--theme-accent) / 1); outline-offset: 2px }
b,strong { font-weight: bolder }
blockquote { margin: 0; padding-left: 2em; padding-right: 0; color: hsl(var(--theme-quote) / 1) }
body { margin: 0; line-height: inherit }
button, [role=button] { cursor: pointer }
h1 {
    max-width: 48ch;
}
h2, h3, h4, h5, h6, p, pre { margin: 0 }
code,pre { font-family: "AJC Mono", ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em }
img, svg { display: block }
img, video { max-width: 100%; height: auto }
small { font-size: 80% }
summary { display: list-item }
table { text-indent: 0; border-color: inherit; border-collapse: collapse }
html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; -o-tab-size: 4; tab-size: 4; font-family: "AJC Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent }
ol, ul { list-style: none; margin: 0; padding: 0 }

.-inset-x-4 { left: -1rem; right: -1rem }
.-me-16 { margin-inline-end:-4rem}
.absolute { position: absolute }
.align-top { vertical-align: top }
.antialiased { -webkit-font-smoothing: antialiased }
.aspect-h-9 { --tw-aspect-h: 9 }
.aspect-w-16 { position: relative; padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%); --tw-aspect-w: 16 }
.aspect-w-16>* { position: absolute; height: 100%; width: 100%; inset: 0 }
.bg-none { background-image: none }
.bg-bgColor { --tw-bg-opacity: 1; background-color: hsl(var(--theme-bg) / var(--tw-bg-opacity)) }
.bg-bgColor\/\[\.85\] { background-color: hsl(var(--theme-bg) / .85) }
.bg-quote\/10 { background-color: hsl(var(--theme-quote) / .1) }
.bg-\[\#1d1f21\] { --tw-bg-opacity: 1; background-color: rgb(29 31 33 / var(--tw-bg-opacity)) }
.bg-zinc-200 { --tw-bg-opacity: 1; background-color: rgb(228 228 231 / var(--tw-bg-opacity)) }
.bottom-8 { bottom: 2rem }
.border-2 { border-width: 2px }
.border-b { border-bottom-width: 1px }
.border-t { border-top-width: 1px }
.border-\[\#2bbc89\] { --tw-border-opacity: 1; border-color: rgb(43 188 137 / var(--tw-border-opacity)) }
.border-transparent { border-color: transparent }
.hover\:border-custom-pink:hover { --tw-border-opacity: 1; border-color: hsl(var(--theme-link) / var(--tw-border-opacity)) }
.break-words { overflow-wrap: break-word }
.cactus-link { background-size: 100% 6px; background-position: bottom; background-repeat: repeat-x; background-image: linear-gradient(transparent, transparent 5px, hsl(var(--theme-text)) 5px, hsl(var(--theme-text))) }
.cactus-link:hover{background-image:linear-gradient(transparent,transparent 4px,hsl(var(--theme-link)) 4px,hsl(var(--theme-link)))}
.col-span-1 { grid-column: span 1 / span 1 }
.data-\[show\=true\]\:translate-y-0[data-show=true] { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) }
.data-\[show\=true\]\:opacity-100[data-show=true] { opacity: 1 }
.duration-300 { transition-duration: .3s }
.end-4 { inset-inline-end: 1rem }
.flex { display: flex }
.flex-col { flex-direction: column }
.flex-grow { flex-grow: 1 }
.flex-wrap { flex-wrap: wrap }
.flex-1 { flex: 1 1 0% }
.fixed { position: fixed }
.font-normal { font-weight: 400 }
.font-semibold { font-weight: 600 }
.font-bold { font-weight: 700 }
.font-mono { font-family: "AJC Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace }
.gap-4 { gap: 1rem }
.gap-x-2 { column-gap: .5rem }
.gap-x-3 { column-gap: .75rem }
.gap-x-4 { column-gap: 1rem }
.gap-x-10 { column-gap: 2.5rem }
.gap-y-2 { row-gap: .5rem }
.gap-y-4 { row-gap: 1rem }
.grid { display: grid }
.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
.group .menu-open .group-\[\.menu-open\]\:z-50 { z-index: 50 }
.group .menu-open .group-\[\.menu-open\]\:flex { display: flex }
.h-6 { height: 1.5rem }
.h-10 { height: 2.5rem }
.h-full { height: 100% }
.w-6 { width: 1.5rem }
.w-10 { width: 2.5rem }
.w-full { width: 100% }
.hidden { display: none }
.italic { font-style: italic }
.items-center { align-items: center }
.items-end { align-items: flex-end }
.inline-block { display: inline-block }
.justify-between { justify-content: space-between }
.justify-center { justify-content: center }
.leading-snug { line-height: 1.375 }
.min-h-screen { min-height: 100vh }
.min-w-\[160px\] { min-width: 160px }
.m-2 { margin: .5rem }
.max-w-4xl { max-width: 56rem }
.max-w-5xl { max-width: 64rem }
.max-w-6xl { max-width: 72rem }
.max-w-fit { max-width: fit-content }
.mb-2 { margin-bottom: .5rem }
.mb-4 { margin-bottom: 1rem }
.mb-6 { margin-bottom: 1.5rem }
.mb-8 { margin-bottom: 2rem }
.mb-16 { margin-bottom: 4rem }
.me-0 { margin-inline-end: 0px }
.me-0\.5{margin-inline-end:.125rem }
.me-1 { margin-inline-end:.25rem }
.mr-8 { margin-right: 2rem }
.ml-4 { margin-left: 1rem }
.ms-1 { margin-inline-start:.25rem}
.ms-2 { margin-inline-start:.5rem }
.mt-2 { margin-top: .5rem }
.mt-3 { margin-top: .75rem }
.mt-4 { margin-top: 1rem }
.mt-8 { margin-top: 2rem }
.mt-auto { margin-top: auto }
.mx-4 { margin-left: 1rem; margin-right: 1rem }
.mx-auto { margin-left: auto; margin-right: auto }
.my-4 { margin-top: 1rem; margin-bottom: 1rem }
.no-underline { text-decoration-line: none }
.object-cover { -o-object-fit: cover; object-fit: cover }
.opacity-0 { opacity: 0 }
.order-2 { order: 2 }
.p-1 { padding: .25rem }
.p-10 { padding: 2.5rem }
.p-2 { padding: .5rem }
.pb-4 { padding-bottom: 1rem }
.pt-16 { padding-top: 4rem }
.pt-20 { padding-top: 5rem }
.px-4 { padding-left: 1rem; padding-right: 1rem }
.px-16 { padding-left: 4rem; padding-right: 4rem }
.py-4 { padding-top: 1rem; padding-bottom: 1rem }
.quote { margin:0; padding-left: 2em; padding-right: 2em; color: hsl(var(--theme-quote) / 1) }
.relative { position: relative }
.rounded { border-radius: .25rem }
.rounded-full { border-radius: 9999px }
.rounded-lg { border-radius: .5rem }
.rounded-md { border-radius: .375rem }
.scroll-smooth { scroll-behavior: smooth }
.space-y-4>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)) }
.space-y-6>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0 }
.sticky { position: sticky }
.text-\[\#c9cacc\] { --tw-text-opacity: 1; color: rgb(201 202 204 / var(--tw-text-opacity)) }
.text-accent { --tw-text-opacity: 1; color: hsl(var(--theme-accent) / var(--tw-text-opacity)) }
.text-accent-2 { --tw-text-opacity: 1; color: hsl(var(--theme-accent-2) / var(--tw-text-opacity)) }
.text-gray-350 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)) }
.text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)) }
.text-quote { --tw-text-opacity: 1; color: hsl(var(--theme-quote) / var(--tw-text-opacity)) }
.text-textColor { --tw-text-opacity: 1; color: hsl(var(--theme-text) / var(--tw-text-opacity)) }
.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)) }
.text-center { text-align: center }
.text-xs { font-size: .75rem; line-height: 1rem }
.text-sm { font-size: .875rem; line-height: 1.25rem }
.text-base { font-size: 1rem; line-height: 1.5rem }
.text-lg { font-size: 1.125rem; line-height: 1.75rem }
.text-xl { font-size: 1.25rem; line-height: 1.75rem }
.text-2xl { font-size: 1.5rem; line-height: 2rem }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem }
.text-5xl { font-size: 3rem; line-height: 1 }
.top-10 { top: 2.5rem }
.top-20 { top: 5rem }
.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) }
.translate-y-28 { --tw-translate-y: 7rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s }
.underline { text-decoration-line: underline }
@media (prefers-reduced-motion) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important } }
@media (prefers-reduced-motion: no-preference) { .motion-safe\:hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) }} 
@media (min-width: 640px) { .sm\:px-8 { padding-left: 2rem; padding-right: 2rem } .sm\:static { position: static } .sm\:end-8 { inset-inline-end: 2rem }.sm\:z-auto { z-index: auto }.sm\:-ms-4 { margin-inline-start: -1rem }.sm\:mb-2 { margin-bottom: .5rem }.sm\:me-4 { margin-inline-end: 1rem }.sm\:mt-1 { margin-top: .25rem }.sm\:flex { display: flex }.sm\:h-12 { height: 3rem }.sm\:w-12 { width: 3rem }.sm\:flex-row { flex-direction: row }.sm\:flex-col { flex-direction: column }.sm\:items-center { align-items: center }.sm\:justify-between { justify-content: space-between }.sm\:space-y-2>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(.5rem * var(--tw-space-y-reverse)) }.sm\:divide-x>:not([hidden])~:not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))) }.sm\:divide-dashed>:not([hidden])~:not([hidden]) { border-style: dashed }.sm\:divide-accent>:not([hidden])~:not([hidden]) { --tw-divide-opacity: 1; border-color: hsl(var(--theme-accent) / var(--tw-divide-opacity)) }.sm\:rounded-none { border-radius: 0 }.sm\:bg-transparent { background-color: transparent }.sm\:py-0 { padding-top: 0; padding-bottom: 0 }.sm\:ps-\[4\.5rem\] { padding-inline-start: 4.5rem } .sm\:text-xs { font-size: .75rem; line-height: 1rem } .sm\:shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .sm\:backdrop-blur-none { --tw-backdrop-blur: blur(0); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) } .sm\:hover\:text-accent:hover { --tw-text-opacity: 1; color: hsl(var(--theme-accent) / var(--tw-text-opacity)) } .sm\:hover\:text-link:hover { --tw-text-opacity: 1; color: hsl(var(--theme-link) / var(--tw-text-opacity)) } .sm\:hover\:underline:hover { text-decoration-line: underline } } 
@media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .md\:text-\[5rem\] { font-size: 5rem } } 
@media (min-width: 1024px) { .lg\:block { display: block } .lg\:flex { display: flex } .lg\:w-2\/3 { width: 66 .666667% } .lg\:items-start { align-items: flex-start } .lg\:px-16 { padding-left: 4rem; padding-right: 4rem } } :is( .dark .dark\:bg-zinc-700) { --tw-bg-opacity: 1; background-color: rgb(63 63 70 / var(--tw-bg-opacity)) }

::selection {
  background: hsl(var(--theme-link) / 0.4);
  color: hsl(var(--theme-accent-2) / 1);
}

.page-shell {
  position: relative;
}

.section-title {
  letter-spacing: .01em;
}

.site-header {
  position: sticky;
  top: 1rem;
  z-index: 40;
  margin-bottom: 2.5rem;
  border: 1px solid hsl(var(--theme-border) / 0.7);
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
  background: hsl(var(--theme-bg-elevated) / 0.84);
  box-shadow: 0 22px 60px -30px hsl(var(--theme-shadow) / 0.92);
  backdrop-filter: blur(18px);
}

.site-header-container {
  min-width: fit-content;
}

.site-brand {
  letter-spacing: .04em;
  text-shadow: 0 0 18px hsl(var(--theme-accent) / 0.22);
}

.site-nav {
  flex: 1 1 auto;
  gap: .35rem;
}

.site-nav-link {
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  background: hsl(var(--theme-bg-soft) / 0.74);
  border-color: hsl(var(--theme-border) / 0.75);
  color: hsl(var(--theme-accent-2) / 1);
}

.site-nav-link[aria-current="page"] {
  background: linear-gradient(135deg, hsl(var(--theme-accent) / 0.18), hsl(var(--theme-link) / 0.12));
  border-color: hsl(var(--theme-accent) / 0.35);
  color: hsl(var(--theme-accent-2) / 1);
}

.site-footer {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px dashed hsl(var(--theme-border) / 0.55);
}

.collection-grid {
  gap: 1.5rem;
}

.collection-card {
  margin: 0;
}

.collection-card-body {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid hsl(var(--theme-border) / 0.58);
  border-radius: 1.3rem;
  background:
    linear-gradient(160deg, hsl(var(--theme-bg-elevated) / 0.95), hsl(var(--theme-bg-soft) / 0.7)),
    hsl(var(--theme-bg-elevated) / 1);
  box-shadow: 0 20px 48px -34px hsl(var(--theme-shadow) / 0.96);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.collection-card-body:hover,
.collection-card-body:focus-within {
  transform: translateY(-3px);
  border-color: hsl(var(--theme-accent) / 0.6);
  box-shadow: 0 24px 60px -36px hsl(var(--theme-shadow) / 1);
}

.collection-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, hsl(var(--theme-link) / 0.18), transparent 35%),
    hsl(var(--theme-bg-soft) / 1);
}

.collection-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease;
}

.collection-card-body:hover .collection-card-media img,
.collection-card-body:focus-within .collection-card-media img {
  transform: scale(1.025);
  filter: saturate(1.04);
}

.collection-card-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .85rem;
  padding: 1.15rem 1.15rem 1.35rem;
}

.collection-card-title {
  margin: 0;
  max-width: none;
  font-size: 1.1rem;
  line-height: 1.4;
}

.formatted-date {
  min-width: 9.5rem;
  color: hsl(var(--theme-text-muted) / 1);
}

.preview-title {
  margin-bottom: 0;
}

.preview-desc {
  margin: 0;
  color: hsl(var(--theme-text) / 0.9);
  line-height: 1.8;
}

.preview-cover-image {
  margin-top: 0;
}

.content-layout {
  gap: 2rem;
}

.article-shell {
  min-width: 0;
}

.content-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--theme-border) / 0.72);
  border-radius: 1.5rem;
  padding: clamp(1.15rem, 3vw, 2rem);
  background:
    radial-gradient(circle at top right, hsl(var(--theme-link) / 0.14), transparent 32%),
    linear-gradient(155deg, hsl(var(--theme-bg-elevated) / 0.97), hsl(var(--theme-bg-soft) / 0.82));
  box-shadow: 0 22px 58px -36px hsl(var(--theme-shadow) / 1);
}

.content-hero::before {
  content: "";
  position: absolute;
  inset: auto -3rem 55% auto;
  width: 14rem;
  height: 14rem;
  border-radius: 999px;
  background: radial-gradient(circle, hsl(var(--theme-accent) / 0.24), transparent 70%);
  pointer-events: none;
}

.content-cover {
  width: 100%;
  border: 1px solid hsl(var(--theme-border) / 0.68);
  border-radius: 1rem;
  box-shadow: 0 18px 38px -28px hsl(var(--theme-shadow) / 0.95);
}

.content-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
}

.content-kicker,
.content-channel {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid hsl(var(--theme-border) / 0.74);
  border-radius: 999px;
  padding: .4rem .82rem;
  font-size: .73rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(var(--theme-accent-2) / 0.92);
  background: hsl(var(--theme-bg) / 0.58);
}

.content-channel {
  background: hsl(var(--theme-bg-soft) / 0.6);
}

.content-title {
  position: relative;
  z-index: 1;
  max-width: 36ch;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}

.content-meta-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 0;
}

.content-meta-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1px solid hsl(var(--theme-border) / 0.64);
  border-radius: 999px;
  padding: .5rem .8rem;
  background: hsl(var(--theme-bg) / 0.56);
  color: hsl(var(--theme-accent-2) / 0.88);
}

.content-meta-pill a {
  background-image: none;
}

.content-meta-pill-accent {
  background: hsl(var(--theme-accent) / 0.11);
  color: hsl(var(--theme-quote) / 1);
}

.content-summary-card {
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  max-width: 78ch;
  border: 1px dashed hsl(var(--theme-border) / 0.82);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  background: hsl(var(--theme-bg) / 0.42);
  color: hsl(var(--theme-text) / 0.96);
  line-height: 1.9;
}

.content-body {
  border: 1px solid hsl(var(--theme-border) / 0.45);
  border-radius: 1.4rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(180deg, hsl(var(--theme-bg-elevated) / 0.62), hsl(var(--theme-bg) / 0.46));
  box-shadow: 0 18px 42px -32px hsl(var(--theme-shadow) / 0.94);
}

.toc-mobile {
  display: block;
  margin-top: 1.25rem;
  border: 1px solid hsl(var(--theme-border) / 0.6);
  border-radius: 1rem;
  background: hsl(var(--theme-bg-elevated) / 0.72);
}

.toc-mobile[open] {
  box-shadow: 0 18px 40px -32px hsl(var(--theme-shadow) / 1);
}

.toc-mobile-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  cursor: pointer;
  list-style: none;
}

.toc-mobile-summary::-webkit-details-marker {
  display: none;
}

.toc-mobile-active {
  color: hsl(var(--theme-text-muted) / 1);
  font-size: .75rem;
}

.toc-mobile-panel {
  border-top: 1px solid hsl(var(--theme-border) / 0.45);
  padding: 0 1rem 1rem;
}

.toc-aside {
  width: 16.5rem;
  min-width: 15rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding-left: 1.25rem;
  padding-right: .15rem;
  border-left: 1px dashed hsl(var(--theme-border) / 0.72);
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--theme-accent) / 0.3) transparent;
}

.toc-aside {
  display: none;
}

.toc-title {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--theme-accent-2) / 0.9);
}

.toc-list {
  list-style: none;
  padding: 0;
}

.toc-item {
  margin-top: 0.5rem;
}

.toc-item-child {
  margin-top: 0.25rem;
  padding-left: 0.75rem;
}

.toc-link {
  display: block;
  font-size: 0.78rem;
  line-height: 1.5;
  color: hsl(var(--theme-text) / 0.66);
  text-decoration: none;
  background-image: none;
  padding: 0.2rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.65rem;
  margin-left: -1px;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.toc-link:hover {
  color: hsl(var(--theme-accent-2) / 1);
  border-left-color: hsl(var(--theme-link) / 0.5);
  background-color: hsl(var(--theme-bg-soft) / 0.32);
  background-image: none;
}

.toc-link-branch-active {
  color: hsl(var(--theme-accent-2) / 0.92);
}

.toc-link-active {
  color: hsl(var(--theme-accent) / 1);
  border-left-color: hsl(var(--theme-accent) / 1);
  background-color: hsl(var(--theme-accent) / 0.1);
}

.toc-link-active:hover {
  color: hsl(var(--theme-accent) / 1);
  border-left-color: hsl(var(--theme-accent) / 1);
}

.toc-sublist {
  list-style: none;
  padding: 0;
}

/* Skip link - visible on focus */
.sr-only:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 9999;
  border-radius: .8rem;
  background: hsl(var(--theme-bg-elevated) / 1);
  color: hsl(var(--theme-accent-2) / 1);
  font-size: 1rem;
  outline: 2px solid hsl(var(--theme-accent) / 1);
  box-shadow: 0 18px 40px -30px hsl(var(--theme-shadow) / 1);
}

/* Mobile-friendly padding for header */
@media (max-width: 639px) {
  .sm\:ps-\[4\.5rem\] { padding-inline-start: 0 }
  .site-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem; }
  .site-nav { width: 100%; justify-content: flex-start; }
  .site-nav-link { padding: 0.35rem 0.65rem; font-size: 0.8rem; }
}

@media (max-width: 1023px) {
  .content-layout {
    display: block;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .collection-card-body, .collection-card-media img, .site-nav-link, .toc-link, .transition, .transition-all { transition: none; }
  .collection-card-body:hover, .collection-card-body:focus-within { transform: none; }
  .collection-card-body:hover .collection-card-media img { transform: none; filter: none; }
}

@media (min-width: 1024px) {
  .toc-mobile {
    display: none;
  }

  .toc-aside {
    display: block;
  }
}