/* TRAE — Hands-on Tasks
   See the direction contract in index.html.

   One calm neutral field, one blue action. Every colour is a role declared
   twice: light appearance on :root, dark appearance under
   :root[data-theme="dark"]. Both are checked against AA on their own ground.
   Colour that isn't neutral or accent comes only from the data's emoji. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Grounds and surfaces */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-hi: #ffffff;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-hi: rgba(120, 120, 128, 0.2);
  --hairline: rgba(0, 0, 0, 0.1);
  --veil: rgba(255, 255, 255, 0.94);
  --veil-blur: rgba(255, 255, 255, 0.72);

  /* Ink */
  --text: #1d1d1f;
  --text-2: #4b4b50;
  --text-3: #6b6b70;

  /* One accent */
  --accent: #0071e3;
  --accent-hi: #0077ed;
  --accent-txt: #ffffff;
  --link: #0066cc;
  --link-hi: #0055aa;
  --tint: rgba(0, 113, 227, 0.16);
  --tint-hi: rgba(0, 113, 227, 0.18);
  --focus: #0071e3;

  /* Elevation */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -10px rgba(0, 0, 0, 0.1);
  --shadow-hi: 0 2px 5px rgba(0, 0, 0, 0.05), 0 18px 40px -14px rgba(0, 0, 0, 0.18);

  /* iOS segmented control */
  --thumb: #ffffff;
  --thumb-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);

  /* Notice (a dark HUD on both appearances, as Apple's own toasts are) */
  --hud: #1d1d1f;
  --hud-text: #f5f5f7;
  --hud-warn: #ff453a;

  --scroll: rgba(0, 0, 0, 0.22);
  --scroll-hi: rgba(0, 0, 0, 0.36);

  /* Type */
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  /* Rhythm */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;
  --s9: 64px;
  --s10: 96px;

  --page: 1280px;
  --gut: clamp(16px, 4vw, 40px);
  --r-card: 20px;
  --r-fill: 12px;
  --r-pill: 980px;
  --nav-h: 56px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 180ms;
  --t: 260ms;
  --t-slow: 380ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #1d1d1f;
  --surface-hi: #2a2a2c;
  --fill: rgba(120, 120, 128, 0.28);
  --fill-hi: rgba(120, 120, 128, 0.4);
  --hairline: rgba(255, 255, 255, 0.12);
  --veil: rgba(0, 0, 0, 0.9);
  --veil-blur: rgba(0, 0, 0, 0.7);

  --text: #f5f5f7;
  --text-2: #c8c8cd;
  --text-3: #9b9ba1;

  --accent: #0071e3;
  --accent-hi: #0d84f5;
  --accent-txt: #ffffff;
  --link: #2997ff;
  --link-hi: #61b0ff;
  --tint: rgba(41, 151, 255, 0.26);
  --tint-hi: rgba(41, 151, 255, 0.34);
  --focus: #2997ff;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-hi: 0 14px 34px -12px rgba(0, 0, 0, 0.9);

  --thumb: #636366;
  --thumb-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);

  --hud: #2c2c2e;
  --hud-text: #f5f5f7;

  --scroll: rgba(255, 255, 255, 0.24);
  --scroll-hi: rgba(255, 255, 255, 0.4);
}

/* ── Base ──────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 115%;                      /* 1rem = 18.4px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

button {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

::selection { background: var(--tint-hi); color: var(--text); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

* { scrollbar-color: var(--scroll) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hi); background-clip: content-box; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: var(--s3);
  left: 50%;
  z-index: 90;
  padding: 12px 22px;
  color: var(--accent-txt);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--accent);
  border-radius: var(--r-pill);
  transform: translate(-50%, -180%);
  transition: transform var(--t) var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

.emoji {
  font-family: var(--emoji);
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
}

/* ── Global bar ────────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--veil);
  border-bottom: 1px solid var(--hairline);
}

.bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  max-width: var(--page);
  min-height: var(--nav-h);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  min-width: 0;
}
.brand__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.021em;
}
.brand__sub {
  color: var(--text-3);
  font-size: 0.8125rem;
  letter-spacing: -0.006em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar__aux {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.clock {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  color: var(--text-3);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.004em;
  white-space: nowrap;
}
.clock__mer { font-size: 0.6875rem; font-weight: 500; }

.appearance {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text-2);
  border-radius: var(--r-pill);
  transition: background var(--t-fast) linear, color var(--t-fast) linear,
    transform var(--t-fast) var(--ease);
}
.appearance:hover { background: var(--fill); color: var(--text); }
.appearance:active { transform: scale(0.92); }
.appearance__ico { display: block; width: 21px; height: 21px; }
.appearance__ico svg { stroke-width: 1.6; }
.ico-sun { display: none; }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .bar, .tools {
    background: var(--veil-blur);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 104px) var(--gut) clamp(32px, 5vw, 56px);
  text-align: center;
}

.hero__title {
  font-size: clamp(3.4rem, 13vw, 5.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.032em;
}

.hero__sub {
  margin-top: clamp(6px, 1.4vw, 14px);
  color: var(--text-2);
  font-size: clamp(1.375rem, 4.4vw, 2rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.024em;
}

/* The instruction, three sentences: stacked one per line while the hero is
   centred, so its three lines are the three things the attendee does, and a
   sentence never breaks in the middle. From 720px the three become three
   beats on one line — see the masthead in the breakpoints. */
.hero__lede {
  max-width: 34ch;
  margin: clamp(18px, 2.6vw, 26px) auto 0;
  color: var(--text-2);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.44;
  letter-spacing: -0.014em;
}
.hero__lede span { display: block; }

/* ── Sticky tools ──────────────────────────────────────────── */

.tools {
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
  background: var(--veil);
  border-bottom: 1px solid var(--hairline);
}

.tools__in {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s3) var(--gut);
}

/* Segmented control */
.seg {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px;
  background: var(--fill);
  border-radius: 11px;
}

.seg__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n, 2));
  background: var(--thumb);
  border-radius: 8px;
  box-shadow: var(--thumb-shadow);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform var(--t-slow) var(--ease-io);
}

.tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 0;
  height: 38px;
  padding: 0 var(--s3);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  border-radius: 8px;
  transition: color var(--t-fast) linear, transform var(--t-fast) var(--ease);
}
.tab:active { transform: scale(0.97); }
.tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.tab__glyph { flex: none; font-size: 15px; }
.tab__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tab__count {
  flex: none;
  color: var(--text-3);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) linear;
}
.tab[aria-selected="true"] .tab__count { color: var(--text-2); }

/* Search */
.search {
  position: relative;
  flex: 0 1 300px;
  min-width: 0;
}
.search__ico {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--text-3);
  transform: translateY(-50%);
  transition: color var(--t-fast) linear;
  pointer-events: none;
}
.search__ico svg { stroke-width: 2; }
.search:focus-within .search__ico { color: var(--text-2); }

.search__input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 36px;
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: -0.011em;
  background: var(--fill);
  border: 0;
  border-radius: var(--r-fill);
  outline: none;
  caret-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--t-fast) linear, box-shadow var(--t-fast) linear;
  text-overflow: ellipsis;
}
.search__input::placeholder { color: var(--text-3); opacity: 1; }
.search__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tint-hi);
}
.search__input::-webkit-search-decoration,
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-results-button { -webkit-appearance: none; display: none; }

.search__clear {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--text-3);
  border-radius: var(--r-pill);
  transform: translateY(-50%);
  transition: color var(--t-fast) linear, background var(--t-fast) linear;
}
.search__clear svg { width: 15px; height: 15px; stroke-width: 2; }
.search__clear:hover { color: var(--text); background: var(--fill-hi); }

/* ── Board ─────────────────────────────────────────────────── */

.gallery {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(48px, 5vw, 72px) var(--gut) clamp(56px, 8vw, 96px);
}

/* Search feedback only. There is no section header: the grid opens on the
   tiles, and this line exists solely while a query is narrowing them. */
.panel__found {
  margin-bottom: var(--s5);
  color: var(--text-3);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.panel__found b { color: var(--text-2); font-weight: 600; }

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
.card[hidden] {
  display: none;
}


.card {
  --pad: var(--s6);
  --rows: var(--s6);            /* the tile's region gap: never wider than its own inset */
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--nav-h) + 84px);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    background var(--t) linear;
}
@media (hover: hover) {
  .card:hover {
    background: var(--surface-hi);
    box-shadow: var(--shadow-hi);
    transform: translateY(-2px);
  }
}
.card.is-target {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* The tile is two groups and a footer: the emoji and task number sit tight
   against the name they label, then the prompt block separates as its own
   region. */
.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.card__emoji { font-size: 29px; }
.card__n {
  color: var(--text-3);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.019em;
  text-wrap: pretty;
}

.card__body { margin-top: var(--rows); }
.card__label {
  margin-bottom: 5px;
  color: var(--text-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.002em;
}
.card__text {
  max-width: 52ch;                /* the prompt's reading measure, in any column */
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: -0.009em;
  text-wrap: pretty;
}

.card__foot {
  display: flex;
  align-items: center;
  margin-top: auto;              /* footers line up across a row of cards */
  padding-top: var(--rows);
}

/* ── Buttons and links ─────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 var(--s5);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  text-decoration: none;          /* .btn is element-agnostic: the 404's link wears it too */
  border-radius: var(--r-pill);
  transition: background var(--t-fast) linear, color var(--t-fast) linear,
    transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.96); }

.btn--go {
  color: var(--accent-txt);
  background: var(--accent);
}
.btn--go:hover { background: var(--accent-hi); }

.btn--quiet {
  color: var(--link);
  background: var(--fill);
}
.btn--quiet:hover { color: var(--link-hi); background: var(--fill-hi); }

.btn__ico { position: relative; flex: none; width: 17px; height: 17px; }
.btn__ico svg { position: absolute; inset: 0; stroke-width: 1.9; }
.btn__ico .ico-check,
.copy.is-copied .ico-copy { opacity: 0; transform: scale(0.7); }
.copy.is-copied .ico-check { opacity: 1; transform: none; }
.btn__ico svg { transition: opacity var(--t-fast) linear, transform var(--t) var(--ease); }
.btn__label { transition: opacity var(--t-fast) linear; }
.copy { min-width: 9.7em; }        /* holds both labels, so the pill never resizes */

/* ── Search results ───────────────────────────────────────── */

mark {
  color: var(--text);
  background: var(--tint);
  border-radius: 4px;
  box-decoration-break: clone;
  padding: 0.06em 0.14em;
  margin: 0 -0.04em;
}

.empty {
  max-width: 42ch;
  margin: clamp(32px, 6vw, 64px) auto;
  text-align: center;
}
.empty__title {
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
.empty__body {
  margin-top: var(--s3);
  color: var(--text-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.011em;
  text-wrap: pretty;
}
.empty__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  margin-top: var(--s6);
}
.empty__glyph { font-size: 16px; }

/* ── Footer ────────────────────────────────────────────────── */

.foot {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s7) var(--gut) var(--s9);
  border-top: 1px solid var(--hairline);
}
.foot__line {
  color: var(--text-3);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: -0.004em;
}

/* ── Not found ─────────────────────────────────────────────── */

/* The 404 document reuses the masthead, so the page reads as this site before
   it reads as an error. It carries no bars: the clock, the appearance toggle
   and the mode control all belong to app.js, which this page never loads, and
   a control that cannot act is worse than no control. The stored appearance
   still applies, because theme.js runs here too. */
.nf {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* more air below than above, so the block sits off dead centre */
  padding-block: var(--s8) clamp(48px, 8vw, 104px);
}
.nf .hero { padding-top: 0; padding-bottom: 0; }

/* The lockup is one h1, so the heading is announced as "404 Page not found"
   rather than as a number and an orphaned line. Its two parts are spans: the
   masthead blockifies them from 720px, and below it they need blocking out. */
.nf .hero__title,
.nf .hero__sub { display: block; }

.nf__act { margin-top: clamp(28px, 4vw, 40px); }

/* The one authored moment this page can afford: the gallery's own rise,
   staggered in reading order. Gated on the class theme.js sets, so the
   content is visible by default exactly as the tiles are. */
:root.js .nf .hero__id { animation: rise 620ms var(--ease) both; }
:root.js .nf .hero__lede { animation: rise 620ms var(--ease) 80ms both; }
:root.js .nf__act { animation: rise 620ms var(--ease) 160ms both; }

/* ── Notice ────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: max(var(--s5), env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: max-content;
  max-width: min(28rem, calc(100vw - 32px));
  padding: 13px var(--s5) 13px var(--s4);
  color: var(--hud-text);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.011em;
  background: var(--hud);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate(-50%, 14px) scale(0.96);
  transition: opacity var(--t) linear, transform var(--t-slow) var(--ease);
  pointer-events: none;
}
.toast.is-up { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast__ico { position: relative; flex: none; width: 19px; height: 19px; }
.toast__ico svg { position: absolute; inset: 0; stroke-width: 2.1; }
.toast__ico .ico-warn { color: var(--hud-warn); }
.toast[data-state="ok"] .ico-warn,
.toast[data-state="warn"] .ico-check { display: none; }
.toast[data-state="warn"] { max-width: min(30rem, calc(100vw - 32px)); }

/* ── Motion ────────────────────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.card.is-rise {
  animation: rise 620ms var(--ease) both;
  animation-delay: var(--d, 0ms);
}

@keyframes pop {
  40% { transform: scale(1.035); }
  to { transform: none; }
}
.copy.is-pop { animation: pop 420ms var(--ease); }

/* ── Breakpoints ───────────────────────────────────────────── */

@media (max-width: 719px) {
  .tools__in { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .search { flex: 1 1 auto; }
}

@media (max-width: 599px) {
  :root { --nav-h: 0px; --r-card: 18px; }
  .bar { position: static; }
  .clock { display: none; }
  .card { --pad: var(--s5); --rows: var(--s5); }
}

@media (max-width: 400px) {
  .tab__glyph { display: none; }
}

@media (min-width: 720px) {
  .seg { flex: 0 1 auto; width: min(100%, 22rem); }
  .tab { padding: 0 var(--s4); }
  .search { flex: 0 1 240px; margin-left: auto; }

  /* Once the page is wider than a phone, the hero becomes a masthead: two
     left-set lines that both begin on the page module's left edge, so one
     left edge runs from the bars down through the tiles to the footer and
     nothing in the hero starts mid-page.

     Line one is a lockup. The title and its descriptor are baseline-locked by
     flex, which makes the lockup exactly as tall as the display's own line
     box — the descriptor rides that baseline and costs no height, so the hero
     is two lines rather than three, and shorter than the centred stack it
     replaces.

     Line two is the instruction, stepped up from body size to a real subhead
     and set as three sentence beats on one line, each beat still a whole
     sentence. It overhangs line one, which is what makes the pair read as one
     composition: a title line with a longer standfirst under it, sharing an
     edge, with no gap between them for either half to float in. Both lines
     grow with the page so the block keeps filling it, and the beats wrap
     whole if a fallback face ever runs wide. */
  .hero { text-align: left; }
  .hero__id {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--s7);
  }
  .hero__sub {
    margin-top: 0;
    font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  }
  .hero__lede {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.9em;
    row-gap: 0.1em;
    max-width: none;
    margin: var(--s3) 0 0;
    color: var(--text-3);
    font-size: clamp(1.375rem, 2.9vw, 1.75rem);
    line-height: 1.3;
    letter-spacing: -0.021em;
  }
}

@media (min-width: 1000px) {
  :root { --nav-h: 60px; --r-card: 22px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
  .card { --pad: var(--s7); }
  .tab { font-size: 0.875rem; height: 40px; }
  .search { flex: 0 1 320px; }
}

/* A projected or 27-inch screen: give the two tile columns the room to reach a
   full reading measure, without letting the page touch its own edges. */
@media (min-width: 1600px) {
  :root { --page: 1400px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}