/* hotwired.news. Light first, with a dark palette that keeps the same roles.
   Design notes: docs/dev_plans/20260924-feature-voice-stack-layers.md */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/voiceai/assets/fonts/schibsted-grotesk-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/voiceai/assets/fonts/newsreader-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/voiceai/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/voiceai/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); }

  :root {
    color-scheme: light;
    --bg: #f3f4f0;
    --panel: #fbfbf9;
    --sunk: #e9ebe5;
    --ink: #15171a;
    --ink2: #41454b;
    --muted: #62676e;
    --faint: #9ba0a6;
    --line: #d8dbd3;
    --line-soft: #e5e7e1;
    --hot: #d2461e;
    --hot-ink: #ae3a14;
    --hot-wash: #f8e2d8;
    --hot-contrast: #ffffff;
    --h0: #e9ebe5;
    --h1: #f6dccf;
    --h2: #efb593;
    --h3: #e48a57;
    --h4: #d2461e;
    --h5: #a63112;
    --h-lo: #15171a;
    --h-hi: #ffffff;
    --h5-ink: #ffffff;
    --model: #2f62a3;
    --platform: #7b4cb3;
    --enterprise: #2e7d52;
    --enabler: #856210;
    --scrim: rgba(243, 244, 240, 0.92);
    --display: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
    --read: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --measure: 64ch;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1113;
    --panel: #16191c;
    --sunk: #1d2125;
    --ink: #eceeea;
    --ink2: #c0c4c8;
    --muted: #8c9198;
    --faint: #5f646b;
    --line: #2b2f34;
    --line-soft: #212529;
    --hot: #ff6a3d;
    --hot-ink: #ff8d68;
    --hot-wash: #3b1f15;
    --hot-contrast: #0f1113;
    --h0: #1d2125;
    --h1: #3b241a;
    --h2: #5f2f1d;
    --h3: #8f3d1e;
    --h4: #c94b20;
    --h5: #ff6a3d;
    --h-lo: #eceeea;
    --h-hi: #ffffff;
    --h5-ink: #15171a;
    --model: #82b6f5;
    --platform: #c5a3f5;
    --enterprise: #72c595;
    --enabler: #e0b35a;
    --scrim: rgba(15, 17, 19, 0.92);
  }
  /* No-JS fallback: THEME_BOOT normally stamps data-theme before first paint. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --bg: #0f1113;
      --panel: #16191c;
      --sunk: #1d2125;
      --ink: #eceeea;
      --ink2: #c0c4c8;
      --muted: #8c9198;
      --faint: #5f646b;
      --line: #2b2f34;
      --line-soft: #212529;
      --hot: #ff6a3d;
      --hot-ink: #ff8d68;
      --hot-wash: #3b1f15;
      --hot-contrast: #0f1113;
      --h0: #1d2125;
      --h1: #3b241a;
      --h2: #5f2f1d;
      --h3: #8f3d1e;
      --h4: #c94b20;
      --h5: #ff6a3d;
      --h-lo: #eceeea;
      --h-hi: #ffffff;
      --h5-ink: #15171a;
      --model: #82b6f5;
      --platform: #c5a3f5;
      --enterprise: #72c595;
      --enabler: #e0b35a;
      --scrim: rgba(15, 17, 19, 0.92);
    }
  }

  * { box-sizing: border-box; }
  ::selection { background: var(--hot-wash); }
  body { margin: 0; font: 16px/1.55 var(--display); background: var(--bg); color: var(--ink); }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
  h1, h2, h3 { text-wrap: balance; }

  /* ---------- masthead ---------- */
  header.mast {
    max-width: 960px; margin: 0 auto; padding: 22px 24px 12px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 26px;
    border-bottom: 2px solid var(--ink);
  }
  .wordmark {
    font: 800 28px/1 var(--display); letter-spacing: -0.045em; text-decoration: none; color: var(--ink);
    display: inline-flex; align-items: baseline; margin-right: auto;
  }
  .wordmark .dot {
    width: .24em; height: .24em; border-radius: 50%; background: var(--hot); display: inline-block;
    margin: 0 .05em;
  }
  .wordmark.live .dot { animation: live 2.4s ease-out infinite; }
  .wordmark .tld { color: var(--muted); font-weight: 500; }
  @keyframes live {
    0% { box-shadow: 0 0 0 0 var(--hot-wash); }
    70%, 100% { box-shadow: 0 0 0 7px transparent; }
  }
  @media (prefers-reduced-motion: reduce) { .wordmark.live .dot { animation: none; } }
  nav.site { display: flex; gap: 18px; flex-wrap: wrap; font: 500 14px/1.2 var(--display); }
  nav.site a { color: var(--muted); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
  nav.site a:hover { color: var(--ink); }
  nav.site a.here { color: var(--ink); border-color: var(--hot); }
  .theme-toggle {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background: transparent; color: var(--muted); border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 12px; font: 12px/1.3 var(--mono);
  }
  .theme-toggle:hover { color: var(--ink); border-color: var(--faint); }
  .install-btn {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background: var(--hot); color: var(--hot-contrast); border: 1px solid var(--hot);
    border-radius: 999px; padding: 5px 14px; font: 600 12px/1.3 var(--display);
    text-decoration: none;
  }
  .install-btn:hover { background: var(--hot-ink); border-color: var(--hot-ink); }

  .pagehead { max-width: 960px; margin: 0 auto; padding: 18px 24px 0; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; }
  .pagehead:has(h1) { padding-top: 26px; }
  .pagehead h1 { margin: 0; font: 700 26px/1.15 var(--display); letter-spacing: -0.02em; }
  .pagehead .sub { color: var(--muted); font-size: 14px; }
  .pagehead .sub:empty { display: none; }
  .stats { display: flex; gap: 16px; margin-left: auto; color: var(--muted); font: 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
  .stats b { color: var(--ink); font: 600 14px/1 var(--display); margin-right: 5px; }

  .filters {
    max-width: 960px; margin: 14px auto 0; padding: 12px 24px;
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    position: sticky; top: 0; z-index: 2; background: var(--scrim); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  select, input[type="search"] {
    -webkit-appearance: none; appearance: none; background: var(--panel); color: var(--ink2);
    border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font: 13px/1.3 var(--display);
  }
  select:hover, input[type="search"]:hover { border-color: var(--faint); }
  select:focus, input[type="search"]:focus { border-color: var(--hot); }
  input[type="search"] { min-width: 0; flex: 1 1 220px; }
  input[type="search"]::placeholder { color: var(--muted); }

  .layer-chips { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  /* The same small rectangle as the week page's pinned .strip-mini, without the heat colour: neutral, ink when selected. */
  /* One rule for both, so "the same rectangle" cannot drift: name and count typography. */
  .lchip .ln, .strip-mini .ln { font: 600 12.5px/1.2 var(--display); }
  .lchip .n, .strip-mini .n { font: 700 12.5px/1.2 var(--display); font-variant-numeric: tabular-nums; }
  .lchip {
    flex: none; display: inline-flex; align-items: baseline; justify-content: space-between; gap: 8px; cursor: pointer;
    background: var(--panel); color: var(--ink2); border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px;
  }
  .lchip .n { color: var(--muted); }
  /* The gloss is in the accessible name only (title is unreliable for AT and absent on touch); the rectangle is unchanged. */
  .lchip .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lchip .n:empty { display: none; }
  .lchip:hover { border-color: var(--faint); }
  /* An empty layer is dimmed with the muted token and a dashed edge, not `opacity`: it stays a live button, so its text keeps 4.5:1. */
  .lchip[data-empty] { color: var(--muted); border-style: dashed; }
  .lchip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); border-style: solid; }
  .lchip[aria-pressed="true"] .n { color: var(--bg); opacity: .8; }

  /* Bottom padding stayed small: the site-foot below supplies the page's closing breathing room,
     so main no longer needs to reserve its own (96px, from before the footer existed, stacked with
     it and read as a stray gap above the credit line). */
  main { max-width: 960px; margin: 0 auto; padding: 8px 24px 24px; }

  .site-foot {
    max-width: 960px; margin: 0 auto; padding: 18px 24px 32px;
    color: var(--muted); font: 12px/1.4 var(--mono); text-align: center;
  }

  /* ---------- week head, lede and strip ---------- */
  .weekhead { padding: 8px 0 8px; }
  .weekline { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
  .weekline .wk { margin: 0; font: 800 34px/1.05 var(--display); letter-spacing: -0.03em; }
  .weekline .dates { font: 600 16px/1.2 var(--display); color: var(--ink2); }
  .weeknav { margin-left: auto; display: flex; gap: 16px; font: 600 13px/1.2 var(--display); }
  .weeknav a { color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--line); }
  .weeknav a:hover { color: var(--ink); }
  .weekline .meta { font: 12.5px/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
  .note { margin: 10px 0 0; display: inline-block; font: 500 12.5px/1.4 var(--mono); color: var(--hot-ink); background: var(--hot-wash); padding: 5px 9px; border-radius: 4px; }
  .lede { margin: 16px 0 14px; max-width: var(--measure); font: 19px/1.45 var(--read); color: var(--ink2); }
  .lede b { color: var(--ink); font-weight: 600; }

  .strip { display: grid; grid-template-columns: 5fr 2.6fr 1fr; gap: 10px; margin-bottom: 18px; }
  .strip .tier { display: grid; grid-template-rows: auto 1fr; gap: 5px; min-width: 0; }
  .tier-name { font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .strip .cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
  .strip .cell {
    display: grid; gap: 10px; align-content: space-between; min-height: 82px; padding: 9px 10px 10px;
    border-radius: 5px; text-decoration: none; transition: transform .12s ease; position: relative;
  }
  /* The leading layer: a ring in ink plus a word, so it reads without the heat colour. */
  .strip .cell[data-lead] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
  .strip .lead-tag {
    position: absolute; top: 8px; right: 8px; padding: 1px 5px; border-radius: 3px;
    background: var(--ink); color: var(--bg); font: 600 9.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  }
  .strip a.cell:hover { transform: translateY(-2px); }
  .strip .ln { font: 600 14px/1.1 var(--display); overflow-wrap: anywhere; }
  .strip .gl { font: 10.5px/1.25 var(--mono); }
  .strip .n { font: 700 24px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .strip span.cell .n { opacity: .7; }
  @media (prefers-reduced-motion: reduce) { .strip a.cell:hover { transform: none; } }
  .h0 { background: var(--h0); color: var(--h-lo); }
  .h1 { background: var(--h1); color: var(--h-lo); }
  .h2 { background: var(--h2); color: var(--h-lo); }
  .h3 { background: var(--h3); color: var(--h-lo); }
  .h4 { background: var(--h4); color: var(--h-hi); }
  .h5 { background: var(--h5); color: var(--h5-ink); }

  /* Pinned copy of the strip: one line of small rectangles, shown by strip.js once the full strip has scrolled away. */
  :root { --pinbar-h: 40px; --pinbar-full: calc(var(--pinbar-h) + env(safe-area-inset-top, 0px)); }
  .strip-mini {
    box-sizing: border-box; height: var(--pinbar-full); overflow: hidden;
    position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: var(--bg);
    border-bottom: 1px solid var(--line); padding: env(safe-area-inset-top, 0px) 0 0;
  }
  .strip-mini-in {
    max-width: 960px; margin: 0 auto; padding: 6px 24px; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none;
  }
  .strip-mini-in::-webkit-scrollbar { display: none; }
  .strip-mini .mini {
    flex: 1 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 5px 9px; border-radius: 3px; text-decoration: none; white-space: nowrap;
  }
  .strip-mini .mini[data-lead] { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--ink); }
  .strip-mini span.mini .n { opacity: .7; }
  @media print { .strip-mini { display: none; } }

  /* ---------- layer sections and cards ---------- */
  /* The pinned .strip-mini's height IS --pinbar-full (--pinbar-h plus the safe-area inset); scroll-padding uses it and strip.js reads it back from scroll-padding-top. strip.js adds html.pinbar only when the bar can show, so scroll-padding (not per-section scroll-margin) keeps it off whatever
     the browser scrolls to: a #layer jump (12px margin + 40px padding), and focus moving up through the cards. */
  html.pinbar { scroll-padding-top: var(--pinbar-full); }
  section.layer { padding-top: 18px; scroll-margin-top: 12px; }
  .layer-head {
    margin: 0; padding: 12px 0 6px; border-top: 2px solid var(--ink);
    display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  }
  .layer-head .ln { font: 700 20px/1.1 var(--display); letter-spacing: -0.015em; }
  .layer-head .gl { font: 12px/1.2 var(--mono); color: var(--muted); }
  .layer-head .n { margin-left: auto; font: 600 14px/1 var(--mono); color: var(--muted); }

  .item { padding: 16px 0 18px; border-top: 1px solid var(--line-soft); display: grid; gap: 7px; }
  .layer-head + .item { border-top: none; }
  .kicker { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
  .kicker .co { font: 600 14px/1.2 var(--display); color: var(--ink); text-decoration: none; }
  a.co:hover { color: var(--hot-ink); }
  .kicker .type, .kicker .date { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
  .kicker .date { font-variant-numeric: tabular-nums; }
  .chip {
    display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: 999px;
    padding: 1px 7px; font: 500 10px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  }
  .chip.model { color: var(--model); } .chip.platform { color: var(--platform); }
  .chip.enterprise { color: var(--enterprise); } .chip.enabler { color: var(--enabler); }
  .chip.new { color: var(--hot-ink); } .chip.returning { color: var(--muted); border-color: var(--line); }
  .kicker .new { color: var(--hot-ink); border: 1px solid currentColor; border-radius: 3px; padding: 1px 5px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
  .layer-tag, .also-layer {
    display: inline-flex; font: 500 10px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase;
    background: var(--sunk); color: var(--ink2); border-radius: 3px; padding: 1px 6px;
  }
  .item h3 { margin: 0; max-width: 62ch; font: 600 19px/1.3 var(--display); letter-spacing: -0.012em; }
  .item .why, .item > .summary { margin: 0; max-width: var(--measure); font: 17px/1.5 var(--read); color: var(--ink2); }
  .also { margin: 0; display: flex; gap: 6px; align-items: center; font: 11px/1.3 var(--mono); color: var(--muted); }
  details.more { font-size: 14px; color: var(--ink2); }
  details.more > summary {
    cursor: pointer; list-style: none; display: inline-flex; flex-wrap: wrap; gap: 12px;
    font: 500 12px/1.6 var(--mono); color: var(--muted);
  }
  details.more > summary::-webkit-details-marker { display: none; }
  details.more .more-label { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
  details.more[open] .more-label::after { content: " ↑"; }
  details.more > .summary { margin: 10px 0 0; max-width: var(--measure); line-height: 1.55; }
  .who { margin: 8px 0 0; font: 12px/1.4 var(--mono); color: var(--muted); }
  .x-quotes { margin-top: 10px; display: grid; gap: 8px; }
  blockquote.x-quote { margin: 0; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
  blockquote.x-quote p { margin: 0 0 6px; white-space: pre-wrap; color: var(--ink); font: 14.5px/1.5 var(--read); }
  blockquote.x-quote a, .x-url { color: var(--muted); font: 11px/1.3 var(--mono); text-decoration: none; border-bottom: 1px solid var(--line); word-break: break-all; }
  blockquote.x-quote a:hover { color: var(--hot-ink); border-color: var(--hot-ink); }
  .sources { margin-top: 10px; font: 12px/1.4 var(--mono); display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); }
  .sources a { color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
  .sources a:hover { color: var(--hot-ink); border-color: var(--hot-ink); }

  /* ---------- explore: company groups ---------- */
  section.company { padding-top: 16px; }
  .company h2 {
    margin: 0; padding: 12px 0 4px; border-top: 2px solid var(--ink);
    font: 700 19px/1.25 var(--display); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  }
  .company h2 a.name { color: inherit; text-decoration: none; }
  .company h2 a.name:hover { color: var(--hot-ink); }
  .company h2 a.handle { color: var(--muted); font: 12px/1 var(--mono); text-decoration: none; }
  .company h2 .meta { margin-left: auto; color: var(--muted); font: 400 12px/1 var(--mono); }
  .company h2 + .item { border-top: none; }

  .empty { color: var(--muted); padding: 60px 8px; text-align: center; font: 18px/1.5 var(--read); }
  .empty a { color: var(--hot-ink); }

  /* ---------- archive ---------- */
  .table-wrap { overflow-x: auto; margin-top: 8px; }
  table.archive, table.matrix { border-collapse: separate; border-spacing: 3px; width: 100%; font-variant-numeric: tabular-nums; }
  table.archive, table.matrix { table-layout: fixed; }
  table.archive { min-width: 860px; }
  col.c-wk { width: 118px; }
  col.c-tot { width: 118px; }
  col.c-actor { width: 150px; }
  table.archive th, table.matrix th { font: 500 11px/1.2 var(--mono); color: var(--muted); text-align: center; padding: 4px 4px; font-weight: 500; }
  table.archive thead tr.tiers th { text-align: left; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; border-bottom: 1px solid var(--line); }
  th.lh .ln { display: block; font: 600 13px/1.1 var(--display); color: var(--ink); }
  th.lh .gl { display: block; font: 10px/1.2 var(--mono); color: var(--muted); margin-top: 2px; }
  th.lh.tier-plumbing, th.tier-name.tier-plumbing { border-left: 6px solid var(--bg); }
  th.wkh, th.toth { text-align: left; }
  tr.year th { text-align: left; padding: 16px 4px 4px; font: 700 18px/1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
  tr.wk th { text-align: left; white-space: nowrap; }
  tr.wk th a { font: 600 13px/1 var(--display); color: var(--ink); text-decoration: none; margin-right: 8px; }
  tr.wk th a:hover { color: var(--hot-ink); }
  tr.wk th .d { font: 11px/1 var(--mono); color: var(--muted); }
  tr.wk th .live { margin-left: 8px; font: 500 10px/1 var(--mono); color: var(--hot-ink); background: var(--hot-wash); padding: 3px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; }
  table.archive td { height: 30px; text-align: center; border-radius: 3px; font: 600 13px/1 var(--display); }
  table.archive td a { display: block; line-height: 30px; text-decoration: none; color: inherit; border-radius: 3px; }
  table.archive td a:hover { outline: 2px solid var(--ink); }
  table.archive td.tot { background: none; text-align: left; white-space: nowrap; padding-left: 4px; }
  /* The week column stays put when the grid scrolls sideways on a phone. */
  tr.wk th, th.wkh, tr.tiers th:first-child, tr.year th { position: sticky; left: 0; z-index: 1; background: var(--bg); }
  .bar { display: inline-block; vertical-align: middle; height: 10px; border-radius: 0 3px 3px 0; background: var(--ink2); max-width: 80px; }
  tr.cur .bar { background: var(--hot); }
  .bar.b0 { width: 2px; background: var(--line); }
  .bar.b0 { width: 0%; }
  .bar.b1 { width: 10%; }
  .bar.b2 { width: 20%; }
  .bar.b3 { width: 30%; }
  .bar.b4 { width: 40%; }
  .bar.b5 { width: 50%; }
  .bar.b6 { width: 60%; }
  .bar.b7 { width: 70%; }
  .bar.b8 { width: 80%; }
  .bar.b9 { width: 90%; }
  .bar.b10 { width: 100%; }
  .tot .tn { font: 500 12px/1 var(--mono); color: var(--muted); }
  .matrix-block, .archive-block { margin-top: 40px; }
  .matrix-block h2, .archive-block h2 { margin: 0; padding-top: 12px; border-top: 2px solid var(--ink); font: 700 20px/1.2 var(--display); }
  .matrix-block .note { background: none; color: var(--ink2); padding: 0; font: 16px/1.5 var(--read); max-width: var(--measure); }
  table.matrix { min-width: 560px; }
  table.matrix tbody th { text-align: left; font: 600 13px/1.2 var(--display); color: var(--ink); white-space: nowrap; }
  table.matrix td { height: 34px; text-align: center; border-radius: 3px; font: 600 13px/1 var(--display); }

  @media (max-width: 720px) {
    /* Sticky, the filter bar (selects + search + chips) is ~180px of a 390px-wide screen. */
    .filters { position: static; }
    /* One scrolling row on phones. The right edge fades so a cut-off chip reads as "more this way";
       the end padding lets the last chip scroll clear of the fade. */
    .layer-chips {
      flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; padding-right: 40px;
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    }
    header.mast, .pagehead, main, .filters { padding-left: 16px; padding-right: 16px; }
    .wordmark { font-size: 24px; }
    .strip { grid-template-columns: 1fr; }
    .strip .cell { min-height: 72px; padding: 8px; }
    /* Five cells share 358px here, so a corner tag would sit on the layer name: put it in the flow. */
    .strip .lead-tag { position: static; justify-self: start; }
    /* Eight layers do not fit in 358px: fade the right edge like .layer-chips, and let the last one scroll clear of it. */
    .strip-mini-in {
      padding: 6px 40px 6px 16px;
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    }
    .stats { margin-left: 0; }
  }