@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@layer base {

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

  html {
    scroll-padding-block-start: 6rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--track-body);
    color: var(--ink);
    background-color: var(--paper);

    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
  }

  main {
    overflow-x: clip;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .display,
  .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-sans);
    color: var(--ink);
    text-wrap: balance;
    hyphens: none;
  }

  .display {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
    font-weight: var(--fw-medium);
  }

  .h1 {
    font-size: var(--fs-4xl);
    line-height: var(--lh-heading);
    letter-spacing: var(--track-display);
    font-weight: var(--fw-medium);
  }

  .h2 {
    font-size: var(--fs-3xl);
    line-height: var(--lh-heading);
    letter-spacing: var(--track-3xl);
    font-weight: var(--fw-medium);
  }

  .h3 {
    font-size: var(--fs-2xl);
    line-height: 1.1;
    letter-spacing: var(--track-2xl);
    font-weight: var(--fw-medium);
  }

  .h4 {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-xl);
    font-weight: var(--fw-medium);
  }

  .h5 {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-body);
    font-weight: var(--fw-medium);
  }

  p {
    text-wrap: pretty;
    max-width: var(--measure);
  }

  .grid > p,
  [class*="col-"] > p {
    max-width: none;
  }

  strong, b { font-weight: var(--fw-bold); }
  em, i     { font-style: italic; }

  small {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  a {
    color: inherit;
    text-decoration: none;

    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    padding-block-end: 0.08em;
    transition:
      background-size var(--dur) var(--ease),
      color var(--dur-fast) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    a:hover {
      color: var(--accent);
    }
  }

  a:active {
    color: var(--accent-active);
  }

  ul, ol {
    padding-inline-start: 1.25em;
  }

  li + li {
    margin-block-start: var(--s-2);
  }

  li::marker {
    color: var(--ink-3);
  }

  dl { display: grid; }
  dt { font-weight: var(--fw-medium); }
  dd { color: var(--ink-2); }

  blockquote {
    margin: 0;
  }

  figure { margin: 0; }

  figcaption {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-mono);
    color: var(--ink-3);
    margin-block-start: var(--s-3);
  }

  hr {
    border: 0;
    border-block-start: var(--bw) solid var(--rule);
    margin-block: var(--s-6);
  }

  address {
    font-style: normal;
  }

  code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.925em;
    letter-spacing: var(--track-mono);
  }

  code {
    background: var(--ink-wash);
    padding: 0.15em 0.4em;
    border-radius: var(--r-1);
  }

  pre {
    overflow-x: auto;
    padding: var(--s-4);
    border: var(--bw) solid var(--rule);
    background: var(--paper-sunk);
  }

  pre code {
    background: none;
    padding: 0;
  }

  kbd {
    border: var(--bw) solid var(--rule-strong);
    border-radius: var(--r-1);
    padding: 0.1em 0.35em;
    font-size: 0.85em;
  }

  mark {
    background: var(--accent-tint);
    color: var(--ink);
    padding: 0 0.15em;
  }

  abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
  }

  time {
    font-variant-numeric: tabular-nums;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  th, td {
    text-align: start;
    padding: var(--s-3) var(--s-4);
    border-block-end: var(--bw) solid var(--rule);
    vertical-align: baseline;
  }

  th {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-3);
  }

  img, svg, video, canvas, picture {
    display: block;
    max-width: 100%;
  }

  img, video {
    height: auto;
  }

  button, input, select, textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    appearance: none;
  }

  button {
    cursor: pointer;
    text-align: inherit;
  }

  button:disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
  }

  ::placeholder {
    color: var(--ink-3);
    opacity: 1;
  }

  textarea {
    resize: vertical;
    min-height: 8lh;
  }

  summary {
    cursor: pointer;
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  ::selection {
    background: var(--selection-bg);
    color: var(--ink);
  }

  :focus-visible {
    outline: var(--bw-strong) solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-1);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  .shell {
    width: min(100% - (var(--page-margin) * 2), var(--container));
    margin-inline: auto;
  }

  .shell--narrow {
    width: min(100% - (var(--page-margin) * 2), var(--container-narrow));
    margin-inline: auto;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
    gap: var(--row-gap, var(--gutter)) var(--gutter);
  }

  .col-1  { grid-column: auto / span 1; }
  .col-2  { grid-column: auto / span 2; }
  .col-3  { grid-column: auto / span 3; }
  .col-4  { grid-column: auto / span 4; }
  .col-5  { grid-column: auto / span 5; }
  .col-6  { grid-column: auto / span 6; }
  .col-7  { grid-column: auto / span 7; }
  .col-8  { grid-column: auto / span 8; }
  .col-9  { grid-column: auto / span 9; }
  .col-10 { grid-column: auto / span 10; }
  .col-11 { grid-column: auto / span 11; }
  .col-12 { grid-column: auto / span 12; }

  .col-start-1  { grid-column-start: 1; }
  .col-start-2  { grid-column-start: 2; }
  .col-start-3  { grid-column-start: 3; }
  .col-start-4  { grid-column-start: 4; }
  .col-start-5  { grid-column-start: 5; }
  .col-start-6  { grid-column-start: 6; }
  .col-start-7  { grid-column-start: 7; }
  .col-start-8  { grid-column-start: 8; }
  .col-start-9  { grid-column-start: 9; }
  .col-start-10 { grid-column-start: 10; }
  .col-start-11 { grid-column-start: 11; }

  @media (max-width: 60rem) {
    .grid { --cols: 6; }

    .grid > [class*="col-"]       { grid-column: auto / span 6; }
    .grid > [class*="col-start-"] { grid-column-start: auto; }

    .grid > .col-sm-1 { grid-column: auto / span 1; }
    .grid > .col-sm-2 { grid-column: auto / span 2; }
    .grid > .col-sm-3 { grid-column: auto / span 3; }
    .grid > .col-sm-4 { grid-column: auto / span 4; }
  }

  @media (max-width: 40rem) {
    .grid { --cols: 1; }
    .grid > [class*="col-"] { grid-column: auto / span 1; }
  }

  .stack > * + * { margin-block-start: var(--stack); }

  .stack--xs > * + * { margin-block-start: var(--s-2); }
  .stack--sm > * + * { margin-block-start: var(--s-3); }
  .stack--md > * + * { margin-block-start: var(--s-5); }
  .stack--lg > * + * { margin-block-start: var(--s-7); }
  .stack--xl > * + * { margin-block-start: var(--s-8); }

  .prose {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    line-height: var(--lh-prose);
    letter-spacing: 0;
    color: var(--ink-2);
    max-width: var(--measure-lead);
    text-wrap: pretty;
  }

  .prose > * + * { margin-block-start: 1.1em; }

  .prose :is(h2, h3, h4) {
    font-family: var(--font-sans);
    color: var(--ink);
    text-wrap: balance;
    letter-spacing: var(--track-2xl);
  }

  .prose h2 {
    font-size: var(--fs-2xl);
    line-height: 1.1;
    margin-block-start: 2.2em;
  }

  .prose h3 {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-xl);
    margin-block-start: 1.8em;
  }

  .prose h4 {
    font-size: var(--fs-lg);
    letter-spacing: var(--track-body);
    margin-block-start: 1.6em;
  }

  .prose :is(h2, h3, h4) + * { margin-block-start: 0.6em; }

  .prose p { max-width: none; }

  .prose :is(ul, ol) { padding-inline-start: 1.4em; }
  .prose li + li     { margin-block-start: 0.4em; }

  .prose a {
    color: var(--accent);
    background-size: 100% 1px;
  }

  @media (hover: hover) and (pointer: fine) {
    .prose a:hover {
      color: var(--accent-hover);
    }
  }

  .prose a:active {
    color: var(--accent-active);
  }

  .prose strong { color: var(--ink); }

  .prose blockquote {
    padding-inline-start: var(--s-5);
    border-inline-start: var(--bw-strong) solid var(--accent);
    color: var(--ink);
  }

  .prose .note {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-mono);
    color: var(--ink-3);
    border-inline-start: var(--bw) solid var(--rule);
    padding-inline-start: var(--s-4);
  }

  .lead {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    letter-spacing: 0;
    color: var(--ink-2);
    max-width: var(--measure-lead);
    text-wrap: pretty;
  }

  .lead--sm {
    font-size: var(--fs-lg);
  }

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

      animation-timeline: none !important;
    }

    html { scroll-behavior: auto !important; }

    ::view-transition-group(*),
    ::view-transition-image-pair(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }

  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }
  }

  body:is(.page-coc, .page-terms, .page-privacy, .page-thanks, .page-ctf-thanks) {
    --lift:        0px;
    --lift-line:   0%;
    --label-drift: 0px;
    --wipe:        0%;
    --dur-entrance: 1ms;
    --stagger:      0ms;

    --entrance:      none;
    --entrance-line: none;
  }
}

@layer utilities {

  [hidden] { display: none !important; }

  .u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .u-visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .u-no-wrap  { white-space: nowrap; }
  .u-balance  { text-wrap: balance; }
  .u-pretty   { text-wrap: pretty; }

  .u-hex { text-transform: none; }

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

  .u-mono {
    font-family: var(--font-mono);
    letter-spacing: var(--track-mono);
  }

  .u-serif { font-family: var(--font-serif); letter-spacing: 0; }

  .u-ink-2 { color: var(--ink-2); }
  .u-ink-3 { color: var(--ink-3); }

  .u-measure        { max-width: var(--measure); }
  .u-measure-narrow { max-width: var(--measure-narrow); }

  .u-mt-0 { margin-block-start: 0 !important; }
  .u-mb-0 { margin-block-end: 0 !important; }

  .u-hide-sm { @media (max-width: 60rem) { display: none !important; } }
  .u-hide-lg { @media (min-width: 60.0625rem) { display: none !important; } }
}