@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-full.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin-wght.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette sampled from the channel's clips */
  --paper: #E0CFAA;
  --paper-deep: #D3C09A;
  --page: #EFE3C6;
  --page-edge: #D9C8A3;
  --card: #E8DABB;
  --ink: #29231C;
  --ink-soft: #5A4C3B;
  --mustard: #CC9336;
  --teal: #2C5553;
  --teal-dk: #22433F;
  --sage: #5A7664;
  --sage-dk: #45604F;
  --brick: #B2462C;
  --terra: #B5573D;
  --salmon: #E0907A;
  --cream: #F6EEDC;
  --glass: rgba(236, 224, 196, .62);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", "Segoe UI", system-ui, sans-serif;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

[hidden] { display: none !important; }

mark {
  position: relative;
  background: none;
  color: inherit;
  white-space: nowrap;
}
mark::before {
  content: "";
  position: absolute;
  left: -.1em;
  right: -.14em;
  top: .46em;
  bottom: -.04em;
  z-index: -1;
  background: var(--mustard);
  transform: rotate(-1.4deg);
  clip-path: polygon(0 10%, 100% 0, 99% 100%, 1% 88%);
}

/* svg fills */
.f-ink { fill: var(--ink); } .s-ink { stroke: var(--ink); }
.f-mustard { fill: var(--mustard); } .s-mustard { stroke: var(--mustard); }
.f-teal { fill: var(--teal); } .s-teal { stroke: var(--teal); }
.f-sage { fill: var(--sage); } .f-sage-dk { fill: var(--sage-dk); }
.f-brick { fill: var(--brick); } .f-terra { fill: var(--terra); } .f-terra-hi { fill: #C46A4E; }
.f-salmon { fill: var(--salmon); } .f-card { fill: var(--card); } .f-cream { fill: var(--cream); }
.f-glass { fill: var(--glass); } .s-glass { stroke: #BCAA85; }
.s-cream { stroke: var(--cream); } .s-brick { stroke: var(--brick); } .f-band { fill: var(--mustard); fill-opacity: .55; }
.svg-q { font: 900 40px var(--display); fill: var(--brick); }
.svg-q-lg { font-size: 68px; }
.svg-n { font: 800 15px var(--sans); fill: var(--ink); }
/* Layout: one screen. A pop-up book lies on the paper desk; the cover is the menu button,
   chapters flip like real pages, and each right-hand page folds its cut-outs up. */

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background-color: var(--paper);
  background-image: var(--grain), radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(90, 64, 30, .16));
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.app {
  --pw: min(460px, 40vw, calc((100svh - 170px) / 1.42));
  --ph: calc(var(--pw) * 1.32);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-block: 14px 10px;
}
@media (max-width: 760px) {
  .app { --pw: min(82vw, 400px, calc((100svh - 230px) / 1.42)); }
}

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
}
.mast-links { display: flex; align-items: baseline; gap: 14px; }
.brand {
  color: var(--ink);
  text-decoration: none;
  font: 800 1.15rem/1 var(--display);
  font-variation-settings: "SOFT" 100;
  letter-spacing: -.01em;
}
.issue {
  text-decoration: none;
  font: 600 .68rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 2px solid currentColor;
  padding-bottom: .4em;
}

/* ---------- stage ---------- */
.viewport {
  position: relative;
  overflow: hidden;
  margin-left: calc(-1 * var(--gutter-l));
  margin-right: calc(-1 * var(--gutter-r));
  touch-action: pan-y;
}
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-back { z-index: 0; }
.fx-front { z-index: 2; }
.scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: calc(var(--pw) * 4.4);
  perspective-origin: 50% 28%;
}
.desk {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}
.book {
  --bx: calc(var(--pw) * -.5);
  --by: calc(var(--ph) * -.02);
  --tilt: 34deg;
  --bs: .9;
  position: absolute;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  left: calc(var(--pw) * -1);
  top: calc(var(--ph) * -.5);
  transform-style: preserve-3d;
  transform: translate3d(var(--bx), var(--by), 0) rotateX(var(--tilt)) scale(var(--bs));
  transition: transform 1.15s cubic-bezier(.6, .02, .2, 1);
}
.app[data-state="opening"] .book,
.app[data-state="open"] .book { --bx: 0px; --tilt: 20deg; --bs: 1; --by: calc(var(--ph) * .01); }
@media (max-width: 760px) {
  .app[data-state="opening"][data-focus="right"] .book,
  .app[data-state="open"][data-focus="right"] .book { --bx: calc(var(--pw) * -.5); }
  .app[data-state="open"][data-focus="left"] .book { --bx: calc(var(--pw) * .5); }
  .app[data-state="open"] .book { transition-duration: .8s; }
}

.book-shadow {
  position: absolute;
  left: 49%;
  top: 1%;
  width: 54%;
  height: 102%;
  border-radius: 12px;
  background: rgba(70, 46, 16, .34);
  filter: blur(calc(var(--pw) * .045));
  transform: translate3d(2%, 4%, -2px);
  transition: left 1.1s cubic-bezier(.6, .02, .2, 1), width 1.1s cubic-bezier(.6, .02, .2, 1);
}
.app[data-state="opening"] .book-shadow,
.app[data-state="open"] .book-shadow { left: -2%; width: 104%; }

.board-back {
  position: absolute;
  left: 50%;
  top: -1.5%;
  width: 51.6%;
  height: 103%;
  border-radius: 3px 10px 10px 3px;
  background-color: var(--teal-dk);
  background-image: var(--grain);
}
.ribbon {
  position: absolute;
  left: 82%;
  top: 100.5%;
  width: 3.2%;
  height: 10%;
  background: var(--brick);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transform: translateZ(1px);
}

/* ---------- pages ---------- */
.page {
  box-sizing: border-box;
  background-color: var(--page);
  color: var(--ink);
  font-size: calc(var(--pw) * .034);
  line-height: 1.4;
}
.pos-right { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; }
#pageRight {
  transform: translateZ(6px);
  transform-style: preserve-3d;
  border-radius: 0 4px 4px 0;
  background-image: linear-gradient(to right, rgba(80, 56, 24, .2), transparent 10%), var(--grain);
  box-shadow: 1px 1px 0 var(--page-edge), 2px 2px 0 var(--card), 3px 3px 0 var(--page-edge), 4px 4px 0 var(--card), 5px 5px 0 var(--page-edge);
}
.page.left {
  position: absolute;
  top: 1.456%;
  bottom: 1.456%;
  left: 3.1%;
  right: 0;
  border-radius: 4px 0 0 4px;
  background-image: linear-gradient(to left, rgba(80, 56, 24, .2), transparent 10%), var(--grain);
  padding: 8% 9% 10.5% 10%;
  display: flex;
  flex-direction: column;
  gap: .68em;
}
.turner .page { position: absolute; inset: 0; }
.turner .page.right { background-image: linear-gradient(to right, rgba(80, 56, 24, .2), transparent 10%), var(--grain); }

.folio {
  position: absolute;
  bottom: 4.5%;
  font: 500 .72em/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.page.left .folio { left: 10%; }
.rp .folio { right: 9%; }

.eyebrow {
  align-self: flex-start;
  font: 600 .74em/1 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brick);
  border-bottom: 2px solid currentColor;
  padding-bottom: .42em;
}
.eyebrow.teal { color: var(--teal); }
.h {
  margin: 0;
  font: 800 2.1em/1.04 var(--display);
  font-variation-settings: "SOFT" 100;
  letter-spacing: -.012em;
  text-wrap: balance;
  isolation: isolate;
}
.lede { margin: 0; font-size: 1.08em; color: var(--ink-soft); max-width: 34ch; }
.lede.wide { font-size: 1em; max-width: none; }

/* contents list */
.toc { list-style: none; margin: .4em 0 0; padding: 0; display: grid; gap: .35em; }
.toc a {
  width: 100%;
  display: grid;
  grid-template-columns: 1.9em auto 1fr auto;
  align-items: baseline;
  gap: .5em;
  padding: .55em 0;
  border: 0;
  border-bottom: 1.5px solid rgba(41, 35, 28, .22);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.toc .num { font: 800 1.25em/1 var(--display); color: var(--brick); }
.toc .t { font: 700 1.4em/1.15 var(--display); font-variation-settings: "SOFT" 100; }
.toc .t small { display: block; font: 400 .74em/1.3 var(--sans); color: var(--ink-soft); margin-top: .2em; }
.toc .dots { border-bottom: 2px dotted rgba(41, 35, 28, .35); transform: translateY(-.3em); }
.toc .pg { font: 600 1em/1 var(--sans); font-variant-numeric: tabular-nums; }
.toc a:hover .t, .toc a:focus-visible .t { color: var(--brick); }

/* case list */
.cases { list-style: none; margin: .2em 0 0; padding: 0; display: grid; gap: .95em; }
.case-meta { font: 600 .62em/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.case-title { display: block; margin: .3em 0 .45em; font: 700 1.12em/1.15 var(--display); font-variation-settings: "SOFT" 100; }
.case-row { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.stamp {
  display: inline-block;
  font: 700 .62em/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brick);
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: .38em .55em .32em;
  transform: rotate(-3deg);
}
.stamp.teal { color: var(--teal); }
.watch { font: 600 .78em/1 var(--sans); color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
.note { margin: auto 0 0; font-size: .68em; color: var(--ink-soft); }

/* citations */
.refs { list-style: none; margin: .1em 0 0; padding: 0; display: grid; gap: .8em; }
.refs li { font-size: .74em; line-height: 1.38; }
.refs .eyebrow { display: inline-block; font-size: .82em; margin-bottom: .55em; }
.refs .eyebrow.mustard { color: #8E6212; }
.refs cite { font-style: italic; }
.refs .what { display: block; margin-top: .3em; color: var(--ink-soft); }

/* episode list */
.eps { list-style: none; margin: 0; padding: 0; display: grid; }
.eps a {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1.6em;
  align-items: baseline;
  gap: .6em;
  padding: .54em 0;
  border: 0;
  border-bottom: 1.5px solid rgba(41, 35, 28, .2);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.eps.tight a { padding-block: .32em; }
.eps.tight .t { font-size: 1em; }
.eps .t { font: 700 1.1em/1.15 var(--display); font-variation-settings: "SOFT" 100; }
.eps .len { font: 500 .74em/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.eps .pg { font: 600 .84em/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.eps a:hover .t, .eps a:focus-visible .t { color: var(--brick); }

/* episode page */
.h.ep-h { font-size: 2.02em; }
.ep-body { display: grid; gap: .55em; font-size: 1em; line-height: 1.34; }
.ep-body p { margin: 0; }
.ep-body b { font-family: var(--display); font-weight: 700; font-variation-settings: "SOFT" 100; color: var(--brick); }
.ep-body .ep-sure { color: var(--ink-soft); }
.ep-body .ep-sure b { color: var(--teal); }
.srcs { list-style: none; margin: 0; padding: .5em 0 0; display: grid; gap: .28em; font-size: .78em; line-height: 1.26; border-top: 1.5px solid rgba(41, 35, 28, .2); }
.srcs a { color: var(--teal); text-underline-offset: .18em; }
.srcs .full-text { color: var(--brick); font-weight: 600; }
.ep-nav { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6em; font-size: .84em; }
.ep-nav button { border: 0; padding: .4em 0; background: none; cursor: pointer; color: var(--ink-soft); font: 600 1em/1 var(--sans); }
.ep-nav button:hover, .ep-nav button:focus-visible { color: var(--brick); }
.watch { padding: .5em .85em; border-radius: 999px; background: var(--ink); color: var(--page); font: 600 1em/1 var(--sans); text-decoration: none; white-space: nowrap; }
.watch.soon { background: none; color: var(--ink-soft); border: 1.5px dashed var(--ink-soft); }

/* proof */
.flags { list-style: none; margin: .4em 0 0; padding: 0; display: grid; gap: 1.1em; font-size: 1em; line-height: 1.3; }
.flags li { display: grid; justify-items: start; gap: .45em; }
.flags .stamp { font-size: .7em; }

/* method */
.steps { margin: .3em 0 0; padding: 0; list-style: none; display: grid; gap: .8em; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 1.6em 1fr; gap: .35em; font-size: 1.08em; line-height: 1.3; counter-increment: s; }
.steps li::before { content: counter(s); font: 800 1.15em/1.05 var(--display); color: var(--brick); }
.steps b { font-family: var(--display); font-weight: 700; font-variation-settings: "SOFT" 100; }
.follow { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4em 1em; align-items: baseline; font-size: .98em; }
.follow span { font-weight: 600; }
.follow a { color: var(--teal); font-weight: 600; text-underline-offset: .22em; }

/* ---------- pop-ups ---------- */
.rp { position: absolute; inset: 0; transform-style: preserve-3d; }
.print { position: absolute; }
.print-eyebrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 600 .7em/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 2px solid currentColor;
  padding-bottom: .42em;
}
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crease { position: absolute; height: 2px; border-radius: 2px; background: rgba(60, 42, 20, .3); }

.pop {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 100%;
  transform: rotateX(var(--a, -50deg));
  transition: transform .8s cubic-bezier(.34, 1.42, .6, 1) var(--d, 0s);
}
.folded .pop { transform: rotateX(0deg); transition: transform .32s cubic-bezier(.55, 0, .8, .3) 0s; }
.pop > * { filter: drop-shadow(0 calc(var(--pw) * .01) 0 rgba(70, 46, 16, .16)); }
.layer {
  position: absolute;
  transform: translateZ(calc(var(--pw) * .014));
  transition: transform .6s cubic-bezier(.34, 1.4, .6, 1) var(--d, 0s);
}
.folded .layer { transform: translateZ(0); transition-duration: .3s; transition-delay: 0s; }
/* iOS Safari draws folded pop-ups on top of the closed cover, whatever their depth, so they vanish once flat. */
#pageRight.folded .pop { visibility: hidden; transition: transform .32s cubic-bezier(.55, 0, .8, .3) 0s, visibility 0s linear .32s; }
#pageRight.folded .layer { visibility: hidden; transition: transform .3s cubic-bezier(.34, 1.4, .6, 1) 0s, visibility 0s linear .3s; }
.layer svg, .pop svg { display: block; width: 100%; height: auto; }

.banner {
  font: 900 1.9em/1 var(--display);
  font-variation-settings: "SOFT" 100;
  white-space: nowrap;
  isolation: isolate;
  background: var(--page);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: .32em .55em .38em;
}
.banner i { font-style: italic; font-weight: 600; }
.banner.slant { transform: rotate(-4deg); font-size: 2.05em; }
.qtag { font: 700 .9em/1 var(--sans); border-bottom: 2px solid var(--ink); padding: 0 .1em .15em; margin-bottom: .35em; }
.cut-label { margin-top: .5em; font: 600 .64em/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: .38em; }
.cut-label.red { color: var(--brick); }

.banner.sm { font-size: 1.5em; }
.pin-note {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 1.3em 1em 1em;
  font: 700 1em/1.25 var(--display);
  font-variation-settings: "SOFT" 100;
  text-align: center;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.pin-note i { position: absolute; left: 50%; top: -.55em; width: 1.1em; height: 1.1em; margin-left: -.55em; border-radius: 50%; background: var(--brick); border: 2px solid var(--ink); box-sizing: border-box; }
.mini {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4em;
  padding: .55em .2em .5em;
  cursor: pointer;
  color: var(--ink);
  font: 600 .54em/1.1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  background: var(--page);
  border: 2px solid var(--ink);
  border-radius: 5px;
  text-decoration: none;
}
.pop .mini svg { width: auto; max-width: 100%; height: calc(var(--pw) * .105); }
.mini.soon { border-style: dashed; }
.mini:hover { background: var(--cream); }
.mini:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; }
.short {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 3px solid var(--ink);
  border-radius: 12% / 6.8%;
  background-color: var(--paper);
  background-image: var(--grain);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 0 9%;
  text-align: center;
  overflow: hidden;
}
.short .eyebrow { align-self: center; font-size: .5em; }
.short .h { font-size: .98em; line-height: 1.08; }
.short .play {
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
}
.short .play::before {
  content: "";
  margin-left: .16em;
  border-left: .62em solid var(--page);
  border-block: .38em solid transparent;
}
.short .confetti { z-index: -1; }

.meter { width: 100%; display: flex; flex-direction: column; align-items: center; }
.meter .box {
  width: 80%;
  aspect-ratio: 1 / 1.6;
  box-sizing: border-box;
  border: 2px solid var(--ink-soft);
  border-radius: 16% / 10%;
  background: var(--card);
  display: grid;
  place-items: center;
}
.meter .track { position: relative; width: 36%; height: 80%; border-radius: 22% / 9%; background: var(--ink); overflow: hidden; }
.meter .fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--h, 78%);
  background: var(--teal);
  transition: height .9s cubic-bezier(.3, .9, .3, 1) calc(var(--d, 0s) + .55s);
}
.meter .fill.accent { background: var(--mustard); }
.folded .meter .fill { height: 0; transition: height .2s; }
.meter .cut-label { color: var(--ink); font-size: .7em; }

.verdict {
  box-sizing: border-box;
  width: 100%;
  min-height: 3.4em;
  display: grid;
  place-items: center;
  padding: .5em .3em;
  text-align: center;
  font: 800 .8em/1.15 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brick);
  background: var(--page);
  border: 2.5px solid currentColor;
  border-radius: 4px;
}
.verdict.teal { color: var(--teal); }
.verdict.mustard { color: #8E6212; }

.lock .shackle, .clasp .shackle {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  transition: transform .5s cubic-bezier(.3, 1.6, .6, 1) calc(var(--d, 0s) + .75s);
}
#pageRight:not(.folded) .lock .shackle { transform: translateY(-46%) rotate(-22deg); }

/* ---------- leaves: cover + page turner ---------- */
.leaf { position: absolute; transform-style: preserve-3d; transform-origin: 0 50%; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }

.cover {
  left: 50%;
  top: -1.5%;
  width: 51.6%;
  height: 103%;
  transform: translateZ(8px) rotateY(0deg);
  transition: transform .5s cubic-bezier(.3, .8, .3, 1);
}
@media (hover: hover) {
  .app[data-state="closed"] .cover:hover { transform: translateZ(8px) rotateY(-13deg); }
}
.app[data-state="closed"] .cover:focus-within { transform: translateZ(8px) rotateY(-13deg); }
.app[data-state="opening"] .cover,
.app[data-state="open"] .cover {
  transform: translateZ(8px) rotateY(-180deg);
  transition: transform 1.15s cubic-bezier(.55, .05, .25, 1);
}
.app[data-state="closing"] .cover { transition: transform 1s cubic-bezier(.55, .05, .25, 1); }

.cover .front {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  font-size: calc(var(--pw) * .034);
  display: grid;
  place-items: center;
  border-radius: 3px 10px 10px 3px;
  background-color: var(--teal);
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .28), rgba(0, 0, 0, .05) 5%, transparent 7%, rgba(255, 255, 255, .06) 8%, transparent 10%),
    var(--grain);
  box-shadow: inset 0 0 0 calc(var(--pw) * .028) var(--teal), inset 0 0 0 calc(var(--pw) * .034) rgba(239, 227, 198, .32);
}
.cover .front:focus-visible { outline: 3px solid var(--mustard); outline-offset: 4px; }
.cover .back {
  border-radius: 10px 3px 3px 10px;
  background-color: var(--teal-dk);
  background-image: var(--grain);
}
.label {
  width: 68%;
  margin-left: 6%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9em;
  padding: 1.6em 1em 1.5em;
  text-align: center;
  background-color: var(--page);
  background-image: var(--grain);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.label .eyebrow { align-self: center; }
.cover-title {
  font: 900 3em/.96 var(--display);
  font-variation-settings: "SOFT" 100;
  letter-spacing: -.015em;
  isolation: isolate;
}
.cover-sub { font-size: .86em; color: var(--ink-soft); max-width: 18ch; }
.cover-foot { font: 600 .6em/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.clasp {
  position: absolute;
  right: -4.5%;
  top: 45%;
  width: 15%;
  transform: translateZ(1px);
}
.clasp svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 0 rgba(20, 30, 28, .35)); }
.clasp::before {
  content: "";
  position: absolute;
  left: -70%;
  right: 30%;
  top: 56%;
  height: 22%;
  background: var(--ink);
  border-radius: 3px 0 0 3px;
  z-index: -1;
}
.app:not([data-state="closed"]) .clasp .shackle { transform: translateY(-46%) rotate(-22deg); transition-delay: 0s; transition-duration: .35s; }
:root[data-motion="on"] .app[data-state="closed"] .clasp { animation: nudge 2.6s ease-in-out 1.2s infinite; }
@keyframes nudge {
  0%, 82%, 100% { transform: translateZ(1px) rotate(0); }
  86% { transform: translateZ(1px) rotate(-7deg); }
  91% { transform: translateZ(1px) rotate(6deg); }
  95% { transform: translateZ(1px) rotate(-3deg); }
}

.turner { left: 50%; top: 0; width: 50%; height: 100%; transform: translateZ(9px); pointer-events: none; }
.turner.turning { transition: transform .85s cubic-bezier(.45, .05, .3, 1); }
.turner .face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.turner .face.front::after { background: linear-gradient(to left, rgba(60, 40, 14, .35), transparent 70%); }
.turner .face.back::after { background: linear-gradient(to right, rgba(60, 40, 14, .35), transparent 70%); }
.turner.turning .face::after { animation: shade .85s ease-in-out; }
@keyframes shade { 50% { opacity: 1; } }

/* ---------- fore-edge tabs ---------- */
.tabs {
  position: absolute;
  left: 100%;
  top: 7%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pw) * .022);
  transform: translateZ(5px) translateX(-5px);
}
.tab {
  margin: 0;
  border: 0;
  cursor: pointer;
  width: calc(var(--pw) * .1);
  padding: calc(var(--pw) * .02) 0 calc(var(--pw) * .02) calc(var(--pw) * .016);
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  font-size: calc(var(--pw) * .028);
  color: var(--page);
  background: var(--brick);
  box-shadow: inset 4px 0 6px -3px rgba(0, 0, 0, .3);
}
.tab b { font: 800 1.35em/1 var(--display); }
.tab span { writing-mode: vertical-rl; font: 600 .78em/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.tab[data-go="index"] { background: var(--card); color: var(--ink); }
.tab[data-go="proof"] { background: var(--teal); }
.tab[data-go="method"] { background: var(--mustard); color: var(--ink); }
.tab[aria-current="true"] { box-shadow: inset 4px 0 6px -3px rgba(0, 0, 0, .3), 0 0 0 2px var(--ink); }
.tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- bottom bar ---------- */
.bar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  min-height: 48px;
}
.bar-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 14px; }
.navlink, .cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-height: 40px;
  padding: 0 2px;
  border: 0;
  background: none;
  cursor: pointer;
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
}
.navlink span { border-bottom: 2px solid currentColor; padding-bottom: .4em; }
.navlink[aria-current="true"] { color: var(--brick); }
.navlink:hover span, .navlink:focus-visible span { color: var(--brick); }
.navlink:focus-visible, .cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bar-sep { width: 1px; height: 18px; background: rgba(41, 35, 28, .3); }
.cta {
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  min-height: 44px;
}
.focus-toggle { display: none; }
@media (max-width: 760px) {
  .focus-toggle { display: inline-block; }
  .bar-sep { display: none; }
  .bar-group { gap: 0 12px; }
  .navlink { font-size: .66rem; min-height: 36px; }
}

:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}

@media (max-width: 480px) {
  .masthead .handle { display: none; }
}

/* ---------- legal links: reachable from the first screen, without opening the book ---------- */
.fine {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding-top: 2px;
  font: 500 .72rem/1 var(--sans);
}
.fine a { padding-block: 5px; color: var(--ink-soft); text-underline-offset: .18em; }
.fine a:hover { color: var(--brick); }
.fine a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }