/* Family portal: Paperback Bands.
   Tokens first; raw colours, sizes and radii appear only in :root and
   the dark overrides. */

@font-face {
  font-family: "Cabin";
  src: url("fonts/cabin-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Shelf and page: a true neutral grey */
  --shelf: #d6d6d6;
  --ink: #1b1b1b;
  --ink-soft: #424242;
  --line: #a8a8a8;

  /* Cover stock: the white band stays light in both themes */
  --band-paper: #fbfaf7;
  --band-ink: #1b1b1b;
  --band-ink-soft: #4a4a4a;
  --on-series: #ffffff;

  /* Reading panels (guides): light paper by day, dark paper by night */
  --guide-paper: #fbfaf7;
  --guide-ink: #1b1b1b;
  --guide-ink-soft: #4a4a4a;
  --guide-line: #cfcfcf;

  /* Series hues: each passes 4.5:1 with white text */
  --series-watch: #b8501a;
  --series-request: #9b2f5c;
  --series-photos: #2a7347;
  --series-files: #2a64a3;

  /* Series hues as text on the guide paper */
  --series-watch-text: #b8501a;
  --series-request-text: #9b2f5c;
  --series-photos-text: #2a7347;
  --series-files-text: #2a64a3;

  /* How much a series hue deepens on hover and focus */
  --deepen: 82%;
  --deepen-into: #000000;

  --focus: #1b1b1b;
  --select: #2a64a3;
  --lift-shadow: rgb(0 0 0 / 0.32);

  /* Type */
  --font: "Cabin", "Gill Sans", "Gill Sans MT", Seravek, system-ui, sans-serif;
  --fs-small: 0.9375rem;
  --fs-xsmall: 0.8125rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-cover: clamp(2.25rem, 1.9rem + 1.4vw, 3.5rem);
  --fs-title: clamp(2.125rem, 1.6rem + 2.6vw, 4.25rem);
  --lh-tight: 1.02;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;
  --track-caps: 0.08em;
  --track-tight: -0.015em;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --gutter: clamp(1rem, 0.5rem + 3vw, 4rem);
  --shelf-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);

  /* Cover geometry: paperback is 2:3 */
  --cover-ratio: 1.5;
  --title-band: 15.5rem;
  --band-min: 3rem;
  --band-max: 14svh;
  --band-phone: 0.75rem;
  --rule: 0.1875rem;
  --hairline: 1px;
  --ring: 3px;
  --ring-gap: 4px;
  --lift: -0.375rem;
  --tap: 2.75rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-lift: 220ms;

  --measure: 68ch;
  --page-max: 92rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shelf: #151515;
    --ink: #ecebe7;
    --ink-soft: #b5b5b5;
    --line: #3a3a3a;
    --band-paper: #efede8;
    --guide-paper: #222222;
    --guide-ink: #ecebe7;
    --guide-ink-soft: #b5b5b5;
    --guide-line: #3a3a3a;
    --series-watch-text: #ec9a6c;
    --series-request-text: #e08cb0;
    --series-photos-text: #7fca9c;
    --series-files-text: #8fb3e6;
    --focus: #ecebe7;
    --select: #8fb3e6;
    --lift-shadow: rgb(0 0 0 / 0.7);
  }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--ink-soft) var(--shelf);
}

body {
  margin: 0;
  background: var(--shelf);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  caret-color: var(--select);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--select); color: var(--shelf); }

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }

a {
  color: inherit;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: var(--ring-gap);
}

em { font-style: normal; font-weight: var(--w-semi); }

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

.address-inline { overflow-wrap: break-word; font-weight: var(--w-medium); }

.page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  padding-block: var(--s-7) max(var(--s-7), env(safe-area-inset-bottom));
}

/* Masthead */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  margin-block-end: var(--s-6);
}

.masthead__title {
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

.masthead__aside {
  max-width: 32ch;
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
}

.masthead__lede { color: var(--ink-soft); }

.masthead__help {
  margin-block-start: var(--s-2);
  font-weight: var(--w-semi);
}

/* The shelf of covers.
   The section is the size container so the shelf can size its rows from
   the cover width: head and foot bands share what the title band leaves
   of a 2:3 cover. */

.shelf-section { container-type: inline-size; }

.shelf {
  --cols: 4;
  --cover-w: calc((100cqi - (var(--cols) - 1) * var(--shelf-gap)) / var(--cols));
  --band: clamp(var(--band-min), calc((var(--cover-w) * var(--cover-ratio) - var(--title-band)) / 2), var(--band-max));
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: var(--band) minmax(var(--title-band), auto) minmax(var(--band), auto);
  column-gap: var(--shelf-gap);
}

.cover--watch { --series: var(--series-watch); }
.cover--request { --series: var(--series-request); }
.cover--photos { --series: var(--series-photos); }
.cover--files { --series: var(--series-files); }

.cover {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  margin-block-end: var(--shelf-gap);
  background: var(--series);
  color: var(--on-series);
  transition:
    transform var(--t-lift) var(--ease-out),
    box-shadow var(--t-lift) var(--ease-out),
    background-color var(--t-lift) var(--ease-out);
}

.cover__title {
  background: var(--band-paper);
  color: var(--band-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--s-5);
  text-align: center;
}

.cover__name {
  font-size: var(--fs-cover);
  line-height: var(--lh-tight);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
}

.cover__link { text-decoration: none; }

.cover__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cover__link:focus-visible { outline: none; }

.cover__author {
  margin-block-start: var(--s-2);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--band-ink-soft);
}

.cover__blurb {
  max-width: 24ch;
  margin-inline: auto;
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: var(--rule) solid var(--series);
  line-height: var(--lh-snug);
}

.cover__band--foot {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-4) var(--s-3);
  text-align: center;
}

.cover__address {
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  overflow-wrap: break-word;
}

.cover__apps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--s-3);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
}

.cover__apps a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-1);
}

.cover__apps a:focus-visible { outline-color: var(--on-series); outline-offset: 0; }

/* Signature: the cover deepens and lifts off the shelf */

.cover:has(.cover__link:focus-visible) {
  background-color: color-mix(in srgb, var(--series) var(--deepen), var(--deepen-into));
}

.cover:has(.cover__link:focus-visible) {
  outline: var(--ring) solid var(--focus);
  outline-offset: var(--ring-gap);
}

@media (hover: hover) {
  .cover:has(.cover__link:hover) {
    background-color: color-mix(in srgb, var(--series) var(--deepen), var(--deepen-into));
    transform: translateY(var(--lift));
    box-shadow: 0 1.25rem 1.5rem -1rem var(--lift-shadow);
  }
}

.cover:has(.cover__link:focus-visible) {
  transform: translateY(var(--lift));
  box-shadow: 0 1.25rem 1.5rem -1rem var(--lift-shadow);
}

/* Guides: the second shelf, in series order */

.guides {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: var(--hairline) solid var(--line);
}

.guides__heading {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
}

.guides__lede {
  max-width: var(--measure);
  margin-block-start: var(--s-3);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.guide-shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--shelf-gap);
  margin-block-start: var(--s-6);
  align-items: start;
}

.guide--general { --series: var(--ink); --series-text: var(--ink); --on-guide-title: var(--shelf); }
.guide--watch { --series: var(--series-watch); --series-text: var(--series-watch-text); }
.guide--request { --series: var(--series-request); --series-text: var(--series-request-text); }
.guide--photos { --series: var(--series-photos); --series-text: var(--series-photos-text); }
.guide--files { --series: var(--series-files); --series-text: var(--series-files-text); }

.guide {
  background: var(--guide-paper);
  color: var(--guide-ink);
  scroll-margin-block-start: var(--s-5);
}

.guide--wide { grid-column: 1 / -1; }

.guide__title {
  background: var(--series);
  color: var(--on-guide-title, var(--on-series));
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--w-semi);
}

.steps {
  list-style: none;
  counter-reset: step;
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
  max-width: var(--measure);
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-inline-start: calc(2rem + var(--s-3));
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  font-size: var(--fs-h3);
  line-height: 1.1;
  font-weight: var(--w-bold);
  color: var(--series-text);
  font-variant-numeric: tabular-nums;
}

.guide a { text-decoration-color: var(--series-text); }

.guide__note {
  margin: 0 var(--s-5) var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: var(--hairline) solid var(--guide-line);
  color: var(--guide-ink-soft);
  max-width: var(--measure);
}

/* Sign-in: the steps read across, the addresses follow step 3 */

.guide--wide .steps {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
}

.addresses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3) var(--s-6);
  margin: 0 var(--s-5) var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: var(--rule) solid var(--series);
}

.addresses dt { font-weight: var(--w-semi); }

.addresses dd {
  font-weight: var(--w-medium);
  overflow-wrap: break-word;
}

/* Colophon */

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: var(--hairline) solid var(--line);
  color: var(--ink-soft);
}

.colophon__help {
  color: var(--ink);
  font-weight: var(--w-semi);
}

/* Responsive */

@media (max-width: 60rem) {
  .shelf { --cols: 2; }
}

@media (min-width: 60.01rem) and (max-width: 75rem) {
  .cover__address { font-size: var(--fs-xsmall); }
}

@media (max-width: 68rem) {
  .guide-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .guide--wide .steps,
  .addresses { grid-template-columns: 1fr; }
  .addresses { padding-inline-start: calc(2rem + var(--s-3)); margin-inline: var(--s-5); }
}

/* Phone: compact bands so three covers show on the first screen */
@media (max-width: 40rem) {
  .page { padding-block-start: var(--s-5); }
  .masthead { margin-block-end: var(--s-5); }
  .masthead__aside { font-size: var(--fs-small); max-width: none; }
  .shelf {
    --cols: 1;
    grid-auto-rows: var(--band-phone) auto auto;
  }
  .cover { margin-block-end: var(--s-4); }
  .cover__title { padding: var(--s-3) var(--s-4); }
  .cover__name { font-size: var(--fs-h2); }
  .cover__author { margin-block-start: var(--s-1); }
  .cover__blurb {
    max-width: 34ch;
    margin-block-start: var(--s-2);
    padding-block-start: var(--s-2);
    font-size: var(--fs-small);
  }
  .cover__band--foot { padding: var(--s-2) var(--s-4) var(--s-1); gap: 0; }
  .guide-shelf { grid-template-columns: 1fr; }
  .guides { margin-block-start: var(--s-7); }
}

@media (prefers-reduced-motion: reduce) {
  .cover { transition: none; }
  .cover:has(.cover__link:hover),
  .cover:has(.cover__link:focus-visible) {
    transform: none;
    box-shadow: none;
  }
}