/* The style pages (/styles/<slug>) and their hub (/styles), on top of base.css and post.css (tools/styles.mjs).
   The same hand as the rest of the site: paper and ink, Inter Light headings in two tones, small mono labels, black
   pills, flat cards. The one new thing is the style card: the app's own card, a 120 × 96 pixel-art room corner on
   the style's near-black ground (--ground, with --accent for its label), so colour stays in the pictures.
   The pictures are 120 px wide and drawn large with image-rendering: pixelated, which keeps every art pixel a hard
   square at any width (a smoothed copy would blur them). */
.style img, .scard img { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }

/* ---------- The head of a style page: the H1, the style card, the quiz line, the byline. */
.style-head { gap: 20px; }
.style-card { display: grid; overflow: hidden; border-radius: var(--r); background: var(--ground); color: #FFF; }
.style-card img { width: 100%; aspect-ratio: 120 / 96; }
/* The words sit a little into the picture's dithered edge, which fades to the ground. */
.style-card figcaption { display: grid; gap: 12px; margin-top: -6px; padding: 0 20px 22px; }
.style-card .label { color: var(--accent); }
.style-card p { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
/* The palette: six squares, the pixel the wordmark is drawn from. Their names and hex codes are under "Colours". */
.palette { display: flex; gap: 6px; margin-top: 6px; }
.palette li { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
/* A wide screen: the card is wider than the reading column and centred on it, the picture at exactly four times
   its size (480 × 384) with the words beside it. The H1 and the byline keep the column's left edge. */
@media (min-width: 1040px) {
  .style-card { grid-template-columns: 480px minmax(0, 1fr); align-items: center; width: 960px; margin: 8px calc(50% - 480px); }
  .style-card img { width: 480px; }
  .style-card figcaption { margin: 0; padding: 32px 40px 32px 36px; gap: 16px; }
  .style-card p { font-size: 21px; }
  .palette li { width: 26px; height: 26px; }
}

/* The quiz line under the card: quiet, one tap, 48 px tall. */
.quiz-turn { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 48px; padding: 10px 18px; border-radius: 16px; background: var(--surface); color: var(--muted); font-size: 15px; line-height: 1.35; text-decoration: none;
  transition: background-color 0.25s, transform 0.4s var(--press); }
.quiz-turn b { font-weight: 500; color: var(--ink); }
.quiz-turn i { margin-left: auto; font-style: normal; color: var(--ink); transition: transform 0.3s var(--ease); }
.quiz-turn:hover { background: var(--tint); }
.quiz-turn:hover i { transform: translateX(3px); }
.quiz-turn:active { transform: scale(0.985); transition-duration: 0.15s; }
@media (min-width: 720px) { .quiz-turn { justify-self: start; padding-right: 22px; } .quiz-turn i { margin-left: 10px; } }

/* The body opens with a heading, not a paragraph: no gap above it (the contents or the head sit just above). */
.style .prose > h2:first-child { margin-top: 0; }

/* ---------- The look in five signs: a numbered list on hairlines, the number in the pixel font. */
.prose ol.signs { margin-top: 1em; padding: 0; list-style: none; counter-reset: sign; border-top: 1px solid var(--rule); }
.prose ol.signs > li { counter-increment: sign; position: relative; margin: 0; padding: 16px 0 16px 44px; border-bottom: 1px solid var(--rule); color: var(--muted); }
.prose ol.signs > li::before { content: counter(sign); position: absolute; left: 2px; top: 15px; font: 400 22px/1.3 var(--pixel); color: var(--ink); -webkit-font-smoothing: none; }
.prose ol.signs b { display: block; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }

/* ---------- The colours: real swatches, each with its hex on it, its name and where it goes. */
.prose ul.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 1.4em; padding: 0; }
.prose ul.swatches > li { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }   /* BUG-391: flex, not grid. WebKit sized a grid item with an aspect-ratio 12 px too wide */
.prose ul.swatches > li::before { display: none; }
.swatches .sw { display: flex; align-items: flex-end; width: 100%; aspect-ratio: 3 / 2; margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(20 20 18 / 0.08); font: 500 11px/1 var(--mono); letter-spacing: 0.06em; }
.swatches b { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.swatches .note { font-size: 14px; line-height: 1.4; color: var(--muted); }
@media (min-width: 560px) { .prose ul.swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Materials: post.css's fact rows (.facts), with a narrower label column here. */
@media (min-width: 640px) { .style .facts > div { grid-template-columns: 150px 1fr; } }
.style .facts dd { color: var(--muted); }

/* A list item that opens with its point in bold: the point in ink, the reason in grey, as in the five signs. */
.style .prose ul:not(.swatches) > li > b:first-child { font-weight: 500; }

/* ---------- Style cards: the picture on its ground, the name, one line. Two side by side under "X vs Y" and at the
   end of a page; the hub's grid of 14. */
.scards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prose .scards { margin-top: 1.6em; }
.scard { display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; border-radius: 18px; background: var(--ground, var(--ink)); color: #FFF; text-decoration: none; transition: transform 0.4s var(--press); }
.prose a.scard { color: #FFF; text-decoration: none; }
.scard img { width: 100%; aspect-ratio: 120 / 96; border-radius: 0; box-shadow: none; }
.scard b { margin-top: -2px; padding: 0 14px; font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.scard span { padding: 4px 14px 16px; font-size: 13.5px; line-height: 1.4; color: rgb(255 255 255 / 0.68); text-wrap: pretty; }
.scard:active { transform: scale(0.98); transition-duration: 0.15s; }
@media (hover: hover) { .scard:hover { transform: translateY(-3px); } }
/* The last card of a row of styles is words only: all 14 styles, or the quiz. */
.scard.all { grid-template-rows: 1fr auto; align-content: end; min-height: 132px; padding-top: 18px; background: var(--surface); color: var(--ink); }
.scard.all b { margin: 0; align-self: end; font-size: 19px; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.scard.all span { color: var(--muted); }
.prose .all-styles { margin-top: 14px; font-size: 15px; }

/* ---------- The quiz card, before the App Store ending: one question, one black pill. */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: #FFF; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; transition: transform 0.4s var(--press), background-color 0.25s; }
.pill:hover { background: #2A2A28; }
.pill:active { transform: scale(0.97); transition-duration: 0.15s; }
.quiz-card { display: grid; justify-items: center; gap: 14px; max-width: var(--measure); margin: var(--space) auto 0; padding: 36px 24px 40px; border-radius: var(--r); background: var(--surface); text-align: center; }
.quiz-card .title { font-size: clamp(28px, 3vw, 38px); }
.quiz-card .lede { max-width: 24em; font-size: 17px; }
.quiz-card .pill { margin-top: 8px; }
.style .quiz-card + .post-cta { margin-top: clamp(64px, 8vw, 104px); }

/* ---------- The hub: the quiz first, then the cards from the quietest room to the fullest, then the table. */
.styles-hub .quiz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.styles-hub .quiz-row span { font-size: 15px; color: var(--muted); }
.styles-hub .order { margin: clamp(44px, 6vw, 72px) 0 16px; color: var(--soft); }
@media (min-width: 720px) { .scards.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .scards.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .scards.grid .all { grid-column: span 2; } }
@media (max-width: 719px) { .scards.grid .all { grid-column: 1 / -1; min-height: 112px; } }
@media (min-width: 720px) { .scards.grid .scard b { padding-inline: 18px; font-size: 19px; } .scards.grid .scard span { padding: 6px 18px 20px; font-size: 14.5px; } }
.styles-hub .glance { max-width: 860px; margin-top: var(--space); }
.styles-hub .glance h2 { margin-top: 0; }
.styles-hub .glance td:first-child a { font-weight: 500; }
.styles-hub .glance td + td { min-width: 8.4em; color: var(--muted); }   /* three or four words to a line, so a cell is two lines at most */

@media (prefers-reduced-motion: reduce) { .scard, .pill, .quiz-turn, .quiz-turn i { transition: none; } .scard:hover { transform: none; } }
@media print { .quiz-turn, .quiz-card, .scards { display: none; } .style-card { background: none; color: inherit; box-shadow: inset 0 0 0 1px #CCC; } .style-card .label { color: inherit; } }