/* ============================================================================
   The Playground · layout & chrome
   Pairs with tokens.css (which holds the tokens, type roles, wayfinding,
   figures, tables, section break, math, and the accessibility media queries).
   This file holds page structure plus the hooks for Markdown-rendered code
   (Prism) and citations (markdown-it-footnote).
   ========================================================================== */

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif);
  font-size:18px; line-height:var(--leading); -webkit-font-smoothing:antialiased;
  padding:0 var(--gutter); transition:background .2s ease, color .2s ease; }

/* theme toggle ------------------------------------------------------------- */
.toggle{ position:absolute; top:22px; right:var(--gutter);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:lowercase;
  color:var(--secondary); background:transparent; border:1px solid var(--hair);
  border-radius:6px; padding:7px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:border-color .15s ease, color .15s ease; }
.toggle:hover{ color:var(--ink); border-color:var(--secondary); }
.toggle:focus-visible{ outline:2px solid var(--wf); outline-offset:2px; }
.toggle svg{ width:13px; height:13px; display:block; }

.shell{ max-width:60rem; margin:0 auto; }

/* home --------------------------------------------------------------------- */
.home{ padding:18vh 0 0; }
.wordmark{ font-family:var(--serif); font-weight:600;
  font-size:clamp(44px,9vw,104px); line-height:1.02; letter-spacing:-.02em;
  margin:0 0 .6em; color:var(--ink); }
.note{ max-width:var(--measure); }
.note .lead{ font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,2.4vw,25px); line-height:1.5; letter-spacing:-.005em;
  margin:0 0 1.1em; color:var(--ink); }
.note p.body{ font-family:var(--serif); font-weight:400; font-size:18.5px;
  line-height:var(--leading); margin:0 0 .85em; color:var(--ink); }
.note p.body:last-child{ margin:0; }

/* writing index ------------------------------------------------------------ */
.band{ margin:16vh 0 0; border-top:1px solid var(--hair); padding-top:40px; }
.entry{ display:grid; grid-template-columns:7.5rem var(--measure); gap:0 2.5rem; align-items:start; padding:0 0 30px; }
.entry + .entry{ border-top:1px solid var(--hair); padding-top:30px; }
.entry .rail{ font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--secondary); text-align:right; padding-top:6px; }
.entry .col{ min-width:0; }
.entry h2{ font-family:var(--serif); font-weight:600; font-size:25px; letter-spacing:-.012em; line-height:1.2; margin:0; }
.entry .dek{ font-family:var(--serif); font-size:17.5px; line-height:1.5; margin:.35em 0 0; color:var(--ink); max-width:44rem; }
@media (max-width:760px){
  .entry{ grid-template-columns:1fr; gap:0; }
  .entry .rail{ text-align:left; padding-top:0; margin-bottom:10px; }
}

/* post --------------------------------------------------------------------- */
.backlink{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--secondary);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin-top:30px; }
.backlink:hover, .backlink:focus-visible{ color:var(--wf); }
.backlink:focus-visible{ outline:2px solid var(--wf); outline-offset:3px; border-radius:2px; }
.backlink .star{ color:var(--decoration); }

.article{ max-width:var(--measure); margin:0 auto; padding:9vh 0 0; }
.article .meta{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--secondary); margin:0 0 16px; }
.article h1{ font-family:var(--serif); font-weight:600; font-size:clamp(30px,4.6vw,46px); line-height:1.08; letter-spacing:-.016em; margin:0 0 .55em; color:var(--ink); }
.article .lead{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.3vw,23px); line-height:1.5; letter-spacing:-.005em; margin:0 0 1.2em; color:var(--ink); }
.article p{ font-family:var(--serif); font-size:18.5px; line-height:var(--leading); margin:0 0 1.15em; color:var(--ink); }
.article h2{ font-family:var(--serif); font-weight:600; font-size:27px; line-height:1.2; letter-spacing:-.01em; margin:1.9em 0 .55em; color:var(--ink); }
.article h3{ font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.3; margin:1.6em 0 .5em; color:var(--ink); }
.article ul, .article ol{ margin:0 0 1.15em; padding-left:1.5em; }
.article li{ font-family:var(--serif); font-size:18.5px; line-height:var(--leading); margin:0 0 .45em; }
.article li::marker{ color:var(--secondary); }
.article ol li::marker{ font-family:var(--mono); font-size:.85em; }

blockquote{ margin:1.6em 0; padding:2px 0 2px 1.2em; border-left:2px solid var(--hair); }
blockquote p{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.5; color:var(--ink); margin:0; max-width:30rem; }

/* inline code + code blocks ------------------------------------------------ */
code{ font-family:var(--code); font-size:.88em; background:var(--code-bg); padding:1px 5px; border-radius:3px; color:var(--ink); }
pre{ font-family:var(--code); font-size:14px; line-height:1.7; background:var(--code-bg);
  border:1px solid var(--code-edge); border-radius:8px; padding:16px 18px; margin:0 0 1.15em;
  overflow-x:auto; color:var(--code-ink); white-space:pre; -webkit-font-smoothing:auto; }
pre code{ background:none; padding:0; font-size:1em; }
/* hand-written spans (.k/.fn/.s/.n/.c) and Prism tokens share the four code hues */
pre .k, .token.keyword, .token.boolean, .token.atrule, .token.selector, .token.important{ color:var(--c-keyword); }
pre .fn, .token.function, .token.class-name, .token.tag, .token.attr-name{ color:var(--c-func); }
pre .s, .token.string, .token.char, .token.attr-value, .token.regex, .token.url{ color:var(--c-string); }
pre .n, .token.number, .token.constant, .token.property, .token.symbol{ color:var(--c-number); }
pre .c, .token.comment, .token.prolog, .token.doctype, .token.cdata{ color:var(--c-comment); font-style:italic; }
.token.punctuation, .token.operator{ color:var(--secondary); }

/* GFM tables: right-aligned columns get tabular figures so digits stack ----- */
.article tbody td[style*="right"]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* citations (markdown-it-footnote) mapped to the References look ------------ */
.footnote-ref a{ font-family:var(--mono); font-size:.75em; font-weight:700; text-decoration:none; color:var(--ink); padding:0 1px; }
.footnote-ref a:hover, .footnote-ref a:focus-visible{ color:var(--wf); }
.footnote-ref a:focus-visible{ outline:2px solid var(--wf); outline-offset:2px; border-radius:2px; }
.footnotes-sep{ display:none; }
.footnotes{ margin-top:3.2em; border-top:1px solid var(--hair); padding-top:1.6em; }
.footnotes::before{ content:"References"; display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--secondary); margin:0 0 1.1em; }
.footnotes-list{ margin:0; padding-left:1.7em; }
.footnote-item{ font-family:var(--serif); font-size:15.5px; line-height:1.55; color:var(--ink); margin:0 0 .7em; }
.footnote-item::marker{ font-family:var(--mono); font-size:.82em; color:var(--secondary); }
.footnote-item p{ margin:0; }
.footnote-backref{ font-family:var(--mono); text-decoration:none; color:var(--secondary); margin-left:.4em; }
.footnote-backref:hover, .footnote-backref:focus-visible{ color:var(--wf); }

/* footer ------------------------------------------------------------------- */
footer{ margin:16vh 0 0; border-top:1px solid var(--hair); padding:26px 0 64px;
  display:flex; flex-direction:column; gap:10px; }
footer .colophon{ display:flex; align-items:center; gap:14px; }
footer .star{ font-family:var(--serif); font-size:18px; color:var(--secondary); line-height:1; }
footer .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--secondary); }
footer .meta a{ font-family:var(--code); letter-spacing:0; color:var(--secondary); text-decoration:underline; text-decoration-color:var(--hair); }
footer .meta a:hover, footer .meta a:focus-visible{ color:var(--wf); text-decoration-color:var(--wf); }

@media (forced-colors: active){
  .footnotes{ border-color:currentColor; }
}