/* control - a theme for lazysite.io on the default18-cards layout.
   Derived from Pocket Ops Control: panels drawn by hairlines, square corners,
   one cyan signal reserved for what is live, Archivo for words and JetBrains
   Mono for figures, paths and code. Light and dark are designed together.
   Every colour and font comes from theme.json as a --theme-* property;
   rhythm is set here as relationships on one step. */

/* ---- fonts: bundled, SIL Open Font License (see fonts/LICENSE-*.txt) ---- */
@font-face { font-family: Archivo; font-weight: 400; font-display: swap; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-weight: 500; font-display: swap; src: url("fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-weight: 600; font-display: swap; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ---- tokens: the light scheme is the first theme ---- */
:root {
  color-scheme: light dark;

  --bg: var(--theme-colours-background);
  --surface: var(--theme-colours-surface);
  --bg-alt: var(--theme-colours-background-alt);
  --bg-accent: var(--theme-colours-background-accent);
  --bg-drop: var(--theme-colours-background-dropdown);
  --border: var(--theme-colours-border);
  --border-strong: var(--theme-colours-border-strong);
  --text: var(--theme-colours-text);
  --muted: var(--theme-colours-text-muted);
  --dim: var(--theme-colours-text-dim);
  --heading: var(--theme-colours-heading);
  --primary: var(--theme-colours-primary);
  --primary-hover: var(--theme-colours-primary-hover);
  --primary-strong: var(--theme-colours-primary-strong);
  --on-primary: var(--theme-colours-primary-text);
  --focus: var(--theme-colours-focus);
  --signal: var(--theme-colours-signal);
  --success: var(--theme-colours-success);
  --success-soft: var(--theme-colours-success-soft);
  --warning: var(--theme-colours-warning);
  --warning-soft: var(--theme-colours-warning-soft);
  --error: var(--theme-colours-error);
  --error-soft: var(--theme-colours-error-soft);
  --info: var(--theme-colours-info);
  --info-soft: var(--theme-colours-info-soft);
  --mark: var(--theme-colours-mark);
  --mark-text: var(--theme-colours-mark-text);
  --shadow: var(--theme-colours-shadow);

  --fb: var(--theme-fonts-body);
  --fh: var(--theme-fonts-heading, var(--fb));
  --fc: var(--theme-fonts-code);

  --measure: var(--theme-spacing-measure);
  --wrap: var(--theme-spacing-wrap);
  --radius: var(--theme-spacing-radius);

  /* rhythm: one step, reused everywhere */
  --step: 0.5rem;                 /* 8px at the default size */
  --control: calc(var(--step) * 5.5);   /* 44px: every tap target */
  --header: calc(var(--step) * 7);      /* 56px */
  --rule: 2px;                    /* the signal rule */
  --track: 0.08em;                /* letter-spacing of tracked capitals */
}

/* the dark scheme: when the device asks for it, unless the visitor chose light;
   and always when the visitor chose dark (the header switcher sets data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--theme-dark-background);
    --surface: var(--theme-dark-surface);
    --bg-alt: var(--theme-dark-background-alt);
    --bg-accent: var(--theme-dark-background-accent);
    --bg-drop: var(--theme-dark-background-dropdown);
    --border: var(--theme-dark-border);
    --border-strong: var(--theme-dark-border-strong);
    --text: var(--theme-dark-text);
    --muted: var(--theme-dark-text-muted);
    --dim: var(--theme-dark-text-dim);
    --heading: var(--theme-dark-heading);
    --primary: var(--theme-dark-primary);
    --primary-hover: var(--theme-dark-primary-hover);
    --primary-strong: var(--theme-dark-primary-strong);
    --on-primary: var(--theme-dark-primary-text);
    --focus: var(--theme-dark-focus);
    --signal: var(--theme-dark-signal);
    --success: var(--theme-dark-success);
    --success-soft: var(--theme-dark-success-soft);
    --warning: var(--theme-dark-warning);
    --warning-soft: var(--theme-dark-warning-soft);
    --error: var(--theme-dark-error);
    --error-soft: var(--theme-dark-error-soft);
    --info: var(--theme-dark-info);
    --info-soft: var(--theme-dark-info-soft);
    --mark: var(--theme-dark-mark);
    --mark-text: var(--theme-dark-mark-text);
    --shadow: var(--theme-dark-shadow);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
    --bg: var(--theme-dark-background);
    --surface: var(--theme-dark-surface);
    --bg-alt: var(--theme-dark-background-alt);
    --bg-accent: var(--theme-dark-background-accent);
    --bg-drop: var(--theme-dark-background-dropdown);
    --border: var(--theme-dark-border);
    --border-strong: var(--theme-dark-border-strong);
    --text: var(--theme-dark-text);
    --muted: var(--theme-dark-text-muted);
    --dim: var(--theme-dark-text-dim);
    --heading: var(--theme-dark-heading);
    --primary: var(--theme-dark-primary);
    --primary-hover: var(--theme-dark-primary-hover);
    --primary-strong: var(--theme-dark-primary-strong);
    --on-primary: var(--theme-dark-primary-text);
    --focus: var(--theme-dark-focus);
    --signal: var(--theme-dark-signal);
    --success: var(--theme-dark-success);
    --success-soft: var(--theme-dark-success-soft);
    --warning: var(--theme-dark-warning);
    --warning-soft: var(--theme-dark-warning-soft);
    --error: var(--theme-dark-error);
    --error-soft: var(--theme-dark-error-soft);
    --info: var(--theme-dark-info);
    --info-soft: var(--theme-dark-info-soft);
    --mark: var(--theme-dark-mark);
    --mark-text: var(--theme-dark-mark-text);
    --shadow: var(--theme-dark-shadow);
}
:root[data-theme="light"] { color-scheme: light; }

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--fb); font-size: 1rem; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code, kbd, samp, pre { font-family: var(--fc); }
.wrapper { max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--step) * 2); }

/* tracked capitals: the one voice for labels, tabs and buttons */
.site-name, .site-nav a, .site-nav .nav-group-label, .auth-link,
.page-body h5, .page-body h6, .page-body th,
.lazysite-form label, .lazysite-form button {
  font-family: var(--fb); font-size: 0.75rem; line-height: 1.333; font-weight: 600;
  letter-spacing: var(--track); text-transform: uppercase;
}

/* ---- header: one row on a signal rule ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-top: var(--rule) solid var(--signal);
  border-bottom: 1px solid var(--border);
}
.site-header .wrapper { display: flex; align-items: center; gap: calc(var(--step) * 3); min-height: var(--header); flex-wrap: wrap; }
.site-name { margin: 0; font-size: 0.875rem; letter-spacing: 0.12em; }
.site-name a { display: inline-flex; align-items: center; gap: calc(var(--step) * 1.25); min-height: var(--control); color: var(--heading); }
.site-name a::before { content: ""; width: 0.625rem; height: 0.625rem; background: var(--signal); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--signal); }
.site-name a:hover { color: var(--primary); }

.site-tools { margin-left: auto; order: 3; display: flex; align-items: center; gap: calc(var(--step) / 2); }
.site-header .search-link { min-width: var(--control); min-height: var(--control); justify-content: center; margin-right: 0; opacity: 1; color: var(--muted); }
.site-header .search-link:hover { color: var(--heading); background: var(--bg-alt); }
.auth-indicator { display: flex; align-items: center; gap: calc(var(--step) * 1.5); }
.auth-link { display: inline-flex; align-items: center; min-height: var(--control); padding: 0 calc(var(--step) * 1.5); color: var(--muted); }
.auth-link:hover { color: var(--heading); background: var(--bg-alt); }
.site-header .nav-toggle { border: 1px solid var(--border-strong); border-radius: var(--radius); min-width: var(--control); min-height: var(--control); padding: 0; color: var(--heading); }
.site-header .nav-toggle:hover { background: var(--bg-alt); }

.site-nav { order: 2; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; }
.site-nav li { position: relative; }
.site-nav a, .site-nav .nav-group-label {
  display: inline-flex; align-items: center; min-height: var(--control); padding: 0 calc(var(--step) * 1.5);
  color: var(--muted); font-weight: 500; cursor: pointer; border-bottom: var(--rule) solid transparent;
}
.site-nav a:hover, .site-nav .nav-group:hover > .nav-group-label, .site-nav .nav-group:hover > a { color: var(--heading); background: var(--bg-alt); }
.site-nav a.active { color: var(--heading); border-bottom-color: var(--primary); background: var(--bg-accent); }
.site-nav .nav-children {
  list-style: none; margin: 0; padding: calc(var(--step) / 2) 0; position: absolute; left: 0; top: 100%;
  min-width: 14rem; background: var(--bg-drop); border: 1px solid var(--border); border-top: var(--rule) solid var(--primary);
  box-shadow: 0 var(--step) calc(var(--step) * 3) var(--shadow); display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; z-index: 60;
}
.site-nav .nav-group:hover .nav-children, .site-nav .nav-group:focus-within .nav-children { opacity: 1; visibility: visible; }
.site-nav .nav-children a { display: flex; width: 100%; border-bottom: 0; text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 400; color: var(--text); }
.site-nav .nav-children a:hover { background: var(--bg-alt); }
.site-nav .nav-children a.active { background: var(--bg-accent); color: var(--primary-strong); box-shadow: inset var(--rule) 0 0 var(--primary); }
/* the layout paints the Themes link with --primary and rounded corners; keep the fill, square it */
.site-header .site-nav a[href*="themes.explore"] { background: var(--primary); color: var(--on-primary); border-radius: var(--radius); padding: 0 calc(var(--step) * 1.75); margin-left: var(--step); border-bottom: 0; }
.site-header .site-nav a[href*="themes.explore"]:hover { background: var(--primary-hover); color: var(--on-primary); filter: none; }

/* ---- page head ---- */
.site-content { padding: calc(var(--step) * 6) 0 calc(var(--step) * 8); }
.site-content article { max-width: none; margin: 0; }
.page-header { max-width: 55rem; margin-bottom: calc(var(--step) * 5); padding-bottom: calc(var(--step) * 3); border-bottom: 1px solid var(--border); }
.page-title {
  margin: 0; font-family: var(--fh); color: var(--heading);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
}
.page-subtitle { margin: calc(var(--step) * 2) 0 0; color: var(--muted); font-size: 1.125rem; line-height: 1.555; max-width: var(--measure); }

/* a page that still uses the layout's image hero */
body .page-hero { background-color: var(--surface); border-bottom: 1px solid var(--border); }
body .page-hero .page-hero-scrim { background: linear-gradient(90deg, var(--surface), transparent 70%); }
@media (max-width: 640px) { body .page-hero .page-hero-scrim { background: var(--surface); opacity: .86; } }
body .page-hero .page-title, body .page-hero .page-subtitle { text-shadow: none; }
body .page-hero .page-subtitle { color: var(--text); font-size: 1.125rem; font-weight: 400; }

/* ---- prose: text at the measure, wide things wide ---- */
.page-body > * { max-width: var(--measure); }
.page-body > table, .page-body > pre, .page-body > .widebox, .page-body > .lazysite-form { max-width: none; }
.page-body > *:first-child { margin-top: 0; }
.page-body h1, .page-body h2, .page-body h3, .page-body h4 { font-family: var(--fh); color: var(--heading); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.page-body h1 { font-size: 1.75rem; margin: 2em 0 0.6em; }
.page-body h2 { font-size: 1.375rem; margin: 2.4em 0 0.8em; padding-top: calc(var(--step) * 2); position: relative; }
.page-body h2::before { content: ""; position: absolute; top: 0; left: 0; width: calc(var(--step) * 4); height: var(--rule); background: var(--primary); }
.page-body h3 { font-size: 1.125rem; margin: 1.8em 0 0.5em; }
.page-body h4 { font-size: 1rem; margin: 1.6em 0 0.4em; }
.page-body h5, .page-body h6 { color: var(--muted); margin: 1.6em 0 0.4em; }
.page-body p { margin: 0 0 1.1em; }
.page-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-body a:visited { color: var(--primary-strong); }
.page-body a:hover { color: var(--primary-hover); }
.page-body strong { font-weight: 600; color: var(--heading); }
.page-body ul, .page-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.page-body li { margin: 0.3em 0; }
.page-body li > ul, .page-body li > ol { margin: 0.3em 0; }
.page-body li::marker { color: var(--muted); font-family: var(--fc); font-size: 0.875em; }
.page-body img { max-width: 100%; height: auto; border: 1px solid var(--border); }
.page-body hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }
.page-body mark { background: var(--mark); color: var(--mark-text); padding: 0 0.2em; }

/* code: mono on a quiet fill, square */
.page-body code { font-size: 0.875em; background: var(--bg-alt); border: 1px solid var(--border); padding: 0.05em 0.35em; }
.page-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--step) * 2); overflow-x: auto; margin: 0 0 1.4em; font-size: 0.875rem; line-height: 1.43; }
.page-body pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* tables: a data grid on hairlines, capitals head on a strong rule */
.page-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.875rem; line-height: 1.43; background: var(--surface); border: 1px solid var(--border); }
.page-body th, .page-body td { text-align: left; padding: calc(var(--step) * 1.5) calc(var(--step) * 2); border-bottom: 1px solid var(--border); vertical-align: top; }
.page-body th { background: var(--bg-alt); color: var(--muted); border-bottom: 1px solid var(--border-strong); }
.page-body tr:last-child td { border-bottom: 0; }
.page-body tbody tr:hover td { background: var(--bg-alt); }
.page-body td code { background: none; border: 0; padding: 0; }

.page-body blockquote { margin: 0 0 1.4em; padding: calc(var(--step) / 2) 0 calc(var(--step) / 2) calc(var(--step) * 2); border-left: var(--rule) solid var(--border-strong); color: var(--muted); }
.page-body blockquote p:last-child { margin-bottom: 0; }

/* ---- the four boxes: panels drawn by their edges, a rule says which ---- */
.widebox, .textbox, .examplebox, .marginbox {
  border: 1px solid var(--border); background: var(--surface); padding: calc(var(--step) * 2); margin: 0 0 1.4em; border-radius: var(--radius);
}
.widebox { background: var(--bg-accent); border-color: var(--bg-accent); border-top: var(--rule) solid var(--primary); font-size: 1.125rem; line-height: 1.555; }
.examplebox { border-top: var(--rule) solid var(--info); }
.marginbox { font-size: 0.875rem; line-height: 1.43; color: var(--muted); }
.widebox > *:last-child, .textbox > *:last-child, .examplebox > *:last-child, .marginbox > *:last-child { margin-bottom: 0; }

/* ---- native forms (.lazysite-form) ---- */
.lazysite-form { max-width: min(35rem, 100%); margin: 1.5rem 0; padding: calc(var(--step) * 2.5); border: 1px solid var(--border); background: var(--surface); }
.lazysite-form .form-field { margin-bottom: calc(var(--step) * 2); }
.lazysite-form label { display: block; color: var(--muted); margin-bottom: var(--step); }
.lazysite-form .required { color: var(--error); }
.lazysite-form input[type="text"], .lazysite-form input[type="email"], .lazysite-form input[type="tel"],
.lazysite-form input[type="number"], .lazysite-form input[type="search"], .lazysite-form textarea, .lazysite-form select {
  width: 100%; min-height: var(--control); padding: calc(var(--step) * 1.25) calc(var(--step) * 1.5); font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0;
}
.lazysite-form input[type="number"] { font-family: var(--fc); }
.lazysite-form textarea { min-height: 7rem; resize: vertical; }
.lazysite-form input:focus, .lazysite-form textarea:focus, .lazysite-form select:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--border-strong); box-shadow: none; }
.lazysite-form button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding: 0 calc(var(--step) * 2.5);
  font-size: 0.875rem; letter-spacing: 0.06em; cursor: pointer;
  background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); border-radius: var(--radius);
}
.lazysite-form button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.lazysite-form .form-status { margin-top: calc(var(--step) * 1.5); font-family: var(--fc); font-size: 0.75rem; line-height: 1.333; letter-spacing: 0.06em; color: var(--muted); }

/* ---- feature pager (added by the layout's script on feature pages) ---- */
.feat-crumb, .feat-pager { font-family: var(--fc); font-size: 0.75rem; letter-spacing: 0.06em; }
.feat-pager .fp-prev, .feat-pager .fp-next { border-radius: var(--radius); border-color: var(--border); background: var(--surface); }
.feat-pager .fp-prev:hover, .feat-pager .fp-next:hover { border-color: var(--primary); }

/* ---- footer: the timing line ---- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.site-footer .wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: calc(var(--step) * 1.5) calc(var(--step) * 3); min-height: var(--header); padding-top: calc(var(--step) * 1.5); padding-bottom: calc(var(--step) * 1.5); font-family: var(--fc); font-size: 0.75rem; line-height: 1.333; letter-spacing: 0.06em; color: var(--muted); }
.site-footer .wrapper > span:first-child { display: inline-flex; align-items: center; gap: var(--step); }
.site-footer .wrapper > span:first-child::before { content: ""; width: var(--step); height: var(--step); background: var(--signal); }
.site-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--primary); }

/* ---- the home page's own markup (NOT in the specimen; see NOTES.md) ----
   /index.md carries three hand-written blocks with these classes and an
   inline <style>. Until they become layout components, this restyles them. */
.page-body > .hl-grid, .page-body > .pf, .page-body > .foryou { max-width: none; }
.page-body .hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 1.5rem 0 2.5rem; border: 1px solid var(--border); background: var(--surface); }
.page-body .hl { display: flex; flex-direction: column; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; border-radius: 0; padding: calc(var(--step) * 2.5); background: var(--surface); color: var(--text); }
.page-body .hl-grid .hl:nth-child(even) { background: var(--surface); }
.page-body a.hl, .page-body a.hl:hover, .page-body a.hl:visited { text-decoration: none; color: var(--text); }
.page-body a.hl:hover { background: var(--bg-alt); border-color: var(--border); }
.page-body .hl h3 { margin: 0 0 var(--step); font-size: 1.125rem; }
.page-body .hl p { margin: 0; font-size: 0.875rem; line-height: 1.43; color: var(--muted); }
.page-body .hl .hl-link { margin-top: auto; padding-top: calc(var(--step) * 2); color: var(--primary); font-family: var(--fc); font-size: 0.75rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
.page-body a.hl:hover .hl-link { color: var(--primary-strong); }
.page-body .pf { display: block; margin: 1.5rem 0 2.5rem; border-top: 1px solid var(--border); }
.page-body .pf-row { display: grid; grid-template-columns: 11rem 1fr; column-gap: calc(var(--step) * 3); row-gap: calc(var(--step) / 2); align-items: start; padding: calc(var(--step) * 2.5) 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
.page-body .pf-h { display: contents; }
.page-body .pf-tag { grid-column: 1; grid-row: 1 / span 2; margin-top: calc(var(--step) / 2); padding: 0; background: none; border-radius: 0; color: var(--muted); display: flex; align-items: flex-start; gap: var(--step); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; }
.page-body .pf-tag::before { content: ""; flex: 0 0 auto; width: var(--step); height: var(--step); margin-top: calc(var(--step) / 2); background: var(--primary); }
.page-body .pf-h h3 { grid-column: 2; margin: 0; font-size: 1.25rem; }
.page-body .pf-row p { grid-column: 2; margin: 0; font-size: 1rem; color: var(--muted); max-width: var(--measure); }
.page-body .foryou { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: calc(var(--step) * 2); margin: 1.5rem 0 2.5rem; }
.page-body .foryou > div { border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--step) * 2.5); background: var(--surface); }
.page-body .foryou .yes { background: var(--surface); border-top: var(--rule) solid var(--success); }
.page-body .foryou .no { border-top: var(--rule) solid var(--warning); }
.page-body .foryou > div > strong { display: block; color: var(--muted); font-size: 0.75rem; letter-spacing: var(--track); text-transform: uppercase; }
.page-body .foryou ul { margin: calc(var(--step) * 1.5) 0 0; padding-left: 1.2em; }
.page-body .foryou li { margin: 0.4em 0; font-size: 0.9375rem; }
.page-body .foryou p { font-size: 0.875rem; margin: calc(var(--step) * 1.5) 0 0; opacity: 1; color: var(--muted); }

/* ---- narrow screens ---- */
@media (max-width: 720px) {
  .site-header .wrapper { gap: var(--step); min-height: 0; padding-top: calc(var(--step) * 0.75); padding-bottom: calc(var(--step) * 0.75); }
  .site-tools { order: 2; margin-left: auto; }
  .site-header .site-nav { order: 4; width: 100%; border-top: 1px solid var(--border); padding: var(--step) 0; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a, .site-nav .nav-group-label { width: 100%; border-bottom: 0; }
  .site-nav a.active { box-shadow: inset var(--rule) 0 0 var(--primary); }
  .site-nav .nav-children { position: static; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 var(--step) calc(var(--step) * 2); min-width: 0; }
  .site-header .site-nav a[href*="themes.explore"] { margin: var(--step) 0 0; justify-content: center; }
  .site-content { padding: calc(var(--step) * 4) 0 calc(var(--step) * 6); }
  .page-header { margin-bottom: calc(var(--step) * 4); padding-bottom: calc(var(--step) * 2.5); }
  .page-subtitle { font-size: 1rem; }
  .page-body table { display: block; overflow-x: auto; }
  .page-body .hl-grid { grid-template-columns: 1fr; }
  .page-body .pf-row { grid-template-columns: 1fr; }
  .page-body .pf-tag { grid-row: 1; }
  .page-body .pf-h h3, .page-body .pf-row p { grid-column: 1; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .page-body .hl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .site-nav a, .site-nav .nav-group-label, .auth-link, .page-body .hl { transition: background-color 0.12s, color 0.12s; }
}