/*
 * foil.guide styles. Plain CSS via Propshaft — no build step.
 */

/* Outfit (SIL OFL 1.1, app/assets/fonts/outfit/OFL.txt): the display face
   for headings, the logo and the big numbers. Variable weight 500–800, the
   latin and latin-ext subsets from Google Fonts' build. Body text stays on
   the system stack. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/outfit/outfit-latin-ext-8366353d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/outfit/outfit-latin-9c6ecee0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Water: the aqua that the blues run into on the header, the hero and
     the primary button. */
  --aqua-200: #a5f3fc;
  --aqua-400: #22d3ee;
  --aqua-500: #06b6d4;
  --aqua-600: #0891b2;
  --navy: #0f2a6e;
  --brand-gradient: linear-gradient(120deg, var(--navy) 0%, var(--blue-600) 55%, var(--aqua-600) 100%);
  --button-gradient: linear-gradient(120deg, var(--blue-600), var(--aqua-500));

  --blue-50: #eef6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;

  --ink: #0f172a;
  --muted: #64748b;
  --pro: #15803d;
  --con: #b91c1c;
  --pro-bg: #f0fdf4;
  --con-bg: #fef2f2;
  --pro-border: #bbf7d0;
  --con-border: #fecaca;
  --line: #e2e8f0;
  --surface: #ffffff;
  --bg: #f4f8fc;

  /* Semantic tokens, so the dark theme below only has to redefine these:
     tints are the pale blue fills behind cells, table heads and chips;
     link/accent/heading are the blues used as text on light surfaces. */
  --tint: var(--blue-50);
  --tint-strong: var(--blue-100);
  --tint-border: var(--blue-200);
  --link: var(--blue-600);
  --accent-text: var(--blue-700);
  --heading: var(--blue-900);
  --image-bg: #ffffff;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.06), 0 18px 40px rgba(6, 182, 212, 0.16);
  color-scheme: light;
}

/* Dark theme: follows the system setting; the header, buttons and badges
   keep their blues, everything that was white or pale blue goes dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6ebf5;
    --muted: #9aa8bf;
    --pro: #4ade80;
    --con: #f87171;
    --pro-bg: rgba(74, 222, 128, 0.07);
    --con-bg: rgba(248, 113, 113, 0.07);
    --pro-border: rgba(74, 222, 128, 0.25);
    --con-border: rgba(248, 113, 113, 0.25);
    --line: #26334f;
    --surface: #121b30;
    --bg: #0b1220;
    --tint: #182645;
    --tint-strong: #1f3260;
    --tint-border: #30508f;
    --link: #8ab8ff;
    --accent-text: #a5c8ff;
    --heading: #dbe7ff;
    --image-bg: #ffffff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(6, 182, 212, 0.18);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink: #e6ebf5;
  --muted: #9aa8bf;
  --pro: #4ade80;
  --con: #f87171;
  --pro-bg: rgba(74, 222, 128, 0.07);
  --con-bg: rgba(248, 113, 113, 0.07);
  --pro-border: rgba(74, 222, 128, 0.25);
  --con-border: rgba(248, 113, 113, 0.25);
  --line: #26334f;
  --surface: #121b30;
  --bg: #0b1220;
  --tint: #182645;
  --tint-strong: #1f3260;
  --tint-border: #30508f;
  --link: #8ab8ff;
  --accent-text: #a5c8ff;
  --heading: #dbe7ff;
  --image-bg: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(6, 182, 212, 0.18);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* Component rules like a.btn-primary set display, which would otherwise
   override the hidden attribute (the compare link showed with 0 wings). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One visible focus ring for keyboard users, in the water colour. */
:focus-visible {
  outline: 2px solid var(--aqua-500);
  outline-offset: 2px;
  border-radius: 4px;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--accent-text);
}

.site-header {
  background: var(--brand-gradient);
  color: white;
  padding: 24px 24px;
  box-shadow: var(--shadow);
}

.site-header .wrap {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.site-header .logo {
  margin-right: 18px;
}

.site-header .logo {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: white;
}

.site-header .logo span {
  color: var(--aqua-200);
}

.site-header .site-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.site-header .site-nav a {
  color: var(--blue-100);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.site-header .site-nav a:hover {
  color: white;
}

.site-header .nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-header .nav-dropdown-link {
  color: var(--blue-100);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.site-header .nav-dropdown-link:hover {
  color: white;
}

.site-header .nav-dropdown-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 6px 4px;
  margin: 0;
  color: var(--blue-100);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-header .nav-dropdown-toggle:hover,
.site-header .nav-dropdown-toggle[aria-expanded="true"] {
  color: white;
}

.site-header .nav-dropdown-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.site-header .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 20;
  flex-direction: column;
  min-width: 160px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
}

.site-header .nav-dropdown-menu:not([hidden]) {
  display: flex;
}

.site-header .nav-dropdown-menu a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.site-header .nav-dropdown-menu a:hover {
  background: var(--tint);
  color: var(--accent-text);
}

.site-header .site-search {
  margin-left: auto;
  flex: 0 1 260px;
  min-width: 140px;
}

.site-header .site-search-link {
  display: none;
}

.site-header .site-search-input {
  width: 100%;
  appearance: none;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-family: inherit;
}

.site-header .site-search-input::placeholder {
  color: var(--blue-100);
  opacity: 0.9;
}

.site-header .site-search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
}

.site-header .locale-switcher {
  flex-shrink: 0;
}

/* Light/dark toggle: the icon shows the theme you would switch to. */
.site-header .theme-switcher {
  flex-shrink: 0;
}

.site-header .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  color: white;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.site-header .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.site-header .theme-toggle svg {
  width: 17px;
  height: 17px;
}

.site-header .theme-icon-sun {
  display: none;
}

:root[data-theme="dark"] .site-header .theme-icon-sun {
  display: block;
}

:root[data-theme="dark"] .site-header .theme-icon-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .theme-icon-sun {
    display: block;
  }

  :root:not([data-theme="light"]) .site-header .theme-icon-moon {
    display: none;
  }
}

.site-header .locale-select {
  appearance: none;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 4px 22px 4px 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='white' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
}

.site-header .locale-select:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.site-header .locale-select option {
  color: var(--ink);
  background: var(--surface);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The content column's inner edge lines up with the header's logo and
   the footer (both 1080 px wraps inside 24 px of padding). */
main {
  max-width: 1128px;
  margin: 0 auto;
  padding: 40px 24px 88px;
}

.site-footer {
  margin-top: 24px;
  padding: 40px 24px 48px;
  color: var(--blue-100);
  background: linear-gradient(180deg, var(--navy), #081a45);
  border-top: 3px solid var(--aqua-500);
}

.site-footer .wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.site-footer p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 48px;
}

.footer-brand {
  max-width: 360px;
}

.footer-logo {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: white;
}

.footer-logo span {
  color: var(--aqua-200);
}

.footer-logo:hover {
  color: white;
}

.footer-tagline {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5;
  color: var(--blue-100) !important;
  opacity: 0.8;
}

.footer-nav {
  flex: 0 1 auto;
  display: grid !important;
  grid-template-columns: repeat(3, auto);
  gap: 12px 56px !important;
  margin-bottom: 0 !important;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aqua-200);
  margin-bottom: 2px;
}

.footer-nav-legacy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
}

.footer-nav a {
  color: var(--blue-100);
}

.footer-nav a:hover {
  color: var(--link);
}

/* --- Static pages (about) --------------------------------------------- */

.page {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 16px;
}

.page-eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link);
}

.page h1 {
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.page p {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 20px;
}

.page-signoff {
  font-weight: 700;
  color: var(--heading);
}

.page-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 404 / 500 (ErrorsController): the about page's column, with the search
   box and the catalog chips so a dead link still leads somewhere. */
.error-page .search-form {
  margin: 8px 0 24px;
}

.error-links-lede {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}

h1 {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 20px;
  color: var(--heading);
}

h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--heading);
  margin: 52px 0 14px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 18px;
  transition: gap 0.12s ease;
}

.back-link:hover {
  gap: 10px;
}

/* Filter form, inside a <details> that collapses on phones
   (filter_panel_controller.js). The summary only shows there. */

.filter-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.filter-summary {
  display: none;
}

.filter-form {
  padding: 22px 24px;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.filter-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}

.filter-field select,
.filter-field input[type="number"],
.filter-field input[type="search"] {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
}

.filter-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.filter-disciplines {
  margin-top: 14px;
}

.filter-disciplines > label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.filter-discipline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.btn-primary {
  background: var(--button-gradient);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

button.btn-secondary {
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--tint-border);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: inherit;
  cursor: pointer;
}

button.btn-secondary:hover {
  background: var(--tint);
  border-color: var(--blue-400);
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  padding: 56px 24px;
  margin: 8px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.no-results::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-color: var(--blue-50);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* Compare */

.compare-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 20px;
}

.compare-bar .btn-primary {
  margin-left: auto;
}

/* Disabled until two wings are ticked: reads as inactive, not as a faded
   button that might still do something. */
.compare-bar .btn-primary:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: default;
  box-shadow: none;
  transform: none;
  filter: none;
}

.clear-selection {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.result-count {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

p.result-count {
  margin: 0 0 14px;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.view-link {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.view-link.active {
  background: var(--button-gradient);
  color: white;
}

/* Sortable spec table (front-wing index, table view). Shares the compare
   table's cell styling; the header links carry the sort state. */
.spec-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.spec-table th,
.spec-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.spec-table th:first-child,
.spec-table td:first-child {
  padding-right: 0;
}

.spec-table thead th {
  background: var(--tint);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--heading);
}

.spec-table th.num,
.spec-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.spec-table tbody tr:hover {
  background: var(--tint);
}

.spec-table-name {
  font-weight: 600;
}

.spec-table-disciplines {
  font-size: 13px;
  color: var(--muted);
}

/* The one column that may wrap: "Downwind, Wing, Race" was the widest
   cell of the table and pushed price and year off a 1440px screen. */
td.spec-table-disciplines {
  white-space: normal;
  max-width: 180px;
  line-height: 1.3;
}

.sort-link {
  color: inherit;
}

.sort-link::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--tint-border);
  vertical-align: middle;
}

.sort-link.active::after {
  border-bottom-color: var(--link);
}

.sort-link.active.desc::after {
  border-bottom: none;
  border-top: 5px solid var(--blue-600);
}

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Scroll shadows: the two edge shadows only show once the table is
     wider than its frame, on the side that has more to see — the frame
     itself gives no other hint that columns are hiding to the right. */
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) 0 0 / 40px 100%,
    linear-gradient(to left, var(--surface) 40%, transparent) 100% 0 / 40px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)) 0 0 / 16px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)) 100% 0 / 16px 100%,
    var(--surface);
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll, scroll;
}

.compare-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.compare-table th,
.compare-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.compare-table thead th {
  vertical-align: top;
  background: var(--tint);
}

/* The label column stays narrow (its hints wrap under the label), so
   four wings fit a laptop screen without scrolling. */
.compare-table tbody th {
  width: 170px;
  min-width: 150px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: normal;
}

.compare-table tbody th .compare-hint {
  display: block;
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.compare-table td {
  white-space: normal;
}

/* Product photo on top of each wing's column. */
.compare-thumb {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 84px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--image-bg);
  border: 1px solid var(--line);
  overflow: hidden;
}

.compare-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.compare-table thead th {
  min-width: 170px;
}

.compare-brand {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--link);
}

.compare-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.compare-size {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

/* Diff highlighting: identical rows fade back, the objectively best cell
   (lightest, cheapest, highest AR, earliest take-off) steps forward. */
.compare-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: -8px 0 14px;
}

.compare-legend {
  flex: 1;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.compare-table thead th {
  position: relative;
  padding-right: 32px;
}

.compare-remove {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
}

.compare-remove:hover {
  color: var(--ink);
}

.compare-table tr.same td,
.compare-table tr.same th {
  color: var(--muted);
  opacity: 0.6;
}

.compare-table td.best {
  font-weight: 700;
  color: var(--link);
  background: var(--tint);
}

/* Compare tray on the front-wing index: inline in the bar, floating at the
   bottom of the screen once the bar has scrolled away with sizes ticked. */
.compare-tray {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.compare-bar .compare-tray .btn-primary {
  margin-left: 0;
}

.compare-tray.is-floating {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 40;
  transform: translateX(-50%);
  padding: 8px 10px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--tint-border);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(8, 26, 69, 0.25);
}

.compare-tray.is-floating .btn-primary {
  border-radius: 999px;
}

/* Product line page: a size table per part type. */
.line-sizes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 32px 0 12px;
}

.line-sizes-head h2 {
  margin: 0;
}

.line-size-table td,
.line-size-table th {
  padding: 9px 12px;
}

.line-size-table tbody tr:hover {
  background: var(--tint);
}

.btn-small {
  padding: 6px 12px !important;
  font-size: 13px;
}

a.btn-secondary.btn-small {
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--tint-border);
  border-radius: 8px;
}

a.btn-secondary.btn-small:hover {
  border-color: var(--aqua-400);
}

.badge.badge-plain {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}

.more-lines {
  margin-top: 16px;
}

.more-lines > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--link);
  margin-bottom: 12px;
}

/* "Add a wing" on the compare page */
.compare-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
}

.compare-add-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.compare-add-input {
  flex: 1 1 220px;
  max-width: 360px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
}

.compare-add-results {
  margin-bottom: 16px;
}

.compare-add-none {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
}

.compare-table td .hint {
  font-size: 12px;
  color: var(--muted);
}

/* Order of the line cards, next to the cards/table toggle */

.card-order select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}

/* "Add to comparison" on the wing page */

.compare-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.compare-toggle .btn-secondary[aria-pressed="true"] {
  border-color: var(--link);
  color: var(--link);
}

.compare-toggle-status {
  font-size: 13px;
  color: var(--muted);
}

/* Front wing line grid (index) */

.line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.line-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 20px 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.line-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--tint-border);
}

.line-card .brand,
.similar-card .brand {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--link);
}

.line-card .line-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 14px;
}

.line-released {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}

.size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* On the cards the chips line up in even columns instead of ragged rows. */
.line-card .size-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}

.size-chip-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.size-chip-wrap .size-chip {
  flex: 1;
}

.compare-check {
  accent-color: var(--blue-600);
}

.compare-check {
  cursor: pointer;
}

.size-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  background: var(--tint);
  border: 1px solid var(--tint-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.size-chip:hover {
  background: var(--tint-strong);
  border-color: var(--aqua-400);
  transform: translateY(-1px);
}

.size-chip .size-name {
  font-family: var(--display);
  font-size: 15px;
  color: var(--accent-text);
}

.size-chip .size-area {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.stat {
  background: var(--tint);
  border-radius: 8px;
  padding: 8px 10px;
}

.stat .label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat .value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-block;
  background: var(--tint-strong);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.badge.skill {
  background: var(--blue-900);
  color: white;
}

a.badge:hover {
  background: var(--tint-border);
  color: var(--heading);
}

/* A product photo in the corner of a line card (first size that has one);
   brand photos are shot on white, so the box stays white in both themes. */
.line-card {
  position: relative;
}

.line-card.has-thumb .line-title,
.line-card.has-thumb .brand {
  padding-right: 72px;
}

/* The title block stays at least as tall as the photo so the size chips
   start below it. */
.line-card.has-thumb .line-title {
  min-height: 46px;
}

.line-thumb {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: var(--image-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
}

.detail-image {
  background: var(--image-bg);
}

/* Brands */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.brand-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.brand-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--tint-border);
}

.brand-card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.brand-card-count {
  font-size: 13px;
  color: var(--muted);
}

.brand-logo {
  object-fit: contain;
}

.brands-pending {
  margin-top: 32px;
}

.brands-pending h2 {
  margin-bottom: 10px;
}

.brand-logo-card {
  max-height: 48px;
  max-width: 96px;
  margin-bottom: 4px;
}

.brand-logo-hero {
  max-height: 72px;
  max-width: 160px;
  margin-bottom: 12px;
}

/* Show page */

.detail-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 32px 28px;
  margin-bottom: 8px;
}

/* A thin run of the site gradient along the top edge. */
.detail-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--button-gradient);
}

.detail-hero .brand {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--link);
  margin-bottom: 4px;
}

.detail-hero-meta + .detail-hero-meta {
  margin-top: 6px;
}

.line-description {
  margin: 14px 0 6px;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

/* Title, badges and description on the left, product photo on the right.
   Brand photos are mostly square with the part small in the middle; next
   to the text their padding costs nothing, above it it pushed the specs
   below the fold. */
.detail-head {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.detail-head .detail-image {
  align-self: center;
}

.detail-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-image {
  display: block;
  flex: 0 1 300px;
  min-width: 0;
  max-width: 300px;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
}

@media (max-width: 700px) {
  .detail-head {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }

  .detail-image {
    flex: none;
    width: 100%;
    max-width: none;
    max-height: 150px;
  }
}

.stat .hint {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

.ratings {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.ratings li {
  display: grid;
  grid-template-columns: 130px 1fr 36px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.ratings .bar {
  display: block;
  height: 10px;
  background: var(--tint-strong);
  border-radius: 999px;
  overflow: hidden;
}

.ratings .fill {
  display: block;
  height: 100%;
  background: var(--button-gradient);
  border-radius: 999px;
}

.ratings .value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ratings-note,
.compare-hint {
  font-size: 12px;
  opacity: 0.7;
}

.compare-hint {
  font-weight: normal;
}

/* The headline numbers (area, span, aspect ratio, weight) above the grid:
   big, so they read before the connection system and the shop price. */
.key-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.key-spec {
  background: linear-gradient(160deg, var(--tint), var(--surface));
  border: 1px solid var(--tint-border);
  border-radius: 12px;
  padding: 18px 20px 16px;
}

.key-spec .value {
  display: block;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.key-spec .label {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* Two layouts for facts inside a detail card.

   Text facts (spots, centers, events: place, organiser, season, website)
   stack the label over its value, left-aligned, with an aqua rule on the
   left, so a long place name reads as one line of text.

   Spec numbers (the component pages, where the grid follows the big key
   specs) read as a spec sheet: label left, value right, hairline rows —
   short values like "140 mm" line up down the right edge. */
.detail-hero .stat-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px 32px;
  margin-top: 26px;
}

/* The rule left of each fact is a small vertical wave (an SVG tile that
   repeats down the side), so it grows with the value however many lines
   it wraps to. */
.detail-hero .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 0;
  padding: 2px 0 2px 18px;
  border-left: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cpath d='M4 0 C 6.8 6, 6.8 6, 4 12 C 1.2 18, 1.2 18, 4 24' fill='none' stroke='%2322d3ee' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 8px 24px repeat-y;
}

.detail-hero .stat .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.detail-hero .stat .value {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.detail-hero .key-specs ~ .stat-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: 40px;
  row-gap: 0;
  margin-top: 20px;
}

.detail-hero .key-specs ~ .stat-grid .stat {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-left: none;
  background: none;
  border-bottom: 1px solid var(--line);
}

.detail-hero .key-specs ~ .stat-grid .stat .label {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.detail-hero .key-specs ~ .stat-grid .stat .value {
  font-size: 15px;
  text-align: right;
}

.detail-hero .key-specs ~ .stat-grid .stat .hint {
  display: none;
}

.identifiers {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.unpublished-specs {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.set-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.set-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
}

.set-list .set-name {
  font-weight: 700;
  color: var(--heading);
  display: block;
  margin-bottom: 4px;
}

/* Independent reviews (application/_reviews): linked articles, with who
   published them, and our pros/cons/verdict read from the article. */
.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.review-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.5;
}

.review-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--heading, var(--blue-900));
  display: block;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.review-title::after {
  content: " ↗";
  font-weight: 400;
  color: var(--muted);
}

.review-meta {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.review-meta .badge {
  font-size: 11px;
}

.review-kind-retailer {
  background: var(--bg);
  color: var(--muted);
}

.review-tested {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.review-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 12px;
  margin-top: 14px;
}

.review-pros,
.review-cons {
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid;
}

.review-pros {
  background: var(--pro-bg);
  border-color: var(--pro-border);
}

.review-cons {
  background: var(--con-bg);
  border-color: var(--con-border);
}

.review-points h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.review-pros h3 { color: var(--pro); }
.review-cons h3 { color: var(--con); }

.review-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.review-points li {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
}

.review-points li::before {
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--surface);
}

.review-pros li::before {
  content: "✓";
  background: var(--pro);
}

.review-cons li::before {
  content: "✕";
  background: var(--con);
}

.review-summary {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--link, var(--blue-600));
  background: var(--tint);
  border-radius: 0 8px 8px 0;
}

.review-summary strong {
  color: var(--heading, var(--blue-900));
}

.review-fetched {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 600px) {
  .review-item {
    padding: 14px 14px;
  }
}

.provenance {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* "Spotted a wrong number?" form under the specs */

.report {
  margin-top: 14px;
  font-size: 14px;
}

.report summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--link);
}

.report-intro {
  color: var(--muted);
  margin: 10px 0;
}

.report-form {
  display: grid;
  gap: 6px;
  max-width: 520px;
}

.report-form label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 6px;
}

.report-form textarea,
.report-form input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
}

.report-form .btn-primary {
  justify-self: start;
  margin-top: 8px;
}

.report-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.flash {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 600;
}

.flash-notice {
  background: var(--tint);
  color: var(--heading);
  border: 1px solid var(--tint-border);
}

.flash-alert {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Landing page */

/* The landing hero: a full-width band the layout places above <main>
   (yield :hero). The header's gradient continues into it, two soft glows
   and a few speed streaks sit behind the text, and an SVG wave at the
   bottom hands over to the page background. */
.hero {
  position: relative;
  overflow: hidden;
  color: white;
  background: linear-gradient(165deg, var(--navy) 0%, var(--blue-600) 45%, var(--aqua-600) 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Glows: a warm-white sun glint top right, an aqua one bottom left. */
.hero::before {
  background:
    radial-gradient(600px 320px at 85% 10%, rgba(255, 255, 255, 0.22), transparent 70%),
    radial-gradient(520px 300px at 10% 95%, rgba(34, 211, 238, 0.45), transparent 70%);
}

/* Speed streaks: thin diagonal lines, barely there. */
.hero::after {
  background: repeating-linear-gradient(-22deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 38px);
  mask-image: linear-gradient(90deg, transparent 15%, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, black 55%, transparent 100%);
}

.hero-wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 104px;
  text-align: center;
}

.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  width: 100%;
  height: 72px;
  display: block;
  fill: var(--bg);
}

.home-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--aqua-200);
}

.hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 820px;
  margin: 0 auto 18px;
  color: white;
  text-shadow: 0 2px 24px rgba(8, 26, 69, 0.35);
}

.home-lede {
  max-width: 640px;
  margin: 0 auto 30px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--blue-100);
}

.home-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.btn-large {
  padding: 13px 26px;
  font-size: 16px;
}

a.btn-primary {
  display: inline-block;
  color: white;
}

/* "I ride wing and weigh 80 kg → find my wing size": one sentence of
   controls, submitted to the front-wing index. */
.home-finder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  margin: 0 auto;
  padding: 18px 20px;
  max-width: 760px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(8, 26, 69, 0.35);
}

.home-finder-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.home-finder select,
.home-finder input[type="number"] {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
}

.home-finder-weight {
  width: 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Disabled until a weight is typed in: RiderFit ignores a request with
   none, so a working button without one would just reload all wings. */
.home-finder .btn-primary:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: default;
  box-shadow: none;
  transform: none;
  filter: none;
}

.home-finder-hint {
  max-width: 560px;
  margin: 12px auto 22px;
  font-size: 13px;
  color: var(--blue-100);
  opacity: 0.9;
}

.home-actions .btn-secondary {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  color: white;
  transition: background 0.12s ease, transform 0.12s ease;
}

.home-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-1px);
}

.fit-note {
  margin: -8px 0 16px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--heading);
  background: var(--tint);
  border: 1px solid var(--tint-border);
  border-radius: 8px;
}

.home-section {
  margin-top: 56px;
}

main > .home-section:first-child {
  margin-top: 8px;
}

.home-section h2 {
  font-size: 24px;
}

.home-section h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.home-section-lede {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 15px;
  max-width: 640px;
}

.home-section-more {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.home-component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.home-component {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.home-component:hover {
  transform: translateY(-2px);
  border-color: var(--aqua-400);
  box-shadow: var(--shadow-hover);
  color: var(--ink);
}

.home-component-primary {
  background: linear-gradient(160deg, var(--tint), var(--surface));
  border-color: var(--tint-border);
}

.home-component-count {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--link);
  line-height: 1;
}

.home-component-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--heading);
  margin-top: 6px;
}

.home-component-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  flex: 1;
}

.home-component-cta {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--link);
}

.home-chips,
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-chip,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.home-chip:hover,
.chip:hover {
  border-color: var(--aqua-400);
  color: var(--accent-text);
  transform: translateY(-1px);
}

.home-chip,
.chip,
.size-chip {
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.home-chip-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--link);
  background: var(--tint);
  border-radius: 999px;
  padding: 2px 8px;
}

.home-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.home-steps li {
  counter-increment: step;
  position: relative;
  padding: 22px 22px 22px 68px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-steps li::before {
  content: counter(step);
  position: absolute;
  left: 22px;
  top: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-600);
  color: white;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-steps strong {
  font-size: 16px;
  color: var(--heading);
}

.home-steps span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.home-about {
  position: relative;
  overflow: hidden;
  padding: 32px;
  background: linear-gradient(135deg, var(--navy), var(--blue-600) 60%, var(--aqua-600));
  color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.home-about::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 220px at 90% 20%, rgba(255, 255, 255, 0.18), transparent 70%);
}

.home-about > * {
  position: relative;
  z-index: 1;
}

.home-about h2 {
  color: white;
  margin-top: 0;
}

.home-about p {
  max-width: 680px;
  line-height: 1.6;
  color: var(--blue-100);
  font-size: 15px;
}

.home-about .home-cta-line {
  margin: 20px 0 0;
}

.home-about .btn-primary {
  background: white;
  color: var(--accent-text);
}

.home-about .btn-primary:hover {
  background: var(--tint);
}

/* --- Similar wings (front wing show page) ------------------------------ */

.section-lede {
  color: var(--muted);
  font-size: 14px;
  margin: -6px 0 14px;
}

/* Three across, so the usual six similar wings make two full rows. */
.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.similar-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

.similar-card .similar-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  color: var(--ink);
}

.similar-card .similar-link:hover .name {
  color: var(--accent-text);
}

.similar-card .name {
  font-size: 15px;
  font-weight: 700;
}

.similar-card .spec {
  font-size: 12px;
  color: var(--muted);
}

.similar-card .compare-link {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.similar-actions {
  margin: 16px 0 0;
}

/* --- Search ------------------------------------------------------------ */

.search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.search-form .search-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
}

.search-form .search-input:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--tint-strong);
}

.search-prompt,
.search-truncated {
  color: var(--muted);
  font-size: 14px;
}

.search-section h2 {
  margin-top: 24px;
}

@media (max-width: 600px) {
  /* Header: logo and language on one line, the nav as a single swipeable
     row, then search. Wrapping the nav took ~225px before any content. */
  .site-header {
    padding: 14px 16px 12px;
  }

  .site-header .wrap {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .site-header .locale-switcher {
    order: 1;
    margin-left: auto;
  }

  /* Three items since the "Foils" submenu, so the row fits; it must not
     scroll (overflow would clip the submenu). */
  .site-header .site-nav {
    order: 2;
    flex-basis: 100%;
    flex-wrap: nowrap;
    align-items: center;
  }

  .site-header .site-nav > a,
  .site-header .nav-dropdown-link {
    white-space: nowrap;
    padding: 8px 0;
  }

  .site-header .nav-dropdown-toggle {
    padding: 8px 6px;
  }

  .site-header .nav-dropdown-menu {
    top: calc(100% + 4px);
    min-width: 200px;
  }

  .site-header .nav-dropdown-menu a {
    font-size: 16px;
    padding: 11px 12px;
  }

  .site-header .site-search {
    display: none;
  }

  .site-header .site-search-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 1;
    margin-left: auto;
    width: 36px;
    height: 32px;
    border-radius: 6px;
    color: white;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .site-header .site-search-link svg {
    width: 18px;
    height: 18px;
  }

  .site-header .site-search-link + .theme-switcher,
  .site-header .theme-switcher + .locale-switcher {
    margin-left: 0;
  }

  .site-header .theme-switcher {
    order: 1;
  }

  .site-header .theme-toggle {
    height: 32px;
  }

  .filter-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--heading);
    cursor: pointer;
  }

  .filter-panel[open] .filter-summary {
    border-bottom: 1px solid var(--line);
  }

  .filter-active-count {
    background: var(--blue-600);
    color: white;
    border-radius: 999px;
    min-width: 20px;
    padding: 1px 7px;
    font-size: 12px;
    text-align: center;
  }

  .compare-bar {
    flex-wrap: wrap;
  }

  .hero-wrap {
    text-align: left;
    padding: 32px 16px 72px;
  }

  .hero h1,
  .home-lede {
    margin-left: 0;
  }

  .hero-wave {
    height: 40px;
  }

  .home-actions {
    justify-content: flex-start;
  }

  .home-finder {
    justify-content: flex-start;
    padding: 14px;
  }

  .home-finder .btn-large {
    width: 100%;
    text-align: center;
  }

  .home-finder-hint {
    margin-left: 0;
  }

  .home-about {
    padding: 24px;
  }
}

/* --- Spots ------------------------------------------------------------ */
.page-lede {
  color: var(--muted);
  max-width: 720px;
  margin: -6px 0 22px;
}
/* Sticky, so another continent is one tap away anywhere in the list; one
   scrolling row on phones. Leaflet's panes sit in .spots-map's own stacking
   context, so they never cover it. */
.continent-nav,
.section-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 -4px 20px;
  padding: 10px 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.continent-nav .chip,
.section-nav .chip {
  padding: 6px 12px;
}
.continent,
.country-heading,
.spot-card[id],
.page-section {
  scroll-margin-top: 72px;
}
.country-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: -4px 0 8px;
  font-size: 14px;
}
.spot-filter .filter-actions {
  flex-wrap: wrap;
}
.spot-filter-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.spot-card:target {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}
.spots-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 360px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.spots-map noscript {
  display: block;
  padding: 24px;
}
.spots-map-popup strong {
  font-size: 14px;
}
.spots-map-popup span {
  color: var(--muted);
}
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--button-gradient);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  color: #fff;
  background: var(--blue-700);
}
@media (max-width: 600px) {
  .continent-nav,
  .section-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .continent-nav .chip,
  .section-nav .chip {
    flex: none;
  }
  .spots-map {
    height: 240px;
  }
}
.continent-nav .chip-count,
.section-nav .chip-count {
  font-weight: 500;
  color: var(--muted);
}

.continent-nav .chip.active {
  background: var(--blue-600);
  border-color: var(--link);
  color: white;
}

.continent-nav .chip.active .chip-count {
  color: var(--blue-100);
}

/* Cluster bubbles of the world map (Leaflet.markercluster; its default
   green/yellow/orange colours are overridden with the site blue). */
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(29, 111, 209, 0.3);
}

.marker-cluster div,
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: #1d6fd1;
  color: white;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
}

/* Collapsible page sections (brand page): the heading is the toggle. */
.page-section {
  margin-bottom: 8px;
}

.page-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 12px;
}

.page-section > summary::-webkit-details-marker {
  display: none;
}

.page-section > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  transform: rotate(45deg);
  transition: transform 0.12s ease;
}

.page-section:not([open]) > summary::before {
  transform: rotate(-45deg);
}

.page-section > summary h2 {
  margin: 0;
}

.section-count {
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}

.brand-team-line a {
  font-weight: 600;
}
.continent {
  margin-bottom: 36px;
}
.country-heading {
  margin: 22px 0 10px;
  font-size: 17px;
  color: var(--accent-text);
}

.spot-events-section {
  margin-top: 28px;
}

/* Climate table on a spot page: twelve month columns that scroll inside
   their frame on a phone; the spot's best months get the tint. */
.spot-climate-section {
  margin-top: 28px;
}

.climate-table th,
.climate-table td {
  padding: 8px 10px;
}

.climate-table tbody th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* The row labels stay put while the months scroll past on a phone. */
.climate-table tbody th,
.climate-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}

.climate-table thead th:first-child {
  background: var(--tint);
}

@media (max-width: 600px) {
  .climate-table tbody th {
    white-space: normal;
    min-width: 72px;
    line-height: 1.25;
  }
}

.climate-table th.num,
.climate-table td.num {
  text-align: center;
}

.climate-table th.in-season,
.climate-table td.in-season {
  background: var(--tint);
}

.climate-table thead th.in-season {
  background: var(--tint-strong);
}

.climate-table abbr {
  text-decoration: none;
}

.climate-table .climate-water-temp td {
  color: var(--link);
  font-weight: 600;
}

.climate-sources {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.climate-sources li + li {
  margin-top: 4px;
}

.spot-events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spot-event {
  padding: 14px 18px;
  gap: 2px;
}

.spot-centers-section {
  margin-top: 28px;
}
.center-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
.center-card:hover {
  border-color: var(--blue-400);
}
.center-subheading {
  font-size: 15px;
  margin: 18px 0 8px;
}
.center-brands div {
  width: 100%;
}

/* Country flags (lipis/flag-icons SVGs). Inline next to a country name by
   default; .flag-hero is the large one in a spot page's hero. */
.flag {
  display: inline-block;
  height: 1em;
  width: 1.333em;
  vertical-align: -0.15em;
  margin-right: 0.45em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  object-fit: cover;
  background: var(--surface);
}
.flag-1x1 {
  width: 1em;
}
.flag-hero {
  float: right;
  height: 54px;
  width: 72px;
  margin: 0 0 12px 16px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.1);
}
.detail-hero .brand a .flag {
  vertical-align: -0.2em;
}
.spot-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
.spot-card:hover {
  border-color: var(--blue-400);
}
.spot-region {
  color: var(--muted);
  font-size: 13px;
  margin-top: -6px;
}
.spot-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  font-size: 13px;
}
.spot-facts div {
  display: flex;
  gap: 6px;
}
.spot-facts dt {
  color: var(--muted);
}
.spot-facts dd {
  margin: 0;
  font-weight: 600;
}
.spot-summary {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.spot-summary-full {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 760px;
}

/* Pagination (index pages) */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 28px 0 8px;
  font-size: 14px;
}

.pagination-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pagination-link,
.pagination-page {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--link);
  text-decoration: none;
  line-height: 1;
}

.pagination-page {
  min-width: 34px;
  text-align: center;
}

.pagination-link:hover,
.pagination-page:hover {
  border-color: var(--link);
}

.pagination-page.is-current {
  background: var(--blue-600);
  border-color: var(--link);
  color: #fff;
  font-weight: 600;
}

.pagination-link.is-disabled {
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}

/* Spot photos (SpotPhoto) and the map on the spot pages. */
/* The spot photo is a banner across the top of the card, bleeding to
   its edges, with the credit laid over the bottom corner. */
.spot-hero-photo {
  position: relative;
  margin: -32px -32px 24px;
}
.spot-hero-photo .spot-photo-hero {
  display: block;
  width: 100%;
  max-width: none;
  height: 360px;
  object-fit: cover;
}
.spot-hero-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(transparent, rgba(8, 26, 69, 0.55));
  pointer-events: none;
}
.spot-hero-photo .photo-credit {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 1;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* With a photo, the breadcrumb's small flag is enough. */
.detail-hero:has(.spot-hero-photo) .flag-hero {
  display: none;
}
.photo-credit {
  padding: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
  color: var(--muted);
}
.photo-credit a {
  color: inherit;
}
.spot-card .spot-photo-card,
.spot-photo-placeholder {
  display: block;
  width: calc(100% + 36px);
  max-width: none;
  height: auto;
  margin: -18px -18px 4px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
/* A card without a photo keeps the same shape: its country's flag on a
   calm gradient. */
/* A spot without a photo gets water instead: the site gradient, a few
   drawn wave lines, and its flag small in the corner. */
.spot-photo-placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 C 40 10, 80 50, 120 30 S 200 10, 240 30' fill='none' stroke='white' stroke-opacity='0.18' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 240px 60px repeat,
    linear-gradient(165deg, var(--navy) 0%, var(--blue-600) 55%, var(--aqua-500) 100%);
  font-size: 26px;
}
.spot-photo-placeholder .flag {
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.spot-centers-hint {
  margin-top: auto;
  padding-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
}
.spot-map-section {
  margin-top: 28px;
}
.spot-map {
  height: 380px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.spot-map noscript {
  display: block;
  padding: 24px;
}
.map-links {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
@media (max-width: 600px) {
  .spot-hero-photo { margin: -22px -18px 20px; }
  .spot-hero-photo .spot-photo-hero { height: 220px; }
  .spot-map { height: 280px; }
}

/* Team riders ("Ridden by" on component pages, the team section on a brand page) */
.riders {
  margin-top: 32px;
}

.rider-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.rider-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rider-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rider-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
}

.rider-tier-2 .rider-avatar {
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
}

.rider-tier-3 .rider-avatar {
  background: linear-gradient(135deg, #94a3b8, var(--muted));
}

.rider-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rider-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--heading);
}

.rider-name .flag {
  margin: 0 0 0 4px;
  height: 0.85em;
  width: 1.13em;
}

.rider-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rider-disciplines .badge {
  font-size: 11px;
  padding: 2px 8px;
}

.rider-bio {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rider-gear {
  background: var(--tint);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}

.rider-gear .rider-lines {
  font-weight: 600;
  color: var(--heading);
}

.rider-gear .rider-note {
  color: var(--muted);
}

.rider-instagram {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  background: var(--bg);
}

.rider-instagram:hover {
  border-color: var(--blue-400);
  background: var(--tint);
  text-decoration: none;
}

.rider-ig-icon {
  width: 15px;
  height: 15px;
  color: var(--accent-text);
}

.rider-handle {
  color: var(--muted);
}

.rider-followers {
  font-weight: 700;
  color: var(--heading);
}

.rider-followers::before {
  content: "·";
  color: var(--muted);
  font-weight: 400;
  margin-right: 6px;
}

.rider-team {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .rider-grid {
    grid-template-columns: 1fr;
  }
}

/* Landing page: featured spots (one per continent, photo first) */

/* Six spots (one per continent): 3 × 2 on a desktop, 2 × 3 on a phone. */
.home-spot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.home-spot,
.home-event {
  padding: 18px;
  gap: 4px;
}

.home-spot .spot-region,
.home-event .spot-region {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
}

@media (max-width: 600px) {
  .home-spot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* --- Phones (iPhone-sized screens) ------------------------------------ */

.spec-table-brand {
  display: none;
}

@media (max-width: 600px) {
  /* One 16px gutter instead of page padding plus card padding: the cards
     had ~290px of a 390px screen for content. */
  main {
    padding: 20px 16px 48px;
  }

  .detail-hero,
  .filter-form,
  .line-card,
  .home-about {
    padding: 16px;
  }

  /* iOS Safari zooms into any focused field under 16px and stays zoomed. */
  input[type="search"],
  input[type="text"],
  input[type="number"],
  input[type="email"],
  select,
  textarea,
  .site-header .site-search-input,
  .site-header .locale-select,
  .filter-field select,
  .filter-field input[type="number"],
  .filter-field input[type="search"],
  .search-form .search-input,
  .report-form input[type="text"],
  .card-order select {
    font-size: 16px;
  }

  /* Tap targets: ~36px or more for anything a thumb has to hit. */

  .site-header .site-search-input {
    padding: 6px 12px;
  }

  .back-link {
    padding: 8px 0;
    margin: -8px 0 12px;
  }

  .filter-check {
    min-height: 36px;
  }

  .filter-check input[type="checkbox"],
  .compare-check {
    width: 20px;
    height: 20px;
    accent-color: var(--link);
  }

  .filter-actions .btn-primary,
  .filter-actions .btn-secondary {
    padding: 10px 18px;
  }

  .view-link {
    padding: 9px 14px;
  }

  .size-chip .size-area {
    font-size: 12px;
  }

  /* Front-wing table: the size name (with its brand) stays put while the
     numbers scroll under it; the separate brand column goes. */
  .spec-table-brand-col {
    display: none;
  }

  .spec-table-brand {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  .spec-table .spec-table-name-col {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 130px;
    max-width: 150px;
    white-space: normal;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }

  .spec-table thead .spec-table-name-col {
    background: var(--tint);
  }

  /* Compare: a narrow label column that stays put, wing columns scroll. */
  .compare-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 0;
  }

  .compare-table th,
  .compare-table td {
    padding: 9px 10px;
  }

  .compare-table thead th {
    min-width: 130px;
    white-space: normal;
    padding-right: 34px;
  }

  .compare-table tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 0;
    width: 96px;
    max-width: 96px;
    white-space: normal;
    font-size: 11px;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }

  .compare-table thead tr > th:first-child {
    background: var(--tint);
  }

  .compare-hint {
    display: block;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
  }

  .compare-remove {
    top: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The big flag beside the spot title fights the breadcrumb for width. */
  .flag-hero {
    display: none;
  }
}

@media (max-width: 600px) {
  /* Landing hero: the two calls to action side by side, the six counts
     as an even 3 × 2 grid instead of two far-apart columns. */
  .home-actions {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .home-actions .btn-large {
    flex: 1 1 0;
    padding: 12px 10px;
    text-align: center;
  }

  .home-actions .btn-secondary {
    border-radius: 10px;
  }

  .compare-bar .btn-primary {
    margin-left: 0;
  }

  /* Component pages: the specs are what people came for, so on a phone
     they go straight under the title and the line's prose follows. */
  .detail-hero:has(> .detail-head) {
    display: flex;
    flex-direction: column;
  }

  .detail-hero > .detail-head,
  .detail-head-text {
    display: contents;
  }

  .detail-hero .detail-image {
    order: -1;
    margin-bottom: 8px;
  }

  .detail-hero .key-specs,
  .detail-hero .stat-grid,
  .detail-hero .unpublished-specs,
  .detail-hero .identifiers {
    order: 1;
  }

  .key-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }

  .key-spec {
    padding: 10px 12px;
  }

  .key-spec .value {
    font-size: 22px;
  }

  .detail-hero .line-description {
    order: 2;
    margin-top: 18px;
  }

  .detail-hero .provenance,
  .detail-hero .report {
    order: 3;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* /centers: the free-text box spans the filter row; the spot link under the
   spots lede is a quiet pointer, not a second lede. */
.center-filter .filter-field-search {
  grid-column: 1 / -1;
}

.spots-centers-link {
  margin-top: -8px;
}

/* /centers table view: count and the cards/table switch on one line; the
   list-like cells may wrap so the table stays readable without a huge scroll. */
.centers-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

/* Every text column may wrap so the table always fits its frame and never
   spills past the right edge; only the country and the website stay on one
   line. The minimum widths keep names and spots from wrapping word by word. */
.center-table th,
.center-table td {
  white-space: normal;
  vertical-align: top;
}

.center-table td.nowrap,
.center-table th.nowrap {
  white-space: nowrap;
}

/* Column shares: the list columns get room so "Schulung, Verleih, Camp"
   stays on one line before the name column grows. */
.center-table th:nth-child(1) { width: 19%; }
.center-table th:nth-child(2) { width: 15%; }
.center-table th:nth-child(3) { width: 11%; }
.center-table th:nth-child(4) { width: 17%; }
.center-table th:nth-child(5) { width: 15%; }
.center-table th:nth-child(6) { width: 13%; }
.center-table th:nth-child(7) { width: 10%; }

.center-table td.center-table-name {
  min-width: 180px;
}

.center-table td.center-table-spot {
  min-width: 150px;
}

.center-table td.center-table-country {
  min-width: 110px;
}

/* A brand name never breaks at its hyphen ("F-One"). */
.center-table .nobr {
  white-space: nowrap;
}

.center-table td.wrap {
  min-width: 130px;
}

.center-table-name .hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

/* Table views (front wings, centers) get a wider column than the rest of the
   site so a row stays on one line; prose and card pages keep 1080px. A table
   whose cells may wrap (.table-fits, the centers) never needs a horizontal
   scroll from 1100px up, so its wrapper stops being a scroll container there
   and the header row can stick to the viewport; the front-wing table keeps
   its scroll because twelve no-wrap columns may still overflow. */
main.main-wide {
  max-width: 1400px;
}

@media (min-width: 1100px) {
  .main-wide .table-fits {
    overflow: visible;
  }

  .main-wide .table-fits .spec-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 var(--line);
  }

  .main-wide .table-fits .spec-table thead th:first-child {
    border-top-left-radius: var(--radius);
  }

  .main-wide .table-fits .spec-table thead th:last-child {
    border-top-right-radius: var(--radius);
  }
}

/* /events: same count + table/calendar switch as /centers' count + view bar. */
.events-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.events-section + .events-section {
  margin-top: 32px;
}

.events-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  margin: 0 0 10px;
}

.events-section-heading .section-count {
  background: var(--blue-50);
  color: var(--blue-700);
  border-radius: 999px;
  min-width: 20px;
  padding: 1px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.event-table th,
.event-table td {
  white-space: normal;
  vertical-align: top;
}

.event-table th:nth-child(1) { width: 14%; }
.event-table th:nth-child(2) { width: 26%; }
.event-table th:nth-child(3) { width: 14%; }
.event-table th:nth-child(4) { width: 16%; }
.event-table th:nth-child(5) { width: 16%; }
.event-table th:nth-child(6) { width: 14%; }

.event-table td.event-table-name {
  min-width: 180px;
}

.event-table-name .hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

/* A past event stays fully legible (it's still useful history) but reads
   as done at a glance, the way a struck-through finished task does. */
.event-row-past .event-table-name,
.event-row-past td:first-child {
  color: var(--muted);
}

/* The month calendar: a Google-style 7-column grid, each day a cell that
   can hold several event chips. Weekday headers repeat the grid's column
   count so both rows line up without an extra wrapper per week. */
.calendar {
  margin-top: 4px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 4px;
}

.calendar-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.calendar-nav-link:hover {
  background: var(--tint);
  border-color: var(--tint-border);
}

.calendar-title {
  margin: 0;
  font-size: 20px;
  min-width: 200px;
  text-align: center;
}

.calendar-today-link {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  font-size: 13px;
  color: var(--accent-text);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.calendar-weekday {
  background: var(--bg);
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.calendar-day {
  background: var(--surface);
  min-height: 96px;
  min-width: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-day-other-month {
  background: var(--bg);
}

.calendar-day-other-month .calendar-day-number {
  color: var(--muted);
}

.calendar-day-number {
  font-size: 12px;
  font-weight: 600;
}

.calendar-day-today .calendar-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--blue-600);
  color: #fff;
}

.calendar-event {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 4px;
  border-radius: 6px;
  background: var(--tint);
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
}

.calendar-event:hover {
  background: var(--tint-strong);
}

.calendar-event .flag {
  flex: none;
}

.calendar-event-location {
  flex: 0 1 auto;
  font-weight: 600;
  color: var(--muted);
}

.calendar-event-name {
  flex: 1 1 0;
}

.calendar-event-name,
.calendar-event-location {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .calendar-title {
    font-size: 17px;
    min-width: 0;
  }

  .calendar-weekday {
    padding: 6px 2px;
    font-size: 10px;
  }

  .calendar-day {
    min-height: 64px;
    padding: 4px;
  }

  .calendar-event-location {
    display: none;
  }
}

/* Everything that moves stops for people who asked their OS for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .line-card:hover,
  .brand-card:hover,
  .home-component:hover,
  .btn-primary:hover,
  .chip:hover,
  .home-chip:hover,
  .size-chip:hover {
    transform: none;
  }
}

/* Phones, second pass: size chips two to a row instead of one, the key
   numbers in one row of three when there are three, similar wings as a
   swipeable row instead of six full-width cards. */
@media (max-width: 600px) {
  .line-card .size-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .size-chip-wrap .size-chip {
    flex: 1;
  }

  .line-card.has-thumb .line-title {
    min-height: 0;
  }

  .key-specs {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }

  .key-spec .value {
    font-size: 20px;
  }

  .similar-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    margin: 0 -16px;
    padding: 4px 16px 12px;
    scrollbar-width: none;
  }

  .similar-grid .similar-card {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  .compare-tray {
    margin-left: 0;
  }

  .compare-tray.is-floating {
    width: calc(100% - 32px);
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .line-card .size-list .size-chip {
    padding: 6px 6px;
  }

  .line-card .size-list .size-chip .size-area {
    font-size: 11px;
    white-space: nowrap;
  }

  .line-card .size-list .size-chip-wrap {
    gap: 6px;
  }
}

/* Phones, spacing pass: same rhythm at a smaller scale. */
@media (max-width: 600px) {
  main {
    padding: 24px 16px 64px;
  }

  h2 {
    margin-top: 40px;
  }

  .detail-hero {
    padding: 22px 18px 20px;
  }

  .detail-hero .stat-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 18px;
  }

  .detail-hero .key-specs ~ .stat-grid {
    margin-top: 12px;
  }

  .line-grid {
    gap: 14px;
  }

  .line-card .size-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-nav {
    grid-template-columns: repeat(2, auto);
    gap: 24px 40px !important;
  }

  .site-footer .wrap {
    flex-direction: column;
  }
}

/* Card chips: the spec line never wraps inside a chip. */
.line-card .size-chip {
  padding: 6px 8px;
}

.line-card .size-chip .size-area {
  white-space: nowrap;
  font-size: 11px;
}

.footer-col a {
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .detail-hero .key-specs {
    margin-top: 16px;
  }
}

/* A submit input or button with .btn-secondary looks like the other secondary buttons. */
input[type="submit"].btn-secondary,
button[type="submit"].btn-secondary {
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--tint-border);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

input[type="submit"].btn-secondary:hover,
button[type="submit"].btn-secondary:hover {
  border-color: var(--aqua-400);
  background: var(--tint);
}

/* Equal columns for the compared wings on wider screens; long line names wrap. */
@media (min-width: 900px) {
  .compare-table {
    table-layout: fixed;
  }

  .compare-table thead th:first-child,
  .compare-table tbody th {
    width: 180px;
  }

  .compare-name {
    overflow-wrap: anywhere;
  }
}

/* Card photos and placeholders bleed exactly to the card edge (the card
   padding is 20 px, 16 px on phones). */
.spot-card .spot-photo-card,
.spot-card .spot-photo-placeholder {
  width: calc(100% + 40px);
  margin: -20px -20px 6px;
}

@media (max-width: 600px) {
  .spot-card .spot-photo-card,
  .spot-card .spot-photo-placeholder {
    width: calc(100% + 32px);
    margin: -16px -16px 6px;
  }
}

.compare-table thead th {
  white-space: normal;
}

/* Header controls (search, theme toggle, language, phone search icon):
   one height, centred on one line. The header aligns the logo and nav by
   text baseline, which put each control on a different top edge. */
.site-header .site-search,
.site-header .site-search-link,
.site-header .theme-switcher,
.site-header .locale-switcher {
  align-self: center;
}

.site-header .site-search-input,
.site-header .theme-toggle,
.site-header .locale-select,
.site-header .site-search-link {
  box-sizing: border-box;
  height: 34px;
  border-radius: 8px;
}

.site-header .site-search-input {
  padding-top: 0;
  padding-bottom: 0;
}

.site-header .theme-toggle,
.site-header .site-search-link {
  width: 34px;
}

.site-header .locale-select {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;
}

.site-header .theme-switcher,
.site-header .locale-switcher {
  display: flex;
}

/* Phones: the nav row keeps its four items on screen in every language
   ("Veranstaltungen" is the longest). */
@media (max-width: 600px) {
  .site-header .site-nav {
    gap: 14px;
  }
}

@media (max-width: 360px) {
  .site-header .site-nav {
    gap: 10px;
  }

  .site-header .site-nav > a,
  .site-header .nav-dropdown-link {
    font-size: 13px;
  }
}

/* --- Calmer colour roles -------------------------------------------------
   Ink for text, navy for titles, one blue for things you can click, pale
   blue fills only where something is highlighted, aqua only as decoration
   (waves, the far end of gradients). Before this, blue was the link, the
   title, the brand label and the chip text at once, and dark filled pills
   were the loudest thing on a page while carrying the least. */

/* Secondary badges (levels, a center's sports) are outlined, not filled
   navy: they sit next to the pale ones without shouting. */
.badge.skill {
  background: transparent;
  color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--tint-border);
}

/* Card and line titles are titles: navy, blue only on hover. */
.line-card .line-title a,
.line-card a.line-link,
.search-section .line-title a {
  color: var(--heading);
}

.line-card .line-title a:hover,
.line-card a.line-link:hover {
  color: var(--link);
}

/* The brand above a card title is a quiet label, not a second link colour. */
.line-card .brand,
.line-card .brand a,
.similar-card .brand {
  color: var(--muted);
}

.line-card .brand a:hover {
  color: var(--link);
}

/* Size chips: white with a hairline, navy size; the pale fill is kept for
   hover, so a grid of sizes no longer reads as a checkerboard. */
.size-chip {
  background: var(--surface);
  border-color: var(--line);
}

.size-chip .size-name {
  color: var(--heading);
}

.size-chip:hover {
  background: var(--tint);
}

.size-chip:hover .size-name {
  color: var(--link);
}

/* --- The flag in the wind ------------------------------------------------
   .flag-wave (ApplicationHelper#waving_flag) is the big flag of a spot,
   center or event page cut into --n vertical strips. Each strip shows its
   own part of the flag (background-size n×, position by index) and swings
   up and down; the delay walks along the strips so a wave runs from the
   pole to the free end, and the swing grows with the distance from the
   pole. Brightness follows the swing, which draws the folds. */
.flag-wave {
  float: right;
  position: relative;
  display: block;
  width: 84px;
  height: 63px;
  margin: 4px 4px 12px 20px;
  /* It also carries .flag-hero (for the page rules that hide or place the
     big flag); that class's frame and ring must not show around the cloth. */
  box-shadow: none;
  border-radius: 0;
  background: none;
  /* No filter here: a drop-shadow on the parent would repaint the whole
     flag on every frame instead of letting the compositor move strips. */
}

.flag-wave > img.flag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  float: none;
  box-shadow: none;
}

.flag-wave-cloth {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Each strip moves with transform and its fold shade with opacity, both
   done by the compositor, so the wave stays smooth. One sine-like cycle
   in 2.6 s; the phase walks along the strips. */
.flag-wave-slice {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  background-image: var(--flag);
  background-size: calc(var(--n) * 100%) 100%;
  background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0;
  background-repeat: no-repeat;
  --amp: calc(var(--i) / (var(--n) - 1) * 2px);
  animation: flag-wave 2.6s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: calc(var(--i) * -0.075s);
  will-change: transform;
  backface-visibility: hidden;
}

.flag-wave-slice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 50, 0.28);
  opacity: 0;
  animation: flag-fold 2.6s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: inherit;
  will-change: opacity;
}

.flag-wave-slice:first-child {
  border-radius: 2px 0 0 2px;
}

.flag-wave-slice:last-child {
  border-radius: 0 2px 2px 0;
}

@keyframes flag-wave {
  0%, 100% { transform: translate3d(0, calc(var(--amp) * -1), 0); }
  50% { transform: translate3d(0, var(--amp), 0); }
}

@keyframes flag-fold {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .flag-wave-slice,
  .flag-wave-slice::after {
    animation: none;
  }
}

@media (max-width: 600px) {
  .flag-wave {
    display: none;
  }
}

/* About page: the "what's in it" list with the same wave rule as the facts
   on detail pages, and an outlined secondary button next to the primary. */
.page h2 {
  font-size: 22px;
  margin: 40px 0 14px;
}

.about-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.about-list li {
  padding: 2px 0 2px 20px;
  font-size: 17px;
  line-height: 1.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cpath d='M4 0 C 6.8 6, 6.8 6, 4 12 C 1.2 18, 1.2 18, 4 24' fill='none' stroke='%2322d3ee' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 8px 24px repeat-y;
}

.about-list a {
  color: var(--ink);
}

.about-list a:hover {
  color: var(--link);
}

.page-signature {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--muted);
}

a.btn-secondary.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--tint-border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent-text);
}

a.btn-secondary.btn-ghost:hover {
  border-color: var(--aqua-400);
  background: var(--tint);
}