/* softprint: a print-shop index. Pictures are optional: a post without one gets
   a generated print, a pull quote or plain type, and the grid treats them all as equals. */

.mark {
  display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.5em; vertical-align: -0.12em;
  background: currentColor; -webkit-mask: url(mark-e08b3b3a43.svg) center / contain no-repeat; mask: url(mark-e08b3b3a43.svg) center / contain no-repeat;
}

/* ---------- intro: the wordmark is the label, prints frame it ---------- */
.masthead__label--word { max-width: none; padding: 0; gap: 18px; background: transparent; border: 0; box-shadow: none; }
.masthead__label--word .masthead__title {
  font-size: clamp(4rem, 17vw, 17rem); line-height: 0.82; letter-spacing: -0.045em; margin-left: -0.04em; padding-bottom: 0.2em;
}
.masthead__label--word .masthead__text { max-width: 44ch; font-size: var(--step-1); line-height: 1.4; font-family: var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 48; }
@media (max-width: 640px) { .masthead__label--word .masthead__title { font-size: 21vw; } }

/* ---------- index ---------- */
.index2 { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); display: grid; gap: 32px; }
.index2__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.index2__title { font-size: var(--step-3); font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
.index2__note { color: var(--ink-3); font-size: var(--step--1); }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.span-12 { grid-column: span 12; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
@media (max-width: 980px) { .span-7, .span-5 { grid-column: span 6; } .span-4 { grid-column: span 6; } .bento > .span-4:last-child:nth-child(odd) { grid-column: span 12; } }
@media (max-width: 640px) { .bento > * { grid-column: 1 / -1 !important; } }

.tile article {
  position: relative; isolation: isolate; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.tile article:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.tile__body { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 28px); }
.tile__title { font-size: var(--step-1); line-height: 1.15; }
.tile__title a, .tile__fromtitle a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-base) var(--ease-io); }
.tile article:hover .tile__title a, .tile__title a:focus-visible, .tile article:hover .tile__fromtitle a { background-size: 100% 1px; }
/* the whole tile is clickable through its title link */
.tile__title a::after, .tile__fromtitle a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tile .tag { position: relative; z-index: 3; }
.tile .excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* generated cover: canvas sits behind the text, the print fades under it */
.cover { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.tile--lead article, .tile--cover article { background: var(--bg); }
.tile--lead article::before, .tile--cover article::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.92) 0%, rgba(11, 11, 12, 0.72) 45%, rgba(11, 11, 12, 0) 80%), var(--weave);
}
.tile--lead article { min-height: clamp(380px, 46vw, 560px); justify-content: flex-end; }
.tile--lead .tile__body { max-width: 760px; padding: clamp(28px, 4vw, 56px); gap: 16px; }
.tile__title--lead { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
.lead__excerpt { font: 400 var(--step-1)/1.45 var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 48; color: var(--ink-2); max-width: 54ch; }
.tile--cover article { min-height: 380px; justify-content: flex-end; }
.tile--cover article::before { background: linear-gradient(0deg, rgba(11, 11, 12, 0.95) 0%, rgba(11, 11, 12, 0.7) 50%, rgba(11, 11, 12, 0.1) 100%), var(--weave); }

/* photo */
.tile__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 0.9s var(--ease-out), filter var(--dur-base); }
.tile article:hover .tile__img img { transform: scale(1.04); }
.tile--photo.span-12 article { flex-direction: row; }
.tile--photo.span-12 .tile__img { flex: 0 0 52%; aspect-ratio: auto; min-height: 320px; }
.tile--photo.span-12 .tile__body { align-content: center; padding: clamp(24px, 4vw, 48px); }
.tile--photo.span-12 .tile__title { font-size: var(--step-2); }
@media (max-width: 760px) { .tile--photo.span-12 article { flex-direction: column; } .tile--photo.span-12 .tile__img { aspect-ratio: 16 / 10; min-height: 0; } }

/* pull quote: words instead of a picture */
.tile--quote article { background: var(--bg-2); }
.tile--quote .tile__body { height: 100%; align-content: space-between; }
.tile__quote { margin: 0; font: italic 400 clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem)/1.25 var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 96; color: var(--white); }
.tile__quote p { text-indent: -0.4em; }
.tile__quote::before {
  content: ''; display: block; width: 44px; height: 44px; margin-bottom: 18px; background: var(--accent);
  -webkit-mask: url(mark-e08b3b3a43.svg) center / contain no-repeat; mask: url(mark-e08b3b3a43.svg) center / contain no-repeat;
}
.tile__from { font-size: var(--step--1); color: var(--ink-3); }
.tile__fromtitle { color: var(--ink-1); font-family: var(--f-display); font-size: 1.05rem; }

/* type only: the post number stands in for a picture */
.tile__num { font: 600 clamp(4.5rem, 3rem + 5vw, 7.5rem)/0.8 var(--f-display); font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--accent); margin-bottom: 10px; }

/* ---------- read stamp ---------- */
.readstamp {
  position: absolute; top: 14px; right: 14px; z-index: 4; display: none; align-items: center; gap: 2px;
  padding: 5px 10px 5px 8px; border: 1.5px solid var(--accent); border-radius: var(--r-pill);
  color: var(--accent); background: rgba(11, 11, 12, 0.85); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  transform: rotate(-6deg);
}
.readstamp .mark { margin-right: 0.35em; }
.is-read .readstamp { display: inline-flex; }
.is-read .readstamp.is-new { animation: stamp-in 0.5s var(--ease-out) both; }
@keyframes stamp-in { from { transform: rotate(-18deg) scale(1.8); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-6deg) scale(1); } }

/* ---------- shelf: the sidebar laid flat under the index ---------- */
.shelf { border-top: 1px solid var(--line); background: var(--bg-2); }
.shelf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(28px, 4vw, 56px); padding-top: 56px; padding-bottom: 48px; }
.shelf__col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.shelf__col > p { color: var(--ink-2); font-size: 0.95em; }
.shelf__big { font: 500 var(--step-1)/1.2 var(--f-display) !important; color: var(--white) !important; }

/* ---------- post ---------- */
.post2__head { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.cover--head { opacity: 0.9; }
.post2__head .cover { z-index: -2; }
.post2__head::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.96) 0%, rgba(11, 11, 12, 0.8) 50%, rgba(11, 11, 12, 0.2) 100%), var(--weave);
}
.post2__headin { position: relative; z-index: 2; display: grid; gap: 18px; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 96px); }
.post2__title { font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.03em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; max-width: 16ch; }
.standfirst { font: 400 var(--step-1)/1.45 var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 48; color: var(--ink-2); max-width: 46ch; }

.post2 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding-top: 56px; padding-bottom: clamp(64px, 9vw, 120px); }
.toc { position: sticky; top: calc(var(--head-h, 69px) + 24px); align-self: start; display: grid; gap: 12px; }
.toc ol { display: grid; gap: 2px; counter-reset: toc; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: var(--step--1); color: var(--ink-3); transition: color var(--dur-fast), border-color var(--dur-fast); }
.toc a:hover { color: var(--white); }
.toc a.is-on { color: var(--white); border-left-color: var(--accent); }
@media (max-width: 900px) { .post2 { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } .toc ol { grid-auto-flow: column; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); } .toc a { white-space: nowrap; border-left: 0; border-bottom: 1px solid transparent; padding: 8px 12px; } .toc a.is-on { border-bottom-color: var(--accent); } }
.post2__body { max-width: 720px; }
/* a post with "Hide On this page": one column, the text under the title */
.post2--solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- pictures in a post: ![alt](/media/… "caption"), alone in its paragraph ----------
   {.left} / {.right} after it (maia: class align-left / align-right) floats the picture so the text
   flows around it; each heading starts below the picture before it. */
.prose figure { margin: 1.8em 0; display: grid; gap: 10px; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); }
.prose figcaption { font-size: var(--step--1); line-height: 1.5; color: var(--ink-3); }
.prose figure.align-left, .prose figure.align-right { width: min(42%, 300px); margin-top: 0.35em; margin-bottom: 1em; }
.prose figure.align-right { float: right; margin-left: clamp(18px, 3vw, 32px); }
.prose figure.align-left { float: left; margin-right: clamp(18px, 3vw, 32px); }
.prose h2, .prose hr, .prose pre, .prose blockquote { clear: both; }
.prose::after { content: ''; display: block; clear: both; }
@media (max-width: 520px) {
  .prose figure.align-left, .prose figure.align-right { float: none; width: min(100%, 320px); margin: 1.4em auto; }
}
.prose h2 { scroll-margin-top: calc(var(--head-h, 69px) + 24px); }
.prose--drop > p:first-of-type::first-letter {
  float: left; margin: 0.08em 0.12em 0 0; font: 600 3.6em/0.8 var(--f-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; color: var(--accent);
}

/* the end of a post gets printed */
/* coming soon: the intro alone fills the screen (no header above it) */
.is-soon .masthead__in { min-height: 100svh; }
/* --wm is the wordmark's size (same clamp as .masthead__title): the stamp scales and sits relative to it */
.is-soon .masthead__label { position: relative; --wm: clamp(4rem, 17vw, 17rem); }
/* "Coming soon" as a violet rubber stamp pressed onto the corner of the wordmark */
.soon__stamp {
  --soon-rot: -9deg;
  position: absolute; top: calc(var(--wm) * -0.2); right: calc(var(--wm) * -0.55);
  display: inline-flex; align-items: center; gap: 0.7em; margin: 0;
  padding: 0.6em 1.15em; border: 2px solid var(--accent); border-radius: var(--r-pill);
  background: rgba(14, 14, 15, 0.92); color: var(--accent);
  box-shadow: inset 0 0 0 3px rgba(14, 14, 15, 0.92), inset 0 0 0 4.5px var(--accent), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  font: 600 max(0.85rem, calc(var(--wm) * 0.095))/1 var(--f-text); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(var(--soon-rot));
}
.soon__stamp .mark { margin: 0; width: 0.8em; height: 0.8em; vertical-align: 0; }
.js .soon__stamp { opacity: 0; }
.js .soon__stamp.is-stamped { animation: soon-stamp 0.6s var(--ease-out) forwards; }
@keyframes soon-stamp {
  0% { opacity: 0; transform: rotate(-28deg) scale(1.9); }
  55% { opacity: 1; transform: rotate(calc(var(--soon-rot) + 3deg)) scale(0.94); }
  100% { opacity: 1; transform: rotate(var(--soon-rot)) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .js .soon__stamp { opacity: 1; animation: none !important; } }
/* phones: the corner would run off the screen, so the stamp sits under the wordmark */
@media (max-width: 640px) { .soon__stamp { --soon-rot: -4deg; position: static; justify-self: start; margin-top: 4px; } }
.soon__legal { font-size: var(--step--1); color: rgba(236, 235, 230, 0.6); text-decoration: underline; text-underline-offset: 3px; }
.soon__legal:hover, .soon__legal:focus-visible { color: #ecebe6; }
button.soon__legal { padding: 0; border: 0; background: none; font: inherit; font-size: var(--step--1); cursor: pointer; }

/* preview links: a small bar at the bottom so nobody mistakes the preview for the live site */
.preview-bar {
  position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 10px 14px 10px 16px;
  border: 1px solid var(--accent); border-radius: var(--r-pill); background: rgba(11, 11, 12, 0.94);
  color: var(--ink-2); font-size: var(--step--1); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
.preview-bar strong { color: var(--accent); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.preview-bar .mark { color: var(--accent); margin: 0; }
.preview-bar__exit { color: var(--white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 640px) { .preview-bar { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: var(--r); } }

/* a post's sources: small print under the text, long addresses wrap instead of overflowing */
.sources { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-h, 69px) + 24px); }
.sources__title { font-family: var(--f-text); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.sources__list { display: grid; gap: 8px; padding-left: 1.6em; list-style: decimal; font-size: var(--step--1); color: var(--ink-2); overflow-wrap: anywhere; }
.sources__list li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }
.sources__list a { color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.sources__list a:hover, .sources__list a:focus-visible { text-decoration-color: var(--accent); }
/* a book among the sources: not numbered, with its notes (pages, chapters) under it */
.sources__book { display: grid; gap: 6px; padding: 12px 16px; border-left: 2px solid var(--accent); background: rgba(167, 125, 255, 0.05); font-size: var(--step--1); color: var(--ink-2); overflow-wrap: anywhere; }
.sources__booktitle { color: var(--ink-1); font-style: italic; }
.sources__notes { color: var(--ink-3); }
.endstamp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--r); scroll-margin-top: calc(var(--head-h, 69px) + 24px); }
.endstamp__mark { width: 64px; height: 64px; background: var(--accent); -webkit-mask: url(mark-e08b3b3a43.svg) center / contain no-repeat; mask: url(mark-e08b3b3a43.svg) center / contain no-repeat; }
.js .endstamp__mark { opacity: 0; transform: scale(1.9) rotate(-30deg); }
.js .endstamp.is-stamped .endstamp__mark { animation: end-stamp 0.55s var(--ease-out) forwards; }
@keyframes end-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-30deg); } 55% { opacity: 1; transform: scale(0.92) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.endstamp__title { font: 500 1.25rem/1.2 var(--f-display); color: var(--white); }
.endstamp__text { color: var(--ink-2); font-size: 0.95em; }

.related .bento { margin-top: 4px; }
.bento--related .tile--cover article { min-height: 320px; }
@media (max-width: 760px) {
  .tile--lead article::before { background: linear-gradient(0deg, rgba(11, 11, 12, 0.96) 0%, rgba(11, 11, 12, 0.85) 55%, rgba(11, 11, 12, 0.15) 100%), var(--weave); }
  .tile--lead article { min-height: 520px; }
  .post2__head::before { background: linear-gradient(0deg, rgba(11, 11, 12, 0.97) 0%, rgba(11, 11, 12, 0.85) 60%, rgba(11, 11, 12, 0.4) 100%), var(--weave); }
}

/* ---------- colour: black cloth with a soft violet ombre on the intro (covers stay plain black), a periwinkle only on the lines ---------- */
:root {
  --ombre-violet: #2b1a5c;
  --ombre-deep: #171030;
  --blue: #6c7cff;
  /* the cloth and its lines cool very slightly */
  --bg-2: #131318;
  --bg-3: #1d1d24;
  --line: rgba(206, 208, 255, 0.12);
  --line-strong: rgba(206, 208, 255, 0.27);
}
.masthead { background: linear-gradient(180deg, #0e0e0f 0%, #0e0e0f 45%, var(--ombre-deep) 82%, var(--ombre-violet) 100%); }
.shelf { background: linear-gradient(180deg, var(--bg-2) 0%, var(--ombre-deep) 180%); }

/* ---------- suggest a topic: a panel printed like the intro, grown out of the button that opens it ---------- */
.shelf__btn { justify-self: start; margin-top: 4px; }
html.is-locked { overflow: hidden; scrollbar-gutter: stable; }
.suggest-panel {
  margin: auto; padding: 0; overflow: hidden; color: var(--ink-1);
  width: min(1040px, calc(100vw - 2 * var(--gutter))); max-width: none;
  height: min(680px, calc(100svh - 2 * var(--gutter))); max-height: none;
  border: 1px solid rgba(236, 235, 230, 0.16); border-radius: var(--r);
  background: linear-gradient(180deg, #0e0e0f 0%, #0e0e0f 45%, var(--ombre-deep) 82%, var(--ombre-violet) 100%);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9);
}
.suggest-panel::backdrop { background: rgba(6, 5, 12, 0.72); backdrop-filter: blur(3px); }
.suggest-panel::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--weave); mix-blend-mode: multiply; }
.suggest-panel__in { position: relative; z-index: 2; height: 100%; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 4vw, 56px); }
.suggest-panel__card { display: grid; gap: 14px; width: 100%; max-width: 520px; }
.suggest-panel__title { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.03em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; color: #ecebe6; }
.suggest-panel__text { max-width: 44ch; color: rgba(236, 235, 230, 0.66); font: 400 var(--step-1)/1.4 var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 48; }
.suggest-panel .suggest { margin-top: 8px; }
.suggest-panel .suggest .btn { justify-self: start; }
.suggest-panel__close {
  position: absolute; z-index: 3; top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid rgba(236, 235, 230, 0.28); border-radius: 50%; background: #0b0b0c; color: #ecebe6;
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.suggest-panel__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.suggest-panel__close:hover, .suggest-panel__close:focus-visible { border-color: #ecebe6; transform: rotate(90deg); }
@media (max-width: 640px) { .suggest-panel { width: 100vw; height: 100svh; border: 0; border-radius: 0; } }

/* lines run from violet into periwinkle; buttons and marks stay one violet */
.progress span { background: linear-gradient(90deg, var(--accent), var(--blue)); }
.index2__head { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--line-strong) 0%, var(--line-strong) 55%, var(--accent) 85%, var(--blue) 100%) 1; }
.toc a.is-on { border-image: linear-gradient(180deg, var(--accent), var(--blue)) 1; }
@media (max-width: 900px) { .toc a.is-on { border-image: linear-gradient(90deg, var(--accent), var(--blue)) 1; } }
.prose blockquote { border-left: 2px solid transparent; border-image: linear-gradient(180deg, var(--accent), var(--blue)) 1; }
.site-foot { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--accent) 35%, var(--blue) 65%, transparent) 1; }
.tile article:hover { border-color: rgba(167, 125, 255, 0.45); }
@media (pointer: coarse) { .toc a { padding-top: 12px; padding-bottom: 12px; } }

/* maia writes a plain-HTML copy of each page into #app for search engines and readers without
   JavaScript. render.js replaces #app on load; until then, a browser running scripts hides the copy. */
.js .maia-static { display: none; }
.maia-static { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.maia-static ul { list-style: disc; padding-left: 1.25rem; }
.maia-static ol { list-style: decimal; padding-left: 1.25rem; }
.maia-static p, .maia-static li { margin-bottom: 0.75rem; }

/* the analytics question: a card in the corner, never covering the page's own controls for long;
   both answers are the same button, so saying no is as easy as saying yes */
.consent {
  position: fixed; z-index: 70; left: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px));
  display: grid; gap: 10px; padding: 18px 18px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: rgba(11, 11, 12, 0.96);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  animation: consent-in 0.5s var(--ease-out) backwards;
}
.consent__title { font-family: var(--f-display); font-size: var(--step-1); font-weight: 500; line-height: 1.15; color: var(--white); }
.consent__text { font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 4px; }
.consent__actions .btn { flex: 1 1 0; min-width: 120px; }
.consent__more { font-size: var(--step--1); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.consent__more:hover, .consent__more:focus-visible { color: var(--white); }
@keyframes consent-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
@media (max-width: 640px) { .consent { right: 12px; left: 12px; bottom: 12px; width: auto; } }
/* the footer's "Cookie settings" is a button (it opens the question again), dressed as its links */
.site-foot__link {
  padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); cursor: pointer; text-align: left;
}
.site-foot__link:hover, .site-foot__link:focus-visible { color: var(--white); }
@media (pointer: coarse) { .site-foot__link { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- books: recommendations. Each cover stands on its own printed stage: a violet star
   pressed behind it, a few small prints around it, and a shadow on the floor. ---------- */
.masthead--page .masthead__in { min-height: clamp(320px, 50vh, 520px); }
.masthead--page .masthead__label { max-width: 640px; }
.masthead--page .widget__title { color: var(--accent); }
.masthead__title--page { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.6rem); line-height: 0.98; }
.masthead--page .masthead__text { font: 400 var(--step-1)/1.4 var(--f-display); font-variation-settings: 'SOFT' 100, 'opsz' 48; }

.books { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(64px, 9vw, 120px); }
.books__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.book article {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.book article:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.book__stage {
  position: relative; isolation: isolate; aspect-ratio: 5 / 4; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(58% 52% at 50% 60%, rgba(167, 125, 255, 0.28), rgba(167, 125, 255, 0.07) 55%, transparent 78%), #0e0e0f;
}
/* the cloth's twill, and a dashed frame like a print's registration border */
.book__stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--weave); mix-blend-mode: multiply; }
.book__stage::after { content: ''; position: absolute; inset: 14px; z-index: 1; pointer-events: none; border: 1px dashed rgba(236, 235, 230, 0.14); border-radius: 4px; }
/* pressed off-centre, so the star shows beside the book instead of disappearing behind it */
.book__star {
  position: absolute; z-index: 0; left: 66%; top: 40%; width: 58%; aspect-ratio: 1; translate: -50% -50%;
  background: url(star-octagram-violet-708b7db708.webp) center / contain no-repeat; opacity: 0.34; rotate: 8deg;
  transition: rotate 1.4s var(--ease-out), opacity var(--dur-base);
}
.book--b .book__star { left: 34%; rotate: -14deg; }
.book article:hover .book__star { rotate: 34deg; opacity: 0.46; }
.book--b article:hover .book__star { rotate: -40deg; }
.book__spark {
  position: absolute; z-index: 1; width: 22px; aspect-ratio: 1;
  background: url(star-fourpoint-white-a00734b962.webp) center / contain no-repeat; opacity: 0.85;
  animation: book-twinkle 4s var(--ease-io) infinite;
}
.book__spark--1 { left: 12%; top: 20%; }
.book__spark--2 { right: 13%; top: 15%; width: 32px; background-image: url(star-fourpoint-violet-413729f824.webp); animation-delay: -1.3s; }
.book__spark--3 { right: 21%; bottom: 24%; width: 14px; animation-delay: -2.6s; }
.book--b .book__spark--1 { left: auto; right: 12%; top: 30%; }
.book--b .book__spark--2 { right: auto; left: 11%; top: 13%; }
.book--b .book__spark--3 { right: auto; left: 20%; bottom: 22%; }
@keyframes book-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; } 50% { transform: scale(0.55) rotate(45deg); opacity: 0.3; } }
/* the number, as a rubber stamp in the corner (like the "read" stamp on the index) */
.book__no {
  position: absolute; z-index: 3; top: 24px; left: 24px; display: inline-flex; align-items: center;
  padding: 5px 10px 5px 8px; border: 1.5px solid var(--accent); border-radius: var(--r-pill);
  color: var(--accent); background: rgba(11, 11, 12, 0.85); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums; transform: rotate(-6deg);
}
.book__no .mark { margin-right: 0.35em; }
.book__floor {
  position: absolute; z-index: 1; left: 50%; bottom: 10%; width: 50%; height: 22px; translate: -50% 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); transition: scale var(--dur-base) var(--ease-out);
}
.book article:hover .book__floor { scale: 0.86 1; }
.book__cover {
  position: absolute; z-index: 2; left: 50%; bottom: 10%; height: 76%; width: auto; max-width: 74%; object-fit: contain; object-position: bottom;
  translate: -50% 0; transform-origin: 50% 100%;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transition: transform var(--dur-base) var(--ease-out);
}
.book article:hover .book__cover { transform: translateY(-8px) rotate(-1.5deg); }
/* a flat cover (no cut-out): turned a little, like a book standing on the shelf */
.book__cover.is-flat { border-radius: 2px 5px 5px 2px; transform: perspective(1100px) rotateY(16deg); }
.book article:hover .book__cover.is-flat { transform: perspective(1100px) rotateY(6deg) translateY(-8px); }
.book__stage .cover { z-index: -1; opacity: 0.85; }

.book__body { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 32px); }
.book__title { font-size: var(--step-2); font-weight: 600; line-height: 1.04; letter-spacing: -0.015em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
.book__author { padding-bottom: 14px; border-bottom: 1px dashed var(--line-strong); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.book__text { color: var(--ink-2); }
.book__author:last-child { padding-bottom: 0; border-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .book__spark { animation: none; }
  .book__star, .book__cover, .book__floor, .book article { transition: none; }
}

/* ---------- social profiles: round buttons in the header, labelled pills in the footer ---------- */
.social { display: flex; flex-wrap: wrap; gap: 6px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 38px; min-height: 38px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink-2);
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.social a:hover, .social a:focus-visible { color: var(--white); border-color: var(--accent); background: rgba(167, 125, 255, 0.08); }
.social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social svg.is-fill { fill: currentColor; stroke: none; width: 15px; height: 15px; }
.site-foot .social--foot { display: grid; justify-items: start; gap: 8px; }
/* socials: a small section under the suggestion box (or a column of their own without it) */
.shelf__socials { display: grid; gap: 12px; margin-top: 18px; }
.shelf__col > .shelf__socials:first-child { margin-top: 0; }
.shelf__links { display: grid; gap: 8px; }
.site-foot .tags { display: flex; }
/* the bar: the wordmark small, with the copyright beside it */
.site-foot__sign { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.brand--sm { gap: 8px; min-height: 0; }
.brand--sm .brand__mark { width: 22px; height: 22px; }
.brand--sm .brand__word { font-size: 1.05rem; color: var(--ink-1); }
/* the footer: plain links, icon and name, like the footer menu */
.social--foot a { min-width: 0; min-height: 0; padding: 0; border: 0; background: none; justify-content: flex-start; color: var(--ink-2); }
.social--foot a:hover, .social--foot a:focus-visible { background: none; color: var(--white); }
.social--foot a svg { transition: color var(--dur-fast); }
.social--foot a:hover svg, .social--foot a:focus-visible svg { color: var(--accent); }
@media (pointer: coarse) { .social--foot a { min-height: 44px; } }
@media (max-width: 820px) {
  .site-head .social--head { margin-left: auto; }
  .site-head .social--head + .btn { margin-left: 0; }
}
/* phones: the social icons leave the sticky header (they are in the footer), so "Suggest a topic" fits
   beside the wordmark and the header stays two rows instead of three */
@media (max-width: 560px) {
  .site-head .social--head { display: none; }
  .site-head .social--head + .btn { margin-left: auto; }
}

/* ---------- the maker's mark: a printer's stamp in the footer bar, faint until you reach it ---------- */
.site-foot__bar { align-items: center; }
.credit {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  padding: 7px 16px 7px 12px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.credit strong { font: 600 0.95rem/1 var(--f-display); font-variation-settings: "SOFT" 100, "opsz" 48; letter-spacing: 0; text-transform: none; color: var(--ink-2); transition: color var(--dur-fast); }
.credit a { display: inline-flex; align-items: baseline; gap: 0.5em; }
.credit__mark { width: 1.05em; height: 1.05em; margin: 0; vertical-align: 0; transition: transform 0.9s var(--ease-out); }
.credit__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
/* pressed: the ink takes, the stamp straightens */
.credit:hover, .credit:focus-within {
  transform: scale(1.03); border-style: solid; border-color: var(--accent); color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg-2), inset 0 0 0 4.5px rgba(167, 125, 255, 0.45);
}
.credit:hover strong, .credit:focus-within strong { color: var(--white); }
.credit a:hover strong, .credit a:focus-visible strong { color: var(--accent); }
.credit:hover .credit__mark, .credit:focus-within .credit__mark { transform: rotate(90deg); }
/* phones: the same one-line pill as on a computer, a size smaller, on its own row under the wordmark */
@media (max-width: 640px) {
  .site-foot__bar { justify-content: center; text-align: center; }
  .credit { order: 3; flex-wrap: nowrap; white-space: nowrap; gap: 0 8px; padding: 0 13px 0 10px; font-size: 0.6rem; letter-spacing: 0.1em; }
  .credit strong { font-size: 0.84rem; }
  .site-foot__bar .credit a { min-height: 34px; align-items: center; }  /* still a comfortable tap, without stretching the pill */
}

/* the first time the stamp scrolls into view it is pressed onto the page: dropped in large and tilted,
   inked violet, then it settles straight and the ink dries back to grey (blog.js adds the classes) */
.js .credit.is-waiting { opacity: 0; }
.credit.is-stamped { animation: credit-press 0.65s var(--ease-out) backwards, credit-ink 1.8s ease-out backwards; }
.credit.is-stamped strong { animation: credit-ink-text 1.8s ease-out backwards; }
@keyframes credit-press {
  0% { opacity: 0; transform: rotate(-16deg) scale(1.9); }
  55% { opacity: 1; transform: rotate(2deg) scale(0.95); }
  100% { opacity: 1; transform: none; }
}
@keyframes credit-ink {
  0%, 45% { border-style: solid; border-color: var(--accent); color: var(--accent);
    box-shadow: inset 0 0 0 3px var(--bg-2), inset 0 0 0 4.5px rgba(167, 125, 255, 0.45); }
}
@keyframes credit-ink-text { 0%, 45% { color: var(--white); } }

/* ---------- avatar: the octagram print instead of initials ---------- */
.avatar--star {
  background: #0e0e0f url(star-octagram-violet-708b7db708.webp) center / 76% no-repeat;
  border: 1px solid var(--line-strong); color: transparent;
}