/* Ribbonlab guides, in the type and spacing of the articles on ayurchenko.xyz/writing */
@font-face { font-family: "Inter Display"; src: url(/guides/fonts/InterDisplay-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url(/guides/fonts/InterDisplay-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/guides/fonts/GeistMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #ffffff; --fg: #000000;
  --ink: rgb(0 0 0 / .9); --text: rgb(0 0 0 / .8); --muted: rgb(0 0 0 / .65); --quiet: rgb(0 0 0 / .58);
  --line: rgb(0 0 0 / .36); --rule: rgb(0 0 0 / .1);
  --glass: #d9d9d9; --glass-ink: rgb(0 0 0 / .78); --glass-pill: #c4c4c4;
  --title: 24px; --body: 15px; --small: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --fg: #ffffff;
    --ink: rgb(255 255 255 / .9); --text: rgb(255 255 255 / .8); --muted: rgb(255 255 255 / .65); --quiet: rgb(255 255 255 / .58);
    --line: rgb(255 255 255 / .36); --rule: rgb(255 255 255 / .12);
    --glass: #2e2e2e; --glass-ink: rgb(255 255 255 / .85); --glass-pill: #3a3a3a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); font: 400 16px/1.2 "Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* the site's chrome pill on the column's left edge: back to the editor */
.top a { position: fixed; inset-block-start: 21px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; block-size: 35px; padding: 0 14px;
  border-radius: 13px; background: color-mix(in srgb, var(--glass) 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--glass-ink); font-size: var(--small); text-decoration: none; transition: border-radius .25s, background-color .25s; }
.top a:hover { border-radius: 20px; background: var(--glass-pill); }
/* one column for everything: 600px, or the screen less 26px a side on phones.
   Percentages, not vw, so a visible scrollbar does not shift the pills off it */
.back { inset-inline-start: calc(50% - min(300px, 50% - 26px)); padding-inline-start: 11px; }
.back svg { inline-size: 18px; block-size: 18px; }

main, .foot { inline-size: min(600px, 100% - 52px); margin-inline: auto; }
main { padding-block: 174px 88px; color: var(--text); font-size: var(--body); line-height: 24px; }
@media (min-width: 821px) {
  .top a { inset-block-start: 26px; }
  main { padding-block-start: 188px; }
}

h1 { margin: 0 0 38px; color: var(--ink); font-size: var(--title); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h2 { margin: 48px 0 22px; color: var(--ink); font-size: var(--title); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
p { margin: 0 0 14px; }
ul, ol { margin: 14px 0; padding-inline-start: 16.5px; }
li { margin-block-end: 7.5px; }
li::marker { color: var(--muted); }
strong { color: var(--ink); font-weight: 500; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3.3px; transition: text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }

/* the poster is see-through, so the plate tone shows behind the ribbon */
.band { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2.4; margin: 32px 0 0; border-radius: 10px; object-fit: cover; background: color-mix(in srgb, var(--fg) 2.5%, var(--bg)); }

/* inline code and keys, in the tone of the plates */
code, kbd { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 6%, var(--bg)); color: var(--ink); font: 400 0.87em/1.5 "Geist Mono", ui-monospace, monospace; }
kbd { padding-inline: 6px; }

/* Code blocks: built from the block on shedsgns.me/radius (its DOM, spacing and syntax palette),
   on this site's plate grey, radius and Geist Mono */
.code-block { margin: 16px 0 24px; border-radius: 10px; background: color-mix(in srgb, var(--fg) 4%, var(--bg)); overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; min-block-size: 36px; padding: 10px 8px 2px 16px; }
.code-lang { color: var(--quiet); font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.code-copy { display: flex; justify-content: center; align-items: center; inline-size: 26px; block-size: 26px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--quiet); cursor: pointer; transition: color .16s, transform .12s; }
.code-copy:hover, .code-copy:focus-visible { color: var(--ink); outline: none; }
.code-copy:active { transform: scale(0.92); }
.code-copy.is-copied { color: lab(69.29 -49.44 10.96); }
.code-block pre { margin: 0; padding: 4px 16px 16px; overflow-x: auto; }
.code-block code { display: flex; flex-direction: column; padding: 0; background: none; color: color-mix(in srgb, var(--fg) 72%, var(--bg));
  font: 400 13px/22px "Geist Mono", ui-monospace, monospace; tab-size: 2; }
.code-line { display: flex; gap: 14px; min-block-size: 22px; }
.code-ln { flex: 0 0 auto; inline-size: 2ch; color: rgb(0 0 0 / .26); user-select: none; }
.code-ln::before { content: attr(data-line); }
.code-line-text { flex: 1 1 auto; min-inline-size: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-prop { color: lab(65.1 68.5 -28.35); }
.c-sel, .c-string { color: lab(69.29 -49.44 10.96); }
.c-num { color: lab(64.68 53.19 73.44); }
.c-keyword { color: lab(56.53 41.06 -67.28); }
.c-comment { color: rgb(0 0 0 / .3); font-style: italic; }
.c-punct { color: rgb(0 0 0 / .3); }
@media (prefers-color-scheme: dark) {
  .code-ln { color: rgb(255 255 255 / .24); }
  .code-copy.is-copied, .c-sel, .c-string { color: lab(79.91 -43.76 5.98); }
  .c-prop { color: lab(68.93 61.91 -26.38); }
  .c-num { color: lab(66 50.37 66.96); }
  .c-keyword { color: lab(78.38 17.91 -32.62); }
  .c-comment, .c-punct { color: rgb(255 255 255 / .3); }
}
@media (max-width: 540px) {
  .code-head { padding: 10px 10px 2px 18px; }
  .code-block pre { padding: 4px 18px 16px; }
  .code-block code { font-size: 12px; line-height: 20px; }
}

dl { margin: 0; }
dt { color: var(--ink); font-weight: 500; }
dd { margin: 2px 0 16px; }

/* the guides on the index: one plate a row, in the tone of the code blocks */
.cards { display: grid; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; }
.cards li { margin: 0; }
.cards a { display: block; padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, var(--fg) 5%, var(--bg)); text-decoration: none; transition: background-color .2s; }
.cards a:hover { background: color-mix(in srgb, var(--fg) 9%, var(--bg)); }
.cards strong { display: block; margin-block-end: 2px; }
.cards span { color: var(--muted); }

.foot { padding-block: 0 24px; color: var(--quiet); font-size: var(--small); line-height: 19.6px; letter-spacing: -0.01em; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-block-end: 12px; padding-block-start: 20px; border-block-start: 1px solid var(--rule); }
.foot a { color: var(--quiet); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot p { margin: 0; }
.foot p a { text-decoration: underline; text-decoration-color: var(--line); }

@media (prefers-reduced-motion: reduce) { .top a, a { transition: none; } }