/* Shared layout and components. Colours and fonts come from the theme file's tokens. */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
/* Keeps the page in the same place whether or not a page is long enough to scroll. */
html { scrollbar-gutter: stable; }
body { min-height: 100vh; line-height: 1.5; }
a { color: var(--text); text-decoration: none; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--sw); outline-offset: 3px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }
[hidden] { display: none !important; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(16px, 5vw, 48px);
  padding-right: clamp(16px, 5vw, 48px);
}

/* Both logo colours are in the page, so a theme switch never waits for an image. */
.brand-mark-space, :root[data-theme="space"] .brand-mark-fantasy { display: none; }
:root[data-theme="space"] .brand-mark-space { display: block; }

/* Top bar: a full-width bar with an icon nav, a quick search and the theme switch. */
html { scroll-padding-top: 84px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
/* A ruler of tick marks hangs under the bar and fades out toward both ends. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 7px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 8px) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 48px) 0 0 / 100% 7px no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.topbar-in { display: flex; align-items: stretch; gap: 24px; min-height: 66px; }
.tb-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.tb-name {
  font: 700 16px/1 var(--font-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tb-nav { display: flex; align-items: stretch; gap: 2px; }
.tb-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  font: var(--bold) 13px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.15s;
}
.tb-nav a:hover { color: var(--text); }
.tb-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background 0.15s;
}
.tb-nav a:hover::after { background: var(--line-2); }
.tb-nav a[aria-current="page"] { color: var(--accent-text); }
.tb-nav a[aria-current="page"]::after { background: var(--accent); }
.tb-nav svg, .tb-search svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tb-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar + main { padding-top: 36px; }
.tb-search { position: relative; }
.tb-search label {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 244px;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
  color: var(--dim);
  transition: border-color 0.15s, color 0.15s;
}
.tb-search label:hover { border-color: var(--line-2); }
.tb-search label:focus-within { border-color: var(--accent-text); color: var(--text); }
.tb-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 600 14px var(--font-body);
  text-overflow: ellipsis;
}
.tb-search input::placeholder { color: var(--dim); opacity: 0.85; }
.tb-search input::-webkit-search-cancel-button { display: none; }
.tb-search kbd {
  padding: 4px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font: 700 12px/1 var(--font-body);
  color: var(--dim);
}
.tb-search label:focus-within kbd { display: none; }
.tb-results {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 400px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.tb-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: calc(var(--radius-sm) - 4px);
}
.tb-result[aria-selected="true"], .tb-result:hover { background: var(--panel-2); }
.tb-result-title { font-weight: var(--bold); font-size: 15px; }
.tb-result-kind { font: var(--bold) 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.tb-empty { padding: 12px; font-size: 14px; color: var(--dim); }

/* The theme switch in the bar: one button that flips between the two themes. It shows the icon of the theme in use,
   and its label names the theme a click switches to. The attribute on <html> sets the icon from the first paint. */
.tb-theme {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: filter 0.15s;
}
.tb-theme:hover { filter: brightness(1.1); }
.tb-theme svg {
  display: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root:not([data-theme="space"]) .tb-theme .theme-fantasy,
:root[data-theme="space"] .tb-theme .theme-space { display: block; }
/* A page with a locked theme has nothing to switch. */
:root[data-theme-lock] .tb-theme { display: none; }

/* Buttons and chips */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font: var(--bold) 16px/1 var(--font-body);
  cursor: pointer;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.small { height: 44px; }
.btn.ghost { background: transparent; border: 2px solid var(--line-2); color: var(--text); }
.btn.ghost:hover { background: var(--panel); color: #fff; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 13px;
  border: 1.5px solid var(--text);
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  color: var(--text);
  font: var(--bold) 13px/1 var(--font-body);
  white-space: nowrap;
}
.chip.sw { border-color: var(--sw); color: var(--sw); }
.chip.dnd { border-color: var(--dnd); color: var(--dnd); }
.chip.oth { border-color: var(--oth); color: var(--oth); }
.chip.mixed { border-color: var(--mixed); color: var(--mixed); }
.chip.plain { border-color: var(--line-2); color: var(--dim); }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* Panels and cards */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.card { display: flex; flex-direction: column; overflow: hidden; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.card-desc { font-size: 15px; line-height: 23px; color: var(--dim); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}
.gm { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: var(--bold); }
.gm i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--accent-text);
  font-size: 13px;
  font-style: normal;
}

/* Art panels: a picture with a dark fade and the title over it */
.art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.art > * { z-index: 0; }
.art-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.art.no-fade::after { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 1;
  background: linear-gradient(0deg, var(--art-fade), transparent);
}
.art-chip { position: absolute; left: 14px; top: 14px; z-index: 2; }
.art-chip.right { left: auto; right: 14px; }
.art-title {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
}
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--stars-a) 0 1px, transparent 1.6px),
    radial-gradient(circle, var(--stars-b) 0 0.8px, transparent 1.4px);
  background-size: 73px 61px, 41px 47px;
  background-position: 0 0, 17px 23px;
}
/* Little scenes behind games with no cover: a ringed planet, a moon over peaks, a sun over hills. */
.scene { position: absolute; }
.scene.planet { right: 12%; top: 14%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--art-planet); }
.scene.ring { right: 2%; top: 38%; width: 70%; height: 14%; border: 3px solid var(--art-ring); border-radius: 50%; transform: rotate(-14deg); }
.scene.moon { left: 18%; top: 12%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--art-moon); }
.scene.peaks {
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: var(--bg);
  opacity: 0.75;
  clip-path: polygon(0 55%, 14% 20%, 26% 50%, 40% 0, 54% 48%, 68% 18%, 82% 46%, 100% 10%, 100% 100%, 0 100%);
}
.scene.sun { left: 58%; top: 18%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--art-sun); }
.scene.hills {
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: var(--bg);
  clip-path: polygon(0 70%, 20% 40%, 44% 66%, 70% 30%, 100% 62%, 100% 100%, 0 100%);
}

/* Page heads and sections */
.page-title { font-family: var(--font-display); font-size: 60px; line-height: 1.05; letter-spacing: -0.01em; font-weight: 700; }
.lede { max-width: 620px; font-size: 19px; line-height: 29px; color: var(--dim); text-wrap: pretty; }
.page-head { padding-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.jump-links { display: flex; flex-wrap: wrap; gap: 10px; }
.jump {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--line);
  font-weight: var(--bold);
  font-size: 15px;
}
.jump:hover { background: var(--panel-2); }
.sec { padding-top: 72px; display: flex; flex-direction: column; gap: 24px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.sec-title { font-family: var(--font-display); font-size: 42px; line-height: 46px; font-weight: 700; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  height: 38px;
  padding: 0 18px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font: var(--bold) 14px/1 var(--font-body);
  cursor: pointer;
}
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Home hero */
.hero { display: flex; flex-wrap: wrap; overflow: hidden; }
.hero-text {
  flex: 1 1 min(420px, 100%);
  min-width: 0;
  container-type: inline-size;
  padding: 56px clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
/* The name is two lines, each on one line. The size follows the width of the text column (cqw), so
   "Hyperspace Havoc!" (about 9.2em wide) always fits it. The first size is for browsers without cqw. */
.hero-text h1 { font-family: var(--font-display); font-size: 48px; font-size: min(64px, 10.6cqw); line-height: 1.04; letter-spacing: -0.01em; font-weight: 700; }
.hero-text h1 span { display: block; white-space: nowrap; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art { position: relative; flex: 1 1 min(380px, 100%); min-height: 300px; overflow: hidden; }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--panel) 0%, transparent 35%);
}

/* Tool tiles */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 24px;
}
.tile { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile-name { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 700; }
.tile-desc { font-size: 16px; line-height: 24px; color: var(--dim); }
.tool-card { display: flex; flex-direction: column; overflow: hidden; }
.tool-card .caption { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.tool-card .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tool-card h2 { font-size: 34px; line-height: 38px; }
.tool-card .desc { font-size: 16px; line-height: 24px; color: var(--dim); }
.links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.preview {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line);
}
/* A real screenshot of the tool. */
.preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* Game lists */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 40px;
}
.list-head { font-family: var(--font-display); font-size: 32px; line-height: 36px; font-weight: 700; margin-bottom: 8px; }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1.5px dashed var(--line);
}
.row-name { font-weight: var(--bold); }
.break-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 24px;
}
.break { display: flex; align-items: center; gap: 20px; padding: 18px; }
.break-art { flex: none; width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; }
.break-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.break-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.break-title { font-family: var(--font-display); font-size: 22px; line-height: 26px; font-weight: 700; }
.break-run { font-size: 14px; color: var(--dim); }

.year-list { display: flex; flex-direction: column; gap: 36px; }
.year-row { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.year {
  flex: 0 0 120px;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  color: var(--accent-text);
}
.year-entries { flex: 1 1 480px; min-width: 0; border-top: 1px solid var(--line); }
.entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 18px 0;
  border-bottom: 1.5px dashed var(--line);
}
.entry-title { flex: 1 1 220px; font-size: 18px; font-weight: var(--bold); }
.entry-desc { flex: 2 1 300px; font-size: 15px; line-height: 22px; color: var(--dim); }

/* Joke donate popup (assets/js/donate.js) */
.donate-slot { margin-bottom: 14px; }
.donate-dialog {
  width: min(560px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.donate-dialog::backdrop { background: rgba(10, 7, 5, 0.75); }

/* First-visit note (assets/js/welcome.js). */
.welcome-dialog {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.welcome-dialog::backdrop { background: rgba(10, 7, 5, 0.75); }
.welcome-inner { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.welcome-inner p { font-size: 17px; line-height: 26px; }
.welcome-actions { display: flex; justify-content: flex-end; }
.donate-inner { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.donate-title { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 700; }
.donate-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.donate-tier {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.donate-logo { width: 104px; height: 104px; align-self: center; object-fit: contain; }
.donate-tier h3 { font-family: var(--font-display); font-size: 22px; line-height: 26px; font-weight: 700; }
.donate-tier p { font-size: 14px; line-height: 21px; color: var(--dim); flex: 1; }
.donate-tier .btn { width: 100%; }
.donate-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; }
.donate-more { font-weight: var(--bold); color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.donate-more:hover { color: var(--text); }

/* Cut-outs: transparent character art. It is drawn facing left, so it always stands on the right. */
.cut {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}

/* The glows are a flat colour under a mask, so how they fade is set here and not by the colour. The curve
   is a smoothstep: it levels off at the middle and at the rim, so no edge shows against the page. */
:root {
  --glow-fade: #000 0%, rgba(0, 0, 0, 0.972) 10%, rgba(0, 0, 0, 0.896) 20%, rgba(0, 0, 0, 0.784) 30%,
    rgba(0, 0, 0, 0.648) 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.352) 60%, rgba(0, 0, 0, 0.216) 70%,
    rgba(0, 0, 0, 0.104) 80%, rgba(0, 0, 0, 0.028) 90%, rgba(0, 0, 0, 0) 100%;
}

/* One character beside a page heading, with a lantern glow behind it. The glow starts under the top bar
   and ends below the character's feet, whatever height the heading is. */
.page-head { position: relative; }
.page-head::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: -48px;
  width: 620px;
  pointer-events: none;
  background: var(--glow);
  -webkit-mask-image: radial-gradient(closest-side, var(--glow-fade));
  mask-image: radial-gradient(closest-side, var(--glow-fade));
}
/* Its top meets the top of the heading block and its feet hang 44px below, whatever height the heading is. */
.head-cut {
  position: absolute;
  right: clamp(16px, 5vw, 48px);
  bottom: -44px;
  height: calc(100% + 44px);
  max-height: 300px;
  width: auto;
}

/* A character floating beside a section title. */
.sec { position: relative; }
.sec-cut { position: absolute; right: clamp(16px, 5vw, 48px); top: 0; height: 140px; width: auto; }

/* The crew: all six standing on a dashed ground line, one scene-sized row on the home page. */
.crew { padding-top: 84px; }
.crew-line {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 230px;
  padding: 0 clamp(8px, 3vw, 40px);
  border-bottom: 2px dashed var(--line-2);
  isolation: isolate;
}
/* Light on the ground behind them, strongest on the line and fading up and out. */
.crew-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--glow);
  -webkit-mask-image: radial-gradient(ellipse 42% 61% at 50% 100%, var(--glow-fade));
  mask-image: radial-gradient(ellipse 42% 61% at 50% 100%, var(--glow-fade));
}
.crew-line .cut { height: var(--h); width: auto; margin-bottom: var(--lift, 0px); }

/* Footer */
.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  padding-bottom: 44px;
  font-size: 13px;
  line-height: 20px;
  color: var(--dim);
}

/* Patch notes link: it sits at the right end of the donate row. */
.site-footer { position: relative; }
.patch-link { position: absolute; top: 24px; right: 0; }

/* The top bar gives up room in steps as the screen narrows: tighter, then no search, then no brand name,
   then icons only. The Space brand name is bigger, so it is set smaller here too. */
@media (max-width: 1200px) {
  .topbar-in { gap: 24px; }
  .tb-name, :root[data-theme="space"] .tb-name { font-size: 15px; letter-spacing: 0.06em; }
  .tb-nav a { padding: 0 10px; }
  .tb-nav a::after { left: 10px; right: 10px; }
  .tb-search label { width: 200px; }
}

/* Four nav tabs now, so the search goes a little sooner than it used to. */
@media (max-width: 900px) {
  .tb-search { display: none; }
}

@media (max-width: 1100px) {
  .crew { display: none; }
}

@media (max-width: 1050px) {
  .tb-name { display: none; }
}

@media (max-width: 1000px) {
  .head-cut, .sec-cut, .page-head::before { display: none; }
}

@media (max-width: 700px) {
  .tb-nav span { display: none; }
  .hero { flex-direction: column; }
  .hero-text, .hero-art { flex: none; width: 100%; }
}

@media (max-width: 620px) {
  .topbar-in { gap: 12px; }
  .tb-nav a { padding: 0 8px; }
  .tb-nav a::after { left: 8px; right: 8px; }
  .tb-end { gap: 8px; }
}

@media (max-width: 600px) {
  .page-title { font-size: 44px; line-height: 1.08; }
  .hero-text h1 { font-size: 40px; font-size: min(48px, 10.6cqw); line-height: 1.08; }
  .sec-title { font-size: 32px; line-height: 36px; }
  .lede { font-size: 17px; line-height: 26px; }
}