@layer reset, tokens, base, layout, components, sections, utilities;

/* Self-hosted fonts (Latin subset). The design tokens live in the generated /theme.css. */
@font-face {
  font-family: 'Shrikhand';
  src: url('/fonts/shrikhand-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-900-normal.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  /* Modal dialogs are centered by the browser's own margin: auto. */
  dialog {
    margin: auto;
  }
  img,
  svg,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  p,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
    padding: 0;
  }
}

@layer base {
  :root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --radius-pill: 999px;
    --shadow-lg: var(--shadow-offset-lg) var(--shadow-offset-lg) 0 var(--ink);
    --shadow-sm: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--ink);
    --focus-ring: 3px solid var(--ink);
    /* Space the fixed navbar covers. Without JavaScript the mobile navbar is not fixed. */
    --nav-offset: 0rem;
  }
  .js {
    --nav-offset: 6rem;
  }
  @media (min-width: 48rem) {
    :root {
      --nav-offset: 7rem;
    }
  }

  html {
    font-size: var(--font-size-base);
    scroll-padding-block-start: var(--nav-offset);
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    /* Rotated bands and off-edge panels must never cause sideways scrolling. */
    overflow-x: clip;
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--page);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
  }

  a {
    color: inherit;
    text-underline-offset: 0.2em;
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--yellow);
    color: #000000;
  }

  /* Custom scrollbar: black thumb with a white border, pink on hover. */
  html {
    scrollbar-color: var(--ink) var(--paper);
  }
  ::-webkit-scrollbar {
    inline-size: 14px;
  }
  ::-webkit-scrollbar-track {
    background: var(--paper);
    border-inline-start: 2px solid var(--ink);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--ink);
    border: 3px solid var(--paper);
    border-radius: var(--radius-pill);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--pink);
  }
}

@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .site-main {
    flex: 1;
    align-content: start;
    display: grid;
    /* minmax(0, …) stops wide content (the marquee track) from stretching the column. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
    padding-block: calc(var(--nav-offset) + var(--space-4)) var(--space-12);
  }
  .stack > * + * {
    margin-block-start: var(--space-4);
  }
  .container--narrow {
    inline-size: min(100% - 2 * var(--gutter), 52rem);
  }
  /* The landing page template: the whole width of the window, less the side gutters. */
  .container--full {
    inline-size: calc(100% - 2 * var(--gutter));
  }
  .section {
    display: grid;
    gap: var(--space-6);
  }
  .card-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  }
  .stack-list {
    display: grid;
    gap: var(--space-6);
  }
}