/* 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(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 980px) { .shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shelf__grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .shelf__grid { grid-template-columns: minmax(0, 1fr); } }
.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; }
.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; }

/* 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); }
.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; } }