* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.blog-page {
  --site-bg: #f3f0e8;
  --site-surface: #fcfaf5;
  --site-surface-muted: #ebe7dd;
  --site-ink: #15181d;
  --site-ink-secondary: rgba(21, 24, 29, .64);
  --site-ink-tertiary: rgba(21, 24, 29, .4);
  --site-line: rgba(21, 24, 29, .13);
  --site-line-strong: rgba(21, 24, 29, .24);
  --site-accent: #647f25;
  --site-accent-soft: #e5edcc;
  --site-violet: #d94b30;
  --site-coral: #5866d4;
  --site-radius-sm: 0;
  --site-radius-md: 0;
  --site-radius-lg: 0;
  --site-shadow-card: 0 18px 54px rgba(21, 24, 29, .09);
  --blog-pointer-x: 58vw;
  --blog-pointer-y: 38vh;
  --blog-spectrum-x: 0px;
  --blog-spectrum-y: 0px;
  --blog-spectrum-tilt: 0deg;
  --blog-hero-rotate-x: 0deg;
  --blog-hero-rotate-y: 0deg;
  min-width: 320px;
  margin: 0;
  color: var(--site-ink);
  background: var(--site-bg);
  font-family: var(--site-font-sans);
  line-height: 1.6;
}

.blog-page::selection { color: var(--site-bg); background: var(--site-violet); }
.blog-page a { color: inherit; text-decoration: none; }
.blog-particle-field { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .82; pointer-events: none; mix-blend-mode: multiply; }
.post .blog-particle-field { opacity: .42; }
.blog-grid { position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .45; background-image: radial-gradient(rgba(21, 24, 29, .2) .55px, transparent .75px), radial-gradient(rgba(217, 75, 48, .34) .55px, transparent .75px), repeating-linear-gradient(to bottom, transparent 0 3px, rgba(21, 24, 29, .025) 4px); background-position: 0 0, 37px 29px, 0 0; background-size: 46px 46px, 83px 83px, 100% 4px; mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, .58) 60%, transparent 100%); }
.blog-spectrum { position: fixed; z-index: 0; top: var(--blog-pointer-y); left: var(--blog-pointer-x); width: clamp(420px, 57vw, 840px); aspect-ratio: 1; pointer-events: none; opacity: .24; transform: translate(calc(-50% + var(--blog-spectrum-x)), calc(-50% + var(--blog-spectrum-y))) rotate(var(--blog-spectrum-tilt)); transition: opacity 360ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1); will-change: top, left, transform; }
.blog-spectrum::before, .blog-spectrum::after, .spectrum-orbit, .spectrum-core { position: absolute; top: 50%; left: 50%; display: block; content: ""; pointer-events: none; translate: -50% -50%; }
.blog-spectrum::before { width: 92%; height: 92%; border-radius: 50%; background: conic-gradient(from 18deg, transparent 0 10%, rgba(88, 102, 212, .48) 13%, transparent 20% 31%, rgba(217, 75, 48, .55) 35%, transparent 42% 57%, rgba(20, 139, 134, .48) 62%, transparent 69% 84%, rgba(217, 75, 48, .38) 88%, transparent 94%); -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 60.4% 61%, transparent 61.4% 72%, #000 72.4% 73.2%, transparent 73.6%); mask: radial-gradient(circle, transparent 0 60%, #000 60.4% 61%, transparent 61.4% 72%, #000 72.4% 73.2%, transparent 73.6%); mix-blend-mode: multiply; animation: blog-spectrum-spin 22s linear infinite; }
.blog-spectrum::after { width: 48%; height: 48%; border-radius: 50%; background: radial-gradient(circle at 32% 35%, rgba(88, 102, 212, .21), transparent 35%), radial-gradient(circle at 69% 38%, rgba(20, 139, 134, .18), transparent 34%), radial-gradient(circle at 52% 72%, rgba(217, 75, 48, .23), transparent 44%); filter: blur(35px) saturate(1.12); mix-blend-mode: multiply; animation: blog-spectrum-breathe 5.6s ease-in-out infinite alternate; }
.spectrum-orbit { border: 1px solid rgba(217, 75, 48, .38); border-radius: 50%; }
.spectrum-orbit-a { width: 95%; height: 38%; border-right-color: rgba(88, 102, 212, .62); border-left-color: rgba(20, 139, 134, .56); rotate: 13deg; animation: blog-orbit-a 15s linear infinite; }
.spectrum-orbit-b { width: 58%; height: 86%; border-top-color: rgba(217, 75, 48, .7); border-bottom-color: rgba(88, 102, 212, .5); rotate: -48deg; animation: blog-orbit-b 19s linear infinite; }
.spectrum-orbit-c { width: 44%; height: 44%; border-color: rgba(21, 24, 29, .35); border-top-color: rgba(217, 75, 48, .78); border-right-color: transparent; border-style: dashed; rotate: 24deg; animation: blog-orbit-c 10s linear infinite; }
.spectrum-core { width: 16%; aspect-ratio: 1; border-radius: 45%; background: conic-gradient(from 80deg, rgba(217, 75, 48, .88), rgba(88, 102, 212, .7), rgba(20, 139, 134, .74), rgba(217, 75, 48, .88)); -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 54%); mask: radial-gradient(circle, transparent 0 52%, #000 54%); mix-blend-mode: multiply; animation: blog-spectrum-spin 8s linear infinite reverse; }
.post .blog-spectrum { opacity: .1; }
.blog-page.is-link-hover .blog-spectrum { opacity: .36; }
@keyframes blog-spectrum-spin { to { rotate: 360deg; } }
@keyframes blog-spectrum-breathe { from { scale: .86; opacity: .48; } to { scale: 1.12; opacity: .9; } }
@keyframes blog-orbit-a { to { rotate: 373deg; } }
@keyframes blog-orbit-b { to { rotate: -408deg; } }
@keyframes blog-orbit-c { to { rotate: 384deg; } }
.blog-cursor { position: fixed; z-index: 60; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; transition: opacity 160ms ease; will-change: transform; }
.blog-cursor i, .blog-cursor span { position: absolute; top: 0; left: 0; display: block; pointer-events: none; }
.blog-cursor i { width: 34px; height: 34px; border: 1px solid rgba(217, 75, 48, .58); border-radius: 50%; box-shadow: 0 0 22px rgba(217, 75, 48, .12); transform: translate(-50%, -50%); transition: width 280ms cubic-bezier(.16, 1, .3, 1), height 280ms cubic-bezier(.16, 1, .3, 1), border-radius 280ms cubic-bezier(.16, 1, .3, 1), transform 240ms ease; }
.blog-cursor i::before, .blog-cursor i::after { position: absolute; top: 50%; left: 50%; background: rgba(217, 75, 48, .5); content: ""; transform: translate(-50%, -50%); }
.blog-cursor i::before { width: 46px; height: 1px; }
.blog-cursor i::after { width: 1px; height: 46px; }
.blog-cursor span { width: 4px; height: 4px; border-radius: 50%; background: #d94b30; box-shadow: 0 0 10px rgba(217, 75, 48, .48); transform: translate(-50%, -50%); }
.blog-page.is-pointer-active .blog-cursor { opacity: 1; }
.blog-page.is-link-hover .blog-cursor i { width: 54px; height: 54px; border-radius: 7px; transform: translate(-50%, -50%) rotate(45deg); }
.blog-page.is-pointer-pressing .blog-cursor i { transform: translate(-50%, -50%) rotate(90deg) scale(1.24); }
.blog-frame { position: relative; z-index: 1; width: min(var(--site-page-width), calc(100% - 72px)); margin: 0 auto; }

.blog-header { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 92px; align-items: center; border-bottom: 1px solid var(--site-line); }
.blog-brand { display: inline-flex; width: max-content; align-items: center; gap: 12px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--site-line-strong); color: var(--site-ink); background: rgba(252, 250, 245, .72); font: 700 .82rem var(--site-font-mono); letter-spacing: -.15em; transition: color 220ms ease, transform 300ms cubic-bezier(.16, 1, .3, 1), background 220ms ease; }
.blog-brand:hover .brand-mark, .blog-brand:focus-visible .brand-mark { color: var(--site-bg); background: var(--site-violet); transform: rotate(45deg); }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font: 700 .76rem var(--site-font-mono); letter-spacing: .12em; }
.brand-copy small { color: var(--site-ink-tertiary); font: .48rem var(--site-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.blog-nav { display: flex; gap: 26px; color: var(--site-ink-secondary); font: .6rem var(--site-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.blog-nav a { position: relative; padding: 8px 0; }
.blog-nav a::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: var(--site-violet); content: ""; transform: scaleX(0); transform-origin: right; transition: transform 180ms ease; }
.blog-nav a:hover, .blog-nav a:focus-visible { color: var(--site-ink); }
.blog-nav a:hover::after, .blog-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.blog-parent { justify-self: end; color: var(--site-violet); font: .6rem var(--site-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.blog-parent span, .blog-footer span { margin-left: 5px; font-size: .85rem; }

.eyebrow, .section-label, .sidebar-label, .blog-stats, .hero-art-label, .blog-footer, .post-card-top, .post-card-bottom, .article-kicker, .article-aside, .article-pagination, .listing-aside, .post-tags, .archive-row, .search-page-input { font: .58rem var(--site-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--site-violet); }
.eyebrow > span { display: inline-block; width: 24px; height: 1px; background: var(--site-violet); }
.button { display: inline-flex; min-height: 44px; align-items: center; gap: 14px; padding: 0 16px; border: 1px solid var(--site-line-strong); font: .6rem var(--site-font-mono); letter-spacing: .05em; text-transform: uppercase; transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease; }
.button span { color: var(--site-violet); font-size: .9rem; }
.button:hover, .button:focus-visible { border-color: var(--site-ink); transform: translateY(-2px); }
.button-primary { color: var(--site-bg); border-color: var(--site-ink); background: var(--site-ink); }
.button-primary:hover, .button-primary:focus-visible { border-color: var(--site-violet); background: var(--site-violet); }
.button-primary span { color: var(--site-accent-soft); }
.button-quiet { color: var(--site-ink-secondary); }

.blog-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .72fr); gap: clamp(40px, 9vw, 135px); min-height: 540px; align-items: center; padding: 82px 0 90px; }
.blog-hero h1, .listing-header h1, .not-found h1 { margin: 27px 0 21px; font: 800 clamp(4.9rem, 9.4vw, 9.5rem)/.76 Arial, Helvetica, sans-serif; letter-spacing: -.105em; }
.blog-hero h1 em, .listing-header h1 em, .not-found h1 em { color: var(--site-violet); font-family: var(--site-font-display); font-style: italic; font-weight: 400; }
.blog-hero-copy > p:not(.eyebrow) { max-width: 490px; margin: 0; color: var(--site-ink-secondary); font-size: 1.02rem; line-height: 1.85; }
.blog-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 36px; }
.blog-hero-art { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: end; overflow: visible; border: 0; background: transparent; transform: perspective(900px) rotateX(var(--blog-hero-rotate-x)) rotateY(var(--blog-hero-rotate-y)); transform-style: preserve-3d; transition: transform 280ms ease; }
.blog-hero-art::before { position: absolute; inset: 8%; border: 1px solid var(--site-line-strong); border-radius: 50%; content: ""; transform: rotate(-20deg) scaleY(.54); }
.hero-art-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 82%; height: 31%; border-color: rgba(217, 75, 48, .58); transform: translate(-50%, -50%) rotate(-28deg); animation: hero-orbit-one 11s linear infinite; }
.orbit-two { width: 32%; height: 82%; border-color: rgba(20, 139, 134, .6); transform: translate(-50%, -50%) rotate(26deg); animation: hero-orbit-two 15s linear infinite; }
.orbit-three { width: 82%; height: 82%; border-color: rgba(23, 26, 31, .15); border-style: dashed; }
.hero-art-core { position: absolute; top: 50%; left: 50%; display: grid; width: 112px; height: 112px; place-items: center; color: var(--site-bg); background: var(--site-ink); box-shadow: 0 0 0 10px rgba(243, 240, 232, .72), 0 22px 45px rgba(23, 26, 31, .16); transform: translate(-50%, -50%) rotate(-8deg); }
@keyframes hero-orbit-one { to { transform: translate(-50%, -50%) rotate(332deg); } }
@keyframes hero-orbit-two { to { transform: translate(-50%, -50%) rotate(-334deg); } }
.hero-art-core strong { font: 400 2.35rem var(--site-font-display); letter-spacing: -.08em; }
.hero-art-core small { align-self: end; margin-bottom: 20px; color: var(--site-accent-soft); font: .46rem var(--site-font-mono); letter-spacing: .06em; }
.hero-art-label { position: absolute; color: var(--site-ink-secondary); }
.label-one { top: 19%; left: 12%; color: var(--site-violet); }
.label-two { top: 25%; right: 10%; }
.label-three { right: 13%; bottom: 17%; color: var(--site-accent); }

.blog-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); }
.blog-stats > div { display: flex; min-height: 135px; flex-direction: column; justify-content: space-between; padding: 16px 18px 18px; border-right: 1px solid var(--site-line); }
.blog-stats > div:last-child { border-right: 0; }
.blog-stats span { color: var(--site-ink-tertiary); }
.blog-stats strong { color: var(--site-violet); font: 400 clamp(1.6rem, 3vw, 2.8rem) var(--site-font-mono); letter-spacing: -.08em; }
.blog-stats small { color: var(--site-ink-secondary); font-size: .53rem; letter-spacing: .02em; text-transform: none; }
.blog-stats .stats-status strong { display: flex; align-items: center; gap: 8px; color: var(--site-ink); font-size: .85rem; letter-spacing: .04em; }
.stats-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 0 5px var(--site-accent-soft); }

.blog-content { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(34px, 7vw, 88px); padding: 88px 0 110px; }
.blog-sidebar { display: flex; flex-direction: column; gap: 43px; }
.sidebar-block { padding-top: 14px; border-top: 1px solid var(--site-line); }
.sidebar-label, .section-label { display: block; color: var(--site-ink-tertiary); }
.sidebar-block p { margin: 16px 0 0; color: var(--site-ink-secondary); font: 400 1rem/1.75 var(--site-font-display); }
.sidebar-block p a { color: var(--site-violet); text-decoration: underline; text-underline-offset: 3px; }
.topic-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.topic-chip { padding: 7px 8px; border: 1px solid var(--site-line); color: var(--site-ink-secondary); font: .53rem var(--site-font-mono); letter-spacing: .02em; text-transform: uppercase; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.topic-chip span { margin-left: 4px; color: var(--site-violet); }
.topic-chip:hover, .topic-chip:focus-visible, .topic-chip.is-active { border-color: var(--site-violet); color: var(--site-violet); background: rgba(107, 99, 217, .07); }
.sidebar-search label, .search-page-input { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding: 8px 0; border-bottom: 1px solid var(--site-line-strong); color: var(--site-violet); }
.sidebar-search input, .search-page-input input { width: 100%; border: 0; outline: 0; color: var(--site-ink); background: transparent; font: .62rem var(--site-font-mono); }
.sidebar-search input::placeholder, .search-page-input input::placeholder { color: var(--site-ink-tertiary); }
.blog-main { min-width: 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--site-line); color: var(--site-ink-secondary); font: .56rem var(--site-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.section-heading > div { display: flex; align-items: baseline; gap: 12px; }
.result-count { color: var(--site-coral); font-size: .52rem; }
.featured-grid .post-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 12px 0 68px; }
.post-card { display: flex; min-height: 243px; flex-direction: column; padding: 19px; border: 1px solid var(--site-line); background: rgba(252, 250, 245, .7); transition: border-color 180ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1), box-shadow 180ms ease; }
.post-card:hover, .post-card:focus-within { border-color: var(--site-violet); box-shadow: var(--site-shadow-card); transform: translateY(-3px); }
.post-card:nth-child(1) { color: var(--site-bg); border-color: var(--site-ink); background: var(--site-ink); }
.post-card:nth-child(3) { background: var(--site-accent-soft); }
.post-card-top, .post-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--site-ink-tertiary); font-size: .5rem; }
.post-card:nth-child(1) .post-card-top, .post-card:nth-child(1) .post-card-bottom { color: rgba(246, 245, 240, .7); }
.post-card h3 { margin: auto 0 11px; font: 400 clamp(1.55rem, 3vw, 2.8rem)/.96 var(--site-font-display); letter-spacing: -.07em; }
.post-card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.post-card p { min-height: 45px; margin: 0; color: var(--site-ink-secondary); font-size: .75rem; line-height: 1.7; }
.post-card:nth-child(1) p { color: rgba(246, 245, 240, .73); }
.post-card-bottom { align-items: end; margin-top: 19px; padding-top: 12px; border-top: 1px solid currentColor; }
.post-tags { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; font-size: .47rem; }
.post-tags a, .post-tags span { padding: 3px 5px; border: 1px solid currentColor; color: currentColor; opacity: .76; }
.post-open { flex: 0 0 auto; color: var(--site-violet); font-size: .52rem; }
.post-card:nth-child(1) .post-open { color: var(--site-accent-soft); }
.post-open span { margin-left: 4px; font-size: .85rem; }
.archive-heading { margin-top: 0; }
.archive-heading a { color: var(--site-violet); }
.archive-heading a span { margin-left: 4px; font-size: .85rem; }
.archive-list { border-bottom: 1px solid var(--site-line); }
.archive-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 145px 85px 20px; min-height: 57px; align-items: center; gap: 10px; border-bottom: 1px solid var(--site-line); color: var(--site-ink-secondary); font-size: .52rem; transition: color 160ms ease, background 160ms ease, padding 160ms ease; }
.archive-row:last-child { border-bottom: 0; }
.archive-row:hover, .archive-row:focus-visible { padding-right: 7px; padding-left: 7px; color: var(--site-violet); background: rgba(107, 99, 217, .06); }
.archive-index { color: var(--site-coral); }
.archive-row strong { overflow: hidden; color: var(--site-ink); font: 400 .87rem var(--site-font-sans); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.archive-tags { display: flex; gap: 4px; overflow: hidden; }
.archive-tags span { overflow: hidden; color: var(--site-ink-tertiary); text-overflow: ellipsis; white-space: nowrap; }
.archive-tags span + span::before { margin: 0 4px 0 1px; content: "/"; }
.archive-row time { color: var(--site-ink-tertiary); text-align: right; }
.archive-arrow { color: var(--site-violet); font-size: .9rem; text-align: right; }
.no-results, .empty-state { padding: 46px 0; color: var(--site-ink-secondary); text-align: center; }

.blog-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 72px; align-items: center; gap: 20px; border-top: 1px solid var(--site-line); color: var(--site-ink-tertiary); font-size: .52rem; }
.blog-footer span:nth-child(2) { color: var(--site-ink-secondary); text-align: center; }
.blog-footer a { color: var(--site-violet); text-align: right; }

.article-page { padding: 76px 0 108px; }
.article-header { max-width: 1040px; margin: 0 auto; }
.article-kicker { display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--site-line); color: var(--site-ink-tertiary); }
.article-kicker span { color: var(--site-violet); }
.article-kicker > div { display: flex; gap: 13px; }
.article-kicker > div span { padding-left: 13px; border-left: 1px solid var(--site-line); color: var(--site-ink-tertiary); }
.article-header h1 { max-width: 920px; margin: 55px 0 27px; font: 400 clamp(3.1rem, 7vw, 7.1rem)/.9 var(--site-font-display); letter-spacing: -.09em; }
.article-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.article-tags a { padding: 5px 7px; border: 1px solid var(--site-line-strong); color: var(--site-violet); font: .5rem var(--site-font-mono); letter-spacing: .04em; text-transform: uppercase; }
.article-layout { display: grid; grid-template-columns: 190px minmax(0, var(--site-article-width)); gap: 70px; justify-content: center; margin-top: 68px; }
.article-aside { position: sticky; top: 28px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; padding: 11px 8px 4px 0; color: var(--site-ink-tertiary); scrollbar-width: thin; }
.article-aside p { margin: 16px 0 27px; color: var(--site-ink-secondary); font: 400 .98rem/1.75 var(--site-font-display); letter-spacing: 0; text-transform: none; }
.article-aside a { color: var(--site-violet); font-size: .53rem; }
.article-toc-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; pointer-events: none; }
.article-toc-panel summary::-webkit-details-marker { display: none; }
.article-toc-count { color: var(--site-violet); font-size: .48rem; }
.article-toc { margin: 17px 0 25px; }
.article-toc-list, .article-toc-list-child { margin: 0; padding: 0; list-style: none; }
.article-toc-list-child { margin: 3px 0 6px 5px; padding-left: 10px; border-left: 1px solid var(--site-line); }
.article-toc-list-item { margin: 0; }
.article-toc-list-level-3 { padding-left: 11px; border-left: 1px solid var(--site-line); }
.article-toc-list-level-4 { padding-left: 22px; border-left: 1px solid var(--site-line); }
.article-aside .article-toc-list-link { display: block; padding: 5px 0; color: var(--site-ink-secondary); font: 500 .68rem/1.45 var(--site-font-display); letter-spacing: 0; text-transform: none; }
.article-aside .article-toc-list-link:hover, .article-aside .article-toc-list-link:focus-visible { color: var(--site-violet); }
.article-aside .article-toc-list-link.is-active { color: var(--site-violet); transform: translateX(3px); }
.article-toc-list-level-2 > .article-toc-list-link { color: var(--site-ink); font-size: .76rem; }
.article-toc-list-level-4 > .article-toc-list-link { color: var(--site-ink-tertiary); font-size: .61rem; }
.article-back-link { display: block; padding-top: 13px; border-top: 1px solid var(--site-line); }
.article-body { min-width: 0; color: var(--site-ink); font-size: 1.08rem; line-height: 1.9; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { margin: 2.2em 0 .7em; color: var(--site-ink); font-weight: 500; line-height: 1.2; scroll-margin-top: 100px; }
.article-body h1 { font: 400 2.55rem/1 var(--site-font-display); letter-spacing: -.06em; }
.article-body h2 { font: 400 2rem/1.1 var(--site-font-display); letter-spacing: -.05em; }
.article-body h3 { font: 500 1.28rem/1.2 var(--site-font-display); letter-spacing: -.03em; }
.article-body h4 { font: 500 1.05rem/1.35 var(--site-font-display); }
.article-body h5 { font: 500 .95rem/1.45 var(--site-font-mono); letter-spacing: .02em; }
.article-body h6 { font: 500 .82rem/1.5 var(--site-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.article-body .headerlink { display: inline-block; margin-left: .45em; color: var(--site-violet); font: .7em var(--site-font-mono); text-decoration: none; opacity: 0; transform: translateX(-4px); transition: opacity 160ms ease, transform 160ms ease; }
.article-body .headerlink::before { content: '#'; }
.article-body :is(h1, h2, h3, h4, h5, h6):hover .headerlink, .article-body :is(h1, h2, h3, h4, h5, h6):focus-within .headerlink { opacity: .72; transform: translateX(0); }
.article-body :is(h1, h2, h3, h4, h5, h6):target { color: var(--site-violet); }
.article-body p { margin: 0 0 1.25em; }
.article-body a { color: var(--site-violet); text-decoration: underline; text-underline-offset: 4px; }
.article-body blockquote { margin: 1.8em 0; padding: 5px 22px; border-left: 3px solid var(--site-accent); color: var(--site-ink-secondary); font: 1.18rem/1.7 var(--site-font-display); }
.article-body ul, .article-body ol { padding-left: 1.5em; }
.article-body li { margin: .35em 0; }
.article-body pre { overflow-x: auto; margin: 1.55em 0; padding: 20px; color: var(--site-code-text); background: var(--site-code-bg); font: .78rem/1.72 var(--site-font-mono); }
.article-body code { padding: .12em .3em; color: var(--site-violet); background: rgba(107, 99, 217, .1); font: .88em var(--site-font-mono); }
.article-body pre code { padding: 0; color: inherit; background: transparent; }
.article-body img { display: block; max-width: 100%; height: auto; margin: 1.8em auto; border: 1px solid var(--site-line); }
.article-body table { width: 100%; margin: 1.8em 0; border-collapse: collapse; font-size: .9rem; }
.article-body th, .article-body td { padding: 9px 11px; border: 1px solid var(--site-line-strong); text-align: left; }
.article-body hr { margin: 3em 0; border: 0; border-top: 1px solid var(--site-line); }
.reading-progress { position: fixed; z-index: 20; top: 0; right: 0; left: 0; height: 3px; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--site-violet), var(--site-coral)); transform: scaleX(0); transform-origin: left center; }
.article-body figure.highlight { position: relative; overflow: auto; margin: 1.55em 0; color: var(--site-code-text); background: var(--site-code-bg); }
.article-body figure.highlight table { width: 100%; margin: 0; border: 0; }
.article-body figure.highlight td { padding: 0; border: 0; }
.article-body figure.highlight .gutter { width: 1%; border-right: 1px solid rgba(255, 255, 255, .11); color: rgba(232, 231, 238, .42); text-align: right; user-select: none; }
.article-body figure.highlight pre { margin: 0; padding: 20px; background: transparent; }
.article-body figure.highlight .keyword, .article-body figure.highlight .selector-tag, .article-body figure.highlight .built_in { color: #d7a7ff; }
.article-body figure.highlight .string, .article-body figure.highlight .attr, .article-body figure.highlight .addition { color: #a8dfc2; }
.article-body figure.highlight .comment, .article-body figure.highlight .quote { color: #858395; }
.article-body figure.highlight .title, .article-body figure.highlight .function { color: #ffd18a; }
.article-body .code-block { position: relative; margin: 1.55em 0; }
.article-body .code-block pre.astro-code { margin: 0; padding: 20px 20px 20px 58px; }
.article-body pre.astro-code code { display: block; counter-reset: code-line; }
.article-body pre.astro-code .line { display: block; min-height: 1.72em; counter-increment: code-line; }
.article-body pre.astro-code .line::before { position: absolute; left: 0; width: 42px; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, .11); color: rgba(232, 231, 238, .42); content: counter(code-line); text-align: right; user-select: none; }
.code-copy { position: absolute; top: 9px; right: 9px; padding: 5px 7px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .74); background: rgba(24, 23, 29, .84); font: .48rem var(--site-font-mono); letter-spacing: .08em; cursor: pointer; }
.code-copy:hover, .code-copy:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .55); }
.article-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 990px; gap: 12px; margin: 82px auto 0; }
.article-pagination a { display: flex; min-width: 0; min-height: 98px; flex-direction: column; justify-content: space-between; padding: 16px; border: 1px solid var(--site-line); transition: border-color 180ms ease, transform 180ms ease; }
.article-pagination a:last-child { align-items: end; text-align: right; }
.article-pagination a:hover, .article-pagination a:focus-visible { border-color: var(--site-violet); transform: translateY(-3px); }
.article-pagination small { color: var(--site-coral); font-size: .5rem; }
.article-pagination strong { max-width: 90%; overflow: hidden; font: 400 1.03rem var(--site-font-display); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }

.listing-page { padding: 75px 0 108px; }
.listing-header { max-width: 760px; padding: 0 0 68px; }
.listing-header h1 { margin-bottom: 24px; }
.listing-header h1 span { color: var(--site-violet); }
.listing-header > p:last-child { max-width: 430px; margin: 0; color: var(--site-ink-secondary); font-size: 1rem; }
.listing-layout { display: grid; grid-template-columns: 190px minmax(0, 760px); gap: 70px; justify-content: center; }
.listing-aside { display: flex; align-self: start; flex-direction: column; gap: 13px; padding-top: 12px; color: var(--site-ink-secondary); }
.listing-aside a { color: var(--site-violet); }
.listing-layout .post-list { display: flex; flex-direction: column; gap: 11px; }
.listing-layout .post-card { min-height: 200px; }
.listing-layout .post-card:nth-child(1), .listing-layout .post-card:nth-child(3) { color: var(--site-ink); border-color: var(--site-line); background: rgba(255, 255, 255, .62); }
.listing-layout .post-card:nth-child(1) p, .listing-layout .post-card:nth-child(1) .post-card-top, .listing-layout .post-card:nth-child(1) .post-card-bottom { color: var(--site-ink-secondary); }
.listing-layout .post-card:nth-child(1) .post-open { color: var(--site-violet); }
.tag-cloud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.tag-cloud a { display: flex; min-height: 120px; flex-direction: column; justify-content: space-between; padding: 17px; border: 1px solid var(--site-line); background: rgba(252, 250, 245, .68); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.tag-cloud a:hover, .tag-cloud a:focus-visible { border-color: var(--site-violet); box-shadow: var(--site-shadow-card); transform: translateY(-3px); }
.tag-cloud strong { font: 400 1.45rem var(--site-font-display); letter-spacing: -.04em; }
.tag-cloud span { color: var(--site-violet); font: .55rem var(--site-font-mono); }
.search-page-input { max-width: 760px; margin-bottom: 35px; font-size: .72rem; }
.search-results { display: grid; min-height: 140px; gap: 10px; }
.search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; padding: 18px; border: 1px solid var(--site-line); background: rgba(252, 250, 245, .68); transition: border-color 180ms ease, transform 180ms ease; }
.search-result:hover, .search-result:focus-visible { border-color: var(--site-violet); transform: translateY(-2px); }
.search-result-copy { display: grid; min-width: 0; gap: 8px; }
.search-result-copy strong { font: 400 1.42rem/1.05 var(--site-font-display); letter-spacing: -.04em; }
.search-result-copy small { overflow: hidden; color: var(--site-ink-secondary); font-size: .72rem; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.search-result-meta { display: flex; align-items: center; gap: 14px; color: var(--site-ink-tertiary); font: .52rem var(--site-font-mono); }
.search-result-meta b { color: var(--site-violet); font-size: 1rem; }
.basic-page > .article-body { max-width: var(--site-article-width); margin: 0 auto; }
.not-found { min-height: 650px; padding: 120px 0 180px; }
.not-found h1 { margin-bottom: 42px; }

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .blog-page.has-blog-pointer,
  .blog-page.has-blog-pointer a,
  .blog-page.has-blog-pointer button,
  .blog-page.has-blog-pointer input,
  .blog-page.has-blog-pointer summary { cursor: none; }
}

@media (max-width: 900px) {
  .blog-frame { width: min(100% - 48px, 720px); }
  .blog-hero { grid-template-columns: 1fr; min-height: auto; padding: 72px 0; }
  .blog-hero-art { width: min(100%, 430px); justify-self: end; }
  .blog-content { grid-template-columns: 200px minmax(0, 1fr); gap: 35px; }
  .archive-row { grid-template-columns: 28px minmax(0, 1fr) 75px 20px; }
  .archive-tags { display: none; }
  .article-layout, .listing-layout { gap: 40px; }
}

@media (max-width: 650px) {
  .blog-spectrum { width: 145vw; opacity: .16; }
  .blog-frame { width: min(100% - 32px, 520px); }
  .blog-header { min-height: 76px; }
  .blog-nav { gap: 12px; font-size: .5rem; }
  .blog-nav a:nth-child(2) { display: none; }
  .blog-parent { font-size: .5rem; }
  .blog-hero { padding: 57px 0 60px; }
  .blog-hero h1, .listing-header h1, .not-found h1 { font-size: clamp(4rem, 20vw, 6rem); }
  .blog-hero h1 em { font-size: .78em; letter-spacing: -.09em; }
  .blog-hero-art { width: min(100%, 370px); justify-self: start; }
  .blog-stats { grid-template-columns: 1fr 1fr; }
  .blog-stats > div { min-height: 118px; padding: 14px 11px; }
  .blog-stats > div:nth-child(2) { border-right: 0; }
  .blog-stats strong { font-size: 1.75rem; }
  .blog-content { display: block; padding: 64px 0 78px; }
  .blog-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 27px 16px; margin-bottom: 54px; }
  .blog-sidebar .sidebar-block:first-child, .blog-sidebar .sidebar-search { grid-column: 1 / -1; }
  .featured-grid .post-list { display: flex; flex-direction: column; padding-bottom: 55px; }
  .post-card { min-height: 225px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .archive-row { grid-template-columns: 24px minmax(0, 1fr) 67px 17px; min-height: 60px; }
  .archive-row strong { font-size: .77rem; }
  .archive-row time { font-size: .48rem; }
  .article-page, .listing-page { padding: 56px 0 78px; }
  .article-header h1 { margin-top: 42px; font-size: clamp(3rem, 14vw, 5.4rem); }
  .article-layout, .listing-layout { display: block; }
  .article-aside, .listing-aside { position: static; max-height: none; overflow: visible; margin-bottom: 42px; padding: 15px; border: 1px solid var(--site-line); }
  .article-toc-panel summary { min-height: 32px; cursor: pointer; pointer-events: auto; }
  .article-toc-panel[open] .article-toc-count { transform: rotate(180deg); }
  .article-toc-panel:not([open]) + .article-back-link { margin-top: 12px; }
  .article-body { font-size: .98rem; }
  .article-pagination { grid-template-columns: minmax(0, 1fr); margin-top: 58px; }
  .article-pagination strong { font-size: .85rem; }
  .tag-cloud { grid-template-columns: 1fr 1fr; }
  .listing-header { padding-bottom: 48px; }
  .blog-footer { display: flex; align-items: flex-start; flex-direction: column; gap: 11px; padding: 22px 0 30px; }
  .blog-footer span:nth-child(2), .blog-footer a { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .post-card, .archive-row, .tag-cloud a, .article-pagination a, .brand-mark, .blog-spectrum, .blog-hero-art { transition: none; }
  .blog-spectrum::before, .blog-spectrum::after, .spectrum-orbit, .spectrum-core, .hero-art-orbit { animation: none; }
  .blog-cursor { display: none; }
}