/* 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);
    /* lazysite's own pages (sign-in, account) read --theme-colours-*: dark too */
    --theme-colours-background: var(--theme-dark-background);
    --theme-colours-background-accent: var(--theme-dark-background-accent);
    --theme-colours-background-alt: var(--theme-dark-background-alt);
    --theme-colours-background-dropdown: var(--theme-dark-background-dropdown);
    --theme-colours-border: var(--theme-dark-border);
    --theme-colours-border-strong: var(--theme-dark-border-strong);
    --theme-colours-error: var(--theme-dark-error);
    --theme-colours-error-soft: var(--theme-dark-error-soft);
    --theme-colours-focus: var(--theme-dark-focus);
    --theme-colours-heading: var(--theme-dark-heading);
    --theme-colours-info: var(--theme-dark-info);
    --theme-colours-info-soft: var(--theme-dark-info-soft);
    --theme-colours-mark: var(--theme-dark-mark);
    --theme-colours-mark-text: var(--theme-dark-mark-text);
    --theme-colours-primary: var(--theme-dark-primary);
    --theme-colours-primary-hover: var(--theme-dark-primary-hover);
    --theme-colours-primary-strong: var(--theme-dark-primary-strong);
    --theme-colours-primary-text: var(--theme-dark-primary-text);
    --theme-colours-shadow: var(--theme-dark-shadow);
    --theme-colours-signal: var(--theme-dark-signal);
    --theme-colours-success: var(--theme-dark-success);
    --theme-colours-success-soft: var(--theme-dark-success-soft);
    --theme-colours-surface: var(--theme-dark-surface);
    --theme-colours-text: var(--theme-dark-text);
    --theme-colours-text-dim: var(--theme-dark-text-dim);
    --theme-colours-text-muted: var(--theme-dark-text-muted);
    --theme-colours-warning: var(--theme-dark-warning);
    --theme-colours-warning-soft: var(--theme-dark-warning-soft);
  }
}
: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);
    /* lazysite's own pages (sign-in, account) read --theme-colours-*: dark too */
    --theme-colours-background: var(--theme-dark-background);
    --theme-colours-background-accent: var(--theme-dark-background-accent);
    --theme-colours-background-alt: var(--theme-dark-background-alt);
    --theme-colours-background-dropdown: var(--theme-dark-background-dropdown);
    --theme-colours-border: var(--theme-dark-border);
    --theme-colours-border-strong: var(--theme-dark-border-strong);
    --theme-colours-error: var(--theme-dark-error);
    --theme-colours-error-soft: var(--theme-dark-error-soft);
    --theme-colours-focus: var(--theme-dark-focus);
    --theme-colours-heading: var(--theme-dark-heading);
    --theme-colours-info: var(--theme-dark-info);
    --theme-colours-info-soft: var(--theme-dark-info-soft);
    --theme-colours-mark: var(--theme-dark-mark);
    --theme-colours-mark-text: var(--theme-dark-mark-text);
    --theme-colours-primary: var(--theme-dark-primary);
    --theme-colours-primary-hover: var(--theme-dark-primary-hover);
    --theme-colours-primary-strong: var(--theme-dark-primary-strong);
    --theme-colours-primary-text: var(--theme-dark-primary-text);
    --theme-colours-shadow: var(--theme-dark-shadow);
    --theme-colours-signal: var(--theme-dark-signal);
    --theme-colours-success: var(--theme-dark-success);
    --theme-colours-success-soft: var(--theme-dark-success-soft);
    --theme-colours-surface: var(--theme-dark-surface);
    --theme-colours-text: var(--theme-dark-text);
    --theme-colours-text-dim: var(--theme-dark-text-dim);
    --theme-colours-text-muted: var(--theme-dark-text-muted);
    --theme-colours-warning: var(--theme-dark-warning);
    --theme-colours-warning-soft: var(--theme-dark-warning-soft);
}
: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; }
}