/* ============================================================================
   base — fonts, tokens, reset, utilities
   ========================================================================= */

/* Self-hosted. The page must never wait on a network it does not control to
   render its own text. Both faces are variable, subset to Latin. */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  src: url('../assets/fonts/karla-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Section headings. Subset to the Gurmukhi block, so it is 15KB. The ਤੀਆਂ
   wordmark does not use this — that one is outlines and cannot fail. */
@font-face {
  font-family: 'Noto Serif Gurmukhi';
  src: url('../assets/fonts/noto-serif-gurmukhi-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0A00-0A7F, U+200C-200D;
}

:root {
  /* If a woff2 ever 404s the page steps down to these rather than collapsing. */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', 'Optima', 'Avenir Next', 'Trebuchet MS', sans-serif;
  /* Falls back to whatever Gurmukhi the system has rather than to tofu. */
  --font-gurmukhi: 'Noto Serif Gurmukhi', 'Noto Sans Gurmukhi', 'Mukta Mahee',
                   'Raavi', 'Gurmukhi MN', serif;

  /* Base ground. Every section paints over this; nothing should ever show
     white, including during an overscroll bounce. */
  --ink: #0A0708;
  --ink-deep: #050303;
  --paper: #F4EBDB;
  --paper-dim: rgba(244, 235, 219, 0.72);
  --paper-faint: rgba(244, 235, 219, 0.5);

  /* Overwritten per section from js/sections.js. These are the Sawan values,
     so the page is coherent even before the first scroll frame runs. */
  --c1: #0C272C;
  --c2: #33474C;
  --c3: #2C4A34;
  --c4: #AFC0BE;
  --accent: #7FB0A8;

  /* Shorter than it was. The copy no longer runs out into the middle of the
     painting, which is what lets the side gradient stay tight to its edge
     instead of reaching across the frame. */
  --measure: 28rem;
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --rail: clamp(1.25rem, 3.5vw, 3.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 0.84, 0.44, 1);

  /* iPhone notch and home indicator */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ------------------------------------------------------------------ reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgba(244, 235, 219, 0.22) transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 100%;
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* clip rather than hidden: hidden would make body a scroll container and
     break the fixed backdrop on some engines */
  overflow-x: clip;
}

/* Scroll is locked behind the title card, then released on enter. */
body.is-locked { overflow-y: hidden; }

h1, h2, h3, p, figure, blockquote { margin: 0; }
img, svg, picture { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

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

/* ------------------------------------------------------------------ focus -- */

:focus { outline: none; }

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

.player :focus-visible,
.chapter__more:focus-visible {
  outline-color: var(--accent);
}

/* --------------------------------------------------------------- utilities -- */

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

.noscript-note {
  max-width: 32rem;
  margin: 4rem auto;
  padding: 0 1.5rem;
  font-family: var(--font-body);
  color: var(--paper-dim);
  text-align: center;
}