/*
 * The guide pages and the blog (src/site, prerendered at build time): styles.css's
 * type, tokens, buttons, badges and tags, plus a reading layout. A+ (R6b, 16 Oct
 * 2026): the chrome is the app's, its header and footer felt with chrome words and
 * the app's bar (the 28 px mark and the name in type); the pages between them stay
 * paper, so a guide or a post reads as a document. On paper, the A+ depth rules:
 * no outline on a container, a soft lift instead, and rows split by an inset 7 %
 * divider (docs/DESIGN.md). Phone first: one column, 16px gutters, tables that
 * scroll inside themselves, never the page.
 */

/* The site's own A+ tokens: the felt's ground (the app's #app::before, its values), the lift a container takes in
   place of a hairline, and the rows' divider. */
body.site {
  --site-felt:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.075'/></svg>"),
    radial-gradient(130% 70% at 50% 12%, var(--felt-glow) 0%, var(--felt) 52%, var(--felt-deep) 100%);
  --lift: 0 1px 1px rgb(16 36 27 / 0.04), 0 6px 16px -6px rgb(16 36 27 / 0.12);
  --divider: rgb(16 36 27 / 0.07);
}

html:has(> body.site),
body.site {
  background: var(--bg-2);
}
body.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: auto;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 50;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

/* ------------------------------------------------------------ header */
/* The app's bar on the felt, as the A+ prototype's .hero-bar: across the window, what it holds kept to the reading
   column; on a phone its foot rounds off as a panel (24 px) over the paper. Inside it, and in the footer, the roles
   are the felt's, as #app rebinds them (app.css): chrome words, wells of light, chrome for what is chosen with ink on
   it, the lit green for action. */
.site-header,
.site-footer {
  --fg: var(--on-felt);
  --fg-2: var(--on-felt-2);
  --fg-muted: var(--on-felt-muted);
  --ink: var(--on-felt);
  --on-ink: var(--paper-ink);
  --bg-1: var(--felt-well);
  --bg-3: var(--felt-well);
  --stroke: var(--felt-line);
  --action: var(--action-on-felt);
  --action-strong: var(--action-on-felt-strong);
  --action-tint: var(--action-on-felt-tint);
  background: var(--site-felt);
  background-color: var(--felt);
  color: var(--on-felt);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: calc(var(--safe-top) + 68px);
  padding: calc(var(--safe-top) + 12px) max(16px, calc((100% - 760px) / 2 + 16px)) 12px;
  border-radius: 0 0 24px 24px;
}
.site-header .brand {
  gap: 8px;
  color: var(--on-felt);
}
/* The mark hinted on 28 px (icon-28.svg), its squircle in the file; the name in type, as the app's bar sets it. */
.site-header .brand-mark {
  width: 28px;
  height: 28px;
}
.site-header .wordmark {
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.site-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-language {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--felt-well);
}
.site-language a {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  color: var(--on-felt-2);
  font: 700 12px/1 var(--font);
  letter-spacing: 0.04em;
  text-decoration: none;
}
/* Chosen: chrome, ink on it. */
.site-language a[aria-current="true"] {
  background: var(--on-felt);
  color: var(--paper-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}
/* 26 px to the eye, as the app's ES | EN (styles.css), and a tap 44 px tall. */
.site-language a {
  position: relative;
}
.site-language a::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2) 0;
}
/* The one filled control: the prototype's lit green pill, ink on it. */
.site-header .button.small {
  min-height: 36px;
  padding: 0 14px;
  white-space: nowrap;
}
.site-header .button.primary {
  border-color: var(--action-on-felt);
  background: var(--action-on-felt);
  color: var(--on-action-on-felt);
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -2px 0 rgb(0 0 0 / 0.14);
}
.site-header .button.primary:hover {
  background: var(--action-on-felt);
}
/* Blog, as the app's tabs: chrome words on the felt, a well of light while you are in it. */
.site-nav-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--on-felt-2);
  font: 650 14px/1 var(--font);
  text-decoration: none;
  transition:
    color 0.16s var(--ease),
    background 0.16s var(--ease);
}
.site-nav-link::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}
.site-nav-link[aria-current] {
  background: var(--felt-well);
  color: var(--on-felt);
  font-weight: 750;
}
.site-header .label-short {
  display: none;
}
/* A phone's width holds the brand, Blog, ES | EN and the app button only with the button's short label, and, on a
   360 px one, with the row drawn tighter: a slimmer Blog pill and ES | EN, 6 px between them (checked from 320 to
   440 px, in both languages). Below 400 px the name steps to 15 px beside the 28 px mark, and under 360 px only the
   mark stays (its link keeps its name). */
@media (max-width: 440px) {
  .site-header .label-long {
    display: none;
  }
  .site-header .label-short {
    display: inline;
  }
  .site-header-actions {
    gap: 6px;
  }
  .site-nav-link {
    padding: 0 8px;
  }
  .site-language a {
    min-width: 30px;
    padding: 0 6px;
  }
}
@media (max-width: 399px) {
  .site-header .wordmark {
    font-size: 15px;
  }
}
@media (max-width: 359px) {
  .site-header .wordmark {
    display: none;
  }
}

/* ------------------------------------------------------------ reading column */
.site-main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  outline: none;
  overflow-wrap: anywhere;
}
.site-main h1 {
  margin: 0;
  /* A+'s title: 30 px at 750, tight; 36 from 700 px. */
  font: 750 30px/1.08 var(--font-display);
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
.site-main h2 {
  margin: 36px 0 12px;
  /* A+'s headline. */
  font: 700 20px/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.site-main h3 {
  margin: 20px 0 6px;
  font: 700 16px/1.3 var(--font);
}
.site-main p {
  margin: 0 0 12px;
}
.site-main a {
  color: var(--action-strong);
  text-underline-offset: 2px;
}
.site-main a.button {
  text-decoration: none;
}
.site-main a.button.primary {
  color: var(--on-ink);
}

/* A page without breadcrumbs (the English home, the 404) starts as far under the header as the breadcrumbs do. */
.site-main > :first-child:not(.crumbs) {
  margin-top: 10px;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 16px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--fg-muted);
}
.crumbs li + li::before {
  content: "›";
  margin-right: 4px;
  color: var(--fg-muted);
}
.crumbs a {
  color: var(--fg-muted);
}

.page-head {
  padding-bottom: 4px;
}
.page-head-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.page-head-title .club-badge {
  width: 48px;
  height: 48px;
}
/* Under its title or what heads the page: .site-main's paragraphs start flush, so the lede asks for its own space. */
.site-main .lede {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
}
/* These paragraphs ask for their own space, so they name .site-main to win over its paragraphs' flush start. */
.site-main .stat-line {
  margin-top: 10px;
  color: var(--action-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 8px;
}
.cta-row .button {
  flex: 1 1 200px;
}

/* ------------------------------------------------------------ facts */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--divider);
  box-shadow: var(--lift);
}
.fact-grid div {
  padding: 12px 14px;
  background: var(--bg-1);
}
.fact-grid dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}
.fact-grid dd {
  margin: 4px 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ revenue (src/site/revenue.ts) */
.stays {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bg-1);
  box-shadow: var(--lift);
}
.stays p {
  margin: 0;
}
.stays p + p {
  margin-top: 4px;
}
.stays a {
  font-weight: 600;
}

/* ------------------------------------------------------------ lists */
.bullets {
  margin: 0 0 12px;
  padding-left: 20px;
}
.bullets li + li {
  margin-top: 6px;
}
.bullets li::marker {
  color: var(--action);
}
/* A list of places, as the app's list card: white, its rows split by hairlines. */
.link-list,
.club-links {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bg-1);
  box-shadow: var(--lift);
  list-style: none;
}
.link-list li,
.club-links li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
}
.link-list li:last-child,
.club-links li:last-child {
  border-bottom: 0;
}
.link-list a,
.club-links a {
  font-weight: 600;
}
.pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.pill-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--action-tint);
  color: var(--action-strong);
  font-weight: 600;
  text-decoration: none;
}
.pill-links a[aria-current="page"] {
  background: var(--ink);
  color: var(--on-ink);
}
.pill-links .muted {
  margin-left: 4px;
  color: inherit;
  font-weight: 500;
  opacity: 0.85;
}
.pill-links-nav {
  margin-top: 16px;
}

/* ------------------------------------------------------------ comparison table */
/* A table sits on a white card, as the app's data does, and scrolls sideways inside it, never the page. */
.table-wrap {
  overflow-x: auto;
  padding: 2px 14px 4px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bg-1);
  box-shadow: var(--lift);
  -webkit-overflow-scrolling: touch;
}
table.compare {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 13px;
}
table.compare caption {
  caption-side: bottom;
  padding: 10px 0 8px;
  text-align: left;
  font-size: 13px;
  color: var(--fg-muted);
}
table.compare th,
table.compare td {
  padding: 10px 5px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
/* On its card the last row needs no hairline: the card's edge closes the table (one with a caption keeps it, over the
   caption). */
table.compare:not(:has(> caption)) tbody tr:last-child > * {
  border-bottom: 0;
}
table.compare thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
table.compare tbody th {
  font-weight: 600;
}
table.compare .town {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 400;
}
table.compare .town-heading {
  font-weight: 700;
}
table.compare .numeric {
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------ tournaments */
.event-list {
  display: grid;
  gap: 12px;
}
.event-card {
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bg-1);
  box-shadow: var(--lift);
}
.site-main .event-card h3 {
  margin: 0 0 8px;
}
.event-facts {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 14px;
}
.event-facts div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 8px;
}
.event-facts dt {
  color: var(--fg-muted);
}
.event-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.site-main .event-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 14px;
}

/* ------------------------------------------------------------ questions */
.qa {
  border-top: 1px solid var(--divider);
}
.qa h3 {
  padding-top: 16px;
}
.qa p {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider);
  color: var(--fg-muted);
}

/* ------------------------------------------------------------ areas */
.area-grid {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
/* An area: its name over its numbers, then its clubs as the card's own rows, split by hairlines (the app's list card). */
.area-card {
  overflow: hidden;
  padding: 14px 16px 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bg-1);
  box-shadow: var(--lift);
}
.area-card .club-links {
  margin: 12px -16px 0;
  border: 0;
  border-top: 1px solid var(--divider);
  border-radius: 0;
  box-shadow: none;
}
.site-main .area-card h2 {
  margin: 0 0 2px;
  font-size: 19px;
}

/* ------------------------------------------------------------ area map (src/site/map) */
/* Spain in dots: each path's dashes are its dots, so their size is the stroke's width. */
/* On a white card, so its labels' halo and its dots' ring stay the white they are drawn for. No padding at the
   sides: the drawing keeps its own margins, and the map keeps its width, so its names keep their size (area-map.ts). */
.area-map {
  margin: 8px 0;
  padding: 10px 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bg-1);
  box-shadow: var(--lift);
}
.area-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.area-map figcaption {
  margin-top: 6px;
  padding: 0 14px;
  text-align: center;
}
.map-land,
.map-neighbours,
.map-clubs {
  stroke-width: 3.4;
}
.map-land {
  stroke: #adbcb2;
}
.map-neighbours {
  stroke: #e1e6e2;
}
.map-clubs {
  stroke: var(--action);
  stroke-width: 4;
  opacity: 0.6;
}
.map-hit {
  fill: transparent;
}
.map-dot {
  fill: var(--action);
  stroke: var(--bg-1);
  stroke-width: 2.5;
}
/* Each pin scales about its own centre, written into the markup as --origin (in the map's units):
   Firefox misplaced a group scaled about its own bounding box, Oct 2026. */
.map-pin,
.map-pulse {
  transform-box: view-box;
  transform-origin: var(--origin);
}
/* Only drawn: a swelling ring never takes a tap meant for a neighbour. */
.map-pulse,
.map-focus {
  pointer-events: none;
}
/* Magic UI's pulse: two rings a half-beat apart, swelling and fading out from the marker. */
.map-pulse {
  fill: none;
  stroke: var(--action);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: map-pulse 2.8s cubic-bezier(0, 0, 0.2, 1) var(--pulse-delay, 0s) infinite;
}
.map-pulse + .map-pulse {
  animation-delay: calc(var(--pulse-delay, 0s) + 1.4s);
}
@keyframes map-pulse {
  from {
    transform: scale(1);
    opacity: 0.85;
  }
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}
/* Still, the first ring stays as a soft halo. */
@media (prefers-reduced-motion: reduce) {
  .map-pulse {
    animation: none;
  }
  .map-hit + .map-pulse {
    opacity: 0.3;
    transform: scale(1.5);
  }
}
.map-label {
  fill: var(--fg);
  font-family: var(--font);
  font-weight: 600;
  line-height: 1;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: #fff;
  stroke-linejoin: round;
}
.map-marker {
  outline: none;
}
.map-marker:hover .map-dot,
.map-marker:focus-visible .map-dot {
  fill: var(--action-strong);
}
.map-marker:hover .map-label,
.map-marker:focus-visible .map-label {
  fill: var(--action-strong);
  text-decoration: underline;
}
.map-focus {
  fill: none;
}
.map-marker:focus-visible .map-focus {
  stroke: var(--action-strong);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
/* LABEL_SIZES (src/site/map/area-map.ts), switched at these breakpoints: about 11 to 17 px on screen however wide the map is. */
.map-label-wide {
  font-size: 18px;
  stroke-width: 5;
}
.map-label-medium {
  display: none;
  font-size: 24px;
  stroke-width: 6;
}
.map-label-narrow {
  display: none;
  font-size: 38px;
  stroke-width: 8;
}
@media (max-width: 719px) {
  .map-label-wide {
    display: none;
  }
  .map-label-medium {
    display: inline;
  }
  .map-pin {
    transform: scale(1.25);
  }
  .map-land,
  .map-neighbours {
    stroke-width: 3.8;
  }
}
@media (max-width: 479px) {
  .map-label-medium {
    display: none;
  }
  .map-label-narrow {
    display: inline;
  }
  .map-pin {
    transform: scale(1.7);
  }
  .map-land,
  .map-neighbours {
    stroke-width: 4.4;
  }
  .map-clubs {
    stroke-width: 6;
  }
}

/* ------------------------------------------------------------ code */
.site-main pre {
  overflow-x: auto;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--bg-1);
  box-shadow: var(--lift);
  font-size: 13px;
  line-height: 1.5;
}
.site-main code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
.site-main pre code {
  overflow-wrap: normal;
  white-space: pre;
}

.site-main .sources {
  margin-top: 32px;
}

/* ------------------------------------------------------------ blog */
.post-list {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.post-card {
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bg-1);
  box-shadow: var(--lift);
}
.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--fg-muted);
}
.site-main .post-card h3 {
  margin: 0 0 6px;
  font: 700 18px/1.3 var(--font-display);
}
.site-main .post-card h3 a {
  color: var(--fg);
  text-decoration: none;
}
.site-main .post-card h3 a:hover {
  color: var(--action-strong);
  text-decoration: underline;
}
.site-main .post-card p:last-child {
  margin: 0;
  color: var(--fg-muted);
}
.soon {
  margin-top: 8px;
}

/* An article reads in one comfortable column: about 68 characters a line on any screen. */
.post-head h1 {
  max-width: 24ch;
}
.site-main .byline {
  margin: 16px 0 2px;
  font-weight: 600;
}
.site-main .post-meta {
  margin: 0;
}
.site-main .notice {
  max-width: 68ch;
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-block);
  background: var(--warn-tint);
  color: var(--fg);
}
.prose,
.post-sources {
  max-width: 68ch;
}
.prose {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.65;
}
.site-main .prose p {
  margin: 0 0 16px;
}
.site-main .prose h2 {
  margin: 36px 0 10px;
}
.site-main .prose h3 {
  margin: 24px 0 8px;
  font-size: 17px;
}
.prose ul,
.prose ol,
.post-sources ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.prose li + li,
.post-sources li + li {
  margin-top: 6px;
}
.prose li::marker {
  color: var(--action);
}
.prose blockquote {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 0;
  border-left: 3px solid var(--action);
  border-radius: 0 var(--radius-block) var(--radius-block) 0;
  background: var(--bg-1);
}
.site-main .prose blockquote p:last-child {
  margin-bottom: 0;
}
.prose hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--divider);
}
.prose .table-wrap {
  margin-bottom: 16px;
}
/* Columns keep a legible width: a wide table scrolls inside its own frame on a phone, never the page. */
.prose table.compare {
  font-size: 14px;
  line-height: 1.45;
}
.prose table.compare th,
.prose table.compare td {
  min-width: 7em;
}
.post-sources {
  margin-top: 32px;
  font-size: 15px;
}

/* ------------------------------------------------------------ footer */
/* The felt again, closing the page as the header opens it (its roles are the header's, above): headings as A+'s label
   caps, links in chrome, the tagline and the weather credit at the felt's muted chrome (4.5:1 there). */
.site-footer {
  width: 100%;
  padding: 32px max(16px, calc((100% - 760px) / 2 + 16px)) calc(var(--safe-bottom) + 32px);
  border-radius: 24px 24px 0 0;
}
.site-footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}
.site-footer h2 {
  margin: 0 0 8px;
  font: 700 12px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-felt-muted);
}
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li {
  padding: 5px 0;
}
.site-footer a {
  color: var(--on-felt-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--on-felt);
  text-decoration: underline;
}
.site-footer p {
  margin: 24px 0 0;
  color: var(--on-felt-muted);
}
.site-footer p + p {
  margin-top: 8px;
}
.site-footer .support a {
  font-size: inherit;
  text-decoration: underline;
}

@media (min-width: 700px) {
  .site-main h1 {
    font-size: 36px;
  }
  .fact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  table.compare {
    font-size: 14px;
  }
  table.compare th,
  table.compare td {
    padding: 10px 8px;
  }
  .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cta-row .button {
    flex: 0 0 auto;
  }
}

/* A mouse or trackpad: what can be clicked says so when the pointer is on it, as in the app. Only here, so a tap never
   leaves a hover look behind. */
@media (hover: hover) and (pointer: fine) {
  .site-nav-link:not([aria-current]):hover {
    background: var(--felt-well);
    color: var(--on-felt);
  }
  .pill-links a:not([aria-current="page"]):hover,
  .button.soft:hover {
    background: var(--action-tint-strong);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-link {
    transition: none;
  }
}

/* A computer: the header is the app's top bar (76 px, A+), flat across the window, while what it holds keeps to the
   reading column. */
@media (min-width: 960px) {
  .site-header,
  .site-footer {
    border-radius: 0;
  }
  .site-header {
    min-height: 76px;
    padding-top: 12px;
  }
  .site-main {
    padding-top: 24px;
  }
}