/* Editorial books: physical geometry is shared by the row and stack views. */
.page-blogs { --blog-canvas: #f8f8f6; --blog-rule: rgb(60 60 62 / .09); --blog-muted: #6e6e70; }
html[data-theme="dark"] .page-blogs { --blog-canvas: #111212; --blog-rule: rgb(255 255 255 / .075); --blog-muted: #a1a1a6; }
.blog-library { --book-w: min(clamp(200px, 24vw, 340px), max(220px, calc((100svh - 330px) / 1.6))); --book-h: calc(var(--book-w) * 1.6); --book-d: 7px; --book-scale: 1.3; --stack-gap: 24px; --book-gap: 40px; --book-ease: cubic-bezier(.2, 0, 0, 1); position: relative; isolation: isolate; min-height: 680px; height: calc(100svh - 82px); max-height: 1080px; background: var(--blog-canvas); overflow: clip; }
.blog-library-heading { position: absolute; z-index: 3; inset: 0 0 auto; margin: 0 48px; height: 128px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--blog-rule); }
.blog-library h1 { display: flex; align-items: center; gap: 20px; margin: 0; font-size: clamp(52px, 6.2vw, 88px); font-weight: 600; letter-spacing: -.055em; line-height: 1; }
.blog-view-switch { align-self: stretch; display: flex; border-inline: 1px solid var(--blog-rule); }
.blog-view-switch button { display: grid; place-items: center; width: 104px; border: 0; background: none; color: var(--blog-muted); transition: background .2s, color .2s; }
.blog-view-switch button + button { border-left: 1px solid var(--blog-rule); }
.blog-view-switch button[aria-checked="true"] { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.blog-view-switch button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.blog-view-switch button:focus-visible { outline-offset: -5px; }
.blog-view-switch svg { width: 22px; height: 22px; }
.blog-grid { position: absolute; z-index: -1; inset: 0 48px; border-inline: 1px solid var(--blog-rule); background: linear-gradient(var(--blog-rule), var(--blog-rule)) center / 1px 100% no-repeat, linear-gradient(var(--blog-rule), var(--blog-rule)) center 30% / 100% 1px no-repeat, linear-gradient(var(--blog-rule), var(--blog-rule)) center 78% / 100% 1px no-repeat; pointer-events: none; }
.blog-grid i { position: absolute; top: 50%; width: min(64vw, 830px); aspect-ratio: 1; border: 1px solid var(--blog-rule); border-radius: 50%; transform: translate(-50%, -50%); }
.blog-grid i:first-child { left: 38%; }
.blog-grid i:last-child { left: 62%; }
.blog-shelf { position: absolute; inset: 128px 0 88px; }
.blog-shelf-track { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; }
.blog-volume { position: absolute; width: var(--book-w); height: var(--book-h); top: 50%; left: 50%; margin: calc(var(--book-h) / -2) 0 0 calc(var(--book-w) / -2); z-index: calc(10 - var(--i)); pointer-events: none; }
.blog-book { position: absolute; inset: 0; width: var(--book-w); height: var(--book-h); transform-style: preserve-3d; --dx: 0px; --dy: calc((var(--i) - 1) * var(--stack-gap)); --rx: -5deg; --rz: -90deg; --ry: 90deg; --scale: var(--book-scale); transform: translate3d(var(--dx), var(--dy), 0) perspective(1800px) rotateX(var(--rx)) rotateZ(var(--rz)) rotateY(var(--ry)) scale3d(var(--scale),var(--scale),var(--scale)); transition: transform .95s var(--book-ease), opacity .4s; will-change: transform; }
.blog-book-cream { --board: #e7e0ce; --cover-ink: #25372e; }
.blog-book-forest { --board: #14392e; --cover-ink: #e5ebd9; }
.blog-book-silver { --board: #080808; --cover-ink: #e5e5ea; }
.blog-book-board { position: absolute; inset: 0; transform: translateZ(calc(var(--book-d) / 2)); transform-style: preserve-3d; }
.blog-book-front { position: absolute; inset: 0; background: var(--board); backface-visibility: hidden; }
.blog-cover { position: relative; width: 100%; height: 100%; container-type: inline-size; background: var(--board); color: var(--cover-ink); overflow: hidden; }
.blog-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 2px 0 3px rgb(0 0 0 / .13), inset 0 0 0 1px rgb(255 255 255 / .13); }
.blog-cover-cream { --board: #e7e0ce; --cover-ink: #25372e; }
.blog-cover-forest { --board: #14392e; --cover-ink: #e5ebd9; }
.blog-cover-silver { --board: #080808; --cover-ink: #e5e5ea; }
.blog-cover-art { position: absolute; width: 82%; aspect-ratio: 1; top: 52%; left: 3.4%; transform: translateY(-50%); opacity: .8; }
.blog-cover-art svg { width: 100%; height: 100%; }
.blog-cover-author { position: absolute; top: 3%; left: 3.4%; font-size: clamp(11px, 3.5cqw, 14px); line-height: 1.3; font-weight: 600; }
.blog-cover-title { position: absolute; right: 3.4%; bottom: max(32px, 6.5%); margin: 0; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); white-space: nowrap; font-size: clamp(15px, 6cqw, 23px); line-height: 1.14; font-weight: 600; letter-spacing: -.02em; }
.blog-cover-folio { position: absolute; bottom: 3%; left: 3.4%; right: 3.4%; display: flex; align-items: baseline; gap: 1.2em; font-size: clamp(8px, 3.2cqw, 12px); line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; }
.blog-cover-folio > * { white-space: nowrap; }
.blog-cover-folio b { font-weight: 700; }
.blog-book-back, .blog-book-spine, .blog-book-fore, .blog-book-head, .blog-book-tail { position: absolute; top: 50%; left: 50%; backface-visibility: hidden; }
.blog-book-back { width: var(--book-w); height: var(--book-h); margin: calc(var(--book-h) / -2) 0 0 calc(var(--book-w) / -2); background: var(--board); transform: rotateY(180deg) translateZ(calc(var(--book-d) / 2)); }
.blog-book-spine, .blog-book-fore { width: var(--book-d); height: var(--book-h); margin: calc(var(--book-h) / -2) 0 0 calc(var(--book-d) / -2); }
.blog-book-spine { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 7% 0; background: var(--board); color: var(--cover-ink); box-shadow: inset 1px 0 rgb(255 255 255 / .25), inset -1px 0 rgb(0 0 0 / .3); transform: rotateY(-90deg) translateZ(calc(var(--book-w) / 2)); }
.blog-book-spine > * { writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap; font-size: 6px; line-height: 1; letter-spacing: .02em; font-weight: 500; }
.blog-book-spine > b { font-weight: 700; font-variant-numeric: tabular-nums; }
.blog-book-spine > span:nth-child(2) { flex: 1; font-weight: 600; }
.blog-book-fore { transform: rotateY(90deg) translateZ(calc(var(--book-w) / 2 - 1px)); background: repeating-linear-gradient(90deg,#d6d3cb 0 1px,#f3f1ec 1px 2px); }
.blog-book-head, .blog-book-tail { width: var(--book-w); height: var(--book-d); margin: calc(var(--book-d) / -2) 0 0 calc(var(--book-w) / -2); background: repeating-linear-gradient(0deg,#d6d3cb 0 1px,#f3f1ec 1px 2px); }
.blog-book-head { transform: rotateX(90deg) translateZ(calc(var(--book-h) / 2 - 1px)); }
.blog-book-tail { transform: rotateX(-90deg) translateZ(calc(var(--book-h) / 2 - 1px)); }
.blog-book-hit { position: absolute; pointer-events: auto; left: calc((var(--book-w) - var(--book-h) * var(--book-scale)) / 2); top: calc(var(--book-h) / 2 + (var(--i) - 1) * var(--stack-gap) - var(--book-d) * var(--book-scale) / 2 - 4px); width: calc(var(--book-h) * var(--book-scale)); height: calc(var(--book-d) * var(--book-scale) + 8px); border-radius: 1px; }
.blog-book-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.blog-volume[data-active="true"] .blog-book { --dx: 44px; }
.blog-volume[data-pressed="true"] .blog-book { --dx: 30px; transition-duration: .15s; }
.blog-library[data-view="row"] .blog-book { --dx: calc((var(--i) - 1) * (var(--book-w) + var(--book-gap))); --dy: 0px; --rx: 0deg; --ry: 0deg; --rz: 0deg; --scale: 1; }
.blog-library[data-view="row"] .blog-book-hit { inset: 0; width: 100%; height: 100%; transform: translateX(calc((var(--i) - 1) * (var(--book-w) + var(--book-gap)))); }
.blog-library[data-view="row"] .blog-volume[data-active="true"] .blog-book { --dy: -12px; }
.blog-library[data-view="row"] .blog-volume[data-pressed="true"] .blog-book { --dy: -6px; --scale: .98; transition-duration: .15s; }
.blog-library-caption { position: absolute; inset: auto 48px 0; height: 88px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--blog-rule); color: var(--blog-muted); font-size: 13px; }
.blog-library-caption p { margin: 0; display: flex; align-items: center; gap: 20px; }
.blog-library-caption svg { width: 20px; height: 20px; }
.blog-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.blog-library[data-opening="true"] .blog-volume { pointer-events: none; }
.blog-library[data-opening="true"] .blog-volume:not([data-chosen="true"]) .blog-book { opacity: 0; }
.blog-library .blog-volume[data-chosen="true"] { z-index: 30; }
.blog-library .blog-volume[data-chosen="true"] .blog-book { --dx: 0px; --dy: 0px; --rx: 0deg; --ry: 0deg; --rz: 0deg; --scale: 1; transition-duration: .65s; }
.author-blog { padding-top: 64px; padding-bottom: 80px; min-height: calc(100svh - 82px); }
.blog-back { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gray); margin-bottom: 56px; }
.blog-back svg { width: 20px; height: 20px; transform: rotate(180deg); }
.author-blog-content h1 { margin: 0 0 12px; font-size: clamp(42px,5vw,64px); line-height: 1.05; letter-spacing: -.045em; font-weight: 600; }
.author-blog-role { margin: 0; color: var(--gray); font-size: 16px; }
.author-blog-posts { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 32px; }
.author-blog-posts h2 { margin: 0 0 32px; font-size: 22px; font-weight: 600; }
.author-blog-posts p { margin: 0 0 8px; color: var(--gray); font-size: 15px; }
.blog-author-nav { display: flex; justify-content: space-between; gap: 32px; border-top: 1px solid var(--line); margin-top: 64px; padding-top: 32px; }
.blog-author-nav a { display: inline-flex; align-items: center; gap: 16px; font-size: 15px; }
.blog-author-nav span { color: var(--gray); font-size: 12px; }
.blog-author-nav svg { width: 22px; height: 22px; }
@media(max-width:960px) { .blog-library { height: calc(100svh - 70px); min-height: 610px; --book-gap: 24px; } .blog-library-heading { margin-inline: 24px; height: 104px; } .blog-view-switch button { width: 68px; } .blog-grid { inset-inline: 24px; } .blog-shelf { top: 104px; } .blog-library-caption { inset-inline: 24px; } }
@media(max-width:600px) {
  .blog-library { --book-w: calc((100vw - 70px) / 2.08); --book-d: 8px; --stack-gap: 44px; min-height: 570px; }
  .blog-library h1 { font-size: 44px; gap: 12px; }
  .blog-library-heading { height: 96px; margin-inline: 20px; }
  .blog-view-switch { align-self: center; height: 48px; border: 1px solid var(--blog-rule); }
  .blog-view-switch button { width: 46px; }
  .blog-view-switch svg { width: 18px; height: 18px; }
  .blog-grid { inset-inline: 20px; }
  .blog-grid i { width: 125vw; }
  .blog-shelf { top: 96px; bottom: 96px; }
  .blog-book-hit { height: 44px; top: calc(var(--book-h) / 2 + (var(--i) - 1) * var(--stack-gap) - 22px); }
  .blog-volume[data-active="true"] .blog-book { --dx: 16px; }
  .blog-volume[data-pressed="true"] .blog-book { --dx: 10px; }
  .blog-library-caption { inset-inline: 20px; height: 96px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 8px; font-size: 12px; }
  .blog-library-caption p:last-child { gap: 12px; }
  .blog-library[data-view="row"] { --book-w: min(64vw,250px,max(180px,calc((100svh - 320px) / 1.6))); }
  .blog-library[data-view="row"] .blog-shelf { overflow-x: auto; scroll-snap-type: x mandatory; }
  .blog-library[data-view="row"] .blog-shelf-track { width: calc(3 * var(--book-w) + 96px); }
  .blog-library[data-view="row"] .blog-volume { left: calc(24px + var(--i) * (var(--book-w) + 24px)); margin-left: 0; scroll-snap-align: center; pointer-events: auto; }
  .blog-library[data-view="row"] .blog-book { --dx: 0px; }
  .blog-library[data-view="row"] .blog-book-hit { transform: none; }
  .author-blog { padding-top: 32px; }
  .blog-back { margin-bottom: 32px; }
  .author-blog-posts { margin-top: 32px; padding-top: 24px; }
  .blog-author-nav { gap: 24px; flex-wrap: wrap; margin-top: 40px; }
}
@media(prefers-reduced-motion:reduce) { .blog-book, .blog-view-switch button { transition: none; } }
/* Keep full-size covers scrollable on narrow tablets as well as phones. */
@media (max-width:760px) {
  .blog-library[data-view="row"] { --book-w: min(64vw,250px,max(180px,calc((100svh - 320px) / 1.6))); }
  .blog-library[data-view="row"] .blog-shelf { overflow-x: auto; scroll-snap-type: x mandatory; }
  .blog-library[data-view="row"] .blog-shelf-track { width: calc(3 * var(--book-w) + 96px); }
  .blog-library[data-view="row"] .blog-volume { left: calc(24px + var(--i) * (var(--book-w) + 24px)); margin-left: 0; scroll-snap-align: center; pointer-events: auto; }
  .blog-library[data-view="row"] .blog-book { --dx: 0px; }
  .blog-library[data-view="row"] .blog-book-hit { transform: none; }
}