/* FreeCORE docs — poster design system (variant I) extended for reading.
   Tokens and genes come from freecore-website variants/i-poster.html:
   one grid voice, mono eyebrows on ink rules, sienna accent budget. */

@font-face{font-family:'Plex Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/sans-reg.woff2) format('woff2')}
@font-face{font-family:'Plex Sans';font-weight:400;font-style:italic;font-display:swap;
  src:url(fonts/sans-italic.woff2) format('woff2')}
@font-face{font-family:'Plex Sans';font-weight:700;font-style:normal;font-display:swap;
  src:url(fonts/sans-bold.woff2) format('woff2')}
@font-face{font-family:'Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/mono-reg.woff2) format('woff2')}
@font-face{font-family:'Plex Mono';font-weight:700;font-style:normal;font-display:swap;
  src:url(fonts/mono-bold.woff2) format('woff2')}

*{ box-sizing:border-box }
:root{ color-scheme:light;
  --bg:#F3F3F2; --ink:#1E2226; --soft:#4C555C; --line:#D9D9D7; --acc:#9C4A24;
  --codebg:#EBEBE9;
  --mk-ghost:#4C555C; --mk-branch:var(--acc);   /* 1c FORK mark, site tokens */
  --docsw:78rem; --pad:clamp(1.5rem, 5vw, 3.5rem);
  --measure:46rem;                      /* the ONE reading column width */
  --colgap:clamp(2.5rem, 4vw, 4rem);    /* rail <-> article */
  --mono:'Plex Mono', ui-monospace, monospace;
}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  border-top:4px solid var(--acc);
  font:400 1rem/1.65 'Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--acc); color:#FFFFFF }
a{ color:var(--acc); text-underline-offset:.25em; text-decoration-thickness:1px }
a:hover{ color:var(--ink) }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px }
@media (prefers-reduced-motion: no-preference){ a{ transition:color .15s ease } }
h1,h2,h3,h4{ text-wrap:balance }
p{ text-wrap:pretty }

.masthead, .crumbs, main, footer{
  max-width:var(--docsw); margin-left:auto; margin-right:auto;
  padding-left:var(--pad); padding-right:var(--pad);
}

/* ---- masthead (identical voice to the site) ---- */
.masthead{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; padding-top:1.6rem }
.lockup{ display:flex; align-items:center; gap:.7rem; margin-right:auto;
  color:inherit; text-decoration:none }
.mark{ flex:none } /* 1c mark viewBox is cropped to the ink — no hang compensation */
.wordmark{ font-size:1.125rem; line-height:1 }
.wordmark b{ font-weight:700 }
.sys{ font:400 .78125rem/1.4 var(--mono); color:var(--soft); letter-spacing:.03em;
  font-feature-settings:'zero' }
.site-link{ font:400 .78125rem/1.4 var(--mono); letter-spacing:.03em }

/* ---- breadcrumbs ---- */
.crumbs{ margin-top:2.2rem; font:400 .75rem/1.6 var(--mono); color:var(--soft);
  letter-spacing:.02em; font-feature-settings:'zero' }
.crumbs a{ color:var(--soft) }
.crumbs a:hover{ color:var(--ink) }
.crumbs .sep{ color:var(--line); padding:0 .1rem }
.crumbs span:last-child{ color:var(--ink) }

/* ---- doc grid ----
   The rail takes the slack so the article column keeps ONE measure and the
   grid still ends exactly on the canvas edge: one left edge, one right edge
   shared by masthead, crumbs, article and footer. */
main.doc{ display:grid; grid-template-columns:minmax(0, 1fr) var(--measure);
  column-gap:var(--colgap); padding-top:1.6rem; padding-bottom:2rem }

/* rail — the poster's aside voice: mono eyebrow, no rule of its own
   (rules are reserved for the article's section band) */
.rail{ font:400 .78125rem/1.9 var(--mono); font-feature-settings:'zero';
  align-self:start; padding-top:.5rem;
  position:sticky; top:1.25rem; max-height:calc(100vh - 2.5rem);
  overflow-y:auto; padding-bottom:1rem; padding-right:1rem }
.rail-top{ margin:0 0 .55rem; font:inherit; text-transform:uppercase; letter-spacing:.12em }
.rail-top a{ color:var(--acc); text-decoration:none }
.rail-top a:hover{ color:var(--ink) }
.rail ul{ margin:0; padding:0; list-style:none }
.rail ul ul{ padding-left:.9rem; border-left:1px solid var(--line) }
.rail a{ color:var(--soft); text-decoration:none }
.rail a:hover{ color:var(--ink) }
.rail a.cur{ color:var(--acc); font-weight:700 }

/* ---- article ---- */
article{ min-width:0 }
article h1{ margin:0 0 .8rem; font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight:400; line-height:1.1; letter-spacing:-.02em }
.lede{ margin:0 0 1.6rem; font-size:1.0625rem; color:var(--soft) }
article h2{ margin:2.6rem 0 1rem; border-top:1px solid var(--ink); padding-top:1.15rem;
  font:400 .71875rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.12em;
  color:var(--acc) }
article h3{ margin:1.8rem 0 .7rem; font-size:1rem; font-weight:700 }
article h4{ margin:1.4rem 0 .6rem; font-size:.875rem; font-weight:700; color:var(--soft) }
article p{ margin:0 0 .9em }
article ul, article ol{ margin:0 0 1em; padding-left:1.4rem }
article li{ margin:.25em 0 }
article hr{ border:0; border-top:1px solid var(--line); margin:2rem 0 }

/* code */
code, kbd{ font-family:var(--mono); font-feature-settings:'zero' }
code{ font-size:.875em; background:var(--codebg); padding:.08em .28em }
pre{ background:var(--codebg); border-left:2px solid var(--line);
  padding:.9rem 1.1rem; margin:1.2rem 0; overflow-x:auto }
pre code{ background:none; padding:0; font-size:.8125rem; line-height:1.6 }
kbd{ font-size:.8125em; border:1px solid var(--line); background:#FFFFFF;
  padding:.05em .4em; box-shadow:inset 0 -1px 0 var(--line) }

/* tables */
.tablewrap{ overflow-x:auto; margin:1.2rem 0 }
article table{ border-collapse:collapse; width:100%; font-size:.9375rem; line-height:1.55 }
article th{ font:700 .71875rem/1.5 var(--mono); text-transform:uppercase;
  letter-spacing:.08em; color:var(--soft); text-align:left;
  border-bottom:1px solid var(--ink); padding:.45rem .9rem .45rem 0 }
article td{ border-bottom:1px solid var(--line); padding:.55rem .9rem .55rem 0;
  vertical-align:top }
article td:first-child{ white-space:nowrap; max-width:16rem; white-space:normal }

/* hints */
.hint{ margin:1.3rem 0; padding:.2rem 0 .2rem 1.1rem; border-left:2px solid var(--ink) }
.hint .hint-label{ margin:0 0 .3rem; font:700 .71875rem/1.5 var(--mono);
  text-transform:uppercase; letter-spacing:.12em; color:var(--soft) }
.hint p:last-child{ margin-bottom:.4rem }
.hint.important, .hint.warning, .hint.danger{ border-left-color:var(--acc) }
.hint.important .hint-label, .hint.warning .hint-label, .hint.danger .hint-label{
  color:var(--acc) }

/* expands */
details.expand{ margin:1.2rem 0; border:1px solid var(--line); padding:0 1rem }
details.expand summary{ cursor:pointer; padding:.7rem 0;
  font:400 .78125rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  color:var(--acc); list-style-position:outside }
details.expand summary:hover{ color:var(--ink) }
details.expand[open]{ padding-bottom:.8rem }

/* tabs -> sequential labeled blocks */
.tabs{ margin:1.2rem 0 }
.tab{ border:1px solid var(--line); padding:0 1rem .4rem; margin:0 0 1rem }
.tab-label{ margin:0 0 .6rem; padding:.6rem 0; border-bottom:1px solid var(--line);
  font:700 .71875rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.12em;
  color:var(--soft) }

/* figures / screenshots */
figure.shot{ margin:1.4rem 0 }
figure.shot img{ max-width:100%; height:auto; border:1px solid var(--line);
  background:#FFFFFF }
figure.shot figcaption{ margin-top:.45rem; font:400 .75rem/1.6 var(--mono);
  color:var(--soft); font-feature-settings:'zero' }
figure.shot figcaption a{ color:var(--soft) }
.figcap-note{ margin:.15rem 0 0 }
.figcap-stale{ margin:.25rem 0 0; color:var(--acc) }

/* records (poster linklist) */
.linklist{ margin:1.2rem 0 0 }
.linklist .row{ padding:.45rem 0; display:flex; gap:1rem; align-items:baseline }
.linklist dt{ flex:none; width:2rem; font:400 .75rem/1.8 var(--mono);
  color:var(--soft); font-feature-settings:'zero' }
.linklist dd{ margin:0 }
.linklist .soft{ color:var(--soft); font-size:.9375rem }

/* toc */
.toc{ margin:0 0 1.4rem; padding:0; list-style:none;
  font:400 .8125rem/1.9 var(--mono) }
.toc a{ color:var(--soft) }
.toc a:hover{ color:var(--ink) }

/* ---- landing ---- */
main.landing{ padding-top:clamp(3rem, 8vh, 5.5rem); padding-bottom:2rem }
main.landing h1{ margin:0 0 1.6rem; font-size:clamp(2.8rem, 1.8rem + 4vw, 4.6rem);
  font-weight:400; line-height:1.02; letter-spacing:-.025em }
main.landing h1 b{ font-weight:700; color:var(--acc) }
.landing-body > p:first-child{ max-width:var(--measure); font-size:1.125rem;
  line-height:1.65; color:var(--soft); margin:0 0 1rem }
.landing-body .linklist{ margin-top:2.2rem; border-top:1px solid var(--ink);
  padding-top:1.2rem; max-width:var(--measure) }
.landing-body .linklist .row{ padding:.55rem 0 }

/* ---- footer ----
   Same two tracks as the doc grid, so the legal column starts on the
   article's left edge and ends on the shared right edge. */
footer{ margin-top:clamp(2.5rem, 6vh, 4rem);
  display:grid; grid-template-columns:minmax(0, 1fr) var(--measure);
  column-gap:var(--colgap);
  border-top:1px solid var(--ink);
  padding-top:1.25rem; padding-bottom:4rem;
  color:var(--soft); font-size:.78125rem; line-height:1.7 }
.powered{ grid-column:1; margin:0; font:400 .78125rem/1.7 var(--mono);
  font-feature-settings:'zero' }
.legal{ grid-column:2 }
.legal p{ margin:0 0 .5em }
.legal a{ color:var(--soft) }
.legal a:hover{ color:var(--ink) }

/* ---- responsive ---- */
@media (max-width: 1100px){
  /* stacked: the article comes first — a reader should not scroll past the
     whole section index to reach the page they opened */
  main.doc{ display:flex; flex-direction:column; row-gap:2.5rem }
  article{ order:1 }
  .rail{ order:2; position:static; max-height:none; padding-right:0;
    border-top:1px solid var(--ink); padding-top:1.1rem }
  footer{ grid-template-columns:1fr; row-gap:.6rem }
  .powered, .legal{ grid-column:auto }
}
@media (max-width: 560px){
  .sys{ display:none }   /* the crumbs already say where you are */
  .masthead{ gap:.5rem 1rem }
}

/* ---- print ---- */
@media print{
  body{ --ink:#000000; --soft:#000000; --acc:#000000;
    --mk-ghost:#000000; --mk-branch:#000000;
    border-top:none; background:#FFFFFF; color:#000000 }
  .masthead .site-link, .rail, .crumbs{ display:none }
  a{ color:#000000 }
  article h2{ break-after:avoid }
  figure.shot, .hint, details.expand{ break-inside:avoid }
  details.expand[open], details.expand{ border:none; padding:0 }
}