/* Brand: the gauge mark, a dark shell (header, footer) around a light reading ground (brand/README.txt).
   Orange is a fill, never text on the light ground: it does not reach 4.5:1 there. Text that has to
   carry the accent uses --amber-text; links are a darker blue. Headings are set in Georgia. */
:root { --fg:#14213d; --muted:#4a5568; --line:#e2dccf; --bg:#fbfaf7; --panel:#fff; --soft:#f6f2ea;
        --accent:#1d3a7a; --hi:#a8321e; --lo:#2b6e3a;
        --navy:#14213d; --shell:#0d1424; --amber:#f28c28; --amber-text:#a55f00;
        --on-navy:#e8edf3; --on-navy-muted:#9aa7bd; --w:960px; --shell-w:1200px;
        --serif:Georgia, "Times New Roman", serif; }
@media (prefers-color-scheme: dark) { :root { --fg:#e8edf3; --muted:#9aa7bd; --line:#263450; --bg:#0f1729; --panel:#121c33;
        --soft:#172238; --accent:#9db8ea; --amber-text:#f2a33a; --hi:#f08a74; --lo:#7fcf8f; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--accent); }
main { max-width:var(--w); margin:0 auto; padding:0 16px; }
:focus-visible { outline:3px solid var(--amber); outline-offset:2px; }

/* The bar: the dark shell across the full width, its contents on the wide column. The search box
   sends the reader to the search page; on narrow screens it gives way and the Search door remains. */
header.top { background:var(--shell); color:var(--on-navy); border-bottom:1px solid #263450; }
header.top .bar { max-width:var(--shell-w); margin:0 auto; padding:0 16px; min-height:72px;
                  display:flex; flex-wrap:wrap; align-items:center; gap:4px 28px; }
header.top a { text-decoration:none; color:var(--on-navy); }
.brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-right:24px; }
.brand svg { width:40px; height:40px; flex:none; }
.word { font-family:var(--serif); font-weight:700; font-size:1.55rem; line-height:1; color:var(--on-navy); white-space:nowrap; }
.word b { color:var(--amber); font-weight:700; }
header.top nav { display:flex; flex-wrap:wrap; gap:0 22px; flex:1 1 auto; align-self:stretch; }
header.top nav a { display:inline-flex; align-items:center; min-height:44px; padding-top:3px;
                   font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                   border-bottom:3px solid transparent; }
header.top nav a:hover { color:var(--amber); }
header.top nav a[aria-current] { color:var(--amber); border-bottom-color:var(--amber); }
form.qs { display:flex; align-items:center; width:290px; height:42px; padding:0 4px 0 14px;
          background:#16203a; border:1px solid #34456a; border-radius:8px; }
form.qs:focus-within { border-color:var(--amber); }
form.qs input { flex:1 1 auto; min-width:0; height:100%; font:inherit; font-size:.9rem; color:var(--on-navy);
                background:transparent; border:0; outline:none; }
form.qs input::placeholder { color:var(--on-navy-muted); }
form.qs button { width:36px; height:36px; padding:0; display:grid; place-items:center; color:var(--on-navy);
                 background:transparent; border:0; cursor:pointer; }
form.qs svg { width:19px; height:19px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:1020px) { form.qs { display:none; } }
@media (max-width:640px) {
  header.top .bar { min-height:0; padding:8px 16px 0; gap:0 16px; }
  .brand svg { width:34px; height:34px; }
  .word { font-size:1.35rem; }
  /* Five doors on one row down to a 360px screen: spread across the width, tracking tightened. */
  header.top nav { flex-basis:100%; gap:0 8px; justify-content:space-between; }
  header.top nav a { font-size:.74rem; letter-spacing:.03em; }
}
.crumbs { max-width:var(--w); margin:12px auto 0; padding:0 16px; color:var(--muted); font-size:.88rem; }
.crumbs span { opacity:.5; }
.crumb { color:var(--muted); font-weight:400; }
.lead { font-size:1.05rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; margin:12px 0 4px; }
a.card { display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:10px;
         padding:12px 14px; text-decoration:none; color:var(--fg); background:var(--panel); }
a.card:hover { border-color:var(--accent); }
a.card span { color:var(--muted); font-size:.85rem; }
h1 { font-family:var(--serif); font-size:2.1rem; margin:28px 0 4px; line-height:1.15; }
h2 { font-family:var(--serif); font-size:1.35rem; margin:36px 0 10px; }
h3 { font-size:1.05rem; margin:0 0 4px; }
.sub, .meta, .note, .muted { color:var(--muted); }
.sub { margin:0 0 8px; }
.meta { margin:0 0 8px; font-size:.92rem; }
.note { font-size:.9rem; }
.summary { background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--amber); border-radius:10px; padding:4px 20px 10px; margin-top:20px; }
.summary h2 { margin-top:14px; }
.summary ul { padding-left:18px; margin:0 0 8px; }
.summary li { margin:6px 0; }
dl.glance { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; margin:0; }
dl.glance div { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
dt { color:var(--muted); font-size:.82rem; }
dd { margin:2px 0 0; font-size:1.1rem; font-weight:600; }
dd small { font-weight:400; color:var(--muted); }
article { border-top:1px solid var(--line); padding:14px 0; }
blockquote { margin:8px 0; padding:8px 12px; border-left:3px solid var(--line); background:var(--soft); font-size:.92rem; overflow-wrap:anywhere; }
.tag { display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-right:6px; }
.badge { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; background:var(--hi); color:#fff; font-size:.78rem; font-weight:600; }
table { width:100%; border-collapse:collapse; font-size:.92rem; display:block; overflow-x:auto; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; color:var(--muted); font-size:.82rem; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
tr.me td { background:#fdf0e1; font-weight:600; }
@media (prefers-color-scheme: dark) { tr.me td { background:var(--soft); } }
.summary li.caveat { color:var(--muted); font-size:.9rem; }
.years { color:var(--muted); font-weight:400; font-size:1.1rem; }
tr.thin td { color:var(--muted); }
.flag { font-size:.85rem; font-weight:600; }
.flag.hi { color:var(--hi); } .flag.lo { color:var(--lo); }
.stars { letter-spacing:1px; white-space:nowrap; }
a.card .anchor { color:var(--accent); font-weight:600; font-size:.82rem; letter-spacing:.01em; }

/* The Vehicles stream. The lead piece takes the full width with its picture at the left; the
   rest sit two to a row with a small thumbnail floated into the text, the way a news column
   reads. Both collapse to one column on a phone. */
.feature { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:20px; align-items:start;
           border:1px solid var(--line); border-top:4px solid var(--amber); border-radius:10px; background:var(--panel);
           padding:16px; margin:18px 0 16px; }
/* A lead piece without a picture uses the whole width for its text. */
.feature:not(:has(.shot)) { grid-template-columns:minmax(0, 1fr); }
.feature h2 { margin:0 0 5px; font-size:1.5rem; line-height:1.22; }
.feature h2 a, .posts h3 a { text-decoration:none; }
.feature h2 a:hover, .posts h3 a:hover { text-decoration:underline; }
.shot { display:block; }
.shot img { width:100%; height:auto; display:block; border-radius:7px; border:1px solid var(--line); }
.kicker { margin:0 0 7px; font-weight:600; font-size:.95rem; }
.teaser { margin:0; color:var(--muted); font-size:.92rem; }
.when { color:var(--fg); font-weight:700; font-size:.78rem; letter-spacing:.04em; }

.posts { display:grid; grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)); gap:4px 26px;
         margin-bottom:10px; }
.posts article { border-top:1px solid var(--line); padding:14px 0 16px; }
.posts h3 { font-size:1.12rem; line-height:1.25; margin:0 0 7px; }
.posts .shot { float:left; width:96px; margin:2px 12px 4px 0; }
.posts article::after { content:""; display:block; clear:both; }

/* The picture sits inside the column at a readable size, text running past it, rather than
   opening the piece with a wall of image. It goes full width once the column is narrow. */
figure { margin:18px 0; }
figure.hero-fig { margin:8px 0 26px; }
img.hero { width:100%; height:auto; border-radius:9px; border:1px solid var(--line); }
figcaption { margin-top:6px; }
main > h2 { clear:none; }

/* What else this site has about the same make. Two columns, four at most. */
.more { clear:both; border-top:2px solid var(--line); margin-top:34px; padding-top:6px; }
.more h2 { font-size:1.15rem; margin:14px 0 6px; }
.more ul { list-style:none; padding:0; margin:0;
           display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:0 26px; }
.more li { display:grid; grid-template-columns:78px minmax(0, 1fr); gap:2px 12px; align-items:start;
           padding:12px 0; border-bottom:1px solid var(--line); }
.more li.noshot { grid-template-columns:minmax(0, 1fr); }
.more .thumb { grid-row:span 2; }
.more .thumb img { width:100%; height:auto; display:block; border-radius:5px; border:1px solid var(--line); }
.more .headline { font-size:.98rem; line-height:1.3; text-decoration:none; }
.more .headline:hover { text-decoration:underline; }
.more .where { color:var(--muted); font-size:.8rem; align-self:end; }
.more .where i { font-style:normal; opacity:.5; margin:0 2px; }

@media (max-width:640px) {
  figure.hero-fig { float:none; width:100%; margin:16px 0; }
  .more ul { gap:0; }
}

@media (max-width:640px) {
  .feature { grid-template-columns:1fr; gap:12px; padding:13px; }
  .feature h2 { font-size:1.28rem; }
  .posts { gap:0; }
  .posts .shot { width:80px; margin-right:10px; }
}

.filters { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:18px 0 0;
           padding:12px 14px; border:1px solid var(--line); border-radius:9px; font-size:.9rem; }
.filters label { color:var(--muted); }
.filters select { padding:7px 9px; font:inherit; color:var(--fg); background:var(--panel);
                  border:1px solid var(--line); border-radius:7px; }
.filters button { padding:7px 15px; font:inherit; color:#fff; background:var(--accent);
                  border:1px solid var(--accent); border-radius:7px; cursor:pointer; }
.pager { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center;
         margin:12px 0 32px; }
.pager .where { color:var(--muted); font-size:.85rem; width:100%; text-align:center; margin-bottom:2px; }
.pager button { padding:5px 11px; font:inherit; font-size:.88rem; color:var(--accent); background:var(--panel);
                border:1px solid var(--line); border-radius:7px; cursor:pointer; }
.pager button.here { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.pager button[disabled] { color:var(--muted); cursor:default; opacity:.55; }
.sample { display:inline-block; margin:0 0 6px; padding:2px 8px; border-radius:4px;
          background:var(--hi); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.09em; }

/* Each make folds away; the closed row still carries its counts. */
details.make { border-top:1px solid var(--line); }
details.make:last-of-type { border-bottom:1px solid var(--line); }
details.make > summary { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
                         justify-content:space-between; padding:14px 26px 14px 2px; cursor:pointer;
                         position:relative; list-style:none; }
details.make > summary::-webkit-details-marker { display:none; }
details.make > summary:hover .name { color:var(--accent); }
details.make > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
details.make .name { font-weight:700; font-size:1.15rem; }
details.make .count { color:var(--muted); font-size:.86rem; }
details.make > summary::after { content:"+"; position:absolute; right:4px; color:var(--muted);
                                font-size:1.1rem; line-height:1; }
details.make[open] > summary::after { content:"\2212"; }
details.make > .cards { margin-bottom:16px; }
.innews { margin-top:20px; border-left:3px solid var(--accent); padding:2px 0 2px 14px; }
.innews h2 { margin:8px 0 6px; font-size:1rem; }
.innews ul { padding-left:18px; margin:0 0 8px; }
.innews li { margin:4px 0; }
.innews span { color:var(--muted); font-size:.85rem; }
.ylist { font-size:.88rem; }
.ylist a { margin-right:6px; white-space:nowrap; }
.ylist span { color:var(--muted); margin-right:6px; white-space:nowrap; }
#q { width:100%; margin:8px 0 4px; padding:11px 13px; font:inherit; color:var(--fg); background:var(--panel);
     border:1px solid var(--line); border-radius:8px; }
#q:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
ul.results { list-style:none; padding:0; margin:8px 0 0; }
ul.results li { display:flex; justify-content:space-between; gap:12px; align-items:baseline;
                padding:9px 2px; border-bottom:1px solid var(--line); }
ul.results span { color:var(--muted); font-size:.82rem; white-space:nowrap; }
.method { border-top:2px solid var(--line); margin-top:40px; }
/* Reading pages: the "On this page" column beside the text, sticky while the reader scrolls. */
.reading { max-width:var(--shell-w); margin:0 auto; padding:0 16px; display:grid;
           grid-template-columns:200px minmax(0, 760px); gap:56px; justify-content:center; }
.reading > main { max-width:none; margin:0; padding:0; }
nav.toc { position:sticky; top:16px; align-self:start; margin-top:34px; padding-left:16px;
          border-left:2px solid var(--line); font-size:.88rem; }
nav.toc p { margin:0 0 10px; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-text); }
nav.toc ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
nav.toc a { color:var(--fg); text-decoration:none; line-height:1.3; }
nav.toc a:hover { color:var(--accent); text-decoration:underline; }
h2[id] { scroll-margin-top:16px; }
@media (max-width:900px) { .reading { display:block; padding:0; } nav.toc { display:none; } .reading > main { padding:0 16px; } }
/* The footer: the dark shell again, closing the page the way the bar opens it. */
/* Short pages: the footer still sits at the bottom of the window, not halfway up it. */
body { min-height:100vh; display:flex; flex-direction:column; }
body > main, body > .reading { width:100%; margin-bottom:56px; }
body > .crumbs { width:100%; }
.crumbs:has(~ .reading) { max-width:1016px; }
footer.site { margin-top:auto; background:var(--shell); color:var(--on-navy-muted); border-top:4px solid var(--amber); font-size:.88rem; }
footer.site .cols { max-width:var(--shell-w); margin:0 auto; padding:32px 16px 24px;
                    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:24px; }
footer.site .cols > div { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
footer.site p { margin:0; line-height:1.5; }
footer.site .fword .word { font-size:1.25rem; }
footer.site .fh { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy); }
footer.site a { color:#c4cddb; text-decoration:none; }
footer.site a:hover { color:var(--amber); text-decoration:underline; }
footer.site a.social { display:inline-flex; align-items:center; gap:8px; }
footer.site a.social:first-of-type { margin-top:6px; }
footer.site a.social svg { width:18px; height:18px; flex:none; }
footer.site .fine { max-width:var(--shell-w); margin:0 auto; padding:14px 16px 24px; border-top:1px solid #263450; font-size:.8rem; }

/* Controls a thumb has to hit: 44px, the smallest target that is comfortable on a phone. */
.filters select, .filters button, .pager button { min-height:44px; }
.pager button { min-width:44px; }
@media (max-width:640px) { footer.site a { padding:6px 0; } }

/* Home. The page's three jobs: get a reader to their car, say what the site is, show it is alive. */
/* The photograph fills the right of the band; a gradient from the shell colour keeps the text side solid. */
.hero { position:relative; overflow:hidden; background:var(--shell); color:var(--on-navy); border-bottom:4px solid var(--amber); }
.hero-photo { position:absolute; top:0; right:0; width:64%; height:100%; object-fit:cover; object-position:35% 50%; }
.hero::after { content:""; position:absolute; inset:0;
               background:linear-gradient(90deg, var(--shell) 36%, rgba(13,20,36,.82) 58%, rgba(13,20,36,.35) 100%); }
.hero .wrap { position:relative; z-index:1; max-width:var(--shell-w); margin:0 auto; padding:56px 16px 52px; }
.hero .wrap { display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; }
.hero .intro { flex:999 1 520px; min-width:0; }
/* Latest, in the hero: a dark panel over the photograph, newest first. */
.latest-box { flex:1 1 360px; max-width:440px; background:rgba(13,20,36,.94); border:1px solid #2c3b5c;
              border-top:3px solid var(--amber); border-radius:10px; padding:18px 20px 6px; }
.latest-box .latest-head h2 { margin:0; font-size:1.5rem; color:#fff; }
.latest-box .latest-head p { gap:12px; font-size:.82rem; }
.latest-box .latest-head a { color:var(--amber); }
.latest-box ol.latest { border:0; border-radius:0; margin-top:6px; }
.latest-box ol.latest li { grid-template-columns:auto minmax(0, 1fr); gap:3px 12px; padding:12px 0; border-top:1px solid #263450; }
.latest-box ol.latest li > div { grid-column:2; grid-row:auto; }
.latest-box ol.latest time { grid-column:2; color:var(--on-navy-muted); }
.latest-box .what { color:#e8edf3; font-size:.95rem; }
.latest-box ol.latest .detail { color:var(--on-navy-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.latest-box .kind { font-size:.7rem; }
.latest-box .kind.article { color:#e8edf3; }
@media (max-width:640px) { .latest-box { max-width:none; padding:16px 14px 4px; } .brand { margin-right:0; } }
.hero .eyebrow { margin:0 0 14px; color:var(--amber); font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.hero h1 { margin:0 0 16px; font-size:3.1rem; line-height:1.05; color:#fff; max-width:15ch; }
.hero h1 span { color:var(--amber); }
ul.sources { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-size:.82rem; }
ul.sources li { padding:5px 10px; border:1px solid #3a4b70; border-radius:6px; }
.hero .credit { position:absolute; z-index:1; right:12px; bottom:6px; margin:0; font-size:.7rem; color:var(--on-navy-muted); }
.hero .credit a { color:var(--on-navy-muted); }
.hero .define { margin:0; font-size:1.15rem; line-height:1.55; max-width:50ch; color:#dbe2ec; }
.hero .note { color:var(--on-navy-muted); margin:12px 0 0; }
.hero a { color:#fff; }
form.find { margin-top:24px; max-width:640px; }
form.find label { display:block; margin-bottom:8px; font-weight:600; font-size:.95rem; color:var(--on-navy-muted); }
form.find .row { display:flex; flex-wrap:wrap; gap:10px; }
form.find input { flex:1 1 260px; min-width:0; height:54px; padding:0 16px; font:inherit; font-size:1.1rem;
                  color:#1b1f27; background:#fff; border:0; border-radius:10px; }
form.find button { height:54px; padding:0 26px; font:inherit; font-size:1.05rem; font-weight:700; color:var(--navy);
                   background:var(--amber); border:0; border-radius:10px; cursor:pointer; }
@media (max-width:760px) {
  .hero-photo { width:100%; height:300px; }
  .hero::after { background:linear-gradient(180deg, rgba(13,20,36,.35) 0, rgba(13,20,36,.85) 200px, var(--shell) 300px); }
  .hero .wrap { padding-top:150px; }
  .hero .credit { position:relative; right:auto; bottom:auto; padding:0 16px 10px; }
}
@media (max-width:520px) {
  .hero h1 { font-size:2.3rem; }
  .hero .define { font-size:1.02rem; }
  form.find button { flex:1 1 100%; }
}
main.home h2 { font-size:1.6rem; margin:40px 0 14px; }
/* Browse by make: a cream band across the full width, white boxes on it. */
.band { background:var(--soft); box-shadow:0 0 0 100vmax var(--soft); clip-path:inset(0 -100vmax); margin-top:44px; padding:8px 0 34px; }
.band .box { background:var(--panel); border:1px solid var(--line); }
.band ul.chips a { background:var(--soft); border-color:transparent; font-weight:600; }
.makes { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:14px; }
/* Four answers sit two by two; three across left the fourth alone on a row. */
.answers { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
@media (max-width:640px) { .answers { grid-template-columns:minmax(0, 1fr); } }
.box { background:var(--soft); border-radius:14px; padding:18px 20px; }
.box-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; margin-bottom:12px; }
.box-head h3 { margin:0; font-size:1.2rem; }
.box-head h3 a { color:var(--fg); text-decoration:none; }
.box-head > a { font-size:.9rem; }
ul.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
ul.chips a { display:inline-flex; align-items:center; min-height:44px; padding:0 15px; border:1px solid var(--line);
             border-radius:22px; background:var(--panel); color:var(--fg); text-decoration:none; }
ul.chips a:hover { border-color:var(--accent); color:var(--accent); }
.answer { background:var(--soft); border-radius:14px; padding:20px 22px; }
.answer h3 { font-size:1.15rem; line-height:1.3; margin:0 0 8px; }
.answer p { margin:0; }
.answer.key { background:var(--navy); color:var(--on-navy); }
@media (prefers-color-scheme: dark) { .answer.key { box-shadow:inset 0 0 0 2px var(--amber); } }
.answer.key .note { color:var(--on-navy-muted); margin-top:8px; }
.answer.key a { color:var(--amber); }
.latest-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 16px; }
.latest-head p { margin:0; display:flex; gap:16px; font-size:.95rem; }
ol.latest { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:14px; }
ol.latest li { display:grid; grid-template-columns:118px minmax(0, 1fr) auto; gap:4px 16px; align-items:start;
               padding:14px 18px; border-top:1px solid var(--line); }
ol.latest li:first-child { border-top:0; }
ol.latest .what { font-weight:600; text-decoration:none; }
ol.latest .what:hover { text-decoration:underline; }
ol.latest .detail { display:block; margin-top:2px; color:var(--muted); font-size:.9rem; }
ol.latest time { color:var(--muted); font-size:.85rem; white-space:nowrap; }
.kind { justify-self:start; display:inline-block; padding:3px 9px; border-radius:4px; font-size:.8rem; font-weight:700; }
.kind.recall { background:var(--amber); color:var(--navy); }
.kind.probe { background:var(--navy); color:#fff; box-shadow:inset 0 0 0 1px var(--on-navy-muted); }
.kind.article { box-shadow:inset 0 0 0 1.5px currentColor; }
@media (max-width:640px) {
  ol.latest li { grid-template-columns:minmax(0, 1fr) auto; padding:14px; }
  ol.latest li > div { grid-column:1 / -1; grid-row:2; }
}