/* Palette measured from the original Panaroma theme: #ff6600 accent, #151515
   bar, #eeeded paper. No webfont -- the original pulls Roboto Condensed from
   Google, this does not. */
:root {
  --accent: #ff6600;
  --ink: #1a1a1a;
  --bar: #151515;
  --paper: #eeeded;
  --grey: #606266;
  --hair: #d8d6d3;
  /* ⛔ Not a front-loaded ease. cubic-bezier(.25,.8,.25,1) covers ~80% of the
     distance in the first quarter of its duration, so a 2.2s opening still
     looked instant and then crawled. This one spends its time in the middle,
     which is what "spread apart slowly" actually means. */
  --ease: cubic-bezier(.45, .05, .35, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* ── header ───────────────────────────────────────────────────────────── */
.bar {
  background: var(--bar);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  padding: 18px clamp(16px, 4vw, 44px);
}
.brand { font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.bar nav { display: flex; gap: clamp(18px, 3vw, 38px); }
.bar nav a {
  color: #cfcfcf; text-decoration: none;
  font-size: .88rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.bar nav a:hover { color: #fff; }
.bar nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ── the five panels ──────────────────────────────────────────────────── */
/* Stacking order, and it is the whole point of this round:
     ::before  the photograph        (z-index 0)
     ::after   the colour wash       (z-index 0, painted after ::before)
     .inner    the white type        (z-index 1, above both)
   A pseudo-element is generated as the LAST child of its element, so without
   the z-index on .inner the wash paints over the text -- which is why the type
   came out orange-on-orange and everything looked veiled. */
.panels { flex: 1; display: flex; min-height: 0; }

.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: flex-grow 1.25s var(--ease);
}
.panel + .panel { border-left: 1px solid rgba(0,0,0,.35); }

.panel::before {
  content: "";
  position: absolute; inset: -2%;
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  /* Closed panels were dulled twice over -- a brightness cut AND a dark wash --
     which is where "the whole thing is grey" came from. The picture is its own
     colour now. */
  filter: saturate(1) brightness(1);
  transform: scale(1);
  transition: transform 3.5s var(--ease), filter 1.2s var(--ease);
}
.panel::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.26));
  transition: background 1.2s var(--ease);
}
.panel:hover, .panel:focus-visible { flex-grow: 3.2; }
.panel:hover::before, .panel:focus-visible::before {
  filter: saturate(1.05) brightness(1.02);
  transform: scale(1.05);
}
.panel:hover::after, .panel:focus-visible::after {
  background: linear-gradient(180deg, rgba(233,99,6,.88), rgba(198,72,0,.92));
}
.panels:hover .panel:not(:hover)::before { filter: saturate(.8) brightness(.86); }
.panel:focus-visible { box-shadow: inset 0 0 0 3px rgba(255,255,255,.9); }

/* Closed: the name runs down the panel. A title at reading size does not fit
   across a fifth of the screen, which is why the original shows none at all. */
.tab {
  position: absolute;
  z-index: 1;
  left: 50%; bottom: clamp(20px, 3vh, 40px);
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.85);
  opacity: 1;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.panel:hover .tab, .panel:focus-visible .tab { opacity: 0; transition-duration: .3s; }

.panel .inner {
  position: relative;
  z-index: 1;                       /* above the wash -- see the note above */
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 2.6vw, 52px);
  color: #fff;
}
.panel h2 {
  grid-row: 1;
  margin: 0;
  font-size: clamp(3.2rem, 4.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 2px 14px rgba(110, 45, 0, .5);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.panel p {
  grid-row: 3;
  margin: 0;
  max-width: 30rem;
  font-size: 1.95rem;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 12px rgba(110, 45, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .7s;
}
.panel:hover h2, .panel:focus-visible h2 { opacity: 1; transition-delay: .15s; }
.panel:hover p, .panel:focus-visible p {
  opacity: 1; visibility: visible; transform: none;
  /* Half a second later than the heading, so the panel is visibly open before
     the bottom text arrives instead of both landing together. */
  transition: opacity .55s var(--ease) .75s, transform .55s var(--ease) .75s, visibility 0s;
}

/* ── contact page ─────────────────────────────────────────────────────── */
main.page { flex: 1; padding: clamp(30px, 6vw, 68px) clamp(16px, 4vw, 44px); }
main.page .wrap { max-width: 48rem; margin: 0 auto; }
main.page h1 {
  margin: 0 0 30px;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
main.page h1::after {
  content: ""; display: block; width: 3.5rem; height: 3px;
  background: var(--accent); margin-top: 14px;
}
.rows > div {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  padding: 17px 0; border-bottom: 1px solid var(--hair);
  font-size: 1.08rem;
}
.rows .label {
  min-width: 9rem; color: var(--grey);
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding-top: .4em;
}
.rows a {
  color: #c24d00; text-decoration: none;
  border-bottom: 1px solid rgba(194,77,0,.35);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.rows a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── language switch ──────────────────────────────────────────────────── */
/* In the top bar, to the right of the menu. It links to /cs/ and /en/
   explicitly, never to "/" -- the root is the address that redirects by
   Accept-Language, so a link there would bounce the visitor back to the
   language they were trying to leave. */
.bar .right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 30px);
  flex-wrap: wrap;
}
/* The glassy dark pill it had when it floated in the corner -- same padding,
   same type, same blur and shadow. Only the position changed.
   ⚠ The hairline border is the one addition: that pill lived over photographs,
   where dark-on-bright reads by itself; on the near-black bar it would dissolve
   into the background without an edge. */
/* ⛔ Written as `.bar .lang a`, not `.lang a`, and that is the whole reason this
   thing looked broken. The switcher IS a <nav> inside .bar, so `.bar nav a`
   applies to it -- and `.bar nav a` (one class, two types) is MORE specific than
   `.lang a` (one class, one type), so its `padding: 6px 0` won. With no
   horizontal padding the chip collapsed to the width of the text, "CS" wrapped
   one letter per line, and the active link became a tall orange sliver.
   `.bar .lang a` is two classes and a type, which outranks it. */
.bar .lang {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(18,18,18,.82);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.8);
}
.bar .lang a {
  display: block;
  padding: 7px 13px;
  border: 0;                 /* .bar nav a adds an underline border; not here */
  border-radius: 999px;
  color: #cfcfcf;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;       /* two letters must never wrap into a column */
  transition: background .25s var(--ease), color .25s var(--ease);
}
.bar .lang a:hover { color: #fff; background: rgba(255,255,255,.12); }
.bar .lang a[aria-current="page"] { background: var(--accent); color: #fff; }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot {
  background: var(--bar); color: #8d8d8d;
  padding: 14px clamp(16px, 4vw, 44px);
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}

/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .panels { flex-direction: column; }
  .panel { flex: none; min-height: 17rem; cursor: default; }
  .panel + .panel { border-left: 0; border-top: 1px solid rgba(0,0,0,.35); }
  .tab { display: none; }
  .panel::after { background: linear-gradient(180deg, rgba(233,99,6,.88), rgba(198,72,0,.92)); }
  .panel::before { filter: saturate(1) brightness(1); }
  .panels:hover .panel:not(:hover)::before { filter: saturate(1) brightness(1); }
  .panel h2 { opacity: 1; font-size: 2.2rem; white-space: normal; transition: none; }
  .panel p { opacity: 1; visibility: visible; transform: none; font-size: 1.25rem; transition: none; }
  .panel .inner { gap: 16px; }
}
/* ⛔⛔ This block is why three rounds of timing changes did nothing at all. This
   desktop has animations switched off system-wide -- KDE AnimationDurationFactor=0,
   gtk-enable-animations=false, gsettings enable-animations false -- so the browser
   reports prefers-reduced-motion: reduce, and the previous blanket
   `transition: none` here silenced the very movement being tuned. Durations and
   easing curves were argued over while nothing was ever animating.

   So the preference is now honoured narrowly rather than absolutely. What stays:
   the panel widening and the fades, because a width change and an opacity change
   are not what this preference protects against. What goes: the slow zoom on the
   photograph and the text sliding up, which are exactly what it does protect
   against. */
@media (prefers-reduced-motion: reduce) {
  .panel::before { transform: none; transition: filter 1.2s var(--ease); }
  .panel:hover::before, .panel:focus-visible::before { transform: none; }
  .panel p, .panel:hover p, .panel:focus-visible p { transform: none; }
}

/* ── GitHub icon in the bar ───────────────────────────────────────────── */
.bar .gh { display: flex; align-items: center; color: #cfcfcf; padding: 4px;
  border-radius: 50%; transition: color .3s var(--ease), background .3s var(--ease); }
.bar .gh:hover { color: #fff; background: rgba(255,255,255,.1); }
.bar .gh svg { width: 22px; height: 22px; display: block; fill: currentColor; }

/* ── profile page ─────────────────────────────────────────────────────── */
main.page .wrap.profile { max-width: 68rem; }
.profile h1 { margin-bottom: 22px; }
.sec { margin: 0 0 80px; scroll-margin-top: 84px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px; margin: 0 0 26px; }
.sec-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.sec-head h2::before { content: ""; width: 28px; height: 3px; background: var(--accent); }

/* In-page navigation: sticks to the top, marks the section being read. The
   backdrop appears only once it is stuck -- before that it would be a pale
   band over a page that has nothing under it. */
.subnav { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * clamp(16px, 4vw, 44px)) 40px;
  padding: 12px clamp(16px, 4vw, 44px); background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.subnav.stuck { background: rgba(238,237,237,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--hair); box-shadow: 0 8px 20px -18px rgba(0,0,0,.5); }
.subnav ol { list-style: none; margin: 0; padding: 4px; display: inline-flex; gap: 2px;
  background: #fff; border-radius: 999px; border: 1px solid var(--hair); }
.subnav a { display: block; padding: 7px 16px; border-radius: 999px; text-decoration: none; color: var(--grey);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease); }
.subnav a:hover { color: var(--ink); }

/* A section head that sticks right under the page navigation (the interests'
   title and filter). Sticky inside its own section, so it leaves with it.
   Like .subnav, the backdrop appears only once it is actually stuck. */
.sec-head.pin { position: sticky; top: var(--subnav-h, 66px); z-index: 4;
  margin-left: calc(-1 * clamp(16px, 4vw, 44px)); margin-right: calc(-1 * clamp(16px, 4vw, 44px));
  padding: 12px clamp(16px, 4vw, 44px); border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sec-head.pin.stuck { background: rgba(238,237,237,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--hair); box-shadow: 0 8px 20px -18px rgba(0,0,0,.5); }
.subnav a[aria-current="true"] { background: var(--accent); color: #fff; }

/* Scroll reveal. Hidden only under .js, which the page sets from a script, so
   without JavaScript nothing stays invisible. Under prefers-reduced-motion the
   fade stays and the rise goes -- the same narrow reading of that preference
   as the accordion on the home page (see the note at its media query). */
.js .reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease) calc(var(--i, 0) * 90ms), transform .8s var(--ease) calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .sec-head h2::before { width: 0; transition: width .9s var(--ease) .15s; }
.js .sec.in .sec-head h2::before { width: 28px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; } }

/* Jobs: cards; the bar is the job's stretch between the first job and today. */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.job { background: #fff; border-radius: 10px; padding: 20px 22px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 28px -18px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 4px; }
.job.in { transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .8s var(--ease); }
.job:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 34px -18px rgba(0,0,0,.45); }
.job .when { color: var(--accent); font-weight: 800; letter-spacing: .06em; font-size: .92rem; }
.job .role { font-weight: 800; font-size: 1.12rem; line-height: 1.3; }
.job .org { color: var(--grey); }
.job .track { margin-top: auto; padding-top: 16px; }
/* ⚠ .rail and .fill by class, never `.track div` / `.track span`: the scale
   under the bar is a div of spans too, and descendant selectors painted it as
   a second, orange-tipped bar. */
.job .rail { height: 6px; border-radius: 3px; background: #ebe9e6; position: relative; overflow: hidden; }
.job .fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent);
  left: var(--l); width: var(--w); min-width: 6px; }
.js .job .fill { transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) calc(var(--i, 0) * 90ms + .35s); }
.js .job.in .fill { transform: none; }
.job .scale { display: flex; justify-content: space-between; font-size: .7rem; color: #a3a09c; margin-top: 5px; letter-spacing: .06em; }

/* GitHub repositories. */
.repos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.repo { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 10px;
  padding: 20px 22px; color: inherit; text-decoration: none; border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 28px -18px rgba(0,0,0,.35); }
.repo.in { transition: transform .3s var(--ease), border-color .3s var(--ease), opacity .8s var(--ease); }
.repo:hover { transform: translateY(-2px); border-color: var(--accent); }
.repo .name { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; }
.repo .name svg { width: 18px; height: 18px; fill: var(--grey); flex: none; }
.repo .desc { color: #3b3b3b; font-size: .95rem; line-height: 1.55; flex: 1; }
.repo .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .84rem; color: var(--grey); }
.repo .lang::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c); margin-right: 6px; vertical-align: -1px; }
.repo .topics { display: flex; flex-wrap: wrap; gap: 6px; }
.repo .topics span { font-size: .74rem; padding: 2px 9px; border-radius: 999px; background: #fff1e6; color: #a84300; }

/* The "…" fold. Rows 0fr → 1fr animates to the content's own height. Folded
   only under .js: without JavaScript the button could not open it, so the
   cards are simply all shown and the button is not. */
.repos-more .repos { padding-top: 16px; }
.js .repos-more { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .7s var(--ease), opacity .5s var(--ease); }
.js .repos-more.open { grid-template-rows: 1fr; opacity: 1; }
.repos-more-in { overflow: hidden; min-height: 0; }
.repos-more .repo { opacity: 1; transform: none; }
.more-wrap { display: none; justify-content: center; margin-top: 22px; }
.js .more-wrap { display: flex; }
.more-btn { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 18px 9px 14px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; color: var(--grey);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .25s var(--ease), color .25s var(--ease); }
.more-btn:hover { border-color: var(--accent); color: var(--ink); }
.more-btn .dots { display: inline-flex; gap: 4px; }
.more-btn .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transition: transform .45s var(--ease); }
.more-btn[aria-expanded="true"] .dots i:nth-child(1) { transform: translateX(10px); }
.more-btn[aria-expanded="true"] .dots i:nth-child(3) { transform: translateX(-10px); }

/* Interests: decades, years, technology pills, project badges. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; padding: 7px 10px 7px 14px; border-radius: 999px;
  border: 1px solid var(--hair); background: #fff; color: var(--grey); display: inline-flex; align-items: center; gap: 8px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.filters button:hover { border-color: var(--accent); color: var(--ink); }
.filters .n { font-size: .68rem; letter-spacing: 0; min-width: 1.7em; padding: 1px 6px; border-radius: 999px;
  background: #f1efec; color: var(--grey); transition: background .25s var(--ease), color .25s var(--ease); }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.filters button[aria-pressed="true"] .n { background: rgba(255,255,255,.25); color: #fff; }
.decade { display: grid; grid-template-columns: 9rem 1fr; gap: 0 28px; padding: 26px 0; border-top: 1px solid var(--hair); }
.decade:first-child { border-top: 0; padding-top: 4px; }
/* Sticks below both bars: the page navigation and the pinned filter head.
   Their heights are measured by profile.js (--subnav-h, --pin-h); the
   fallbacks are their desktop heights. */
.decade .dec { font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px #c9c5c0; position: sticky; align-self: start;
  top: calc(var(--subnav-h, 66px) + var(--pin-h, 64px) + 18px); }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: 3.6rem 1fr; gap: 14px; align-items: start; }
.row .y { font-weight: 800; font-size: 1.05rem; color: var(--ink); padding-top: 5px; font-variant-numeric: tabular-nums; }
.row .what { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.pill { display: inline-block; background: #fff; border: 1px solid var(--hair); border-radius: 7px;
  padding: 4px 11px; font-size: .95rem; line-height: 1.4; transition: border-color .45s var(--ease), box-shadow .45s var(--ease); }
.sub { color: var(--grey); font-size: .86rem; }
.proj { display: inline-flex; align-items: center; gap: 8px; background: var(--bar); color: #fff;
  border-radius: 7px; padding: 4px 12px 4px 10px; font-size: .95rem; line-height: 1.4; }
.proj::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.proj em { font-style: normal; color: #ffb27a; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
/* Filtered: every item without the chosen role recedes to the SAME strength,
   wherever it sits, and a line with none of them dims its year as well.
   ⛔ One level of dimming only. Fading the whole line AND its items made the
   same unmatched item look lighter in a line without a match than in a line
   with one -- opacity on a parent and a child is two different looks, not one. */
.row .y, .pill, .proj, .sub { transition: opacity .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.interests:not([data-filter="all"]) :is(.pill, .proj, .sub):not(.match) { opacity: .3; }
.interests:not([data-filter="all"]) .row:not(.match) .y { opacity: .3; }
/* A detail belongs to the item before it and follows its state. */
.interests:not([data-filter="all"]) .pill.match + .sub { opacity: 1; }
.interests:not([data-filter="all"]) .pill.match { border-color: rgba(255,102,0,.55); box-shadow: 0 0 0 3px rgba(255,102,0,.08); }
.interests:not([data-filter="all"]) .proj.match { box-shadow: 0 0 0 3px rgba(255,102,0,.35); }

@media (max-width: 960px) { .jobs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .jobs, .repos { grid-template-columns: 1fr; }
  .decade { grid-template-columns: 1fr; gap: 14px; }
  .decade .dec { position: static; font-size: 2.4rem; }
  .subnav a { padding: 7px 12px; }
  /* One row of chips that scrolls sideways: wrapped into two or three rows,
     the pinned head would cover a third of a phone screen. */
  .sec-head.pin .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-right: calc(-1 * clamp(16px, 4vw, 44px)); padding-right: clamp(16px, 4vw, 44px); }
  .sec-head.pin .filters::-webkit-scrollbar { display: none; }
  .sec-head.pin .filters button { flex: none; }
}