/* Sundry Mill · the library (/library and /library/<slug>)
   Phone first, on the site's own tokens. The pin card is sized in container
   units, so the same markup renders at 358 px on a phone and 1000 x 1500 for
   the og image and the Pinterest pin. */

/* ------------------------------------------------------------------ fonts shown in specimens
   Served for display on these pages only. The pages link to the free downloads. */
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/InstrumentSerif-Italic-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Variable-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Departure Mono'; src: url('/fonts/DepartureMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('/fonts/Karla-Variable-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/CourierPrime-Regular-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/CourierPrime-Bold-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/CourierPrime-Italic-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --card: #FFFDF8;
  --code-bg: #F4ECDD;
  --chip-line: rgba(23, 32, 44, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --card: #111A2E; --code-bg: #0E1628; --chip-line: rgba(242, 234, 220, .14); }
}
:root[data-theme="dark"] { --card: #111A2E; --code-bg: #0E1628; --chip-line: rgba(242, 234, 220, .14); }

/* ------------------------------------------------------------------ detail page */
.lib {
  padding: calc(var(--bar-h) + 28px) var(--gutter) clamp(64px, 9vw, 120px);
  background: linear-gradient(180deg, var(--paper) 0, var(--paper) 60%, var(--paper-2) 100%);
}
.lib > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9375rem; font-weight: 600; color: var(--text-3); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }

.lib-title {
  margin-top: 6px;
  font: 800 clamp(2.25rem, 1.2rem + 4.6vw, 4.75rem)/.98 var(--display);
  font-variation-settings: 'opsz' 144;
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 20ch;
}
.lib-lede { margin-top: 16px; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); color: var(--text-2); text-wrap: pretty; }

.lib-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 32px; }
.lib-preview { min-width: 0; }
.lib-main { min-width: 0; }
.lib-try { margin-top: 12px; font-size: .9375rem; font-weight: 600; color: var(--text-3); text-align: center; }

.lib-sec { padding-top: 28px; margin-top: 28px; border-top: 2px solid var(--line-strong); }
.lib-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lib-h2 { font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 16px; }
.lib-h3 { font: 700 1.25rem/1.2 var(--display); letter-spacing: -.01em; margin: 0 0 6px; }
.lib-p { color: var(--text-2); max-width: 42rem; }
.lib-p a, .how a, .lib-tool a, .lib-source a { color: var(--text); font-weight: 600; }
.lib-actions { margin-top: 16px; }

.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 42rem; }
.how li { position: relative; padding-left: 26px; color: var(--text-2); }
.how li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 12px; height: 3px; border-radius: 2px; background: var(--sun-hot); }

.lib-tool {
  margin-top: 32px; padding: 16px 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--sun-mid) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--sun-hot) 30%, transparent);
  color: var(--text-2); font-size: .9875rem;
}
.lib-source { margin-top: 18px; font-size: .9375rem; color: var(--text-3); max-width: 42rem; }
.lib-source a { color: var(--text-2); }
.lib-free { margin-top: 10px; font-size: .9375rem; color: var(--text-3); }

.lib-more { margin-top: clamp(56px, 8vw, 96px); padding-top: 32px; border-top: 2px solid var(--line-strong); }
.lib-more > p { margin-top: 24px; }

/* ------------------------------------------------------------------ copy buttons and code */
.copy {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  border: 1.5px solid var(--chip-line); border-radius: 10px;
  background: var(--card); color: var(--text);
  font: 600 .875rem/1.1 var(--mono); letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.copy:hover { border-color: var(--line-strong); }
.copy:active { transform: scale(.97); }
.copy svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy .i-done { display: none; }
.copy.is-copied { border-color: #1E8A50; }
.copy.is-copied .i-copy { display: none; }
.copy.is-copied .i-done { display: block; color: #1E8A50; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .copy.is-copied .i-done { color: #6FD39B; } }
:root[data-theme="dark"] .copy.is-copied .i-done { color: #6FD39B; }

.code { margin-top: 14px; border-radius: 14px; background: var(--code-bg); border: 1px solid var(--chip-line); overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 4px 14px; border-bottom: 1px solid var(--chip-line); }
.code-label { font-size: .8125rem; font-weight: 700; color: var(--text-2); letter-spacing: .01em; min-width: 0; }
.copy--code { font-family: var(--sans); font-size: .875rem; border-color: transparent; background: transparent; }
.copy--code:hover { border-color: var(--chip-line); background: var(--card); }
.code-body { margin: 0; padding: 14px 16px 16px; max-height: 26rem; overflow: auto; font: 450 .8125rem/1.6 var(--mono); color: var(--text); tab-size: 2; }
.code-body:focus-visible { outline-offset: -3px; }
.code-body code { font: inherit; white-space: pre; }

.comp + .comp { margin-top: 36px; }
.comp .lib-p { margin-bottom: 4px; }

.getlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border-radius: 10px; background: var(--text); color: var(--paper);
  font-weight: 700; font-size: .9375rem; text-decoration: none;
}
.getlink:hover { text-decoration: underline; }
.getlink svg, .dl svg, .ink-more svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.getlink--sm { padding: 8px 12px; font-size: .875rem; }

/* ------------------------------------------------------------------ swatches, pairs, in use */
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.swatch {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; align-items: center;
  padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--chip-line);
}
.swatch-chip { grid-row: span 2; width: 56px; height: 56px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); align-self: start; }
.swatch-name { font-weight: 700; font-size: 1.0625rem; }
.swatch-note { font-size: .875rem; color: var(--text-3); line-height: 1.45; }
.swatch-codes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }

.pairs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.pair { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--chip-line); }
.pair-aa { display: grid; place-items: center; width: 48px; height: 40px; border-radius: 8px; background: var(--b); color: var(--f); font: 800 1.125rem/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pair-text { font-size: .9375rem; color: var(--text-2); }
.pair-text b { color: var(--text); }
.pair-r { font: 600 .875rem/1.2 var(--mono); text-align: right; }
.pair-r small { display: block; font-family: var(--sans); font-weight: 700; color: var(--text-3); }

.inuse { position: relative; padding: 26px 22px 24px; border-radius: 18px; background: var(--bg); color: var(--ink); max-width: 30rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.inuse-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--sec); color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.inuse-h { margin-top: 14px; font: 800 1.75rem/1.05 var(--display); letter-spacing: -.02em; }
.inuse-p { margin-top: 8px; font-size: .9375rem; line-height: 1.5; }
.inuse-btn { display: inline-block; margin-top: 16px; padding: 12px 18px; border-radius: 10px; background: var(--acc); color: var(--on-acc); font-weight: 700; }

/* ------------------------------------------------------------------ fonts */
.fonts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.font { padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--chip-line); }
.font-name { font-size: 2rem; line-height: 1.1; }
.font-meta { margin-top: 6px; font-size: .9375rem; color: var(--text-3); }
.font-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sizes { display: grid; gap: 14px; padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--chip-line); overflow-wrap: anywhere; }
.sizes p { line-height: 1.1; }

/* ------------------------------------------------------------------ cursors */
.curs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cur { display: grid; justify-items: center; gap: 8px; padding: 18px 10px 12px; border-radius: 16px; background: #FFF0F6; color: #17202C; border: 1px solid var(--chip-line); }
.cur-art svg { width: 64px; height: 64px; }
.cur-name { font-weight: 700; }
.cur-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cur .getlink { background: #17202C; color: #FDF9F1; }
.cur .copy { background: #fff; color: #17202C; border-color: rgba(23, 32, 44, .18); }

/* ------------------------------------------------------------------ shortcuts */
.keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.keys i { font-style: normal; font-weight: 700; color: var(--text-3); font-size: .8em; }
kbd {
  display: inline-grid; place-items: center; min-width: 2.1em; height: 2.1em; padding: 0 .5em;
  border-radius: .45em; border: 1.5px solid var(--line-strong); border-bottom-width: 3px;
  background: var(--card); color: var(--text);
  font: 700 .875rem/1 var(--sans);
}
.scs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--chip-line); }
.sc-what { font-weight: 700; }
.sc-note { font-size: .875rem; color: var(--text-3); }

/* ------------------------------------------------------------------ easing */
.ezs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ez { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--chip-line); }
.ez-curve { width: 96px; height: 96px; border-radius: 10px; background: var(--code-bg); overflow: visible; }
.ez-axis { fill: none; stroke: var(--chip-line); stroke-width: 1; stroke-dasharray: 3 3; }
.ez-line { fill: none; stroke: var(--sun-hot); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ez-name { font-weight: 700; font-size: 1.0625rem; }
.ez-copy { margin-top: 10px; min-width: 0; }
.ez-copy .copy { max-width: 100%; }
.ez-copy .copy span { overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ type scale */
.tss { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ts { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--chip-line); }
.ts-sample { grid-column: 1 / -1; font: 700 calc(var(--px) * 1px)/1.1 var(--sans); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ts-meta { font-size: .875rem; color: var(--text-2); }
.ts-meta b { color: var(--text); font-family: var(--mono); }
.ts-use { color: var(--text-3); }

/* ------------------------------------------------------------------ downloads, steps */
.downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--chip-line); text-decoration: none; }
.dl:hover { border-color: var(--line-strong); }
.dl b { display: block; }
.dl small { display: block; color: var(--text-3); font-size: .875rem; }
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; color: var(--text-2); max-width: 42rem; }
.steps li::marker { font-weight: 800; color: var(--accent-text); }

/* ------------------------------------------------------------------ ink controls */
.ink-controls { margin-top: 14px; display: grid; gap: 10px; }
.ink-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ink-form label { font-weight: 700; }
.ink-form input { flex: 1 1 8rem; min-width: 0; min-height: 48px; padding: 10px 14px; font: 600 16px/1.2 var(--mono); border: 2px solid var(--line); border-radius: 12px; background: var(--field); color: var(--text); }
.ink-form input:focus { outline: none; border-color: var(--focus); }
.ink-more { display: flex; flex-wrap: wrap; gap: 8px; }
.ink-more .btn { min-height: 44px; padding: 8px 16px; font-size: .9375rem; }

/* ------------------------------------------------------------------ the pin */
.pin-wrap { container-type: inline-size; width: 100%; max-width: 460px; margin: 0 auto; }
.pin {
  position: relative;
  aspect-ratio: 2 / 3;
  display: flex; flex-direction: column;
  padding: 6.5cqw 6.5cqw 5cqw;
  border-radius: 4cqw;
  overflow: hidden;
  background: var(--pin-bg); color: var(--pin-fg);
  font-family: var(--sans);
  box-shadow: 0 30px 60px -40px rgba(23, 32, 44, .55), 0 0 0 1px var(--chip-line);
  --mill-ink: #17202C; --sun-hot: #FF7A2F; --sun-mid: #FFB23F; --sun-pale: #FFDD9B; --rim: rgba(255, 216, 150, 0);
  --text: var(--pin-fg);
}
.pin--dark { --mill-ink: #F2EADC; }
.pin-kicker { font: 700 2.9cqw/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.pin-title { margin-top: 2.4cqw; font: 800 8.2cqw/1.02 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.pin-art { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 5cqw; display: flex; flex-direction: column; }
.pin-foot { display: flex; align-items: center; gap: 1.8cqw; margin-top: 4.5cqw; font: 700 3cqw/1 var(--sans); }
.pin-mark { width: 6cqw; height: 6cqw; flex: none; }
.pin-mark .mill { width: 100%; height: 100%; }
.pin-url { margin-left: auto; font-weight: 500; opacity: .65; }

/* palettes */
.sw-bands { flex: 1 1 auto; display: grid; grid-template-rows: repeat(var(--n), minmax(0, 1fr)); border-radius: 3cqw; overflow: hidden; box-shadow: 0 0 0 .3cqw rgba(0, 0, 0, .06); }
.sw-band { display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw; padding: 0 4cqw 2.4cqw; background: var(--c); color: var(--t); }
.sw-band b { font: 700 4.4cqw/1 var(--sans); letter-spacing: -.01em; }
.sw-band span { font: 500 3.3cqw/1.3 var(--mono); text-align: right; }
.sw-band small { font-size: 2.6cqw; opacity: .8; }
.pin-deco { width: 100%; height: auto; margin-bottom: 3cqw; }

/* font specimens */
.spec { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3.4cqw; padding: 5cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 .3cqw rgba(0, 0, 0, .06); }
.spec-aa { display: flex; gap: 4cqw; font-size: 17cqw; line-height: .9; }
.spec-head { font-size: 9.6cqw; line-height: 1; letter-spacing: -.01em; }
.spec-head em { font-style: italic; }
.spec--mono .spec-head { font-size: 8.8cqw; letter-spacing: .02em; line-height: 1.1; }
.spec-body { font-size: 3.4cqw; line-height: 1.5; opacity: .85; }
.spec--poem .spec-body { font-size: 3.8cqw; line-height: 1.7; }
.spec-names { margin-top: auto; display: grid; gap: 1.6cqw; padding-top: 3cqw; border-top: .3cqw solid rgba(0, 0, 0, .12); }
.spec-names p { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; }
.spec-names b { font-size: 4.4cqw; font-weight: 700; }
.spec-names span { font-size: 2.6cqw; font-weight: 600; opacity: .7; text-align: right; }

/* ui stages (live components at their real size) */
.pin-stage { flex: 1 1 auto; display: grid; place-content: center; gap: 22px; padding: 18px; border-radius: 3cqw; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); color: #17202C; font-family: var(--sans); }
.pin-stage--buttons, .pin-stage--loaders { grid-template-columns: repeat(2, minmax(0, auto)); justify-content: center; align-content: center; column-gap: 20px; row-gap: 26px; }
.pin-stage--loaders { row-gap: 36px; column-gap: 44px; }
.pin-cell { display: grid; place-items: center; gap: 12px; min-width: 0; }
.pin-cap { font: 600 13px/1 var(--sans); color: #57606C; }
/* on a roomy pin (the og image, a wide column) the live parts grow to fill it */
@container (min-width: 440px) {
  .pin-stage--buttons, .pin-stage--loaders, .pin-stage--list { zoom: 1.3; }
  .pin-stage--center .tilt, .pin-stage--center .term { zoom: 1.15; }
}
.pin-stage--list { place-content: center start; justify-content: center; }
.pin-stage--list .pin-cell { justify-items: start; }
.pin-stage--center { place-items: center; }
.pin--dark .pin-stage { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pin--motion .pin-stage--kt { background: transparent; box-shadow: none; padding: 0; }
.pin-stage--mag { position: relative; }
.pin-cursor { position: absolute; left: 60%; top: 58%; width: 22px; height: 22px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L5 24 L10.2 19.2 L13.8 27.4 L17.6 25.7 L14.1 17.6 L21.2 17.6 Z' fill='%23fff' stroke='%2317202C' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0; }
.pin-render .pin-cursor { opacity: 1; }
.pin-stage--dash { display: block; padding: 0; background: transparent; box-shadow: none; }
.pin-stage--dash .dash { height: 100%; align-content: start; }

/* the phone for slide to confirm */
.pin-phone { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; }
.pin-phone-screen {
  width: min(100%, 290px); height: 100%; max-height: 520px;
  display: flex; flex-direction: column; align-items: center;
  padding: 44px 18px 22px; border-radius: 36px;
  background: #FFFFFF; color: #17202C;
  border: 8px solid #17202C;
  box-shadow: 0 30px 50px -30px rgba(23, 32, 44, .6);
  position: relative;
}
.pin-phone-screen::before { content: ''; position: absolute; top: 10px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #17202C; }
.pin-phone-k { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #57606C; }
.pin-phone-amount { margin-top: 10px; font: 800 2.6rem/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pin-phone-to { margin-top: 8px; font-size: .9375rem; color: #3D4755; }
.pin-phone-slot { margin-top: auto; width: 100%; display: grid; place-items: center; }

/* cursors on the pin */
.pin-cursors { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3cqw; }
.pin-cursor-cell { display: grid; place-items: center; align-content: center; gap: 2cqw; border-radius: 3cqw; background: #FFFFFF; box-shadow: inset 0 0 0 .3cqw rgba(23, 32, 44, .08); }
.pin-cursor-cell svg { width: 17cqw; height: 17cqw; }
.pin-cursor-cell span { font: 700 3cqw/1 var(--sans); color: #17202C; }

/* windows shortcuts on the pin */
.pin-keys { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: grid; grid-template-rows: repeat(12, minmax(0, 1fr)); gap: 1cqw; }
.pin-keys li { display: grid; grid-template-columns: 34cqw minmax(0, 1fr); align-items: center; gap: 2.4cqw; font-size: 3.1cqw; font-weight: 600; line-height: 1.15; }
.pin-keys .keys { gap: .8cqw; }
.pin-keys kbd { font-size: 2.7cqw; border-radius: 1.2cqw; border-width: .3cqw .3cqw .7cqw; border-color: #17202C; background: #FFFFFF; color: #17202C; }
.pin-keys .keys i { font-size: 2.4cqw; color: #57606C; }

/* the easing race */
.pin-race { flex: 1 1 auto; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 2cqw; }
.race-row { display: grid; align-content: center; gap: 1.8cqw; padding: 0 3.4cqw; border-radius: 3cqw; background: #FFFFFF; box-shadow: inset 0 0 0 .3cqw rgba(23, 32, 44, .08); }
.race-name { font: 700 3.4cqw/1 var(--sans); }
.race-track { position: relative; height: 5.6cqw; border-radius: 3cqw; background: rgba(23, 32, 44, .08); }
.race-track i { position: absolute; top: 0; left: 0; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: #FF7A2F; animation: race 2.4s var(--ez) infinite alternate; }
@keyframes race { from { left: 0; } to { left: calc(100% - 5.6cqw); } }

/* the type scale ladder */
.pin-scale { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: .6cqw; }
.pin-scale p { display: flex; align-items: baseline; gap: 3cqw; font-size: calc(var(--px) * .2cqw); line-height: 1.02; }
.ts-aa { font-weight: 800; letter-spacing: -.03em; }
.ts-px { font: 500 2.8cqw/1 var(--mono); opacity: .6; }

/* the zine sheet: used on the pin, the page and the PDF */
.pin-zine { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 5cqw; }
.pin-zine-steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 2cqw; counter-reset: s; }
.pin-zine-steps li { counter-increment: s; flex: 1; padding: 2.6cqw 2cqw; border-radius: 2.4cqw; background: #FFFFFF; text-align: center; font: 700 3.3cqw/1 var(--sans); color: #17202C; box-shadow: inset 0 0 0 .3cqw rgba(23, 32, 44, .08); }
.pin-zine-steps li::before { content: counter(s) '. '; color: #D9581A; }

.zine-sheet {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 297 / 210;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  background: #FFFDF8; color: #1B1B1B;
  box-shadow: 0 20px 40px -24px rgba(23, 32, 44, .5), 0 0 0 1px rgba(23, 32, 44, .1);
  font-family: 'Switzer', 'Satoshi', system-ui, sans-serif;
}
.zp { position: relative; min-width: 0; min-height: 0; border-right: .15cqw dotted rgba(0, 0, 0, .3); border-bottom: .15cqw dotted rgba(0, 0, 0, .3); }
.zp:nth-child(4n) { border-right: 0; }
.zp:nth-child(n + 5) { border-bottom: 0; }
.zp.is-flipped .zp-in { transform: rotate(180deg); }
.zp-in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1cqw; padding: 2.4cqw 2.2cqw 2cqw; }
.zp-title { font: 400 2.5cqw/1.05 'Instrument Serif', Georgia, serif; }
.zp--cover .zp-title { font-size: 3.8cqw; font-style: italic; margin-top: 3cqw; }
.zp-body { font-size: 1.15cqw; line-height: 1.45; color: #3A3A3A; }
.zp-quote { font: italic 400 1.8cqw/1.25 'Instrument Serif', Georgia, serif; color: #1B1B1B; }
.zp-box { flex: 1; border: .15cqw solid rgba(0, 0, 0, .35); border-radius: .6cqw; }
.zp-lines { flex: 1; display: grid; grid-template-rows: repeat(5, 1fr); }
.zp-lines span { border-bottom: .12cqw solid rgba(0, 0, 0, .25); font-size: 1.2cqw; display: flex; align-items: flex-end; padding-bottom: .3cqw; }
.zp-n { margin-top: auto; font: 600 1cqw/1 'Switzer', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A8A8A; }
.zp-credit { margin-top: auto; font-size: .8cqw; color: #8A8A8A; }
.zp-credit + .zp-n { margin-top: .6cqw; }
.zine-cut { position: absolute; left: 25%; right: 25%; top: 50%; border-top: .25cqw dashed #D9581A; transform: translateY(-50%); }
.zine-cut::after { content: 'cut'; position: absolute; left: 50%; top: -1.3cqw; transform: translate(-50%, -50%); padding: 0 .8cqw; background: #FFFDF8; color: #D9581A; font: 700 1cqw/1 'Switzer', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------------ index */
.lib-index-head .page-title { max-width: 12ch; }
.lib-index { padding: 8px var(--gutter) clamp(72px, 10vw, 140px); background: var(--paper-2); }
.lib-index > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 2px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text);
  font-weight: 700; font-size: .9375rem; cursor: pointer;
  transition: background-color .2s, color .2s, transform .25s var(--ease);
}
.filter span { font: 600 .8125rem/1 var(--mono); opacity: .7; }
.filter:hover { transform: translateY(-2px); }
.filter[aria-pressed="true"] { background: var(--text); color: var(--paper); }
.filter-count { margin-top: 16px; font-size: .9375rem; font-weight: 600; color: var(--text-3); }

.cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.card a { display: grid; gap: 4px; text-decoration: none; }
.card img { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--chip-line), 0 18px 30px -24px rgba(23, 32, 44, .6); transition: transform .35s var(--ease), box-shadow .35s var(--ease); margin-bottom: 6px; }
.card a:hover img { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line-strong), 0 26px 40px -26px rgba(23, 32, 44, .7); }
.card-type { font-size: .8125rem; font-weight: 700; color: var(--accent-text); }
.card-name { font: 700 1.0625rem/1.2 var(--display); letter-spacing: -.01em; }
.card a:hover .card-name { text-decoration: underline; }
.cards--more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--more .card:nth-child(3) { display: none; }

/* ------------------------------------------------------------------ wider */
@media (min-width: 600px) {
  .curs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
  .cards--more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--more .card:nth-child(3) { display: block; }
  .swatch { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .swatch-chip { width: 64px; height: 64px; grid-row: auto; }
  .swatch-codes { grid-column: auto; justify-content: flex-end; }
  .sc { grid-template-columns: 12rem minmax(0, 1fr); align-items: center; }
  .ts { grid-template-columns: minmax(0, 1fr) 13rem auto; }
  .ts-sample { grid-column: auto; }
}
@media (min-width: 960px) {
  .lib-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .lib-preview { position: sticky; top: calc(var(--bar-h) + 20px); }
  .pin-wrap { margin: 0; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cards--more { grid-template-columns: repeat(3, minmax(0, 220px)); }
}

@media print {
  .bar, .foot, .grain, .lib-more, .lib-preview { display: none !important; }
}

/* ------------------------------------------------------------------ pin tweaks per page */
/* the wallpaper pin is the wallpaper: it fills the card behind the words */
.pin--wallpapers .pin-art { position: absolute; inset: 0; margin: 0; z-index: 0; }
.pin--wallpapers .pin-art .mesh { position: absolute; inset: 0; }
.pin--wallpapers .pin-head, .pin--wallpapers .pin-foot { position: relative; z-index: 1; }
.pin--wallpapers .pin-foot { margin-top: auto; }
/* the magnet's pull zone, drawn on the preview only */
.pin-stage--mag .mag { border-radius: 50%; outline: 2px dashed rgba(23, 32, 44, .16); outline-offset: -2px; aspect-ratio: 1; }
.pin .kt { font-size: 14.5cqw; }
@container (min-width: 440px) {
  .pin-stage--mag .mag { zoom: 1.45; }
}
.pin-stage--buttons button { white-space: nowrap; }