/* LOCAL (aneesh-blyg), hand-written: the blyg's markup in the blog's clothes.
 *
 * Loaded after /style.css (the blyg's own, with the Nord theme and Geometric font from
 * Settings) and after blog-chrome.css (the blog's tokens + masthead/nav/comments CSS,
 * generated by scripts/sync-blog-chrome.mjs). It only re-points the blyg's variables
 * at the blog's tokens and adjusts a handful of the blyg's own rules, so it follows the
 * blog's palette in both schemes and needs no change when the blog's colours move: re-run
 * the sync. Selectors are the blyg's public CSS contract (.blyg, .masthead, .fragment …),
 * which upstream keeps stable in the baked HTML.
 */

/* ---- palette + type: the blyg's variables, answered by the blog's tokens ---------- */
/* html:root out-ranks the theme's plain :root (Nord pins color-scheme: dark). */
html:root {
  color-scheme: light dark;
  --block-pad: 0rem;
  --page: var(--bg);
  --paper: transparent;
  --paper-sunk: var(--bg-sunk);
  --ink-soft: var(--ink-2);
  --pencil: var(--link);
  --gen-bg: var(--bg-panel);
  --gen-rule: var(--rule-strong);
  /* --ink, --rule and --serif have the same names in both sheets; the blog's win. */
  --sans: var(--mono);
  --apparatus: 0.75rem/1.6 var(--mono);
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) { color-scheme: dark; }
}

/* ---- page ---------------------------------------------------------------------- */
body {
  margin: 0;
  padding: 0 0 5rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  font-feature-settings: var(--onum);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--bg);
  background-image: radial-gradient(var(--fleck-a) 1px, transparent 1.5px), radial-gradient(var(--fleck-b) 1px, transparent 1.5px);
  background-size: 23px 23px, 37px 37px;
  background-position: 0 0, 12px 18px;
  min-height: 100vh;
}
::selection { color: var(--bloom-white); background-color: var(--accent); }
.wrap { max-width: 74rem; margin: 0 auto; padding: 0 clamp(0.9rem, 4vw, 2.4rem); }
.blog-chrome { padding-top: 0; }

/* The blyg block sits in the blog's page column, below the masthead and nav. */
.blyg {
  max-width: 74rem;
  margin: 2.2rem auto 0;
  padding: 0 clamp(0.9rem, 4vw, 2.4rem);
  background: none;
  border-radius: 0;
  font-family: var(--serif);
}
.blyg.has-side { max-width: 74rem; }
.blyg a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.blyg a:hover { color: var(--accent); }
.blyg :focus-visible { outline-color: var(--link); }

/* ---- the blyg's masthead: a section title under the site masthead --------------- */
.blyg-header a { font: var(--apparatus); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.masthead { margin-bottom: 2.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule-strong); }
.masthead .site-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.masthead .site-name a { color: var(--ink); }
.masthead .author-name { font: var(--apparatus); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.masthead .author-bio { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-2); max-width: 52ch; }
.masthead .author-links a { color: var(--link); border-bottom-color: var(--rule); }

/* ---- the side column: the blog's nav is above now, so the copy of it goes ------- */
.blyg-links .links-external { display: none; }
.blyg .blyg-links section h2 {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.blyg-links a { color: var(--link); }
.links-foot, .links-foot a { font: var(--apparatus); color: var(--ink-2); }

/* ---- items ----------------------------------------------------------------------- */
article.fragment, article.thread { border-top: 1px solid var(--rule); }
.item-content, .card-clip { font-size: 1.06rem; line-height: 1.6; }
.blyg h1, .blyg h2, .blyg h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; }
.blyg article.fragment h1.item-title, .blyg article.thread h1.item-title { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); font-weight: 400; line-height: 1.12; }
.blyg pre { background: var(--bg-panel); border: 1px solid var(--rule); border-radius: 3px; font-size: 0.86rem; }
.blyg hr { border-top-color: var(--rule); }

/* The editorial apparatus reads as the blog's meta line: small mono, warm grey. */
.timestamps, .version-line, a.permalink, .provenance, ul.archive .meta, .pinned-banner { letter-spacing: 0.02em; }
.card-kind, .stub-cite .label, .responses h2 { font-family: var(--mono); letter-spacing: 0.1em; color: var(--ink-2); font-weight: 400; }
.card-kind .quote-count { color: var(--ink-3); }
/* The newest card wears the blog's one bloom, as the blog's newest entry does. */
.blyg-main > article:first-of-type .card-kind { color: var(--accent); }
.stub-cite { font-family: var(--serif); font-size: 0.95rem; border-left-color: var(--rule-strong); }
blockquote.blyg-transclusion { border-left: 2px solid var(--rule-strong); }
.version-note { font-family: var(--serif); }
.pinned-banner { background: var(--bg-panel); border-left-color: var(--rule-strong); }

/* ---- comments (the blog's form, styled by blog-chrome.css) ------------------------ */
.blog-comments { margin-top: 2.5rem; }
/* The blog's script shows and hides parts of the form with [hidden]; the blog's own
   display rules for them (e.g. .creply-banner's flex) would otherwise out-rank it. */
.blog-comments [hidden] { display: none !important; }
.blog-comments .comments { max-width: 42rem; }

/* ---- narrow screens: one Menu (the blog's) ----------------------------------------- */
/* Upstream folds the side column behind its own "Menu" button under 62rem. With the
   blog's Menu above it that is two menus, so the side column (collections, blogroll,
   credits) is shown unfolded after the posts instead, as a footer. */
@media (max-width: 61.99rem) {
  html.js-links .blyg.has-side .links-toggle { display: none; }
  html.js-links .blyg.has-side:not(.links-open) .blyg-links { display: block; }
  .blyg.has-side .blyg-body { display: flex; flex-direction: column; }
  .blyg.has-side .blyg-main { order: 1; }
  html .blyg.has-side .blyg-links { order: 2; margin: 3rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--rule-strong); border-bottom: 0; }
}