/* The articles (scripts/build-articles.cjs): the fit guides, the essays and the index of them. Both
   kinds of article wear one frame (An essay, below); a fit guide adds what the hand and grip want,
   the shapes that fit best under a heading per kind, the finder's banner between two of them, and a
   few questions. */
.fit { max-width: 960px }

/* What the list was chosen by, as a checklist (Patryk, 2026-10-19: criteria with check marks; the
   markup is md.checks). No box and no rules between the points: a small title, then each point as one
   paragraph, its bold opening running on into the reason, behind a small black square with a white
   check, 4px round (Patryk, 2026-10-19, after a blue badge, a grey check and a blue check with the
   reason on a line of its own). */
.checks { margin: 0 0 32px }
.checks-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.2px; line-height: 1.4; color: var(--ink) }
.checks-sub { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--es-body, var(--ink)) }
.prose .checks ul, .checks ul { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none }
.prose .checks li, .checks li { display: flex; gap: 12px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--es-body, var(--ink)) }
/* The square sits on the first line: 16px, centred in its 24px line. */
.checks-mark { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 4px; border-radius: 4px; background: var(--ink-deep); color: var(--raised) }
.checks-mark svg { display: block; width: 12px; height: 12px }   /* 12 in 16: two whole pixels each side, so the check does not sit on a half pixel */
.checks li strong { font-weight: 600; color: var(--ink) }

/* ==== The list =============================================================================== */
/* Each shape is a card and then the words on why it fits (Patryk, 2026-10-19: the first of twenty
   looks tried in a card lab). The render stands on a lit stage at the left, a soft light from above
   and a shadow under it, and lifts and turns a little on hover; at the right the brand, the name,
   three facts a line each (label, gap, value) and a pill-shaped Amazon button. White, no price. The
   reasons get a paragraph of their own under it. The whole card opens the finder's sheet. */
.fit-list { margin: 0; padding: 0; list-style: none }
.fit-item + .fit-item { margin-top: 40px }
.es-cards { margin: 32px 0 40px }   /* an essay's cards ("::: mouse"), between two runs of its prose */
.fit-card {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  border-radius: 18px;   /* the cards' corner elsewhere (2026-11-02, 22px before) */
  overflow: hidden;
  background: var(--surface);
  /* No border and no shadow (Patryk, 2026-10-19): the white card on the page's off-white is edge
     enough, and a hover answers in the render, which lifts. */
  cursor: pointer;
  transition: transform .16s var(--out);
}
/* A press answers at once, a step smaller (the buttons do .97; a card this size reads it at .99). */
.fit-card:active { transform: scale(.99) }
/* The stage: a warm grey a clear step darker than the page (Patryk, 2026-10-19: the white-centred
   one melted into the page's off-white), a little lighter where the light falls. The render keeps
   multiply, so its white ground takes the stage's tone; the shadow is its own ellipse, since a
   drop-shadow would trace the render's square. Nothing moves on hover. */
.fc-stage { position: relative; display: grid; place-items: center; min-height: 210px; isolation: isolate;
  background: radial-gradient(110% 80% at 50% 30%, #edebe8 0%, #e5e2de 60%, #dbd7d2 100%) }
.fc-stage img { position: relative; z-index: 1; display: block; width: 190px; height: 190px; object-fit: contain; mix-blend-mode: multiply }
.fc-shadow { position: absolute; bottom: 16px; left: 50%; width: 110px; height: 16px; margin-left: -55px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 16%), transparent) }
.fc-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 24px 28px }
.fc-name { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2 }
.fc-open { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.fc-open:hover .fc-model { text-decoration: underline; text-decoration-color: var(--tile-active); text-underline-offset: 3px }
.fc-brand { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 500; color: var(--muted) }   /* as the catalog's .c-brand: not in capitals (2026-11-02) */
.fc-model { display: block }
/* Weight, size and connection, one a line: the label, a gap, the value. */
.fc-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; margin: 12px 0 20px; font-size: 13.5px; line-height: 1.35; font-variant-numeric: tabular-nums }
.fc-facts div { display: contents }
.fc-facts dt { color: var(--muted) }
.fc-facts dd { margin: 0; color: var(--ink); font-weight: 500 }
/* The catalog's Amazon button (catalog.css, .c-amz) as a pill, under the facts. Always shown: the
   catalog's wait for the pointer (.c-row:hover) has no row here, so it never came (fixed 2026-11-02). */
.fit-side .c-amz { display: inline-flex; height: 40px; padding: 0 18px; border-radius: 999px; opacity: 1; translate: none }
.fit-side .c-amz:hover { background: var(--ink-deep) }
/* Why it fits: the article's own words, under the card. */
.fit-item .fit-why { margin: 16px 0 0 }
.fit-item .fit-why > :last-child { margin-bottom: 0 }

/* ==== The questions and the other guides ===================================================== */
.fit-faq { max-width: 720px; margin-top: 48px }
.fit-faq h2 { margin: 0 0 16px; font-size: 20px; font-weight: 600; letter-spacing: -.4px }
.fit-faq h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 600 }
.fit-faq p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted) }

/* ==== The written words (data/articles/*.md) ================================================= */
/* Running text: a reading column of about 70 characters at 16px, the site's ink, headings that open
   a section rather than shout. The same rules dress a fit guide's intro and sections and an essay. */
.prose { max-width: 720px; font-size: 16px; line-height: 1.7; color: var(--ink) }
.prose > :first-child { margin-top: 0 }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure, .prose-table { margin: 0 0 18px }
.prose h2 { margin: 44px 0 12px; font-size: 24px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3 }
.prose h3 { margin: 30px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.2px; line-height: 1.35 }
.prose h4 { margin: 24px 0 6px; font-size: 16px; font-weight: 600 }
.prose ul, .prose ol { padding-left: 22px }
.prose li { margin: 0 0 6px }
.prose li::marker { color: var(--muted) }
.prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--tile-active); text-underline-offset: 3px; transition: text-decoration-color .15s }
.prose a:hover { text-decoration-color: currentColor }
.prose strong { font-weight: 600 }
.prose code { padding: 1px 5px; border-radius: 5px; background: var(--tile-hover); font-size: .9em }
.prose blockquote { padding: 2px 0 2px 18px; border-left: 2px solid var(--tile-active); color: var(--muted) }
.prose blockquote > :last-child { margin-bottom: 0 }
.prose figure img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--tile) }
.prose figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted) }
.prose-table { overflow-x: auto }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45 }
.prose th, .prose td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
.prose th { font-weight: 600; border-bottom-color: var(--tile-active) }
.prose .num { text-align: right; font-variant-numeric: tabular-nums }
/* A fit guide's sections sit between the list and the questions, or above the list when the file
   puts them there. */
.fit-guide { margin: 40px 0 }
/* "Read next": one article, its cover (the index's, .art-cover, words and all) beside its title and
   line. */
.rn { margin-top: 56px }
.rn h2 { margin: 0 0 16px; font-size: 24px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; color: var(--ink) }
.rn a { color: inherit; text-decoration: none; transition: transform .16s var(--out) }
.rn-lead { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: center }
.rn-lead .art-cover { margin: 0 }
.rn-lead .art-words b, .rn-lead .art-words i { font-size: 8cqw }
.rn-text { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.rn-text b { font-size: 19px; font-weight: 500; letter-spacing: -.4px; line-height: 1.3; color: var(--ink) }
.rn-text > span { font-size: 14.5px; line-height: 1.55; color: var(--muted) }
@media (hover: hover) {
  .rn a:hover b { text-decoration: underline; text-decoration-color: var(--tile-active); text-underline-offset: 4px }
  .rn a:hover img { transform: scale(1.04) }
}
@media (max-width: 700px) {
  .rn-lead { grid-template-columns: minmax(0, 1fr); gap: 14px }
}

/* ==== An essay ================================================================================ */
/* Mintlify's blog layout (mintlify.com/blog, read 2026-10-18) on the site's light ground: the head
   left-aligned across the page, then three columns of 200, 600 and 216px. The words keep to the
   middle one, about 75 characters at 16px (Patryk, 2026-10-18: the words narrower). Figures keep to
   the words' width (Patryk, 2026-10-19, after a try at stepping out into the left column). */
.essay { max-width: 1168px; --es-body: #34302c }   /* the words' colour: a step under the ink, a step over --ink-hover (Patryk, 2026-10-19: darker, and the line under the title the same) */
/* An article starts a little lower than the catalog's 96px (72px on a phone) (Patryk, 2026-10-19). */
.article-page .essay { padding-top: 136px }
@media (max-width: 700px) { .article-page .essay { padding-top: 88px } }
/* On an article the bar is the catalog's, at the edges of the 1240px content (catalog.css), as on
   every page but a finder (Patryk, 2026-11-02: the logo and menu in the window's corners went). A
   hairline across the top fills as the article is read (js/essay.js). Held tighter still, to the
   article's own 1168px grid (Patryk, 2026-11-02), so the logo stands over the left column and the menu
   over the right one. */
.article-page .category-nav { padding-inline: max(20px, calc((100% - 1168px) / 2 + 24px)) }
@media (max-width: 700px) { .article-page .category-nav { padding-inline: 10px } }
/* The bar slides up out of view while an article is read down, and back on the way up (js/essay.js). */
.article-page .category-nav { transition: transform .3s var(--out, ease-out) }
.nav-tucked .article-page .category-nav { transform: translateY(-100%) }
@media (prefers-reduced-motion: reduce) { .article-page .category-nav { transition: none } }
.es-progress { position: fixed; z-index: 40; inset: 0 0 auto 0; height: 3px; pointer-events: none }
.es-progress span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0) }
/* The head holds only the way back, over the left column, above the author's card (Patryk,
   2026-10-19); where that column goes (under 1120px) it moves over the words. It keeps the body's
   three columns so the two line up at every width. */
.es-head { display: grid; grid-template-columns: 200px minmax(0, 600px) 216px; column-gap: 52px; margin-bottom: 14px }
.es-head-text { grid-column: 1 }
/* The way back: a white pill in the menu button's white and shadow (Patryk, 2026-10-19). */
.es-back {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-bottom: 32px; padding: 0 14px 0 10px;
  border-radius: 999px; background: oklch(1 0 0); box-shadow: var(--shadow-raised);
  font-size: 14px; font-weight: 500; color: oklch(.2 0 0); text-decoration: none;
  transition: box-shadow .2s;
}
.es-back:hover { box-shadow: 0 1px 4px oklch(0 0 0 / .2) }
.es-back svg { width: 16px; height: 16px; transition: transform .2s var(--out) }
.es-back:hover svg { transform: translateX(-2px) }
.es-title { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -.8px; line-height: 1.1; text-wrap: balance }
/* One line under the title, two at most. */
.es-sub { max-width: 600px; margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--es-body); text-wrap: pretty }
.es-titleblock { grid-area: title; margin-bottom: 48px }
.es-cover { margin: 32px 0 0 }
.es-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: var(--tile) }
.es-cover figcaption { margin-top: 8px; font-size: 12.5px; color: var(--muted) }
.es-cover figcaption a { color: inherit; text-underline-offset: 2px }

/* The columns start with the title, so the author's block and "On this page" line up with its top:
   both span the title's row and the words' row. */
.es-grid {
  display: grid; grid-template-columns: 200px minmax(0, 600px) 216px; column-gap: 52px; align-items: start;
  grid-template-areas: "meta title side" "meta main side"; grid-template-rows: auto 1fr;
}
.es-meta { grid-area: meta }
.es-main { grid-area: main }

/* Who wrote it, and how to pass it on: one card in a hairline frame (Patryk, 2026-10-19),
   the author on top and the three ways to share as equal cells under a hairline, split by hairlines. */
.es-meta { align-self: stretch }   /* the full height of the words, like the right column */
/* Over 1120px the way back stands in this column, over the card, and the head above the columns is
   empty, so it goes. */
.es-head { display: none }
.es-meta-in { display: flex; flex-direction: column; align-items: flex-start; gap: 16px }
.es-meta-in .es-back { margin: 0 }
.es-meta-in .es-card { align-self: stretch }
/* A hairline frame and no ground (Patryk, 2026-10-19, back to it after a white card, with and without
   a shadow). The finder card's corner. */
.es-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden }
/* The card stays in view with the words, as "On this page" does at the right (Patryk, 2026-10-19). */
.es-meta-in { position: sticky; top: 40px }
/* The name carries the card: a step heavier than the words around it, the role a step smaller under it,
   the two set close (Patryk, 2026-10-19: the card looked off; the name and the role had the same weight
   and nearly the same size, and the photo a ring inside the card's own frame). */
.es-author { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; white-space: nowrap; line-height: 1.25 }
.es-author b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.1px; color: var(--ink) }
.es-author i { display: block; margin-top: 2px; font-size: 12.5px; font-style: normal; color: var(--muted) }
.es-avatar {
  display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); font-size: 13px; font-weight: 600;
}
.es-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.es-share { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line) }
.es-share-btn {
  display: grid; place-items: center; height: 40px; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--muted); cursor: pointer;   /* #8a837d until 2026-11-02, too faint (Patryk) */
  transition: color .15s, background .15s;
}
.es-share-btn + .es-share-btn { border-left: 1px solid var(--line) }
.es-share-btn:hover { color: var(--ink); background: var(--tile-hover) }
.es-share-btn:focus-visible { outline-offset: -2px }   /* inside the card, which clips anything past it */
.es-share-btn svg { width: 18px; height: 18px }
.es-share-btn svg.is-brand { width: 16px; height: 16px }   /* a filled logo looks bigger than a line icon of the same box */
.es-copy.is-done { color: var(--fit-ok) }

/* The author's half of the card is a button when there is a window about them (build: authorBio). */
button.es-author {
  width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background .15s;
}
button.es-author:hover { background: var(--tile-hover) }
button.es-author:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }

/* The window about the author: a white sheet in the middle of a dimmed page, which js/essay.js pulls out
   of the card like a tissue out of its box (Patryk, 2026-10-19); the motion is all there, so the sheet
   has no transition of its own. */
.es-person {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: 28px 28px 24px;
  border: 0; border-radius: 18px; background: oklch(1 0 0); color: var(--ink); overflow: auto;
  box-shadow: var(--shadow-modal);
}
.es-person::backdrop { background: oklch(.2 0 0 / 0); transition: background .3s, overlay .3s allow-discrete, display .3s allow-discrete }
.es-person[open]::backdrop { background: var(--scrim) }
@starting-style { .es-person[open]::backdrop { background: oklch(.2 0 0 / 0) } }
.es-person-close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 999px; background: var(--tile); color: var(--muted); cursor: pointer; transition: color .15s, background .15s;
}
.es-person-close:hover { color: var(--ink); background: var(--tile-hover) }
.es-person-close svg { width: 16px; height: 16px }
.es-person-head { display: flex; align-items: center; gap: 18px; margin: 0 40px 22px 0 }
.es-person-photo img { display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover }
.es-person h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.3px; line-height: 1.25 }
.es-person-head p { margin: 2px 0 0; font-size: 14px; color: var(--muted) }
/* Darker and bigger (Patryk, 2026-11-02: the bio read faint and small). */
.es-person-body { font-size: 16px; line-height: 1.6; color: var(--ink) }
.es-person-body p { margin: 0 0 14px; font-size: inherit; line-height: inherit; color: inherit }   /* kept explicit, though style.css's dialog rules no longer reach here */
.es-person-body p:last-child { margin-bottom: 0 }
/* Under the headline: round icon buttons, the share row's icons on the tile grey. */
.es-person-contact { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 }
.es-person-contact a {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px;
  background: var(--tile); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s;
}
.es-person-contact a[aria-label] { padding: 0 }
.es-person-contact a:hover { background: var(--tile-hover) }
.es-person-contact svg { width: 16px; height: 16px }
@media (max-width: 700px) {
  .es-person { padding: 22px 20px 20px }
  .es-person-head { gap: 14px }
  .es-person-photo img { width: 64px; height: 64px }   /* 88px left the name two lines in a 335px sheet */
}

/* The words, and the pictures in them. */
.es-main .prose { max-width: none; color: var(--es-body) }
.es-main .prose h2 { font-size: 24px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; color: var(--ink); scroll-margin-top: 32px }
.es-main .prose strong { color: var(--ink) }
.es-main .prose figure { margin-top: 36px; margin-bottom: 36px }
.es-main .prose figure img { border-radius: 16px }
/* Steps in order (a numbered list) as a path rather than numbers (Patryk, 2026-10-19, picked from ten
   in notes/steps-styles.html after rings and dots): one light rail down the left of the list, and a
   dark tick on it where each step starts, centred on the step's first line (.85em at the words' 1.7
   line height), so it holds at every font size. */
.es-main .prose ol { position: relative; padding-left: 0; list-style: none }
.es-main .prose ol::before { content: ""; position: absolute; left: 0; top: calc(.85em - 9px); bottom: calc(.85em - 9px); width: 2px; border-radius: 1px; background: var(--line) }
.es-main .prose ol > li { position: relative; margin: 0; padding: 0 0 12px 20px }
.es-main .prose ol > li:last-child { padding-bottom: 0 }
.es-main .prose ol > li::before { content: ""; position: absolute; left: 0; top: calc(.85em - 9px); width: 2px; height: 18px; border-radius: 1px; background: var(--ink) }

/* A picture opens larger on a click (js/essay.js): the button around it has no look of its own. */
.fig-zoom {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: zoom-in;
}
.fig-zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }

/* ---- Drawings (the infographic skill: .claude/skills/infographic) ------------------------------
   An .svg written into the page. Drawn 600 units wide, the words' column, so one unit is one pixel on
   a desktop and a 14px label is 14px; on a phone it shrinks with the column and opens larger on a tap.
   One ground, a grey a step darker than the page's, so a drawing reads as a plate set into the text;
   parts are white with the ink's line, and one blue (Patryk, 2026-10-19, over the site's orange) marks the one thing the
   drawing is there to show. Nothing else: no gradient, shadow or second colour. */
.fig-drawing .fig-zoom, .es-zoom.es-zoom-drawing { background: #e9e7e4 }
.ig { display: block; width: 100%; height: auto; font-family: inherit }
.ig * { vector-effect: non-scaling-stroke }   /* a group may be scaled to fit; its lines keep their weight */
.ig-part { fill: #fff; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round }
.ig-shade { fill: #d6d3d1; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round }
.ig-dark { fill: #57534e; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round }
.ig-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round }
.ig-axis { fill: none; stroke: #c4c0bc; stroke-width: 1 }
.ig-lead { fill: none; stroke: #8a837d; stroke-width: 1 }
.ig-guide { fill: none; stroke: #8a837d; stroke-width: 1; stroke-dasharray: 3 4 }   /* where a part drops in */
.ig-dot { fill: var(--ink) }
.ig-hot { fill: none; stroke: #2563eb; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.ig-hot-part { fill: #dbe6fe; stroke: #2563eb; stroke-width: 2; stroke-linejoin: round }
.ig-hot-dot { fill: #2563eb }
.ig-h { font-size: 15px; font-weight: 600; fill: var(--ink) }
.ig-t { font-size: 14px; fill: var(--muted) }
.ig-k { font-size: 14px; font-weight: 600; fill: var(--ink) }
.ig-n { font-size: 13px; fill: var(--muted) }
.ig-hot-t { fill: #2563eb }
.ig-mid { text-anchor: middle }
.ig-end { text-anchor: end }

/* The larger picture: a dialog over a dimmed page. A drawing opens as large as the window allows, up to
   1.6 times the column, and on a phone wider than the screen, which then scrolls it; a photograph fits
   the window. A click anywhere closes it. */
.es-zoom {
  width: fit-content; max-width: 96vw; max-height: 92vh; margin: auto; padding: 0; border: 0; border-radius: 16px;
  background: var(--surface); overflow: auto; cursor: zoom-out;
  box-shadow: var(--shadow-modal);
  opacity: 0; transform: scale(.97); transition: opacity .2s, transform .25s var(--out), overlay .25s allow-discrete, display .25s allow-discrete;
}
.es-zoom[open] { opacity: 1; transform: none }
@starting-style { .es-zoom[open] { opacity: 0; transform: scale(.97) } }
.es-zoom::backdrop { background: oklch(.2 0 0 / 0); transition: background .2s, overlay .25s allow-discrete, display .25s allow-discrete }
.es-zoom[open]::backdrop { background: oklch(.2 0 0 / .55) }
@starting-style { .es-zoom[open]::backdrop { background: oklch(.2 0 0 / 0) } }
.es-zoom img { display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto }
.es-zoom .ig { max-width: none }   /* its width is set from the window (js/essay.js) */
.es-zoom-close {
  position: fixed; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 999px; background: oklch(1 0 0); box-shadow: var(--shadow-raised);
  color: var(--ink); cursor: pointer; transition: background .15s;
}
.es-zoom-close:hover { background: var(--tile) }
.es-zoom-close svg { width: 18px; height: 18px }
@media (prefers-reduced-motion: reduce) { .es-zoom, .es-zoom::backdrop { transition: none } }

/* On this page, and the finder, kept in view while the words scroll. */
.es-side { grid-area: side; align-self: stretch }   /* the full height of the words, so the sticky part has room to travel */
/* Both side panels start where the page puts them and hold 40px from the top once scrolled there
   (Patryk, 2026-10-19), clear of the logo and the menu button at the page's edges. */
.es-sticky { position: sticky; top: 40px }
.es-toc { position: relative; display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; border-left: 1px solid var(--line) }
.es-toc a {
  padding: 5px 0 5px 14px;
  font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .25s;
}
.es-toc a:hover { color: var(--ink) }
.es-toc a[aria-current="true"] { color: var(--ink) }
/* One marker for the whole list, which slides to the section being read and takes its height, as
   Mintlify's does (Patryk, 2026-10-19), on the curve the category pill uses. js/essay.js places it;
   the transition waits until it has been placed once, so the page does not open with a slide. */
.es-toc-marker {
  position: absolute; top: 0; left: -1px; width: 2px; height: 0; border-radius: 2px;
  background: var(--ink); pointer-events: none;
}
.es-toc-marker.is-ready { transition: transform .35s var(--out), height .35s var(--out) }
@media (prefers-reduced-motion: reduce) { .es-toc-marker.is-ready { transition: none } }
/* The way into the finder: a plain dark card (the warm glow in its corner went, Patryk, 2026-10-19),
   a title, a line, and a white button that runs the card's width, its label centred, no arrow. */
.es-cta {
  padding: 18px 18px 16px; border-radius: 16px; overflow: hidden;
  background: var(--ink-deep);
  color: var(--raised);
}
/* Three mice cut out of their white (scripts/articles/cut-mice.py) at the foot of the card, on its
   dark ground, overlapping like a hand of cards, the outer two turned out and lower, all three running
   past the card's bottom edge, which cuts them (Patryk, 2026-10-19). */
.es-cta-mice { display: flex; justify-content: center; align-items: flex-start; height: 96px; margin: 20px -18px -16px }
.es-cta-mice img { display: block; flex: 0 0 auto; width: 74px; height: auto; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .45)) }
.es-cta-mice img:nth-child(1) { margin-right: -12px; transform: translateY(22px) rotate(-14deg) }
.es-cta-mice img:nth-child(2) { position: relative; z-index: 1 }
.es-cta-mice img:nth-child(3) { margin-left: -12px; transform: translateY(22px) rotate(14deg) }
.es-cta-title { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; color: #fff }
.es-cta p:not(.es-cta-title) { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: rgb(255 255 255 / 66%) }
.es-cta-btn {
  display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px;
  border-radius: 10px; background: #fff; color: var(--ink-deep); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .15s, transform .16s var(--out);
}
.es-cta-btn:hover { background: var(--raised) }
.es-cta-btn:active { transform: scale(.98) }

/* A fit guide in the frame: each list under its own heading, a size up from the questions' (Patryk,
   2026-10-19), then its cards. */
.es-main .fit-list-h, .es-main .fit-faq h2 {
  margin: 48px 0 16px; font-size: 24px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; color: var(--ink);
}
.es-main .fit-list-h { margin: 56px 0 20px; font-size: 30px; font-weight: 600; letter-spacing: -.6px; line-height: 1.2 }
.es-main .fit-list-h, .es-main .fit-faq h2, .es-main .prose h2 { scroll-margin-top: 32px }
/* The finder's banner between two lists. */
.es-main .fit-list + .essay-finder { margin-top: 48px }
.es-main .fit-faq { max-width: none; margin-top: 0 }
.es-main .fit-faq p { font-size: 15px; color: var(--es-body) }
/* Under 1120px the left column goes: who wrote it and the share buttons sit on one line above the
   words, and the pictures keep to the words' width. Under 860px "On this page" goes too, with the
   finder card under it, and the finder waits at the end of the words. */
@media (max-width: 1120px) {
  .es-grid {
    grid-template-columns: minmax(0, 640px) 216px; column-gap: 48px; justify-content: space-between;
    grid-template-areas: "title side" "meta side" "main side"; grid-template-rows: auto auto 1fr;
  }
  .es-titleblock { margin-bottom: 24px }
  /* The card turns into one row: the author at the left, the three cells at the right. */
  .es-meta { margin-bottom: 32px; align-self: start }
  .es-meta-in { position: static }
  .es-meta-in .es-back { display: none }
  .es-head { display: grid }
  .es-sticky { top: 96px }   /* the right column now reaches the menu button's corner: hold it under the 80px band */
  .es-card { display: flex; align-items: stretch }
  .es-card .es-author { flex: 1 1 auto }
  .es-share { flex: 0 0 156px; border-top: 0; border-left: 1px solid var(--line) }
  .es-share-btn { height: auto }
  .es-head { grid-template-columns: minmax(0, 640px) 216px; column-gap: 48px; justify-content: space-between }
  .es-head-text { grid-column: 1 }
}
@media (max-width: 860px) {
  .es-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "meta" "main"; grid-template-rows: auto }
  .es-side { display: none }
  .es-head { grid-template-columns: minmax(0, 1fr) }
  .es-head-text { grid-column: 1 }
}
/* The sources as rows: what each says at the left, its site at the right with an arrow out, hairlines
   between (Patryk, 2026-10-19, picked from notes/sources-styles.html). */
.essay-sources { margin-top: 44px }
.essay-sources h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600 }
.essay-sources ul { margin: 0; padding: 0; list-style: none }
.essay-sources a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--es-body, var(--ink)); text-decoration: none }
.essay-sources li:last-child a { border-bottom: 1px solid var(--line) }
.src-d { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--muted) }
.src-d svg { width: 12px; height: 12px }
.essay-sources a:hover .src-t { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tile-active); text-underline-offset: 3px }
@media (max-width: 520px) { .essay-sources a { flex-direction: column; gap: 2px } }
/* The way into the finder at the end of every essay: the right column's dark card (.es-cta) laid
   across the words' column, the words and the button at the left, the mice at the right, running
   past the card's foot. */
.essay-finder { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; margin-top: 40px; padding: 24px 0 0 24px }
.essay-finder .ef-text { align-self: center; padding-bottom: 24px }
.essay-finder .es-cta-title { font-size: 18px }
.essay-finder .es-cta-btn { display: inline-flex; padding: 0 20px }
.essay-finder .es-cta-mice { flex: 0 0 auto; align-self: flex-end; height: 112px; margin: 0 8px 0 0 }
.essay-finder .es-cta-mice img { width: 86px }

/* ==== The index of articles (articles.html) ================================================== */
/* A publication's index (after the one Patryk picked, 2026-10-18): a big title, the kinds as tabs
   with the search at the right of the same line, then the cards in three columns, a hairline
   between the columns. Wider than a list page, since three covers want the room. */
.art { max-width: 1240px }
/* The title and the controls on one line, the filters and the search at the right of the title
   (Patryk, 2026-11-02, once the tabs went and the bar under the title held only those). */
.art-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 36px }
.art-head h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.8px; line-height: 1.2 }   /* the catalog's title (catalog.css, .c-title; 2026-11-02) */
.art-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px }
/* The tabs on the left; the rankings' filters sit right beside the search once the Rankings tab is
   chosen, all the controls that narrow the list in one group (Patryk, 2026-10-20: one index for the
   essays and the guides, and filters left by the tabs looked stranded). */
.art-bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 1 auto; min-width: 0 }
.art-bar-right .art-search { flex: 0 0 260px }
.art-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px }
.art-tabs button { padding: 4px 0; font-size: 15px; color: var(--muted); transition: color .15s }
.art-tabs button:hover, .art-tabs button[aria-pressed="true"] { color: var(--ink) }
/* The rankings' two filters as dropdowns (Patryk, 2026-10-20): white pills like the menu button in the
   bar, on the page's ground with no grey tray. Two shadows and no border: a 1px ring that draws the
   edge, and one soft shadow under it that lifts the pill off the page. The words in the ink, a touch
   heavier than the menu's. The pill names the choice once one is made and shows a cross that clears
   it; its list is the menu's white card. */
.art-filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0 }
.art-filters[hidden] { display: none }
.art-drop { position: relative; display: inline-flex }
.art-drop-btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px;
  background: oklch(1 0 0);
  box-shadow: 0 0 0 1px oklch(0 0 0 / .1), 0 1px 3px oklch(0 0 0 / .1);
  color: oklch(.2 0 0); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: color .2s, box-shadow .2s, transform .16s var(--out);
}
.art-drop-btn:hover, .art-drop-btn[aria-expanded="true"] { box-shadow: 0 0 0 1px oklch(0 0 0 / .16), 0 1px 3px oklch(0 0 0 / .12) }
.art-drop-btn:active { transform: scale(.97) }
.art-drop-btn.is-set { padding-right: 34px }
/* The choices in the pill, in the ink and heavier (2026-11-02: the blue they were in appeared nowhere
   else in the site's controls; a pick is the ink everywhere, as in the catalog's filters). */
.art-drop-val { margin-left: .25em; font-weight: 600; color: var(--ink) }
.art-drop-clear {
  position: absolute; top: 50%; right: 7px; width: 22px; height: 22px; margin-top: -11px;
  display: grid; place-items: center; border-radius: 999px; color: oklch(.2 0 0 / .6);
  transition: background .15s, color .15s;
}
.art-drop-clear[hidden] { display: none }
.art-drop-clear:hover { background: var(--tile); color: oklch(.2 0 0) }
.art-drop-clear svg { width: 12px; height: 12px }
.art-drop-menu {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 210px; padding: 6px 0;
  display: flex; flex-direction: column;
  border-radius: 14px; background: oklch(1 0 0); overflow: hidden;
  box-shadow: var(--shadow-pop);
  transform-origin: top left; transition: opacity .16s, transform .2s cubic-bezier(.22, 1, .36, 1), visibility .2s;
}
.art-drop-menu[hidden] { display: flex; opacity: 0; visibility: hidden; transform: scale(.96) translateY(-4px); pointer-events: none }
.art-drop-menu button, .art-drop-menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 16px;
  font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: left; text-decoration: none;
}
.art-drop-menu i { margin-left: auto; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--muted) }
/* Several choices at once, so each one carries a box that is ticked when chosen. */
.art-drop-menu [role="menuitemcheckbox"] { justify-content: flex-start; gap: 10px }
.art-drop-menu [role="menuitemcheckbox"]::before {
  content: ""; flex: 0 0 auto; align-self: center; width: 14px; height: 14px; border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px oklch(0 0 0 / .22); background: oklch(1 0 0) center / 10px no-repeat;
}
.art-drop-menu [role="menuitemcheckbox"][aria-checked="true"]::before {
  box-shadow: none; background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.art-drop-menu button:hover, .art-drop-menu a:hover { background: var(--tile) }
.art-drop-menu button, .art-drop-menu a { transition: background .12s }
.art-drop-menu button:focus-visible, .art-drop-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
.art-drop-menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--line) }
.art-drop-menu a { color: var(--muted) }
@media (prefers-reduced-motion: reduce) { .art-drop-menu, .art-drop-btn, .art-drop-clear { transition: none } }
/* The search wears the filters' pill (Patryk, 2026-10-20): white, a 1px ring and a soft shadow drawn
   by box-shadow, 32px tall, the words in the ink. */
.art-search { position: relative; display: flex; align-items: center; flex: 0 1 260px }
.art-search svg { position: absolute; left: 12px; width: 15px; height: 15px; color: oklch(.2 0 0 / .6); pointer-events: none }
.art-search input {
  width: 100%;
  height: 32px;
  padding: 0 14px 0 34px;
  border: 0;
  border-radius: 999px;
  background: oklch(1 0 0);
  box-shadow: 0 0 0 1px oklch(0 0 0 / .1), 0 1px 3px oklch(0 0 0 / .1);
  color: oklch(.2 0 0);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: box-shadow .15s;
}
.art-search input::placeholder { color: var(--muted) }
.art-search input:hover { box-shadow: 0 0 0 1px oklch(0 0 0 / .16), 0 1px 3px oklch(0 0 0 / .12) }
.art-search input:focus { outline: none; box-shadow: var(--focus-field), 0 1px 3px oklch(0 0 0 / .1) }

.art-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Open (Patryk, 2026-10-20, 1 of ten in notes/karty-warianty.html): no hairlines between the columns
   and no blocks round the cards, only air between them. */
.art-card { position: relative }
.art-card[hidden] { display: none }
.art-card a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; transition: transform .16s var(--out) }
.art-card a:active, .rn a:active { transform: scale(.99) }
/* The cover: the article's photograph, a shade drawn up from the lower left so the white words read
   on any of them, and two short words over it, large: the hand bold, the grip light (Patryk,
   2026-10-18). Sized in the cover's own width (cqw), so they keep their place at every width. */
.art-cover {
  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: 3 / 2;   /* 16:9 read too low beside the titles (Patryk, 2026-10-18) */
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--ink-deep);
  overflow: hidden;
  isolation: isolate;   /* the blends below stay inside the cover */
}
/* In their own colours (Patryk, 2026-11-02; greyscale since 2026-10-20 had made every cover look the
   same); the shade below still keeps the white words on dark. */
.art-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--out) }
.art-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(12 10 9 / 70%), rgb(12 10 9 / 0%) 60%);
}
/* An essay whose photograph is not chosen yet: its words on the ink. */
.art-cover.is-plain { background: var(--ink-deep) }
.art-cover.is-plain::after { content: none }
/* One sentence on the cover (Patryk, 2026-10-20: sentences a person would say, set smaller than the
   two words they replaced so a longer one still fits in three lines). */
.art-words { position: absolute; z-index: 2; left: 6cqw; right: 8cqw; bottom: 5.5cqw; color: #fff; text-wrap: balance }
.art-words b, .art-words i { display: block; font-size: 5.4cqw; letter-spacing: -.15cqw; line-height: 1.12 }
.art-words b { font-weight: 600 }
.art-words i { font-style: normal; font-weight: 300; color: rgb(255 255 255 / 88%) }
@media (hover: hover) {
  .art-card a:hover .art-cover img { transform: scale(1.04) }
  .art-card a:hover h2 { text-decoration: underline; text-decoration-color: var(--tile-active); text-underline-offset: 4px }
}
.art-card h2 { margin: 0 0 6px; font-size: 17px; font-weight: 500; letter-spacing: -.4px; line-height: 1.3 }
.art-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--muted) }
.art-empty { padding: 48px 0; text-align: center; font-size: 15px; color: var(--muted) }
.art-clear { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }

@media (max-width: 1000px) {
  .art-list { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 700px) {
  /* The card on a phone: the render and the name with its facts, and the button across the foot. */
  .fit-card { grid-template-columns: minmax(0, 1fr); border-radius: 18px }
  .fc-stage { min-height: 190px }
  .fc-shadow { bottom: 10px }
  .fc-body { padding: 18px 20px 20px }
  .fc-name { font-size: 20px }
  .fc-facts { margin: 10px 0 16px; font-size: 13px }
  .fit-side .c-amz { display: flex }
  .prose { font-size: 15.5px }
  .prose h2 { margin-top: 36px; font-size: 21px }
  .es-title { font-size: 30px; letter-spacing: -.6px }
  .es-back { margin-bottom: 24px }
  .es-sub { margin-top: 12px; font-size: 16px }
  .es-head { margin-bottom: 12px }
  .es-share { flex-basis: 132px }   /* three 44px cells, so the row fits a 343px column with the name */
  .es-card .es-author { min-width: 0 }
  .essay-finder { flex-direction: column; gap: 0; padding: 20px 20px 0 }
  .essay-finder .ef-text { align-self: stretch; padding-bottom: 0 }
  .essay-finder .es-cta-btn { display: flex }
  .essay-finder .es-cta-mice { align-self: center; height: 100px; margin: 20px 0 0 }
  .essay-finder .es-cta-mice img { width: 78px }
  .es-main .prose figure { margin-top: 24px; margin-bottom: 24px }
  .fit-faq { margin-top: 36px }
  .art-head { flex-direction: column; align-items: stretch; margin-bottom: 28px }
  .art-head h1 { font-size: 24px }
  .art-bar { flex-direction: column; align-items: stretch }
  .art-bar-right { flex-wrap: wrap; justify-content: flex-start }
  .art-bar-right .art-search { flex: 1 1 100% }
  .art-search input { font-size: 16px }   /* under 16px iOS zooms the page into the field */
  .art-list { grid-template-columns: minmax(0, 1fr); gap: 40px }
}

/* ==== Motion ================================================================================== */
/* A link to a section of the same article glides there rather than cutting (Patryk, 2026-10-19: the
   blog should flow); "On this page" then shows its marker sliding with it. The heading lands under
   its scroll-margin. */
html:has(body.article-page) { scroll-behavior: smooth }
/* Less motion: the jumps cut again, and nothing grows or nudges under the pointer or a press. The
   colour and shadow changes stay, since they say what is under the pointer without moving it. */
@media (prefers-reduced-motion: reduce) {
  html:has(body.article-page) { scroll-behavior: auto }
  .fit-card, .art-card a, .rn a, .art-cover img, .rn img, .es-back svg { transition: none }
  .fit-card:active, .art-card a:active, .rn a:active { transform: none }
  .art-card a:hover .art-cover img, .rn a:hover img, .es-back:hover svg { transform: none }
}