/* index.html only. Hero blueprint "Tabbed folder stack": a dark ground, a headline, and a stack of file
   folders whose trapezoid tabs carry the six member names. The open front folder is this week's 시험지
   and holds the name picker, the preview frame and the one accent: 풀기 시작.
   Folder tones are steps between --ink (the ground) and --bg (the paper); every tab name is 4.5:1 or
   more on its tab. */

.home {
  --band-1: #b6c6cc;
  --band-1-ink: var(--ink);
  --band-1-hover: #d0dce0;
  --band-2: #456069;
  --band-2-ink: var(--bg);
  --band-2-hover: #5a7681;

  --band-step: 64px;
  --tab-h: 40px;
  --tab-size: 1.125rem;
  --stack-w: 86%;
  --top-h: 72px;
}

/* ---------- top row ---------- */

.home-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--top-h);
  padding: 0 var(--gutter);
}

.home-top .wordmark {
  grid-column: 2;
}

.top-links {
  display: flex;
  grid-column: 3;
  justify-self: end;
  gap: 8px 24px;
}

.home-top .text-link {
  color: var(--bg);
}

@media (max-width: 699px) {
  .home-top {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
  }

  .home-top .wordmark {
    grid-column: 1;
  }

  .top-links {
    grid-column: 2;
    gap: 16px;
  }
}

.home main {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--top-h));
}

/* ---------- headline ---------- */

.hero {
  min-height: calc(51svh - var(--tab-h) - var(--top-h));
  padding: 32px var(--gutter) 0;
  text-align: center;
}

.hero h1 {
  font-size: clamp(67px, 7vw, 112px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero-sub {
  max-width: 46ch;
  margin: 20px auto 0;
  font-size: var(--step-lead);
  line-height: 1.45;
  color: var(--bg);
  text-wrap: balance;
}

/* ---------- the stack ---------- */

.stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: var(--stack-w);
  margin: 0 auto;
  padding-top: var(--tab-h);
}

.band {
  position: relative;
  flex: none;
  height: var(--band-step);
}

.band:nth-child(1) {
  --band-c: var(--band-1);
  --tab-ink: var(--band-1-ink);
  --tab-hover: var(--band-1-hover);
  background: var(--band-1);
}

.band:nth-child(2) {
  --band-c: var(--band-2);
  --tab-ink: var(--band-2-ink);
  --tab-hover: var(--band-2-hover);
  background: var(--band-2);
}

/* Trapezoid tab rising from the band's top edge, at its own horizontal position. */
.tab {
  position: absolute;
  left: var(--x, 4%);
  bottom: calc(100% - 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--tab-h) + 1px);
  min-width: 132px;
  padding: 0 34px 1px;
  border: 0;
  border-radius: var(--radius);
  background: var(--band-c);
  color: var(--tab-ink);
  font-size: var(--tab-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(0 100%, 24px 0, calc(100% - 24px) 0, 100% 100%);
  transform-origin: 50% 100%;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.band:nth-child(1) .tab:nth-child(1) { --x: 2%; }
.band:nth-child(1) .tab:nth-child(2) { --x: 33%; }
.band:nth-child(1) .tab:nth-child(3) { --x: 63%; }
.band:nth-child(2) .tab:nth-child(1) { --x: 15%; }
.band:nth-child(2) .tab:nth-child(2) { --x: 45%; }
.band:nth-child(2) .tab:nth-child(3) { --x: 72%; }

@media (hover: hover) and (pointer: fine) {
  .tab:hover {
    background: var(--tab-hover);
    transform: scaleY(1.08);
  }
}

.tab:active {
  transform: scaleY(0.96);
}

/* The member whose entries the preview frame is showing: the tab opens in paper, like the front folder. */
.tab[aria-pressed="true"],
.tab[aria-pressed="true"]:hover {
  background: var(--bg);
  color: var(--ink);
}

/* The ring sits inside the clip, in the tab's own ink, so the slanted corners cannot hide it. */
.tab:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -8px;
}

/* ---------- the open front folder ---------- */

.folder {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "pick preview"
    "action preview";
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 0 56px;
  min-height: 40svh;
  padding: 32px;
  background: var(--bg);
  color: var(--ink);
}

.folder-tab {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--tab-h) + 1px);
  min-width: 156px;
  margin: 0;
  padding: 0 40px 1px;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--tab-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  clip-path: polygon(0 100%, 24px 0, calc(100% - 24px) 0, 100% 100%);
}

.member-pick {
  grid-area: pick;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.member-pick legend {
  margin-bottom: 14px;
  padding: 0;
  font-size: var(--step-lead);
  font-weight: 500;
  line-height: 1.3;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.member {
  position: relative;
  display: block;
}

.member input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.member span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.0625rem;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.member span::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  transition: background-color var(--t-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
  .member:hover span {
    background: #dde4e7;
  }
}

.member:active span {
  transform: scale(0.98);
}

.member input:checked + span {
  background: var(--ink);
  color: var(--bg);
}

.member input:checked + span::before {
  background: var(--bg);
}

.member input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.folder-action {
  display: flex;
  flex-wrap: wrap;
  grid-area: action;
  align-content: flex-start;
  align-items: center;
  gap: 12px 24px;
  margin-top: 20px;
}

.start-hint {
  flex: 1 1 14rem;
  min-height: 1.6em;
}

.folder-note {
  grid-column: 1 / -1;
  margin-top: 16px;
}

/* ---------- preview frame ----------
   One fixed frame with the pointed-at member's entries. */

.preview {
  display: grid;
  grid-area: preview;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  height: 280px;
  padding: 20px;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
}

.preview-body {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.preview-idle {
  max-width: 24ch;
  font-size: var(--step-body);
  line-height: 1.5;
}

.preview-name {
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.preview-total {
  margin-top: 6px;
  font-size: 1.0625rem;
}

.preview-list {
  display: grid;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.entry {
  min-width: 0;
}

.entry p {
  font-size: 1.0625rem;
  line-height: 1.45;
}

.entry-title {
  font-size: 1.25rem;
  font-weight: 600;
}

/* ---------- tablet and phone: one column, the frame opens above the name picker ---------- */

@media (max-width: 899px) {
  .hero {
    min-height: 0;
    padding-bottom: 72px;
  }

  .folder {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "preview"
      "pick"
      "action";
    grid-template-rows: auto;
    padding: 24px var(--gutter) 32px;
  }

  .preview-body {
    max-height: 328px;
  }

  .preview {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    max-height: 360px;
    margin-bottom: 24px;
    padding: 16px;
  }

  .preview[data-state="idle"] {
    display: none;
  }
}

/* ---------- phone ---------- */

@media (max-width: 599px) {
  .home {
    --band-step: 52px;
    --tab-h: 32px;
    --tab-size: 0.9375rem;
    --stack-w: 100%;
    --top-h: 56px;
  }

  .hero {
    min-height: calc(48svh - var(--tab-h) - var(--top-h));
    padding-top: 40px;
    padding-bottom: 0;
  }

  .hero h1 {
    font-size: 10.5vw;
  }

  .hero-sub {
    margin-top: 16px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .tab {
    min-width: 0;
    padding: 0 16px 1px;
    clip-path: polygon(0 100%, 14px 0, calc(100% - 14px) 0, 100% 100%);
  }

  .band:nth-child(1) .tab:nth-child(1) { --x: 2%; }
  .band:nth-child(1) .tab:nth-child(2) { --x: 36%; }
  .band:nth-child(1) .tab:nth-child(3) { --x: 70%; }
  .band:nth-child(2) .tab:nth-child(1) { --x: 3%; }
  .band:nth-child(2) .tab:nth-child(2) { --x: 35%; }
  .band:nth-child(2) .tab:nth-child(3) { --x: 67%; }

  .folder-tab {
    min-width: 120px;
    padding: 0 28px 1px;
    clip-path: polygon(0 100%, 16px 0, calc(100% - 16px) 0, 100% 100%);
  }

  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .folder-action .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab,
  .member span,
  .member span::before {
    transition: none;
  }

  .tab:hover,
  .tab:active,
  .member:active span {
    transform: none;
  }
}


/* =====================================================================================================
   Sections below the folder stack (01-04). Every section is another piece of the same stationery:
   출처 = filled bars on the dark ground, 순서 = a paper slip with a cut edge, 차례 = book spines on a
   shelf, footer = the back of the card. One grid (12 columns), anchor lines at columns 1, 2 and 7.
   ===================================================================================================== */

.home {
  --section-gap: 160px;
  --col-gap: 24px;
  --bar: #2f4650;
  --bar-hover: #3b5864;
  --tone-1: #b6c6cc;
  --tone-2: #9fd0d4;
  --tone-3: #b9d1c0;
  --tone-4: #8fa6af;
  interpolate-size: allow-keywords;
}

.sources,
.how {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  padding: var(--section-gap) var(--gutter);
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* ---------- 출처: giant word, filled bars ---------- */

.sources {
  padding-top: calc(var(--section-gap) + 24px);
}

.sources-col {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--col-gap);
  align-items: start;
}

.giant {
  margin: 0;
  font-size: clamp(5rem, 14vw, 13rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.bars {
  display: grid;
  gap: 6px;
}

.bar {
  background: var(--bar);
  color: var(--bg);
  transition: background-color var(--t-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
  .bar:hover {
    background: var(--bar-hover);
  }
}

.bar summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 0 18px;
  font-size: var(--step-body);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

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

.bar summary:focus-visible {
  outline: 3px solid var(--bg);
  outline-offset: -6px;
}

.bar-name {
  flex: 1;
}

.bar-count {
  font-size: var(--step-small);
  font-weight: 400;
  color: var(--tone-1);
}

/* plus drawn with two bars; the vertical one folds away when the bar is open */
.bar-mark {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.bar-mark::before,
.bar-mark::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.bar-mark::before {
  inset: 7.5px 0 auto;
  height: 3px;
}

.bar-mark::after {
  inset: 0 auto 0 7.5px;
  width: 3px;
  transition: transform var(--t-ui) var(--ease-out);
}

.bar[open] .bar-mark::after {
  transform: scaleY(0);
}

@supports selector(::details-content) {
  .bar::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete;
  }

  .bar[open]::details-content {
    block-size: auto;
  }
}

.bar-panel {
  padding: 2px 18px 22px;
}

.src-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.src {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 20px;
  scroll-margin-top: 24px;
}

.src-title {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
}

.src-date {
  justify-self: end;
  font-size: 1.0625rem;
  text-align: right;
}

.src-meta {
  grid-column: 1 / -1;
  font-size: var(--step-small);
  color: var(--tone-1);
}

.src-empty {
  font-size: 1.0625rem;
  color: var(--tone-1);
}

/* ---------- 순서: itinerary on a slip ---------- */

.how {
  background: var(--band-1);
  color: var(--ink);
}

.how-text {
  grid-column: 1 / 6;
}

.how h2 {
  margin-top: -0.08em;
}

.how-lead {
  max-width: 30ch;
  margin-top: 28px;
  font-size: var(--step-body);
  line-height: 1.55;
}

.slip {
  grid-column: 7 / 12;
  width: 100%;
  max-width: 480px;
  padding: 36px 28px 64px;
  background: var(--bg);
  color: var(--ink);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 97.917% 100%, 95.833% calc(100% - 10px), 93.75% 100%, 91.667% calc(100% - 10px), 89.583% 100%, 87.5% calc(100% - 10px), 85.417% 100%, 83.333% calc(100% - 10px), 81.25% 100%, 79.167% calc(100% - 10px), 77.083% 100%, 75% calc(100% - 10px), 72.917% 100%, 70.833% calc(100% - 10px), 68.75% 100%, 66.667% calc(100% - 10px), 64.583% 100%, 62.5% calc(100% - 10px), 60.417% 100%, 58.333% calc(100% - 10px), 56.25% 100%, 54.167% calc(100% - 10px), 52.083% 100%, 50% calc(100% - 10px), 47.917% 100%, 45.833% calc(100% - 10px), 43.75% 100%, 41.667% calc(100% - 10px), 39.583% 100%, 37.5% calc(100% - 10px), 35.417% 100%, 33.333% calc(100% - 10px), 31.25% 100%, 29.167% calc(100% - 10px), 27.083% 100%, 25% calc(100% - 10px), 22.917% 100%, 20.833% calc(100% - 10px), 18.75% 100%, 16.667% calc(100% - 10px), 14.583% 100%, 12.5% calc(100% - 10px), 10.417% 100%, 8.333% calc(100% - 10px), 6.25% 100%, 4.167% calc(100% - 10px), 2.083% 100%, 0% calc(100% - 10px));
}

.slip-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: var(--step-body);
  font-weight: 600;
  line-height: 1.35;
}

.slip-stage {
  margin-top: 28px;
}

.slip-stage h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.slip-rows {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.row {
  display: flex;
  align-items: last baseline;
  gap: 10px;
  line-height: 1.45;
}

.row-dots {
  flex: 1 1 24px;
  min-width: 24px;
  border-bottom: 4px dotted var(--muted);
}

.row-value {
  flex: none;
  font-weight: 600;
  text-align: right;
}

.slip-total {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 28px -28px 0;
  padding: 8px 28px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- 차례: book spines on a shelf ---------- */

.contents {
  padding: var(--section-gap) var(--gutter);
  background: var(--band-2);
  color: var(--bg);
}

.contents-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  margin-bottom: 44px;
}

.contents h2 {
  font-size: var(--step-lead);
  letter-spacing: -0.01em;
}

.contents-note {
  font-size: 1rem;
}

.shelf-wrap {
  position: relative;
  padding-bottom: 24px;
}

.shelf-wrap::after {
  content: "";
  position: absolute;
  inset: auto calc(var(--gutter) * -1) 0;
  height: 24px;
  background: var(--ink);
}

.shelf {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shelf li {
  flex: 1 1 0;
  min-width: 0;
  max-width: 132px;
}

.spine {
  display: flex;
  gap: 12px;
  width: 100%;
  height: 22em;
  padding-top: 22px;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--step-lead);
  line-height: 1.2;
  text-decoration: none;
  writing-mode: vertical-rl;
  transition: transform var(--t-ui) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.spine-label {
  align-self: center;
  white-space: nowrap;
}

.spine-band {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 10px 0;
  background: var(--tone, var(--tone-1));
  color: var(--ink);
  white-space: nowrap;
}

.spine-rate {
  margin-inline-start: auto;
  padding: 10px 0;
  writing-mode: horizontal-tb;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.spine-rate[data-low="true"] {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

.spine[data-tone="1"] { --tone: var(--tone-1); }
.spine[data-tone="2"] { --tone: var(--tone-2); }
.spine[data-tone="3"] { --tone: var(--tone-3); }
.spine[data-tone="4"] { --tone: var(--tone-4); }

@media (hover: hover) and (pointer: fine) {
  .shelf:hover .spine:not(:hover):not(:focus-visible) {
    color: var(--muted);
  }

  .spine:hover {
    transform: translateY(-10px);
  }
}

.spine:hover,
.spine:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

.spine:focus-visible {
  outline: 3px solid var(--bg);
  outline-offset: 4px;
}

.spine:active {
  transform: translateY(-4px) scale(0.98);
}

/* ---------- 지난 시험지: whole weeks as books lying flat, newest on top ---------- */

.weeks {
  padding: var(--section-gap) var(--gutter) clamp(72px, 10vw, 120px);
  background: var(--surface);
  color: var(--ink);
}

.weeks-head {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin-bottom: 56px;
}

.weeks h2 {
  font-size: var(--step-head);
  letter-spacing: -0.02em;
}

.weeks-note {
  max-width: 40ch;
  font-size: var(--step-body);
  line-height: 1.55;
}

.pile {
  display: grid;
  justify-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* each book a little shorter or longer than the one under it, so the stack reads as a stack */
.pile li {
  width: min(100%, 1040px);
}

.pile li:nth-child(3n + 2) {
  width: min(100%, 980px);
  margin-left: 28px;
}

.pile li:nth-child(3n) {
  width: min(100%, 1010px);
  margin-left: 10px;
}

.book {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 40px;
  min-height: 96px;
  padding: 20px 32px;
  background: var(--tone);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--t-hover) var(--ease-out), background-color var(--t-hover) ease;
}

.book[data-tone="top"] { --tone: var(--band-2); color: var(--bg); }
.book[data-tone="1"] { --tone: var(--band-1); }
.book[data-tone="2"] { --tone: var(--tone-4); }
.book[data-tone="3"] { --tone: var(--tone-2); }

.book-title {
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.book-facts,
.book-mine {
  font-size: 1rem;
  line-height: 1.4;
}

.book-mine {
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .book:hover {
    transform: translateX(16px);
  }
}

.book:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.book:active {
  transform: translateX(6px);
}

/* the board the pile rests on */
.pile-board {
  height: 28px;
  margin-inline: calc(var(--gutter) * -1);
  background: var(--ink);
}

/* ---------- footer: the back of the card ---------- */

.back {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: 120px var(--gutter) 72px;
  background: var(--ink);
  color: var(--ink);
}

.card {
  grid-column: 2 / 12;
}

.card-edge {
  height: 44px;
  background: var(--bg);
  clip-path: url(#scallop-12);
}

.card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 32px 56px 40px;
  background: var(--bg);
}

.signoff {
  font-size: var(--step-head);
  letter-spacing: -0.02em;
}

.card-message {
  max-width: 34ch;
  margin-top: 24px;
  font-size: var(--step-body);
  line-height: 1.55;
}

.imprint {
  grid-column: 1 / -1;
  margin-top: 56px;
  font-size: var(--step-small);
  text-align: center;
}

/* ---------- motion: each section arrives in its own manner (once, then still) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* bars arrive row by row from the left, the slip is pulled out, spines stand up */
  .js [data-reveal="bar"] { translate: -32px 0; }
  .js [data-reveal="slip"] { translate: 0 56px; }
  .js [data-reveal="row"] { translate: 0 14px; }
  .js [data-reveal="spine"] { translate: 0 64px; }
  .js [data-reveal="book"] { translate: 0 -40px; }

  .js [data-reveal="bar"].is-in { animation-name: arrive-left; animation-duration: 700ms; }
  .js [data-reveal="slip"].is-in { animation-name: arrive-slip; animation-duration: 900ms; }
  .js [data-reveal="row"].is-in { animation-name: arrive-row; animation-duration: 500ms; }
  .js [data-reveal="spine"].is-in { animation-name: arrive-spine; animation-duration: 800ms; }
  .js [data-reveal="book"].is-in { animation-name: arrive-book; animation-duration: 700ms; }

  /* If the script never runs, below-the-fold parts show themselves after a while instead of staying hidden. */
  .js [data-reveal]:not(.is-in):not([data-reveal="load"]) {
    animation: reveal-failsafe 1ms linear 6s forwards;
  }
}

@keyframes arrive-left {
  from { opacity: 0; translate: -32px 0; }
}

@keyframes arrive-slip {
  from { opacity: 0; translate: 0 56px; }
}

@keyframes arrive-row {
  from { opacity: 0; translate: 0 14px; }
}

@keyframes arrive-spine {
  from { opacity: 0; translate: 0 64px; }
}

@keyframes arrive-book {
  from { opacity: 0; translate: 0 -40px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar,
  .bar-mark::after,
  .spine,
  .book,
  .card-links a {
    transition: none;
  }

  .bar::details-content {
    transition: none;
  }

  .spine:hover,
  .spine:active,
  .book:hover,
  .book:active,
  .card-links a:hover,
  .card-links a:active {
    transform: none;
  }
}

/* ---------- tablet and phone ---------- */

@media (max-width: 899px) {
  .home {
    --section-gap: 112px;
  }

  .sources,
  .how {
    grid-template-columns: minmax(0, 1fr);
  }

  .sources-col,
  .how-text,
  .slip {
    grid-column: 1;
  }

  .sources-col {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }

  .giant {
    margin-bottom: 20px;
    font-size: clamp(4.5rem, 24vw, 9rem);
  }

  .how-text {
    max-width: 640px;
  }

  .slip {
    margin-top: 56px;
  }

  .back {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }

  .card {
    grid-column: 1;
  }

  .card-edge {
    height: 28px;
    clip-path: url(#scallop-6);
  }

  .card-body {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding: 16px var(--gutter) 40px;
  }

}

@media (max-width: 699px) {
  .pile li,
  .pile li:nth-child(3n + 2),
  .pile li:nth-child(3n) {
    width: 100%;
    margin-left: 0;
  }

  .pile li:nth-child(even) {
    width: calc(100% - 16px);
  }

  .book {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    padding: 18px 20px;
  }

  .shelf-wrap {
    padding-bottom: 0;
  }

  .shelf-wrap::after {
    display: none;
  }

  .shelf {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 14px;
  }

  .shelf li {
    flex: 0 1 auto;
    max-width: none;
  }

  .spine {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 0;
    background: transparent;
    color: var(--bg);
    font-size: 1.0625rem;
    writing-mode: horizontal-tb;
  }

  .spine-label {
    align-self: auto;
    white-space: normal;
  }

  .spine-band {
    align-self: auto;
    padding: 2px 8px;
    white-space: normal;
  }

  .spine:hover,
  .spine:focus-visible,
  .spine:active {
    background: var(--ink);
    color: var(--bg);
    transform: none;
  }

  .giant {
    margin-bottom: 16px;
  }

  .slip {
    padding: 28px 20px 56px;
  }

  .slip-total {
    margin-inline: -20px;
    padding-inline: 20px;
  }

}