/* Tab Kwizin. Tokens live in tokens.css; geometry is relative to the column. */

@font-face {
  font-family: "Bild";
  src: url("fonts/Bild.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: block;
}

@font-face {
  font-family: "Thow Mono";
  src: url("fonts/ThowMono.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

html {
  /* --mottle is a noise tile set by texture.js; without JS the ground is flat red. */
  background: var(--mottle, none) var(--formica);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

p, h1 { margin: 0; }

/* Page wrapper: the photo layer. Absolute photos resolve against it, and
   overflow: clip keeps the stack from widening or lengthening the scroll area. */
.page {
  position: relative;
  z-index: 0;
  overflow: clip;
}

.hero,
.entries,
.colophon {
  width: var(--col);
  margin-inline: auto;
}

/* Scratches: behind all content, document-tall, scroll with the page. */
.scratches {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.scratches svg {
  position: absolute;
  left: 0;
  display: block;
  overflow: visible;
}

/* 1. Hero */

.hero {
  min-height: 100lvh;
}

/* Centered in the top 100lvh − 0.5h, clear of the band where the stack peeks up. */
.hero-inner {
  height: calc(100lvh - .5 * var(--photo-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hero-gap);
}

.roundel {
  display: block;
  width: var(--roundel-d);
  height: var(--roundel-d);
}

.tagline {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tagline);
  text-align: center;
}

/* 2. Entries */

.entries {
  list-style: none;
  padding: var(--entry-lead) 0 0;
  margin-block: 0;
}

.entry {
  min-height: var(--entry-pitch);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.slot {
  width: var(--photo-w);
  aspect-ratio: 3 / 2;
}

.date {
  margin-top: calc(-1 * var(--photo-overlap));
  font-family: var(--f-date);
  font-weight: 400;
  font-size: var(--fs-date);
  line-height: 1;
  letter-spacing: var(--track-date);
  padding-inline-start: var(--track-date); /* re-center: tracking trails the last glyph */
}

.series,
.menu {
  margin-top: var(--line-gap);
  font-family: var(--f-display);
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--ink-menu);
}

.series { font-weight: var(--w-display); }

.menu {
  font-weight: var(--w-menu);
  font-size: var(--fs-menu);
  text-wrap: balance;
}

/* Photos: in their slots without JS; lifted to their home in the page layer with it. */

/* Photos are always above text, in every phase and without JS: in normal flow,
   text would otherwise paint over the date-line overlap. */
.photo {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--photo-w);
  aspect-ratio: 3 / 2;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swing .photo {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* 3. Colophon */

.colophon {
  padding-top: calc(var(--col) * .1);
  padding-bottom: calc(var(--col) * .15 + var(--tail, 0px));
  font-family: var(--f-display);
  font-weight: var(--w-menu);
  font-size: var(--fs-colophon);
  line-height: 1.3;
  text-align: center;
}

.colophon a {
  color: inherit;
  text-decoration-thickness: .06em;
  text-underline-offset: .15em;
}

/* Measures H = 100lvh once, independent of innerHeight. */
.lvh-probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100lvh;
  visibility: hidden;
  pointer-events: none;
}