/* Faces used by the app (src/constants/theme.ts): Bricolage Grotesque 600 for display, Libre Franklin for the rest. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/BricolageGrotesque_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('../assets/fonts/LibreFranklin_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('../assets/fonts/LibreFranklin_500Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('../assets/fonts/LibreFranklin_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Roles for this page, all taken from the generated theme tokens. */
  --ground: var(--dark-background);
  --raised: var(--dark-raised);
  --ink: var(--dark-text);
  --ink-quiet: var(--dark-text-secondary);
  --rule: var(--dark-line);
  --action: var(--dark-accent);
  --action-pressed: var(--light-accent);
  --on-action: var(--dark-on-accent);
  --action-text: var(--dark-accent-text);
  --danger: var(--dark-danger);

  --paper-bone: var(--dark-text);
  --paper-rose: var(--light-accent-rose);
  --paper-wine: var(--light-accent);
  --paper-ink: var(--light-text);

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ui: 'Libre Franklin', system-ui, sans-serif;

  --gutter: clamp(var(--space-md), 3.4vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --quick: 220ms;
  --settle: 320ms;
  --tab-height: 56px;

  color-scheme: dark;
  scrollbar-color: var(--rule) var(--ground);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-lg);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.5;
  caret-color: var(--action-text);
  overflow-x: clip;
}

::selection { background: var(--action); color: var(--on-action); }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* A folder sheet stays laid out while it is being covered (styles/folder.css). */
[hidden]:not(.is-leaving) { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus, var(--ink));
  outline-offset: 3px;
  border-radius: var(--radius-plate);
}

.num { font-variant-numeric: tabular-nums; }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: var(--space-sm);
  z-index: 20;
  padding: var(--space-sm) var(--space-md);
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* The official artwork, tinted the way the app tints it. */
.wordmark, .symbol {
  display: block;
  background: currentColor;
  -webkit-mask: var(--art) center / contain no-repeat;
  mask: var(--art) center / contain no-repeat;
}
.wordmark { --art: url('../assets/logo/brvsh-wordmark.svg'); height: 34px; aspect-ratio: 358.81 / 135.32; }
.symbol { --art: url('../assets/logo/brvsh-symbol.svg'); height: 56px; aspect-ratio: 104.86 / 135.17; }

.top {
  position: relative;
  z-index: 6;
  max-width: min(100vw, 1920px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--gutter) 0;
}
.top__brand { color: var(--ink); display: flex; align-items: center; min-height: 44px; }
.top__nav { display: flex; align-items: center; gap: clamp(var(--space-md), 2.4vw, var(--space-xl)); }
.top__link {
  color: var(--ink);
  font-weight: 500;
  font-size: .9375rem;
  text-decoration: none;
  padding: var(--space-compact) 0;
}
.top__link:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-plate);
  background: var(--action);
  color: var(--on-action);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.button:hover { background: var(--action-pressed); }
.button:active { transform: translateY(1px); }
.button[disabled] { opacity: .6; cursor: progress; }
.button--small { min-height: 44px; padding: 0 var(--space-md); font-size: .9375rem; }
.button--wide { width: 100%; }

.link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  padding: var(--space-compact) 0;
}
.link:hover { color: var(--action-text); }
.link--small { display: inline-block; font-size: .875rem; padding: 13px 0; }

@media (max-width: 640px) {
  .wordmark { height: 28px; }
  .top { padding-top: var(--space-md); }
  .top__link { display: none; }
}

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