/* ============================================================================
   QC History Brand Kit — v1.0 (2026-08-22)

   Canonical source: mini:~/qc-brand-kit/qc-kit.css
   Vendored into each app as static/qc-kit.css — DO NOT EDIT THE COPIES.
   Re-install with:  ~/qc-brand-kit/install-into.sh <app-dir>

   Typeface system is the one already running on qchistory.com and photoid:
     Archivo              — interface, labels, navigation, data
     Libre Caslon Display — page titles and the wordmark
     Libre Caslon Text    — prose: ledes, writeups, descriptions

   An app supplies ONLY its accent, in its own stylesheet loaded AFTER this one:

     :root{
       --app-accent:#9A6B2F;            light accent — fills, rules, marks
       --app-accent-ink:#8A5E28;        accent as body TEXT on paper (>=4.5:1)
       --app-accent-rgb:154,107,47;
       --app-accent-dark:#D9A24A;       dark accent — brighter, carries more
       --app-accent-dark-rgb:217,162,74;
     }

   Registered accents:
     qchistory.com  #5E4080 purple        photoid      #C8401C brick
     collection     #9A6B2F brass         crownsearch  #2C6E68 teal (reserved)

   Light mode keeps the accent quiet: near-black type on warm paper, hairline
   rules, accent only on marks and active states. Dark mode promotes it —
   section headings, the wordmark, primary buttons and rules all take the
   accent, because on near-black the ink scale alone goes flat.
   ============================================================================ */

/* ---- typefaces ---------------------------------------------------------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url("fonts/archivo-var.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url("fonts/archivo-var-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url("fonts/archivo-var-viet.woff2") format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/caslon-display.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/caslon-display-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/caslon-text.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/caslon-text-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/caslon-text-italic.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/caslon-text-italic-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/caslon-text-bold.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/caslon-text-bold-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- tokens: app hooks + type ------------------------------------------- */
:root{
  /* default accent = the parent site's ink; apps override these seven */
  --app-accent:#2F4E8F; --app-accent-ink:#2F4E8F; --app-accent-rgb:47,78,143;
  --app-accent-dark:#627AC0; --app-accent-dark-rgb:98,122,192;

  /* The masthead bar. Deliberately NOT theme-split: a site's bar is the same
     colour in light and dark, so it reads as one fixed, recognisable thing
     wherever you meet it — including in the screenshot on its homepage card.
     --app-bar-ink is near-white on deep bars and near-black on pale ones;
     the palette uses lightness as a separator, so both occur. */
  --app-bar:var(--app-accent);
  --app-bar-ink:#FFFCF5;

  --sans:'Archivo',system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --serif-d:'Libre Caslon Display',Georgia,'Times New Roman',serif;

  --r:4px;            /* hairline archival corners, not rounded cards */
  --r-2:8px;
  --gut:1.25rem;      /* page gutter */
  --measure:68ch;     /* prose column */
  --tap:44px;         /* minimum touch target */
}

/* ---- tokens: light (default) -------------------------------------------- */
:root{
  color-scheme:light;
  --paper:#F6F4EF; --paper-2:#F1EEE7; --paper-3:#E7E4DD; --raise:#FFFFFF;
  --ink:#131215; --ink-2:#565349; --ink-3:#8A877E;
  --line:#E2DED4; --line-2:#CFCABC;

  --accent:var(--app-accent);
  --accent-ink:var(--app-accent-ink);
  --accent-rgb:var(--app-accent-rgb);
  --on-accent:#FFFCF5;
  --accent-soft:rgba(var(--accent-rgb),.14);
  --accent-line:rgba(var(--accent-rgb),.34);

  --ok:#2F6B45; --bad:#A33A2A; --focus:#2B5FD9;
  --ok-soft:#EDF5F0; --bad-soft:#FBEFEC;
  --shadow:0 1px 2px rgba(19,18,21,.06);
  --shadow-lift:0 2px 10px rgba(19,18,21,.10);

  /* accent prominence — restrained in light (mark + rules only), loud in dark */
  --head:var(--ink);          /* section headings */
  --head-rule:var(--accent-line); /* hairline under them */
  --brand-mark:var(--accent); /* the "QC" in the wordmark */
  --btn-fill:var(--ink);      /* primary button ground */
  --link:var(--ink);          /* body link colour */
  --link-line:var(--accent-line);
}

/* ---- tokens: dark ------------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#131215; --paper-2:#1A181C; --paper-3:#232025; --raise:#1A181C;
    --ink:#F1EEE6; --ink-2:#B4AFA4; --ink-3:#87837B;
    --line:rgba(241,238,230,.13); --line-2:rgba(241,238,230,.26);

    --accent:var(--app-accent-dark);
    --accent-ink:var(--app-accent-dark);
    --accent-rgb:var(--app-accent-dark-rgb);
    --on-accent:#17140F;
    --accent-soft:rgba(var(--accent-rgb),.14);
    --accent-line:rgba(var(--accent-rgb),.45);

    --ok:#6FB187; --bad:#E08A76; --focus:#7FA0F0;
    --ok-soft:rgba(111,177,135,.12); --bad-soft:rgba(224,138,118,.12);
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-lift:0 2px 14px rgba(0,0,0,.55);

    --head:var(--accent);
    --head-rule:var(--accent-line);
    --brand-mark:var(--accent);
    --btn-fill:var(--accent);
    --link:var(--accent);
    --link-line:rgba(var(--accent-rgb),.55);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#131215; --paper-2:#1A181C; --paper-3:#232025; --raise:#1A181C;
  --ink:#F1EEE6; --ink-2:#B4AFA4; --ink-3:#87837B;
  --line:rgba(241,238,230,.13); --line-2:rgba(241,238,230,.26);

  --accent:var(--app-accent-dark);
  --accent-ink:var(--app-accent-dark);
  --accent-rgb:var(--app-accent-dark-rgb);
  --on-accent:#17140F;
  --accent-soft:rgba(var(--accent-rgb),.14);
  --accent-line:rgba(var(--accent-rgb),.45);

  --ok:#6FB187; --bad:#E08A76; --focus:#7FA0F0;
  --ok-soft:rgba(111,177,135,.12); --bad-soft:rgba(224,138,118,.12);
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-lift:0 2px 14px rgba(0,0,0,.55);

  --head:var(--accent);
  --head-rule:var(--accent-line);
  --brand-mark:var(--accent);
  --btn-fill:var(--accent);
  --link:var(--accent);
  --link-line:rgba(var(--accent-rgb),.55);
}

/* ---- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;min-height:100vh;
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%}

a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:var(--link-line)}
a:hover{text-decoration-color:currentColor}

h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.15;text-wrap:balance}

/* page title — Caslon Display, the museum-label voice */
h1,.qc-title{font-family:var(--serif-d);font-weight:400;font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);
  letter-spacing:-.005em;margin:.1em 0 .15em;color:var(--ink)}

/* section heading — small letterspaced sans over a hairline. Takes the accent
   in dark mode; stays ink on paper in light. */
h2,.qc-head{font-family:var(--sans);font-size:.8rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--head);
  border-bottom:1px solid var(--head-rule);padding-bottom:.5em;margin:0 0 .9em}
h3{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:1.7em 0 .5em}

.qc-kicker{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 .7em}
.qc-lede{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--ink-2);
  max-width:56ch;margin:.5em 0 1.4em}
.qc-prose{font-family:var(--serif);font-size:1.06rem;line-height:1.65;max-width:var(--measure)}
.qc-prose p{margin:0 0 1em}
.qc-prose a{color:var(--accent-ink)}

/* accession numbers, counts, money — Archivo with tabular figures, no third font */
.qc-num{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.04em}

.qc-muted{color:var(--ink-3)}
.qc-small{font-size:.88rem}
.qc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- layout ------------------------------------------------------------- */
.qc-wrap{width:100%;max-width:1100px;margin:0 auto;padding:1.75rem var(--gut) 3rem}
.qc-wrap.narrow{max-width:640px}

/* ---- header ------------------------------------------------------------- */
.qc-top{display:flex;align-items:center;gap:1rem;min-height:58px;
  padding:.55rem var(--gut);position:sticky;top:0;z-index:20;
  background:var(--app-bar);color:var(--app-bar-ink);border-bottom:0}
.qc-brand{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;
  font-family:var(--serif-d);font-size:1.32rem;line-height:1.1;
  color:var(--app-bar-ink);white-space:nowrap}
.qc-brand:hover{text-decoration:none}
/* On a filled bar the mark can't differ by hue — nothing would show — so it
   steps back by tone instead, which also survives the dichromat case.
   .88 is the floor: below it the mark drops under 4.5:1 on the deeper bars
   (forest and mid blue fail at .72). Any NEW accent must be checked at .88
   before it ships, not just at full strength. */
.qc-brand .mark{color:inherit;opacity:.88}
.qc-brand .sub{font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:inherit;opacity:.9}
.qc-nav{margin-left:auto;display:flex;align-items:center;gap:1rem;font-size:.92rem}
.qc-nav a{color:inherit;opacity:.95;text-decoration:none}
.qc-nav a:hover{opacity:1;text-decoration:underline;text-decoration-color:currentColor}
.qc-nav form{display:inline;margin:0}
/* A .qc-tag inside the bar cannot use the accent: the bar IS the accent, so
   accent-ink on accent-soft lands around 1.9:1. On a filled bar a label has to
   borrow the bar's own ink and separate by outline instead. (Caught 2026-08-24
   on the QC Collection admin link, gold bar.) */
.qc-top .qc-tag{color:inherit;background:rgba(127,127,127,.16);
  border-color:currentColor;opacity:.92}
.qc-top a.qc-tag:hover{background:rgba(127,127,127,.26);opacity:1}

/* ---- footer ------------------------------------------------------------- */
.qc-foot{border-top:1px solid var(--line);margin-top:3rem;padding:2rem var(--gut) 2.5rem;
  text-align:center;color:var(--ink-3);font-size:.86rem;line-height:1.7}
.qc-foot a{color:var(--ink-2)}
/* every product signs itself back to the parent site */
.qc-byline{display:inline-block;margin-top:.7rem;font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.qc-byline a{color:var(--accent-ink);text-decoration:none;
  border-bottom:1px solid var(--accent-line);padding-bottom:1px}
.qc-byline a:hover{border-bottom-color:currentColor}

/* ---- theme toggle ------------------------------------------------------- */
.qc-theme{width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid currentColor;border-radius:var(--r);background:none;color:inherit;
  opacity:.85;cursor:pointer;padding:0}
.qc-theme:hover{opacity:1}
/* outside the bar it falls back to the ink scale */
:where(:not(.qc-top)) > .qc-theme{border-color:var(--line-2);color:var(--ink-2);opacity:1}
:where(:not(.qc-top)) > .qc-theme:hover{border-color:var(--ink-3);color:var(--ink)}
.qc-theme svg{width:17px;height:17px;display:block}
.qc-theme .moon{display:none}
:root[data-theme="dark"] .qc-theme .moon{display:block}
:root[data-theme="dark"] .qc-theme .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .qc-theme .moon{display:block}
  :root:not([data-theme="light"]) .qc-theme .sun{display:none}
}

/* ---- buttons ------------------------------------------------------------ */
.qc-btn,button.qc-btn,a.qc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:var(--tap);padding:.55rem 1.05rem;
  font:inherit;font-size:.95rem;font-weight:500;font-family:var(--sans);
  color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  text-decoration:none;cursor:pointer;line-height:1.2;white-space:nowrap}
.qc-btn:hover{border-color:var(--ink);background:var(--paper-2);text-decoration:none}
.qc-btn.primary{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--on-accent)}
.qc-btn.primary:hover{filter:brightness(1.12);background:var(--btn-fill)}
.qc-btn.quiet{border-color:transparent;color:var(--ink-2)}
.qc-btn.quiet:hover{border-color:var(--line-2);color:var(--ink)}
/* Same trap as .qc-top .qc-tag above, and it has to sit AFTER .quiet to win:
   .qc-btn carries background:var(--paper), which is a white pill in light and
   a near-black one in dark — either way a foreign object dropped on a filled
   masthead. Inside the bar a button is outline-only and borrows the bar's ink. */
.qc-top .qc-btn{background:rgba(127,127,127,.16);border-color:currentColor;
  color:inherit;opacity:.92}
.qc-top .qc-btn:hover{background:rgba(127,127,127,.28);border-color:currentColor;opacity:1}

.qc-btn.danger{color:var(--bad);border-color:var(--line-2)}
.qc-btn.danger:hover{border-color:var(--bad);background:var(--bad-soft)}
.qc-btn.small{min-height:0;padding:.3rem .65rem;font-size:.82rem}
.qc-btn:disabled,.qc-btn.disabled{opacity:.45;pointer-events:none}

/* ---- form controls ------------------------------------------------------ */
input[type=text],input[type=search],input[type=password],input[type=date],
input[type=email],input[type=number],input:not([type]),select,textarea{
  font:inherit;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--raise);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.55rem .7rem;width:100%;min-height:var(--tap)}
textarea{resize:vertical;line-height:1.55;min-height:auto}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
:where(input,select,textarea,button,a,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
label{font-family:var(--sans)}

/* ---- surfaces ----------------------------------------------------------- */
.qc-panel{background:var(--raise);border:1px solid var(--line);border-radius:var(--r-2);
  padding:1.15rem 1.25rem;margin:1.1rem 0;box-shadow:var(--shadow)}
.qc-rule{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.qc-empty{border:1px dashed var(--line-2);border-radius:var(--r-2);padding:2.5rem 1rem;
  text-align:center;color:var(--ink-3);font-family:var(--serif);font-style:italic}

/* ---- tags / labels — squared archival labels, never pill chips ---------- */
.qc-tag{display:inline-block;font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.03em;padding:.22rem .55rem;border-radius:var(--r);
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);
  text-decoration:none}
a.qc-tag:hover{background:rgba(var(--accent-rgb),.2);text-decoration:none}
.qc-label{display:inline-block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:.15rem .45rem;border-radius:var(--r);
  color:var(--ink-2);background:var(--paper-3);border:1px solid var(--line)}

/* ---- flashes ------------------------------------------------------------ */
.qc-flash{border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--paper-2);border-radius:var(--r);padding:.7rem .9rem;margin-bottom:.5rem;font-size:.94rem}
.qc-flash.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.qc-flash.bad{border-left-color:var(--bad);background:var(--bad-soft);color:var(--bad)}

/* ---- tables ------------------------------------------------------------- */
.qc-table{width:100%;border-collapse:collapse;font-size:.94rem}
.qc-table th,.qc-table td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.qc-table th{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---- small screens ------------------------------------------------------
   Added 2026-08-24. The kit shipped with NO width breakpoints, so every app on
   it inherited a masthead that could not fit a phone: .qc-top is one flex row
   with a nowrap brand and a margin-left:auto nav, which pushes past the
   viewport and puts the WHOLE PAGE into horizontal scroll the moment the nav
   has more than a link or two. Reported from iPhone Safari on both the Sugaw
   Creek admin and its public site.

   The fix is to let the bar become two rows below 640px rather than to shrink
   type: the complaint on the admin was too much CHROME before the first row,
   not type that was too big, so the vertical cost is paid back by trimming
   padding here and by the apps dropping their duplicated top pager.

   Mobile is part of "done" for anything on this kit. Check a new app at 390px
   in both themes before shipping it, not afterwards. */
@media (max-width:640px){
  :root{--gut:.95rem}

  /* two rows: brand, then nav. Deterministic — flex:1 1 100% forces the break
     rather than leaving it to whether the links happen to fit. */
  .qc-top{flex-wrap:wrap;column-gap:.6rem;row-gap:.3rem;min-height:0;
    padding:.5rem var(--gut) .55rem}
  .qc-brand{font-size:1.14rem;min-width:0;flex:1 1 auto}
  .qc-nav{flex:1 1 100%;margin-left:0;flex-wrap:wrap;justify-content:flex-start;
    gap:.85rem;row-gap:.4rem;font-size:.88rem}
  /* the toggle is the last child of the nav in every app — park it at the edge */
  .qc-nav > .qc-theme{margin-left:auto}

  .qc-wrap{padding:1.15rem var(--gut) 2.25rem}
  .qc-foot{margin-top:2.25rem;padding:1.5rem var(--gut) 2rem}
}

/* below ~430px the second line of a long wordmark costs more than it says */
@media (max-width:430px){
  .qc-brand{font-size:1.06rem}
  .qc-brand .sub{font-size:.72rem;letter-spacing:.08em}
}

/* Anything wider than the screen — a table, a wide figure, a code block —
   goes in one of these so IT scrolls and the page does not. */
.qc-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}