:root {
  --paper: #f2efe7;
  --ink: #1c1c1c;
  --measure: 62ch;

  --font-body: "Newsreader", Georgia, "Times New Roman", serif;

  --cover-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 6px 18px rgba(0, 0, 0, 0.1);

  --label-shift: 2px;
  --scrap-count: 8;
  --scrap-wobble-count: 5;
  --cover-wobble-count: 5;
  --scrap-1: 208 64 96;
  --scrap-2: 208 96 64;
  --scrap-3: 208 192 64;
  --scrap-4: 160 208 160;
  --scrap-5: 128 160 176;
  --scrap-6: 176 144 176;
  --scrap-7: 224 160 176;
  --scrap-8: 112 160 112;
}

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

body {
  margin: 0;
  background: white;
  background-size: 512px 512px;
  color: var(--ink);

  font: 400 18px/1.6 var(--font-body);
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: #1c1c1c;
}
a:hover {
  color: #6b6b6b;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--ink);
  z-index: 10;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}
main:focus {
  outline: none;
}

.banner {
  padding: 10px 20px;
  text-align: center;
  font-size: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.masthead {
  padding: 24px 20px 0;
}

.masthead-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.menu {
  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-lines {
  position: relative;
  display: block;
  width: 30px;
  height: 24px;
}
.menu-lines span {
  position: absolute;
  left: 0;
  width: 100%;

  height: 10px;
  background: url("/assets/img/menu-line.svg") no-repeat;
  background-size: 300% 100%;

  transition: transform 260ms steps(4, end), opacity 200ms steps(2, end);
}
.menu-lines span:nth-child(1) {
  top: 0;
  background-position: 0 center;
}
.menu-lines span:nth-child(2) {
  top: 7px;
  background-position: 50% center;
}
.menu-lines span:nth-child(3) {
  top: 14px;
  background-position: 100% center;
}

.nav-open .menu-lines span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-open .menu-lines span:nth-child(2) {
  opacity: 0;
}
.nav-open .menu-lines span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@keyframes nav-scrap-in {
  0% { opacity: 0; transform: translateY(-8px) rotate(-5deg) scale(0.86); }
  33% { opacity: 1; transform: translateY(4px) rotate(4deg) scale(1.06); }
  66% { opacity: 1; transform: translateY(-2px) rotate(-2deg) scale(0.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes nav-scrap-out {
  0% { opacity: 1; transform: none; }
  50% { opacity: 1; transform: translateY(3px) rotate(3deg) scale(0.93); }
  100% { opacity: 0; transform: translateY(-6px) rotate(-6deg) scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-lines span {
    transition-duration: 1ms;
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.3vw, 44px);
  max-width: 1100px;
  margin: 0 auto;
}

.nav img {
  height: clamp(36px, 4.8vw, 58px);
  width: auto;
}
.scrap--logo img {
  height: clamp(64px, 8.6vw, 104px);
}

.scrap img {
  transform-origin: 50% 50%;
}
@keyframes scrap-wobble-1 {
  0% { transform: rotate(0deg) translate(0, 0); }
  25% { transform: rotate(-2.5deg) translate(-1px, 1px); }
  50% { transform: rotate(2deg) translate(1px, -1px); }
  75% { transform: rotate(-1.5deg) translate(-1px, 0); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes scrap-wobble-2 {
  0% { transform: rotate(0deg) translate(0, 0); }
  20% { transform: rotate(3deg) translate(1px, 1px); }
  45% { transform: rotate(-1.8deg) translate(-1px, -1px); }
  70% { transform: rotate(1.2deg) translate(1px, 0); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes scrap-wobble-3 {
  0% { transform: rotate(0deg) translate(0, 0); }
  33% { transform: rotate(-2deg) translate(0, -2px); }
  66% { transform: rotate(2.6deg) translate(-1px, 1px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes scrap-wobble-4 {
  0% { transform: rotate(0deg) translate(0, 0); }
  16% { transform: rotate(1.5deg) translate(-1px, 1px); }
  38% { transform: rotate(-2.8deg) translate(1px, 0); }
  60% { transform: rotate(2.2deg) translate(0, -1px); }
  82% { transform: rotate(-1deg) translate(-1px, 1px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes scrap-wobble-5 {
  0% { transform: rotate(0deg) translate(0, 0); }
  30% { transform: rotate(-3.2deg) translate(-2px, 0); }
  55% { transform: rotate(1.6deg) translate(1px, 1px); }
  80% { transform: rotate(-0.8deg) translate(0, -1px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .scrap:hover img,
  .scrap:focus-visible img {
    animation: var(--scrap-wobble, scrap-wobble-1)
      var(--scrap-wobble-duration, 0.9s) steps(1, jump-start) 1;
  }
}

.rule {
  max-width: 1100px;
  margin: 22px auto 0;
  border: 0;
  height: 12px;
  background: url("/assets/img/rule.svg") no-repeat center / 100% 100%;
}
.rule-group {
  max-width: 1100px;
  margin: 22px auto 0;
}
.rule-group .rule {
  margin: 0;
}
.rule-group .rule + .rule {
  margin-top: 6px;
  transform: scaleX(-1);
}

main {
  max-width: 1100px;
  margin: 0 auto;

  padding: 56px 20px 64px;
}

main:has(> .hero) {
  padding-top: 32px;
  padding-bottom: 32px;
}

main > :first-child:not(.sr-only),
main > .sr-only:first-child + * {
  margin-top: 0;
}

.hero {
  margin: 0;
  text-align: center;
}
.hero img {
  margin: 0 auto;
  max-width: min(100%, 720px);
}

.hero--strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 12px);
  align-items: start;
}
.hero--strip img {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 860px) {
  .hero--strip {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin: 0 auto;
    gap: 0;
  }

  .hero--strip img + img {
    margin-top: -4%;
  }
}

.prose {
  max-width: var(--measure);
  margin: 32px auto 0;
}
.prose h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(20px, 4vw, 44px);
}
.books-grid {
  align-items: center;
  justify-items: center;
}
.book-cover-link {
  display: block;
}

.books-grid img {
  width: auto;
  height: auto;
  max-width: min(100%, 240px);
  max-height: 320px;

  outline: 0 solid transparent;
  outline-offset: 4px;
  box-shadow: var(--cover-shadow);
}

.book-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  max-width: 100%;
  height: 300px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

@keyframes cover-wobble-1 {
  0% { transform: rotate(0deg) translate(0, 0); }
  25% { transform: rotate(-1.2deg) translate(-2px, 1px); }
  50% { transform: rotate(0.8deg) translate(1px, -2px); }
  75% { transform: rotate(-0.5deg) translate(-1px, 0); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes cover-wobble-2 {
  0% { transform: rotate(0deg) translate(0, 0); }
  20% { transform: rotate(1.4deg) translate(2px, 1px); }
  40% { transform: rotate(-0.7deg) translate(-1px, -2px); }
  60% { transform: rotate(1deg) translate(1px, 2px); }
  80% { transform: rotate(-0.4deg) translate(-2px, 0); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes cover-wobble-3 {
  0% { transform: rotate(0deg) translate(0, 0); }
  33% { transform: rotate(-1.6deg) translate(1px, 2px); }
  66% { transform: rotate(0.9deg) translate(-2px, -1px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes cover-wobble-4 {
  0% { transform: rotate(0deg) translate(0, 0); }
  25% { transform: rotate(0.6deg) translate(2px, -1px); }
  50% { transform: rotate(-1.1deg) translate(-1px, 1px); }
  75% { transform: rotate(1.3deg) translate(0, 2px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes cover-wobble-5 {
  0% { transform: rotate(0deg) translate(0, 0); }
  20% { transform: rotate(-0.9deg) translate(-2px, -2px); }
  50% { transform: rotate(1.5deg) translate(2px, 1px); }
  70% { transform: rotate(-0.6deg) translate(-1px, 2px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

@media (hover: hover) {
  .book-cover-link:hover img,
  .book-cover-link:focus-visible img {
    outline: 2px solid rgb(var(--cover-outline, var(--scrap-1)));
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .book-cover-link:hover img,
  .book-cover-link:focus-visible img {
    animation: var(--cover-wobble, cover-wobble-1)
      var(--cover-wobble-duration, 0.9s) steps(1, jump-start) 1;
  }
}

.book-cover {
  box-shadow: var(--cover-shadow);
}

.book {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.book h1 {
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.15;
  margin: 0 0 8px;
}
.subtitle {
  margin: 0 0 16px;
  font-style: italic;
}

.book .prose {
  margin-left: 0;
  margin-right: 0;
}

.buy {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.buy a {
  display: block;
  padding: calc(12px + var(--label-shift)) 18px calc(12px - var(--label-shift));
  min-height: 44px;
  border: 1.5px solid currentColor;
  text-decoration: none;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.about-photo {
  width: 100%;
}

.about > .drawers:only-child {
  grid-column: 1 / -1;
  max-width: var(--measure);
}
.drawers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(12px + var(--label-shift)) 18px calc(12px - var(--label-shift));
  min-height: 44px;
  border: 1.5px solid currentColor;
  cursor: pointer;
  list-style: none;
}
.drawer-title::-webkit-details-marker {
  display: none;
}

.drawer-title::after {
  content: "\2193";
  flex: none;

  transform: translateY(-0.23em) rotate(180deg);
  transition: transform 400ms ease;
}

.drawer[open] > .drawer-title::after,
.drawer.is-open > .drawer-title::after {
  transform: translateY(-0.13em) rotate(0deg);
}
.drawer.is-closed > .drawer-title::after {
  transform: translateY(-0.23em) rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .drawer-title::after {
    transition-duration: 1ms;
  }
}

.about .drawer-title,
.buy a,
.faves a,
.prose a {
  transition: background-color 400ms ease;
}
@media (hover: hover) {
  .about .drawer-title:hover,
  .buy a:hover,
  .faves a:hover,
  .prose a:hover {
    background-color: rgb(var(--hover-tint, var(--scrap-1)) / 0.22);
  }
}
.about .drawer-title:focus-visible,
.buy a:focus-visible,
.faves a:focus-visible,
.prose a:focus-visible {
  background-color: rgb(var(--hover-tint, var(--scrap-1)) / 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .about .drawer-title,
  .buy a,
  .faves a,
  .prose a {
    transition-duration: 1ms;
  }
}

.buy a:hover,
.faves a:hover,
.prose a:hover {
  color: var(--ink);
}

.policies .drawer-title:hover {
  color: #6b6b6b;
}
.drawer-title:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.drawer-body.prose {
  margin: 0;
  padding: 4px 18px 20px;
}

.drawer-body[data-animating] {
  overflow: hidden;
}
.drawer-body > :first-child {
  margin-top: 16px;
}
.drawer-body > :last-child {
  margin-bottom: 0;
}

.policies {
  max-width: var(--measure);
  margin: 0 auto;
}
.policies h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 28px;
}

.drawer-body h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 28px 0 8px;
}
.drawer-body ul {
  padding-left: 20px;
}
.drawer-body li {
  margin-bottom: 6px;
}

.newsletter-art {
  max-width: var(--measure);
  margin: 40px auto 0;
}
.newsletter-art img {
  width: 100%;
}

.signup {
  max-width: var(--measure);
  margin: 40px auto 0;
  text-align: center;
}
.signup-frame {
  display: block;

  width: min(100%, 480px);
  height: 320px;
  margin: 0 auto;
  border: 1px solid #eee;
  background: white;
}

.signup-link {
  margin: 14px 0 0;
  font-size: 15px;
}

.newsletter-list {
  max-width: var(--measure);
  margin: 48px auto 0;
}
.newsletter-list h2 {
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.25;
  margin: 0 0 16px;
}

.faves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faves a {
  display: block;
  padding: calc(12px + var(--label-shift)) 18px calc(12px - var(--label-shift));
  min-height: 44px;
  border: 1.5px solid currentColor;
  text-decoration: none;
}

.notes {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.note {
  margin: 0;
}
.note blockquote {
  margin: 0;
  font-style: italic;
}
.note blockquote p {
  margin: 0;
}

.note-mark {
  padding: 1px 5px;
  background-color: rgb(var(--note-tint, var(--scrap-3)) / 0.45);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.note figcaption {
  margin-top: 6px;
  font-size: 15px;
  font-style: normal;
  color: #737373;
}
.note figcaption::before {
  content: "\2014\00a0";
}

.supplies {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: clamp(16px, 2.4vw, 32px);

  align-items: start;
}

.supply {
  position: relative;
  padding: 16px;

  outline: 0 solid transparent;
}
.supply-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.supplies h2 {
  font-size: 20px;
  margin: 12px 0 0;
}

.supply-note > :first-child {
  margin-top: 4px;
}
.supply-note > :last-child {
  margin-bottom: 0;
}

.supply-note a {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .supply--linked:hover {
    outline: 2px solid rgb(var(--cover-outline, var(--scrap-1)));
  }
}
.supply--linked:has(.supply-link:focus-visible) {
  outline: 2px solid rgb(var(--cover-outline, var(--scrap-1)));
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .supply--linked:hover {
    animation: var(--cover-wobble, cover-wobble-1)
      var(--cover-wobble-duration, 0.9s) steps(1, jump-start) 1;
  }
}

.footer {
  padding: 0 20px 40px;
  text-align: center;
  font-size: 14px;
}
.footer .rule {
  margin: 0 auto 28px;
}
.nav--footer {
  margin-bottom: 24px;
  gap: clamp(14px, 3vw, 32px);
}
.nav--footer img {
  height: clamp(30px, 4.3vw, 42px);
}

.colophon {
  margin: 0;
  font-weight: 700;
}
.colophon .credit {
  display: block;
  margin-top: 6px;
  font-size: 12px;

  font-weight: 400;

  color: #737373;
}
.colophon .credit a {
  color: inherit;
}
.colophon .credit a:hover {
  color: var(--ink);
}

@media (max-width: 700px) {
  .masthead-bar {
    display: flex;
  }
  .scrap--logo-bar img {
    height: 64px;
    width: auto;
  }

  .menu {
    margin-left: auto;
    margin-right: -7px;
  }

  #nav {
    display: none;
    gap: 18px 20px;
    padding: 26px 0 10px;
  }

  .nav-open #nav,
  .nav-closing #nav {
    display: flex;
  }

  .nav-open #nav .scrap {
    animation: nav-scrap-in 150ms steps(1, jump-start) backwards;
    animation-delay: calc(var(--i, 1) * 32ms);
  }
  .nav-closing #nav .scrap {
    animation: nav-scrap-out 100ms steps(1, jump-start) forwards;
    animation-delay: calc((var(--i, 1) - 1) * 14ms);
  }
  #nav img {
    height: clamp(44px, 13vw, 60px);
    width: auto;
  }

  .scrap--logo-inline {
    display: none;
  }

  .nav--footer {
    gap: 20px;
  }

  .about {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about-photo {
    width: min(70vw, 300px);
  }

  .book {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .book-cover {
    width: min(70vw, 300px);
  }
  .buy a {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .nav-open #nav .scrap,
  .nav-closing #nav .scrap {
    animation: none;
  }
}