/* ============================================================
   AutoCensus design system · production
   Frozen: paper/carbon palette · registration yellow = currentness
   only · Red List colours = classification only · Archivo voice,
   Plex Mono data · rules not cards · square geometry
   Fonts load via fonts.css (self hosted).
   ============================================================ */

:root {
  --paper:#F4F4F1; --white:#FFFFFF; --carbon:#111417; --ink:#13202A;
  --graphite:#4E575D; --rule:#CDD1D3; --yellow:#F5C400; --blue:#286F9E;
  --critical:#C92A28; --endangered:#E85B2A; --vulnerable:#E7B400;
  --declining:#647B8A; --stable:#28735A; --growing:#237047; --extinct:#35393C;
  --font:'Archivo', -apple-system, sans-serif; --mono:'IBM Plex Mono', monospace;
  --margin:clamp(20px, 6vw, 96px);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--paper); color:var(--carbon); font-size:16px; line-height:1.55; }
.wrap { max-width:1440px; margin:0 auto; padding-left:var(--margin); padding-right:var(--margin); }
a { color:var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--carbon); color:#fff; padding:10px 16px; z-index:200; }
.skip-link:focus { left:0; }

/* notation */
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.meta { font-family:var(--mono); font-size:12.5px; color:var(--graphite); letter-spacing:0.02em; }
.num { font-variant-numeric:tabular-nums; font-family:var(--mono); }
.neg { color:var(--critical); }
.pos { color:var(--stable); }

/* census edition marker · yellow use: currentness */
.edition { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px; color:var(--ink); }
.edition::before { content:""; width:9px; height:9px; background:var(--yellow); display:inline-block; flex:none; }

/* red list classification */
.tier { display:inline-block; font-family:var(--mono); font-size:12px; font-weight:600; padding:3px 9px; color:#fff; letter-spacing:0.05em; }
.tier.lg { font-size:14px; padding:5px 12px; }
.t-critical{background:var(--critical);} .t-endangered{background:var(--endangered);}
.t-vulnerable{background:var(--vulnerable); color:#111;} .t-declining{background:var(--declining);}
.t-stable{background:var(--stable);} .t-growing{background:var(--growing);} .t-extinct{background:var(--extinct);}
.classif { border-top-width:2px; border-top-style:solid; padding-top:12px; max-width:360px; }
.classif p { font-size:13.5px; color:var(--graphite); margin-top:8px; }

/* global header */
header.site { display:flex; align-items:center; gap:28px; padding:16px var(--margin); border-bottom:1px solid var(--rule); background:var(--paper); }
.wordmark { font-weight:740; font-size:20px; letter-spacing:-0.02em; color:var(--carbon); text-decoration:none; flex:none; }
header.site nav.primary { display:flex; gap:24px; align-items:baseline; }
header.site nav.primary a { font-size:14.5px; font-weight:450; color:var(--ink); text-decoration:none; }
header.site nav.primary a:hover { color:var(--blue); }
header.site nav.primary a.active, header.site nav.primary a.is-active, header.site nav.primary a[aria-current] { border-bottom:2px solid var(--carbon); padding-bottom:2px; }

/* header search (autocomplete built by search.js) */
.nav-search { position:relative; margin-left:auto; width:min(320px, 34vw); }
.nav-search-input { width:100%; padding:9px 14px; font-size:14.5px; font-family:var(--font); color:var(--carbon); background:var(--white); border:1px solid var(--graphite); }
.nav-search-input::placeholder { color:var(--graphite); }
.autocomplete-dropdown { position:absolute; left:0; right:0; top:100%; background:var(--white); border:1.5px solid var(--carbon); border-top:none; z-index:60; }
.autocomplete-item { display:flex; align-items:baseline; gap:10px; padding:11px 14px; text-decoration:none; color:var(--carbon); font-size:14.5px; border-bottom:1px solid var(--rule); }
.autocomplete-item:last-child { border-bottom:none; }
.autocomplete-item:hover { background:var(--paper); }
.autocomplete-item.is-highlighted { background:var(--paper); box-shadow:inset 3px 0 0 var(--yellow); }
.autocomplete-item-name { font-weight:560; }
.autocomplete-item-make { font-family:var(--mono); font-size:12px; color:var(--graphite); margin-left:auto; white-space:nowrap; }

/* mobile header + menu */
.menu-toggle { display:none; margin-left:auto; border:1px solid var(--carbon); background:none; font-family:var(--font); font-size:13px; font-weight:600; padding:7px 12px; cursor:pointer; color:var(--carbon); }
.menu-toggle[aria-expanded="true"] { background:var(--carbon); color:#fff; }
.mobile-nav { position:fixed; inset:0; background:var(--carbon); color:#fff; padding:16px 18px; z-index:100; display:flex; flex-direction:column; }
.mobile-nav[hidden] { display:none; }
.mobile-nav .top { display:flex; justify-content:space-between; align-items:center; }
.mobile-nav .wordmark { color:#fff; }
.mobile-nav .close { border:1px solid #555; background:none; color:#fff; font-size:13px; padding:7px 12px; font-family:var(--font); font-weight:600; cursor:pointer; }
.mobile-nav-links { list-style:none; margin-top:30px; }
.mobile-nav-links a { display:block; color:#fff; text-decoration:none; font-size:24px; font-weight:640; letter-spacing:-0.01em; padding:12px 0; border-bottom:1px solid #2a2f33; }
.mobile-nav-links .secondary a { font-size:16px; font-weight:450; color:#c9ced2; }
.mobile-nav .mfoot { margin-top:auto; padding-top:20px; }
.mobile-nav .mfoot .edition { color:#ddd; }
.mobile-nav .nav-search { margin:22px 0 0; width:100%; }

/* breadcrumb */
.crumb { padding-top:24px; font-family:var(--mono); font-size:12.5px; color:var(--graphite); }
.crumb a { text-decoration:none; }

/* search (hero form) */
.search { display:flex; border:1.5px solid var(--carbon); background:var(--white); max-width:560px; position:relative; }
.search input { flex:1; border:none; background:none; padding:16px 18px; font-size:16.5px; font-family:var(--font); color:var(--carbon); min-width:0; }
.search input::placeholder { color:var(--graphite); }
.search button { border:none; background:var(--carbon); color:var(--white); padding:0 26px; font-size:15px; font-weight:600; font-family:var(--font); cursor:pointer; }
.search button:hover { background:var(--ink); }
.examples { margin-top:12px; font-size:14px; color:var(--graphite); }
.examples a { text-decoration:none; }
.examples a:hover { text-decoration:underline; }

/* metric hierarchy */
.leadfig { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.leadfig .n { font-family:var(--mono); font-size:clamp(44px, 4.5vw, 60px); font-weight:600; font-variant-numeric:tabular-nums; line-height:1; }
.leadfig .l { font-size:15px; color:var(--ink); }
.survival { margin-top:20px; padding-top:14px; border-top:1px solid var(--carbon); font-size:21px; font-weight:400; line-height:1.3; max-width:32ch; }
.survival .n { font-family:var(--mono); font-weight:600; font-size:28px; }
.secondfigs { display:flex; gap:clamp(28px, 4vw, 60px); margin-top:20px; }
.secondfigs .n { font-family:var(--mono); font-size:23px; font-weight:600; font-variant-numeric:tabular-nums; }
.secondfigs .l { font-size:13px; color:var(--graphite); margin-top:2px; }
.quietline { margin-top:18px; padding-top:12px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:13px; color:var(--graphite); line-height:1.9; }
.quietline b { color:var(--carbon); font-weight:600; }

/* editorial findings */
.findings2 { max-width:66ch; }
.finding2 { display:grid; grid-template-columns:34px 1fr; gap:18px; padding:0 0 24px; }
.finding2 + .finding2 { border-top:1px solid var(--rule); padding-top:22px; }
.finding2 .ix { font-family:var(--mono); font-size:14px; color:var(--graphite); padding-top:4px; }
.finding2 p { font-size:17px; line-height:1.55; }
.finding2 p b { font-weight:600; }
.finding2 .ev { display:block; margin-top:6px; font-size:14px; color:var(--graphite); }

/* section shells */
section.chartled { padding:52px 0 10px; }
section.chartled > h2 { font-size:30px; font-weight:650; letter-spacing:-0.012em; }
section.chartled > .intro { margin:8px 0 30px; color:var(--graphite); font-size:15.5px; max-width:64ch; }
section.split { margin-top:60px; border-top:2px solid var(--carbon); padding-top:28px; display:grid; grid-template-columns:5fr 7fr; gap:34px clamp(40px, 6vw, 110px); }
section.split > div > h2, section.split h2 { font-size:27px; font-weight:650; letter-spacing:-0.01em; }
section.split .intro { margin:12px 0 26px; font-size:15.5px; line-height:1.6; max-width:44ch; }
section.dense { margin-top:60px; }
section.dense h2 { font-size:24px; font-weight:650; }

/* charts */
.xaxis { display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--graphite); padding:9px 0 5px; border-top:1px solid var(--rule); }
.chartfoot { display:flex; gap:24px; flex-wrap:wrap; align-items:baseline; padding:8px 0 0; }
.key { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); }
.key .swatch { width:22px; height:0; border-top:2.5px solid var(--carbon); }
.key.sorn .swatch { border-top:2px dashed var(--graphite); }
.key.now .swatch { width:10px; height:10px; border:none; background:var(--yellow); }
svg.pop { width:100%; height:400px; display:block; }
svg.hist { width:100%; height:160px; display:block; }
.histx { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--graphite); padding-top:5px; }
.projnote, .callout { margin-top:26px; border-left:3px solid var(--rule); padding:6px 0 6px 18px; max-width:72ch; }
.projnote p, .callout p { font-size:15.5px; }
.caveat { font-size:13.5px; color:var(--graphite); max-width:70ch; }
.projnote .caveat { margin-top:5px; }

/* composition */
.compbar h3 { font-size:15px; font-weight:600; margin-bottom:12px; }
.compbar .cb { display:flex; height:32px; }
.compbar .seg { position:relative; }
.compbar .seg span { position:absolute; left:0; top:38px; font-size:13px; white-space:nowrap; }
.compbar .seg .pc { font-family:var(--mono); font-weight:600; }
.statpair .n { font-family:var(--mono); font-size:32px; font-weight:600; font-variant-numeric:tabular-nums; }
.statpair .l { font-size:13.5px; color:var(--graphite); }
.bigstatement { font-size:20px; line-height:1.35; max-width:28ch; }
.bigstatement .n { font-family:var(--mono); font-weight:600; font-size:26px; }

/* ranked list */
.col h3 { font-size:15px; font-weight:600; padding:10px 0 4px; border-top:1px solid var(--carbon); }
.col ol { list-style:none; }
.col li { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--rule); font-size:14px; align-items:baseline; }
.col li .d { font-family:var(--mono); font-size:12.5px; }
.col li .v { font-family:var(--mono); font-size:13.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* concentration bars (geography) */
.rbar { display:grid; grid-template-columns:minmax(110px, 170px) 1fr 46px; gap:12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule); font-size:14px; }
.rbar .track { position:relative; height:14px; background:#EBEBE6; }
.rbar .fill { position:absolute; inset:0 auto 0 0; background:var(--carbon); }
.rbar.avg .fill { background:#8E9994; }
.rbar .v { font-family:var(--mono); font-size:13px; text-align:right; font-variant-numeric:tabular-nums; }

/* ledger */
table.ledger { width:100%; border-collapse:collapse; border-top:2px solid var(--carbon); }
table.ledger caption { text-align:left; font-family:var(--mono); font-size:12.5px; color:var(--graphite); padding:10px 0; letter-spacing:0.03em; }
table.ledger td { padding:12px 0; border-bottom:1px solid var(--rule); font-size:15px; vertical-align:baseline; }
table.ledger td.v { text-align:right; font-family:var(--mono); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; }
table.ledger tr.total td { padding-top:15px; }
table.ledger tr.total td.v { font-size:25px; font-weight:600; }

/* data table / explorer */
.explorer { background:var(--white); border:1px solid var(--rule); padding:24px clamp(16px, 2.5vw, 38px) 28px; }
.explorer .exhead { display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.explorer .exhead h2 { font-weight:650; }
.explorer .exhead .meta { margin-left:auto; }
.explorer .exsub { font-size:14.5px; color:var(--graphite); margin:6px 0 16px; max-width:70ch; }
.vefilters { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:0 0 16px; }
.vefilters input[type=search] { flex:1; min-width:180px; max-width:360px; padding:10px 14px; font-size:14.5px; border:1.5px solid var(--carbon); background:var(--paper); font-family:var(--font); }
.vefilters select { padding:10px 12px; font-size:14px; border:1px solid var(--graphite); background:var(--paper); font-family:var(--font); }
table.data { width:100%; border-collapse:collapse; }
table.data th { text-align:left; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:0.04em; color:var(--graphite); padding:10px 12px 10px 0; border-bottom:2px solid var(--carbon); white-space:nowrap; }
table.data th.r, table.data td.r { text-align:right; }
table.data th[aria-sort] { color:var(--carbon); }
table.data th[aria-sort]::after { content:" ↓"; }
table.data td { padding:10px 12px 10px 0; border-bottom:1px solid var(--rule); font-size:14px; vertical-align:baseline; }
table.data td.dvla { font-family:var(--mono); font-size:12.5px; }
table.data td.r { font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.data a { text-decoration:none; font-weight:560; color:var(--carbon); }
table.data a:hover { color:var(--blue); }
tr.open td { border-bottom:none; }
tr.detail td { border-bottom:2px solid var(--carbon); padding:4px 0 22px; }
.detailbox { background:var(--paper); padding:20px 22px; display:grid; grid-template-columns:5fr 4fr 3fr; gap:22px clamp(20px, 3vw, 44px); }
.detailbox .fields { display:grid; grid-template-columns:auto 1fr; gap:5px 18px; font-size:13.5px; align-content:start; }
.detailbox .fields dt { color:var(--graphite); }
.detailbox .fields dd { font-family:var(--mono); font-weight:500; }
.detailbox svg { width:100%; height:64px; }
.detailbox .dl { font-size:12.5px; color:var(--graphite); }
.detailbox .dv { font-family:var(--mono); font-size:15px; font-weight:500; margin-top:2px; }

/* notable band */
.notable-band { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--carbon); }
.nb { padding:16px clamp(12px, 2vw, 32px) 20px 0; border-right:1px solid var(--rule); margin-right:clamp(10px, 1.5vw, 24px); }
.nb:last-child { border-right:none; margin-right:0; }
.nb .role { font-size:13px; font-weight:600; color:var(--ink); }
.nb .vname { font-family:var(--mono); font-size:14px; font-weight:600; margin:9px 0 5px; }
.nb .vfig { font-family:var(--mono); font-size:25px; font-weight:600; font-variant-numeric:tabular-nums; }
.nb .vctx { font-size:13px; color:var(--graphite); margin-top:4px; }

/* methodology / provenance strip */
.methstrip { border-top:2px solid var(--carbon); border-bottom:1px solid var(--rule); background:var(--white); display:flex; flex-wrap:wrap; }
.methstrip .cell { padding:13px 26px 13px 0; margin-right:26px; }
.methstrip .k { font-family:var(--mono); font-size:11px; color:var(--graphite); letter-spacing:0.05em; display:block; }
.methstrip .v { font-size:14px; font-weight:500; margin-top:2px; }
details.method { margin-top:14px; max-width:80ch; }
details.method summary { cursor:pointer; font-weight:600; font-size:15px; padding:8px 0; }
details.method p { font-size:14.5px; color:var(--ink); margin:8px 0; }
.genplain { margin-top:14px; font-size:14.5px; max-width:80ch; }
.genplain b { font-weight:650; }

/* related records */
.related { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--carbon); }
.related a { padding:15px 20px 17px 0; border-right:1px solid var(--rule); margin-right:20px; text-decoration:none; color:var(--carbon); }
.related a:last-child { border-right:none; }
.related a:hover .rn { color:var(--blue); }
.related .reason { font-size:12.5px; color:var(--graphite); }
.related .rn { display:block; font-weight:600; font-size:17px; margin-top:6px; }
.related .rm { display:block; margin-top:4px; font-family:var(--mono); font-size:12px; color:var(--graphite); }

/* section navigation */
.sectionnav { position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--rule); display:flex; gap:22px; padding:10px var(--margin); overflow-x:auto; }
.sectionnav a { font-size:13.5px; font-weight:500; color:var(--graphite); text-decoration:none; white-space:nowrap; }
.sectionnav a[aria-current] { color:var(--carbon); border-bottom:2px solid var(--yellow); padding-bottom:3px; }
.sectionnav .ctx { margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--ink); white-space:nowrap; }

/* empty state */
.emptyview { border-top:2px solid var(--carbon); padding:38px 0 46px; max-width:60ch; }
.emptyview h3 { font-size:21px; font-weight:650; }
.emptyview p { margin-top:10px; font-size:15.5px; color:var(--ink); }
.emptyview .routes { margin-top:16px; font-size:14.5px; }

/* footer */
footer.site { margin-top:72px; border-top:1px solid var(--rule); padding:26px var(--margin); }
footer.site .frow { display:flex; gap:24px 40px; flex-wrap:wrap; justify-content:space-between; align-items:baseline; }
footer.site nav ul { list-style:none; display:flex; gap:22px; flex-wrap:wrap; }
footer.site nav a { font-size:14px; font-weight:450; color:var(--ink); text-decoration:none; }
footer.site nav a:hover { color:var(--blue); }
footer.site .legal { margin-top:18px; font-size:12.5px; color:var(--graphite); }

/* responsive */
@media (max-width:960px) {
  section.split { grid-template-columns:1fr; }
  .notable-band, .related { grid-template-columns:1fr 1fr; }
  .nb:nth-child(2), .related a:nth-child(2) { border-right:none; }
  svg.pop { height:290px; }
  header.site nav.primary { display:none; }
  .nav-search { display:none; }
  .menu-toggle { display:block; }
}
@media (min-width:961px) { .mobile-nav { display:none !important; } }
@media (max-width:560px) {
  .notable-band, .related { grid-template-columns:1fr; }
  .nb, .related a { border-right:none; margin-right:0; border-bottom:1px solid var(--rule); }
  table.data .opt { display:none; }
  .detailbox { grid-template-columns:1fr; }
  svg.pop { height:230px; }
  .quietline { line-height:2.1; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* specificity fixes: old main.css overrides */
.autocomplete-dropdown .autocomplete-item, .autocomplete-dropdown .autocomplete-item-name { color:var(--carbon); opacity:1; }
.autocomplete-dropdown .autocomplete-item-make { color:var(--graphite); opacity:1; }


/* ── Red List index styles (2026 Q2 restyle) ── */
.t-endangered { background:var(--endangered); }
.t-declining { background:var(--declining); }
.t-growing { background:var(--growing); }
.t-extinct { background:var(--extinct); }
.rl-head { padding:56px 0 8px; }
.rl-head h1 { font-size:clamp(34px,5vw,54px); font-weight:700; letter-spacing:-0.01em; margin:10px 0 10px; }
.rl-ed { display:inline-block; background:var(--yellow); color:var(--carbon); padding:3px 8px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:0.05em; }
.rl-lede { font-size:17px; color:var(--ink); max-width:640px; line-height:1.55; margin:0 0 14px; }
.rl-quiet { font-family:var(--mono); font-size:12.5px; color:var(--graphite); letter-spacing:0.03em; margin:0 0 28px; }
.rl-quiet a { color:var(--graphite); text-decoration:none; border-bottom:1px solid var(--rule); }
.rl-quiet a:hover { color:var(--blue); }
.rl-cap { font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:0.06em; color:var(--graphite); margin:0 0 12px; }
.rl-key { border-top:2px solid var(--carbon); margin:0 0 44px; }
.rl-key-row { display:grid; grid-template-columns:190px 1fr auto; gap:14px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--rule); }
.rl-key-row .crit { font-size:13.5px; color:var(--graphite); }
.rl-key-row a.n { font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--carbon); text-decoration:none; }
.rl-key-row a.n:hover { color:var(--blue); }
.rl-story { border-top:2px solid var(--carbon); padding:16px 0 8px; margin:0 0 44px; }
.rl-story h2 { font-size:24px; margin:2px 0 10px; }
.rl-story p { max-width:680px; line-height:1.6; font-size:15.5px; margin:0 0 8px; }
.rl-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:0 0 48px; }
.rl-trio-col { border-top:2px solid var(--carbon); padding-top:12px; }
.rl-mini { list-style:none; margin:0; padding:0; }
.rl-mini li { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--rule); font-size:14px; align-items:baseline; }
.rl-mini a { text-decoration:none; color:var(--carbon); font-weight:560; }
.rl-mini a:hover { color:var(--blue); }
.rl-mini .make { display:block; color:var(--graphite); font-weight:400; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; }
.rl-mini .fig { font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.rl-nav { position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--rule); padding:10px 0; z-index:5; display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:0 0 36px; }
.rl-nav a { font-family:var(--mono); font-size:12px; text-decoration:none; color:var(--carbon); letter-spacing:0.03em; }
.rl-nav a:hover { color:var(--blue); }
.rl-nav input { font-family:var(--mono); font-size:12.5px; border:1px solid var(--rule); background:var(--white); padding:6px 10px; min-width:210px; margin-left:auto; }
.rl-tier { margin:0 0 48px; scroll-margin-top:64px; }
.rl-tier-head { display:flex; align-items:baseline; gap:12px; margin:0 0 6px; flex-wrap:wrap; }
.rl-tier-head .crit { font-size:13px; color:var(--graphite); }
.rl-tier-head .n { font-family:var(--mono); font-size:12.5px; color:var(--graphite); margin-left:auto; }
.rl-scroll { overflow-x:auto; }
.rl-viewall { display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:0.03em; margin-top:12px; color:var(--carbon); text-decoration:none; border-bottom:1px solid var(--carbon); padding-bottom:1px; }
.rl-viewall:hover { color:var(--blue); border-color:var(--blue); }
.rl-hidden { display:none; }
@media (max-width:760px) {
  .rl-trio { grid-template-columns:1fr; }
  .rl-key-row { grid-template-columns:1fr auto; }
  .rl-key-row .crit { grid-column:1 / -1; }
}