:root {
  --acc-l: hsl(5 55% 32%);
  --acc-d: hsl(5 70% 70%);
  --primary: var(--acc-l);
  --print: #b03a2e;
  --print2: #3f5f86;
  --print3: #c48a2c;
  --blend: multiply;
  --ink-shape: hsl(215 25% 12%);
  --ease: cubic-bezier(0.5, 0, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.3, 1);
  --list-pad: 3rem;
}
@media (max-width: 900px) { :root { --list-pad: 2.25rem; } }
:root,
.listing-item,
.card {
  --primary-light: color-mix(in oklab, var(--primary) 7%, var(--canvas));
  --primary-border: color-mix(in oklab, var(--primary) 30%, var(--canvas));
  --selection: color-mix(in oklab, var(--primary) 18%, var(--canvas));
}

:root[data-theme='dark'] {
  --canvas: hsl(220 16% 9%);
  --text: hsl(34 22% 91%);
  --text-muted: hsl(215 10% 66%);
  --text-muted-dark: hsl(34 15% 80%);
  --border: hsl(220 12% 20%);
  --border-dark: hsl(34 18% 80%);
  --slate-card-bg: hsl(220 14% 13%);
  --primary: var(--acc-d);
  --blend: screen;
  --ink-shape: hsl(34 22% 91%);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --canvas: hsl(220 16% 9%);
    --text: hsl(34 22% 91%);
    --text-muted: hsl(215 10% 66%);
    --text-muted-dark: hsl(34 15% 80%);
    --border: hsl(220 12% 20%);
    --border-dark: hsl(34 18% 80%);
    --slate-card-bg: hsl(220 14% 13%);
    --primary: var(--acc-d);
    --blend: screen;
    --ink-shape: hsl(34 22% 91%);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] :is(.listing-item, .card) { --primary: var(--acc-d); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) :is(.listing-item, .card) { --primary: var(--acc-d); }
}
:is(.listing-item, .card) { --primary: var(--acc-l); }

.standalone-quote { background-color: color-mix(in oklab, var(--text) 2%, var(--canvas)); margin: 0 0 var(--list-pad); }

html body .listing-item { padding: var(--list-pad) 0; }
html body .listing-item:first-child { padding-top: 1rem; }
html body .listing-item:last-child { padding-bottom: 1rem; }
html body .volume-group { margin-bottom: var(--list-pad); }
.post-content pre[class*='language-'],
pre[class*='language-'] { background-color: color-mix(in oklab, var(--text) 5%, var(--canvas)); color: var(--text); }
:not(pre) > code { background-color: color-mix(in oklab, var(--text) 7%, var(--canvas)); color: var(--text); }
.markdown-alert { --alert-bg: color-mix(in oklab, var(--alert-border) 9%, var(--canvas)); --alert-text: var(--text); }
.token.keyword { color: var(--primary); }
.token.comment { color: var(--text-muted); }
.site-footer { --footer-text: var(--text); }
main { overflow-x: clip; }

html body :is(.site-header__menu-link, .hero-section__tag, .volume-group__title, .volume-group__meta,
  .listing-item__volume-issue, .listing-item__quarter, .listing-item__read-link, .standalone-quote__cite,
  .post-sidebar__label, .post-sidebar__value--status, .post-header__volume, .post-header__date,
  .markdown-alert-title, .site-footer__label, .archive-flag, figcaption, cite) {
  text-transform: none;
  letter-spacing: 0.005em;
}
html body :is(.site-header__menu-link, .hero-section__tag, .listing-item__volume-issue, .listing-item__quarter,
  .listing-item__read-link, .post-sidebar__label, .markdown-alert-title, .archive-flag) {
  font-size: 0.86rem;
}
html body :is(.standalone-quote__cite, figcaption, cite, .post-sidebar__value--status) { font-size: 0.84rem; }
html body:not(.think) .post-sidebar__section:first-child { border-top: 0; }
html body .site-header__menu-link { font-size: 0.95rem; }

.site-header__logo a { display: flex; align-items: center; gap: 0.65rem; }
.site-header__logo .site-word { font: 500 1.35rem/1 var(--font-display); color: var(--text); }
.site-header__menu-link[aria-current='page'] { color: var(--text); }
.site-header__menu-link[aria-current='page']::after { width: 100%; background-color: var(--primary); }
body.aero .site-header__logo { display: none; }
body.aero .site-header__nav { flex: 1; }
@media (max-width: 600px) {
  .editorial-container { padding: 0 1.25rem; }
  .site-header__inner { flex-direction: row; text-align: left; }
  .site-header__menu { display: flex; gap: 1rem; }
  .site-header__nav { gap: 0.9rem; }
}

.logo { display: block; color: var(--text); }
.logo svg { display: block; height: 100%; width: auto; }
.logo .tw { color: var(--text); }

.comp { display: block; overflow: visible; isolation: isolate; }
.comp .s { mix-blend-mode: var(--blend); }
.comp .ink { fill: var(--ink-shape); mix-blend-mode: normal; }
.comp .ring { fill: none; stroke-width: 1.6; }
:root[data-theme='dark'] .comp .s { opacity: 0.9; }

.mark { position: relative; }
.mark .comp { position: absolute; z-index: 0; }
.mark .logo { position: relative; z-index: 2; height: 100%; }

.hero-section { overflow: clip; }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: center; }
.hero-grid .hero-section__title { font-size: clamp(2.6rem, 5vw + 1rem, 4.25rem); text-wrap: balance; }
.hero-section__title + .hero-section__description { margin-top: 1.75rem; }
.stage { --s: 1.45; width: calc(350px * var(--s)); height: calc(250px * var(--s)); grid-row: 1 / span 2; grid-column: 2; }
.stage__inner { position: relative; width: 350px; height: 250px; transform: scale(var(--s)); transform-origin: 0 0; }
.stage .logo { position: absolute; right: 0.5rem; top: 0; height: 100%; }
.portrait { position: absolute; left: 0; top: 10px; width: 210px; height: 210px; border-radius: 50%; overflow: hidden; }
.portrait i { position: absolute; left: 0; right: 0; top: calc(var(--i) * 100% / 8); height: calc(100% / 8 + 1px); overflow: hidden; backface-visibility: hidden; }
.portrait b { position: absolute; left: 0; width: 210px; height: 210px; top: calc(var(--i) * -210px / 8); background: #000 var(--portrait) 47% 31% / 160% auto no-repeat; }
.portrait-quarter { position: absolute; left: 105px; top: 115px; width: 105px; height: 105px; border-radius: 0 0 105px 0; background: var(--print); mix-blend-mode: screen; transform-origin: 0 0; }
.hero-section__tag .w,
.hero-section__title .w { display: inline-block; }
.foot-mark { height: 140px; aspect-ratio: 531 / 970; }
.foot-mark::before, .foot-mark::after { content: ''; position: absolute; left: calc(100% + 1rem); pointer-events: none; }
.foot-mark::before { bottom: 0; width: 76px; aspect-ratio: 1; border-radius: 50%; background: var(--print); }
.foot-mark::after { bottom: 38px; left: calc(100% + 1rem + 38px); width: 58px; aspect-ratio: 1; border-radius: 0 100% 0 0; background-image: radial-gradient(circle, var(--print2) 0 38%, transparent 44%); background-size: 6px 6px; mix-blend-mode: var(--blend); }
@media (max-width: 1100px) {
  .stage { --s: 1.1; }
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stage { --s: 1; grid-row: 1; grid-column: 1; margin-bottom: 1rem; }
}

.listing-item__thumb { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 0.6rem; isolation: isolate; }
.listing-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-item__thumb.tile { background: color-mix(in oklab, var(--text) 3%, var(--canvas)); }
.listing-item__thumb.tile .comp { width: 100%; height: 100%; }
.archived .listing-item__thumb img { filter: grayscale(1) contrast(1.1); }
body.aero .listing-item__title { font-weight: 400; }
@media (max-width: 900px) {
  body.aero .listing-item__aside { display: grid; grid-template-columns: 96px 1fr; grid-template-areas: 'img a' 'img b'; column-gap: 1rem; align-items: start; border: 0; }
  body.aero .listing-item__thumb { grid-area: img; margin: 0; }
}

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--list-pad) * 2) 2.5rem; padding: 1rem 0 2rem; }
.card { position: relative; }
.card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr auto auto auto; gap: 0 2.5rem; }
.card--lead .card__image { grid-row: 1 / -1; aspect-ratio: 4 / 3; margin-bottom: 0; }
.card--lead > :not(.card__image) { grid-column: 2; }
.card--lead .card__kicker { grid-row: 2; }
.card--lead .card__title { grid-row: 3; margin-bottom: 0.9rem; }
.card--lead .card__excerpt { grid-row: 4; }
.card--lead .card__excerpt { margin-bottom: 0.3rem; }
.card__image { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 1.1rem; background: color-mix(in oklab, var(--text) 3%, var(--canvas)); isolation: isolate; }
.card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__image.tile { display: grid; place-items: center; }
.card__image.tile .comp { width: 62%; height: 80%; }
.archived .card__image img { filter: grayscale(1) contrast(1.1); }
.card__kicker { display: flex; gap: 0.8rem; align-items: baseline; margin: 0 0 0.5rem; font: 600 0.86rem/1.3 var(--font-sans); color: var(--primary); }
.card__date { font-weight: 400; color: var(--text-muted); }
.card__title { font: 400 clamp(1.7rem, 1.2vw + 1.2rem, 2.2rem)/1.12 var(--font-display); letter-spacing: -0.015em; margin: 0 0 0.6rem; text-wrap: balance; }
.card--lead .card__title { font-size: clamp(2.4rem, 3vw + 1.2rem, 3.8rem); }
.card__title a { color: var(--text); }
.card__title a:hover { color: var(--primary); }
.card__excerpt { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--text-muted); }
.card--lead .card__excerpt { font-size: 1.15rem; }
.cards__more { margin: 0 0 4rem; font: 600 0.95rem/1 var(--font-sans); }
.cards__more a::after { content: ' →'; }
:is(.card__image, .listing-item__thumb, .wk-thumb, .wk-photo) img,
body.aero .lead img { filter: grayscale(1) contrast(1.08) brightness(1.02); }
@media (prefers-reduced-motion: no-preference) {
  :is(.card__image, .listing-item__thumb, .wk-thumb) img { transition: filter 500ms var(--ease-out); }
}
:is(.card, .listing-item):hover :is(.card__image, .listing-item__thumb, .wk-thumb) img { filter: none; }

:is(.card__image, .listing-item__thumb).photo { overflow: visible; background: none; isolation: isolate; }
.photo img { position: relative; z-index: 1; }
.backshape { position: absolute; z-index: 0; width: 40%; aspect-ratio: 1; background: var(--print); pointer-events: none; }
:is(.card, .listing-item):nth-child(4n + 1) .backshape { top: -12%; right: -5%; border-radius: 50%; }
:is(.card, .listing-item):nth-child(4n + 2) .backshape { top: 18%; left: -5%; width: 30%; }
:is(.card, .listing-item):nth-child(4n + 3) .backshape { top: -10%; left: -5%; border-radius: 100% 0 0 0; }
:is(.card, .listing-item):nth-child(4n) .backshape { top: 22%; right: -7%; width: 20%; aspect-ratio: 1 / 2; border-radius: 0 999px 999px 0; }
.card--lead .backshape { width: 30%; top: -6% !important; }
.card__image { margin: 0 0 1.4rem; }
.listing-item__thumb { margin-bottom: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .backshape { transition: translate 500ms var(--ease-out); }
  :is(.card, .listing-item):hover .backshape { translate: 0 -6px; }
}
.lead--graphic img { filter: none !important; }
body.aero .lead--graphic::after { display: none; }
@media (max-width: 800px) {
  .cards { grid-template-columns: 1fr; }
  .card--lead { display: block; }
  .card--lead .card__image { margin-bottom: 1.4rem; }
}

.post-header { position: relative; }
.post-header .mark { position: absolute; right: 0; top: 2.2rem; height: calc(100% - 4rem); max-height: 300px; aspect-ratio: 531 / 970; }
.post-header .mark .comp { inset: -10% -45% -10% -120%; width: 265%; height: 120%; }
body.aero .post-header :is(.post-header__kicker, .post-header__title, .post-header__dek) { position: relative; z-index: 3; max-width: calc(100% - 12rem); }
body.aero .post-header .post-header__dek { max-width: min(38rem, calc(100% - 22rem)); }
.post-header__dek { font: 400 clamp(1.1rem, 0.5vw + 1rem, 1.35rem)/1.55 var(--font-serif); color: var(--text-muted); margin: 1.2rem 0 0; }
.archive-flag { display: inline-block; margin-left: 0.75rem; font: 600 0.8rem/1 var(--font-sans); color: var(--primary); border: 1px solid var(--primary-border); padding: 0.35rem 0.5rem; }
@media (max-width: 700px) {
  .post-header { padding-top: 1.75rem; display: flow-root; }
  .post-header .mark { position: relative; float: right; top: 0; height: 176px; max-height: none; margin: 0 0.4rem 0.75rem 1.4rem; }
  .post-header .mark .comp { inset: -6% -28% -6% -62%; width: 190%; height: 112%; }
  body.aero .post-header :is(.post-header__kicker, .post-header__title, .post-header__dek) { max-width: none; }
  .post-header .post-header__kicker { flex-wrap: wrap; row-gap: 0.4rem; }
  .post-header .post-header__title { font-size: clamp(2.3rem, 9vw, 3rem); }
  .post-header__dek { clear: both; }
}

.lead { position: relative; margin: 2.5rem 0 1rem; isolation: isolate; }
.lead .clip { position: relative; overflow: hidden; }
.lead img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
body.aero .lead::after { content: ''; position: absolute; z-index: -1; right: -1.75rem; bottom: -1.75rem; width: min(24%, 160px); aspect-ratio: 1; border-radius: 100% 0 0 0; background: var(--print); pointer-events: none; transform-origin: 100% 100%; }
.duo img { filter: grayscale(1) contrast(1.1) brightness(1.05); }
.duo .tone { position: absolute; inset: 0; background: var(--print); mix-blend-mode: color; opacity: 0.85; }
.post-content figure { margin: 2.5rem 0; }
.post-content figure img { max-width: 100%; height: auto; }
.portrait-card { position: relative; isolation: isolate; margin: 0 0 2.2rem; }
.portrait-card img { display: block; width: 100%; height: auto; }
.portrait-card::before { content: ''; position: absolute; z-index: 1; right: -9%; top: 60%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--print); mix-blend-mode: screen; pointer-events: none; }
.portrait-card::after { content: ''; position: absolute; z-index: -1; left: -16%; top: -7%; width: 56%; aspect-ratio: 1; border-radius: 50%; background-image: radial-gradient(circle, var(--print2) 0 38%, transparent 44%); background-size: 6px 6px; pointer-events: none; }
@media (max-width: 900px) { .portrait-card { width: min(70%, 300px); margin-inline: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .portrait-card.play::before { animation: turnin 900ms 300ms var(--ease) both; }
  html.js .portrait-card[data-arrive]:not(.play)::before { opacity: 0; }
}

.post-content .photo-grid { margin: 3rem 0; container-type: inline-size; }
.photo-grid .hero { position: relative; height: 66cqw; isolation: isolate; }
.photo-grid :is(.ph, .sh) { position: absolute; display: block; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); }
.photo-grid .ph img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-grid .kx { --x: 8; --y: 9; --w: 80; z-index: 1; }
.photo-grid .sh { pointer-events: none; aspect-ratio: 1; }
.photo-grid .dotdisc { --x: 0; --y: 0; --w: 46; z-index: 0; border-radius: 50%; background-image: radial-gradient(circle, var(--print) 0 38%, transparent 44%); background-size: 7px 7px; }
.photo-grid .square { --x: 74; --y: 48; --w: 18; z-index: 2; background: var(--print2); mix-blend-mode: var(--blend); }
.photo-grid .tri { --x: 79; --y: 14; --w: 20; z-index: 2; background: var(--print3); clip-path: polygon(50% 0, 100% 100%, 0 100%); mix-blend-mode: var(--blend); }
.photo-grid .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.photo-grid .row img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 700px) { .photo-grid .row { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .photo-grid.play .sh { animation: turnin 800ms calc(200ms + var(--d, 0ms)) var(--ease) both; }
  .photo-grid .square { --d: 200ms; }
  .photo-grid .tri { --d: 400ms; }
  html.js .photo-grid[data-arrive]:not(.play) .sh { opacity: 0; }
}
.fig { position: relative; isolation: isolate; }
.fig .corner { position: absolute; width: min(24%, 140px); aspect-ratio: 1; pointer-events: none; z-index: -1; }
.fig .corner .comp { width: 100%; height: 100%; }
.fig .corner.c0 { right: -1.6rem; top: -1.6rem; }
.fig .corner.c1 { left: -1.6rem; bottom: 1.2rem; }
.post-content figcaption,
.lead figcaption { font: 500 0.84rem/1.4 var(--font-sans); color: var(--text-muted); margin-top: 0.7rem; }
.crop-circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.crop-arch img { border-radius: 999px 999px 0 0; aspect-ratio: 3 / 4; object-fit: cover; }
.post-content .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.post-content .gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.post-content .gallery img:nth-of-type(3n + 2) { border-radius: 999px 999px 0 0; }
.post-content .gallery img:nth-of-type(3n) { border-radius: 50%; }

html body .post-content { line-height: 2; }
html body .post-content p { margin-bottom: 1.75rem; }
html body .post-content li { margin-bottom: 0.7em; line-height: 1.85; }
.post-content h2 { display: flex; align-items: baseline; gap: 0.6rem; }
.post-content h2::before { content: ''; flex: none; width: 0.62em; height: 0.62em; background: var(--print); transform: translateY(0.02em); }
.post-content h2:nth-of-type(3n + 1)::before { border-radius: 50%; }
.post-content h2:nth-of-type(3n + 2)::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--print2); }
.post-content h2:nth-of-type(3n)::before { background: var(--print3); }
.post-content h2 .header-anchor { display: none; }
.post-content blockquote.pull { position: relative; isolation: isolate; margin: 3.5rem 0; padding: 2.4rem 0; text-align: center; border: 0; }
.post-content blockquote.pull::before { content: ''; display: block; position: absolute; z-index: -1; width: 9rem; height: 9rem; border-radius: 50%; left: 50%; top: 50%; translate: -50% -50%; background-image: radial-gradient(circle, color-mix(in oklab, var(--print) 55%, transparent) 0 26%, transparent 29%); background-size: 7px 7px; }
.post-content blockquote.pull p { font: 400 clamp(1.6rem, 2.4vw + 1rem, 2.4rem)/1.3 var(--font-display); font-style: italic; color: var(--text); text-wrap: balance; }
html body .post-content blockquote :is(p, ol, ul) { margin: 0 0 1rem; }
html body .post-content blockquote > :last-child { margin-bottom: 0; }

.post-content blockquote:not(.pull) { position: relative; isolation: isolate; margin: 3rem 0; padding: 1.75rem 1.75rem 1.75rem 5rem; border-left: 2px solid var(--text); background: color-mix(in oklab, var(--print3) 7%, var(--canvas)); font: italic 400 1.25rem/1.6 var(--font-display); }
.post-content blockquote:not(.pull)::before { content: '\201C'; display: block; position: absolute; z-index: 1; top: 0.35rem; left: 0.9rem; font: 700 6.5rem/1 var(--font-display); font-style: normal; color: var(--print3); mix-blend-mode: var(--blend); }
.post-content blockquote:not(.pull)::after { content: ''; display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 3.75rem; background-image: radial-gradient(circle, color-mix(in oklab, var(--print3) 45%, transparent) 0 28%, transparent 30%); background-size: 7px 7px; }
@media (max-width: 600px) {
  .post-content blockquote:not(.pull) { padding: 4.25rem 1.25rem 1.25rem; }
  .post-content blockquote:not(.pull)::after { width: auto; bottom: auto; right: 0; height: 3.25rem; }
}

.post-content :is(.markdown-alert, .boxout) { position: relative; isolation: isolate; border-left: 0; border-top: 2px solid var(--text); background: color-mix(in oklab, var(--shape, var(--print)) 8%, var(--canvas)); padding: 1.2rem 4.8rem 1.1rem 1.25rem; margin: 3rem 0 2.5rem; }
.post-content :is(.markdown-alert, .boxout)::before { content: ''; position: absolute; z-index: 1; top: -1.75rem; right: 1rem; width: 3.5rem; height: 3.5rem; background: var(--shape, var(--print)); mix-blend-mode: var(--blend); }
.post-content :is(.markdown-alert, .boxout)::after { content: ''; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 4.2rem; background-image: radial-gradient(circle, color-mix(in oklab, var(--shape, var(--print)) 45%, transparent) 0 28%, transparent 30%); background-size: 7px 7px; }
.post-content .markdown-alert-title { color: var(--text); }
.post-content :is(.markdown-alert-note, .markdown-alert-info, .boxout) { --shape: var(--print); }
.post-content :is(.markdown-alert-note, .markdown-alert-info, .boxout)::before { border-radius: 50%; }
.post-content :is(.markdown-alert-tip, .markdown-alert-insight) { --shape: var(--print2); }
.post-content :is(.markdown-alert-question, .markdown-alert-help) { --shape: var(--print3); }
.post-content :is(.markdown-alert-question, .markdown-alert-help)::before { height: 1.75rem; top: -1.75rem; border-radius: 999px 999px 0 0; }
.post-content :is(.markdown-alert-warning, .markdown-alert-caution) { --shape: var(--print); }
.post-content :is(.markdown-alert-warning, .markdown-alert-caution)::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.post-content :is(.markdown-alert-danger, .markdown-alert-error) { --shape: var(--ink-shape); }
.post-content :is(.markdown-alert-danger, .markdown-alert-error)::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); mix-blend-mode: normal; }
.post-content .markdown-alert-example { --shape: var(--print2); }
.post-content .markdown-alert-example::before { border-radius: 0 100% 0 0; }
.post-content .markdown-alert-important { --shape: var(--print3); }
.post-content .markdown-alert-important::before { width: 2.6rem; height: 2.6rem; top: -1.3rem; rotate: 45deg; }
.post-content .markdown-alert-quote { --shape: var(--print3); }
.post-content .markdown-alert-quote::before { background: none; border: 0.45rem solid var(--shape); border-radius: 50%; box-sizing: border-box; }
.post-content .boxout h1 { font: 600 1.25rem/1.3 var(--font-display); margin: 0 0 0.6rem; }

.fn { font: 700 0.62em/0 var(--font-sans); vertical-align: super; padding: 0 0.12em; }
.fn a { color: var(--primary); text-decoration: none; }
.notes { font-size: 0.95rem; line-height: 1.6; margin-top: 3rem; }
.notes h2 { font: 700 1rem/1.3 var(--font-display); margin: 0 0 1em; }
.notes h2::before { display: none; }
.notes ol { padding-left: 1.6em; margin: 0 0 2.5rem; }
.notes li { margin-bottom: 0.7em; text-wrap: pretty; }
.notes li::marker { font: 700 0.8rem var(--font-sans); color: var(--primary); }
.notes .back { margin-left: 0.3em; text-decoration: none; }

.numeral { position: relative; display: inline-block; isolation: isolate; font-family: var(--font-display); font-weight: 400; font-style: normal; line-height: 0.8; font-variant-numeric: lining-nums proportional-nums; color: var(--print); text-decoration: none; letter-spacing: -0.03em; }
.numeral.on-photo { color: #fbf9f6; }
body.think .wk-hero { font-size: clamp(9rem, 17vw, 15.5rem); line-height: 0.78; margin: 0; }
body.think .wk-num { font-size: 5.2rem; }
body.think .post-header { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 5rem; align-items: start; }
body.think .post-header > .wk-hero { grid-column: 1; grid-row: 1 / span 3; justify-self: start; }
body.think .post-header > :not(.wk-hero, .wk-photo) { grid-column: 2; max-width: 40rem; }
body.think .post-header > .wk-photo { grid-column: 1 / -1; position: relative; margin: 0 0 2rem; }
body.think .wk-photo img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
body.think .wk-photo .numeral { position: absolute; left: 1.4rem; bottom: 2.9rem; font-size: clamp(6.5rem, 13vw, 11rem); }
body.think .wk-thumb { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 0.9rem; overflow: hidden; }
body.think .wk-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.think .wk-thumb .numeral { position: absolute; left: 0.5rem; bottom: 0.45rem; font-size: 3.6rem; }
body.think .listing-item__aside { gap: 0.6rem; }
body.think .post-header__sep { display: none; }
body.think .post-header__kicker { gap: 0; flex-wrap: wrap; }
body.think .post-header__date::before { content: '·'; margin: 0 0.45em; color: var(--text-muted); }
.wk-sep { margin: 0 0.45em; color: var(--text-muted); }
html body.think .volume-group__title { font: 400 clamp(1.7rem, 2vw + 1rem, 2.2rem)/1.1 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
html body.think .volume-group__meta { font: 400 1rem/1.3 var(--font-serif); color: var(--text-muted); font-variant-numeric: oldstyle-nums; }
html body.think .volume-group__header { align-items: baseline; }
html body.think .listing-item__quarter { font: 400 0.95rem/1.3 var(--font-serif); color: var(--text-muted); font-variant-numeric: oldstyle-nums; }
html body.think .post-header__volume { font: 400 1.2rem/1.2 var(--font-display); letter-spacing: 0; color: var(--primary); }
html body.think .post-header__volume a { color: inherit; }
html body.think .listing-item__kicker { display: block; width: fit-content; margin: 0 0 0.5rem; }
html body.think .post-header__volume { width: fit-content; }
html body.think .post-header__date { font: 400 1rem/1.2 var(--font-serif); color: var(--text-muted); font-variant-numeric: oldstyle-nums; }
html body.think .listing-item__date,
html body.think .post-sidebar__value { font-variant-numeric: oldstyle-nums; }
html body.think :is(.post-header__title, .hero-section__title, .listing-item__title, .hero-section__description, .listing-item__date, .standalone-quote__text) { font-style: normal; }
html body.think :is(.post-header__title, .hero-section__title, .listing-item__title) { font-weight: 500; letter-spacing: -0.015em; }
html body.think .post-header__title { font-size: clamp(2.6rem, 4vw + 1rem, 4.4rem); }
html body.think .listing-item__title { font-size: clamp(1.6rem, 1.5vw + 1rem, 2.1rem); }
.standalone-quote { position: relative; overflow: hidden; isolation: isolate; }
.standalone-quote::before { content: ''; position: absolute; z-index: -1; width: min(70vw, 440px); aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%; translate: -50% -50%; background-image: radial-gradient(circle, color-mix(in oklab, var(--print2) 45%, transparent) 0 24%, transparent 27%); background-size: 8px 8px; }
.standalone-quote::after { content: ''; position: absolute; left: 50%; top: 1.1rem; width: 1.6rem; height: 1.6rem; translate: -50% 0; border-radius: 50%; background: var(--print); mix-blend-mode: var(--blend); }
@media (max-width: 900px) {
  body.think .post-header { display: block; }
  body.think .wk-hero { font-size: 8rem; margin-bottom: 1rem; }
  html body.think .listing-item__aside { display: flex; flex-direction: row; align-items: baseline; gap: 1rem; border: 0; }
  body.think .wk-num { font-size: 4.2rem; }
  body.think .wk-thumb { width: 132px; margin-bottom: 0; }
  body.think .wk-thumb .numeral { font-size: 2.8rem; }
  body.think .wk-photo .numeral { left: 0.8rem; bottom: 2.4rem; }
  body.think .wk-photo img { aspect-ratio: 4 / 3; }
}

.post-content .livedemo { margin: 2rem 0; }
.post-content .livedemo a { display: inline-block; font: 600 0.9rem/1 var(--font-sans); color: var(--canvas); background: var(--text); padding: 0.75rem 1rem; text-decoration: none; }
.post-content .livedemo a:hover { background: var(--primary); color: var(--canvas); }
.post-content img { max-width: 100%; height: auto; }
.post-content iframe { max-width: 100%; border: 0; }
.post-content .highlight { margin: 2rem 0; }
.series { border-top: 1px solid var(--border); padding: 1.4rem 0; }
.series ul { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.4rem; }
.series li { font-size: 0.95rem; line-height: 1.4; }
.youtube-embed img { width: 100%; display: block; }

@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 150ms; }

@media (prefers-reduced-motion: no-preference) {
  .first-visit .stage .logo .L { stroke-dasharray: 1; animation: draw 760ms calc(var(--k) * 105ms) var(--ease) both; }
  .first-visit .stage .portrait i { animation: twist 550ms calc(650ms + var(--i) * 55ms) cubic-bezier(0.8, 0, 0.2, 1) both; }
  .first-visit .stage .portrait-quarter { animation: turnin 1000ms 1350ms var(--ease) both; }
  .first-visit .hero-section .hero-section__tag .w { animation: fadeup 520ms calc(700ms + var(--w) * 120ms) var(--ease) both; }
  .first-visit .hero-section .hero-section__title .w { animation: rise 650ms calc(900ms + var(--w) * 90ms) var(--ease) both; }
  .first-visit .hero-section .hero-section__divider { transform-origin: left; animation: drawline 760ms 1650ms var(--ease) both; }
  .first-visit .hero-section .hero-section__description { animation: fadeup 600ms 1500ms var(--ease) both; }

  .intro .post-header .logo .L { stroke-dasharray: 1; animation: draw 760ms calc(var(--k) * 105ms) var(--ease) both; }
  .intro .post-header .comp .s { animation: offset 560ms 500ms var(--ease) both; }

  .lead.play .clip { animation: wipe 900ms var(--ease) both; }
  body.aero .lead.play::after { animation: turnin 900ms 500ms var(--ease) both; }
  .post-content :is(.markdown-alert, .boxout).play::before { animation: turnin 700ms 150ms var(--ease) both; }
  html.js .post-content :is(.markdown-alert, .boxout)[data-arrive]:not(.play)::before,
  html.js body.aero .lead[data-arrive]:not(.play)::after { opacity: 0; }
  html.js .lead[data-arrive]:not(.play) .clip { clip-path: inset(0 100% 0 0); }

  .intro body.think .numeral { animation: rise 700ms var(--ease) both; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes twist { from { transform: perspective(420px) rotateY(-90deg); } to { transform: perspective(420px) rotateY(0deg); } }
@keyframes turnin { from { opacity: 0; rotate: -14deg; } }
@keyframes wipe { 0% { translate: -18px 6px; clip-path: inset(0 100% 0 0); } 18% { translate: -26px 8px; clip-path: inset(0 97% 0 0); } 100% { translate: 0 0; clip-path: inset(0 0 0 0); } }
@keyframes offset { 0% { translate: 0 18px; opacity: 0; } 75% { translate: 0 -2px; opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
@keyframes rise { 0% { translate: 0 20px; clip-path: inset(0 0 100% 0); } 100% { translate: 0 0; clip-path: inset(0 0 0 0); } }
@keyframes fadeup { from { translate: 0 10px; opacity: 0; } }
@keyframes drawline { from { scale: 0 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

body.think { --print: #9e3029; --print2: #2d4a73; --print3: var(--print); }
:root[data-theme='dark'] body.think { --print: hsl(352 72% 60%); --print2: hsl(214 42% 62%); --acc-d: hsl(352 80% 70%); --primary: var(--acc-d); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body.think { --print: hsl(352 72% 60%); --print2: hsl(214 42% 62%); --acc-d: hsl(352 80% 70%); --primary: var(--acc-d); }
}