/* ==========================================================================
   Other fiction — a different book on the same shelf. Daylight instead of
   the night sea: cream paper, Garamond, centered title pages, printer's
   ornaments, and no machine voice anywhere.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url(/assets/fonts/eb-garamond-latin.woff2) format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url(/assets/fonts/eb-garamond-latin-italic.woff2) format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url(/assets/fonts/cormorant-garamond-latin.woff2) format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url(/assets/fonts/cormorant-garamond-latin-italic.woff2) format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
/* the door back to The Thousand-Year Rain speaks in that book's own type */
@font-face { font-family: "Imbue"; src: url(/assets/fonts/imbue-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/assets/fonts/plex-mono-latin-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --paper: #f4eee2;
  --paper-2: #eae2d2;
  --ink: #221c17;
  --ink-2: #4b4238;
  --ink-3: #75695b;
  --rule: rgba(34, 28, 23, 0.2);
  --oxblood: #9a2c1e;
  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-text: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.1875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
::selection { background: var(--oxblood); color: var(--paper); }
.fic-skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 10; }
.fic-skip:focus { top: 1rem; }

/* small capitals, set by hand: the text face has no true small caps in this subset */
.fic-sc { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }

/* ---------- the running head ---------- */
.fic-head {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: calc(env(safe-area-inset-top, 0px) + 2.25rem) var(--gutter) 1.4rem;
  margin-inline: var(--gutter);
  border-bottom: 3px double var(--rule);
}
.fic-mark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.fic-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.75rem; }
.fic-nav a {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 0.3rem;
}
.fic-nav a:hover { color: var(--oxblood); }
.fic-nav .fic-nav-out { color: var(--oxblood); }
.fic-nav .fic-nav-out::after { content: " \2192"; font-family: var(--f-text); }

/* ---------- ornaments ---------- */
.fleuron { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: 2.4rem auto 0; color: var(--oxblood); }
.fleuron svg { width: 2.3rem; height: auto; }
.fl-leaf { fill: currentColor; }
.fl-stem { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.fleuron-rule { width: clamp(2.5rem, 8vw, 4.5rem); height: 1px; background: var(--rule); }

/* ---------- the title page ---------- */
.fx-hero { max-width: 62rem; margin: 0 auto; padding: clamp(4rem, 11vw, 8.5rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.fx-kicker { color: var(--oxblood); }
.fx-title {
  margin-top: 1.4rem;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.7rem, 7.4vw, 6.25rem);
  line-height: 1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.fx-credo { max-width: 33rem; margin: 2rem auto 0; font-size: 1.22rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ---------- sections ---------- */
.fx-sec { max-width: 60rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--gutter); }
.fx-sec-head { display: flex; align-items: center; gap: 1.5rem; }
.fx-sec-head::before, .fx-sec-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
/* the section heads: set larger and heavier than the running small capitals, so each part of the page is plainly its own */
.fx-h {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}
.fx-note { margin-top: 1.6rem; text-align: center; font-style: italic; color: var(--ink-3); }
.fx-note i { font-style: normal; }

/* the contents page */
.fx-toc { margin-top: 1.5rem; }
.fx-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 2rem;
  align-items: baseline;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.fx-entry-title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
}
a.fx-entry-title:hover { color: var(--oxblood); }
.fx-entry-hook { grid-column: 1; max-width: 38rem; color: var(--ink-2); }
.fx-entry-meta { grid-column: 2; grid-row: 1; color: var(--ink-3); white-space: nowrap; }
.fx-entry.is-coming .fx-entry-title { color: var(--ink-3); }
.fx-entry.is-coming .fx-entry-meta { color: var(--oxblood); }

/* the shelf: three to a row, and a row that wraps onto the next one centered */
.fx-shelf {
  --shelf-gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem var(--shelf-gap);
}
.fx-shelf > li { flex: 0 1 calc((100% - 2 * var(--shelf-gap)) / 3); min-width: 0; }
.fx-book { display: grid; justify-items: center; align-content: start; text-align: center; gap: 0.3rem; }
.fx-book-title { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.6rem; line-height: 1.1; margin-top: 1.4rem; }
.fx-book-line { color: var(--ink-3); }
.fx-book-status { color: var(--oxblood); }
.fx-book-read {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 0.15rem;
}
.fx-book-read:hover { color: var(--oxblood); }

.jacket {
  position: relative;
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 2px 4px 4px 2px;
  box-shadow: 0 1px 1px rgba(34, 20, 8, 0.2), 0 26px 34px -20px rgba(40, 24, 8, 0.6);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  container-type: inline-size;
}
.fx-book:not(.fx-set):hover .jacket, .set-book:hover .jacket { transform: translateY(-4px) rotate(-0.6deg); }
.jacket::after {
  /* the hinge of the cover */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.1) 60%, transparent);
}
.jk-title { position: absolute; left: 11%; right: 8%; top: 11%; font-family: var(--f-display); line-height: 0.98; }
.jk-line, .jk-author { position: absolute; left: 11%; right: 8%; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.4; }
.jk-line { bottom: 15%; }
.jk-author { bottom: 7.5%; }

/* a jacket that wears the author's own cover painting, with the lettering set over it */
.jacket--art { background: #000; color: #efe6d6; }
.jk-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jacket--art::before {
  /* a little shade under the lettering at the foot */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.8));
  z-index: 1;
}
.jacket--art::after { z-index: 3; }
.jacket--art .jk-title, .jacket--art .jk-line, .jacket--art .jk-author { z-index: 2; }
.jacket--art .jk-line, .jacket--art .jk-author { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); }
.jacket--art .jk-title {
  top: 9%;
  font-weight: 500;
  font-size: 15.5cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.jacket--art .jk-title--long { top: 12%; font-size: 7.8cqw; letter-spacing: 0.05em; }
.jacket--art .jk-line { color: #eaa43d; }

/* a series: open, its books stand side by side, which is also how it reads with no script */
.fx-shelf > .fx-set { flex-basis: 100%; }
.set-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--shelf-gap); width: 100%; }
.set-book { display: grid; justify-items: center; align-content: start; text-align: center; gap: 0.3rem; }
.set-book-cap { display: grid; justify-items: center; gap: 0.3rem; margin-top: 1.4rem; }
.set-book-no { color: var(--ink-3); }
.set-book-title { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.6rem; line-height: 1.1; }
.set-caption { display: grid; justify-items: center; gap: 0.3rem; margin-top: 1rem; }
.set-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.6rem 1.75rem; margin-top: 0.7rem; }
.set-actions .fx-book-read { margin-top: 0; }
.set-toggle {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.5rem 0 0.15rem;
  cursor: pointer;
}
.set-toggle:hover { color: var(--oxblood); border-color: var(--oxblood); }

/* some lines speak for the whole series when it is closed, others only when it is open */
.fx-set .set-closed { display: none; }

/* closed: the first book in front and the others stacked behind it, fanning a little under the pointer */
.js .fx-shelf > .fx-set:not(.is-open) { flex-basis: calc((100% - 2 * var(--shelf-gap)) / 3); }
.js .fx-set:not(.is-open) .set-books { grid-template-columns: minmax(0, 1fr); cursor: pointer; }
.js .fx-set:not(.is-open) .set-book { grid-area: 1 / 1; }
.js .fx-set:not(.is-open) .set-book:nth-child(1) { z-index: 3; }
.js .fx-set:not(.is-open) .set-book:nth-child(2) { z-index: 2; }
.js .fx-set:not(.is-open) .set-book:nth-child(3) { z-index: 1; }
.js .fx-set:not(.is-open) .set-book-cap { display: none; }
.js .fx-set:not(.is-open) .set-closed { display: revert; }
.js .fx-set:not(.is-open) .set-open { display: none; }
.js .fx-set:not(.is-open) .set-book:nth-child(2) .jacket { transform: translate(9px, -8px) rotate(2deg); }
.js .fx-set:not(.is-open) .set-book:nth-child(3) .jacket { transform: translate(18px, -16px) rotate(4deg); }
.js .fx-set:not(.is-open) .set-books:hover .set-book:nth-child(2) .jacket { transform: translate(16px, -12px) rotate(4deg); }
.js .fx-set:not(.is-open) .set-books:hover .set-book:nth-child(3) .jacket { transform: translate(32px, -22px) rotate(8deg); }
.js .fx-set:not(.is-open) .set-caption { margin-top: 0.3rem; }
.js .fx-set:not(.is-open) .set-actions { flex-direction: column; align-items: center; }

/* opening and closing a series moves each jacket, and the books around it, to its new place. The page gives every
   jacket and caption its own view-transition-name; the captions under the books share a class for their timing. */
.set-book-cap { view-transition-class: set-cap; }
::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
/* the rest of the page takes its new place at once rather than ghosting, and each book's caption arrives once it has landed */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-new(*.set-cap) { animation-delay: 0.38s; animation-duration: 0.3s; }
::view-transition-old(*.set-cap) { animation-duration: 0.15s; }

/* the jackets drawn for the page: a river series in three waters, and Going Under */
.jacket--river, .jacket--deep, .jacket--listens { color: #efe8d8; }
.jacket--river { background: linear-gradient(180deg, #2c5047 0%, #1f3d36 100%); }
.jacket--deep { background: linear-gradient(180deg, #1c3b4a 0%, #10252f 55%, #09171e 100%); }
.jacket--listens { background: linear-gradient(180deg, #43394d 0%, #2b2433 100%); }
.jk-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.jk-lines :is(path, ellipse, circle) { fill: none; stroke: rgba(239, 232, 216, 0.32); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.jacket--listens .jk-lines circle { stroke: #efe8d8; }
.jacket--river .jk-title, .jacket--deep .jk-title, .jacket--listens .jk-title { font-style: italic; font-weight: 500; font-size: 16cqw; }

.jacket--under { background: linear-gradient(180deg, #dfe3de 0%, #cfd6d2 46%, #0f2434 46%, #0a1a26 100%); }
.jacket--under .jk-title { inset: 0; padding: 60% 8% 0 11%; font-weight: 600; font-size: 19cqw; letter-spacing: 0.04em; text-transform: uppercase; }
.jk-title--above { color: #0f2434; clip-path: inset(0 0 54% 0); }
.jk-title--below { color: #cfd6d2; opacity: 0.78; clip-path: inset(46% 0 0 0); transform: translateY(0.05em); filter: blur(0.5px); }
.jacket--under .jk-line, .jacket--under .jk-author { color: #cfd6d2; }

/* ---------- contact ---------- */
.fx-contact { text-align: center; }
.fx-contact-line { margin-top: 2rem; font-style: italic; font-size: 1.2rem; color: var(--ink-2); }
.fx-contact-mail { margin-top: 0.6rem; }
.fx-contact-mail a { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--oxblood); text-decoration-color: rgba(154, 44, 30, 0.35); overflow-wrap: anywhere; }
.fx-contact-mail a:hover { text-decoration-color: var(--oxblood); }

/* ---------- the door to the other book ---------- */
.fx-door { position: relative; display: block; margin-top: clamp(3rem, 8vw, 6rem); overflow: hidden; color: #e6ecea; text-decoration: none; background: #0a1a23; }
.fx-door-sky { position: absolute; inset: 0; background: radial-gradient(70% 100% at 68% 120%, rgba(47, 116, 128, 0.5), transparent 70%), linear-gradient(180deg, #050e14 0%, #0a1a23 100%); }
.fx-door-sky::before {
  /* the line of stalled cargo, and the depot on it */
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 22%;
  height: 160%;
  border-top: 1px dotted rgba(201, 226, 226, 0.35);
  border-radius: 50%;
}
.fx-door-sky::after {
  content: "";
  position: absolute;
  left: 71%;
  top: 25%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2a93b;
  box-shadow: 0 0 18px 5px rgba(242, 169, 59, 0.55);
}
.fx-door-inner { position: relative; display: grid; justify-items: center; gap: 0.9rem; text-align: center; padding: clamp(4.5rem, 11vw, 7.5rem) var(--gutter); }
.fx-door-k, .fx-door-go { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.fx-door-k { color: #7d959c; }
.fx-door-title { font-family: "Imbue", "Didot", Georgia, serif; font-weight: 250; font-size: clamp(2.8rem, 8.5vw, 6.5rem); line-height: 0.92; }
.fx-door-deck { max-width: 32rem; font-style: italic; font-size: 1.15rem; color: #a9bbbe; }
.fx-door-deck i { font-style: normal; }
.fx-door-go { margin-top: 0.6rem; color: #f2a93b; }
.fx-door:hover .fx-door-go span { display: inline-block; transform: translateX(4px); }

/* ---------- the colophon ---------- */
.fic-foot { text-align: center; padding: 2.5rem var(--gutter) calc(3rem + env(safe-area-inset-bottom, 0px)); }
.fic-foot .fleuron { margin-top: 0; }
.fic-foot-name { margin-top: 1.3rem; font-family: var(--f-display); font-weight: 500; letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; }
.fic-foot-fine { margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-3); }
.fic-foot-fine a { color: var(--ink-2); }

/* ---------- a story ---------- */
.st { max-width: 44rem; margin: 0 auto; padding: clamp(3.5rem, 10vw, 7rem) var(--gutter) 1rem; }
.st-head { text-align: center; }
.st-kind { color: var(--oxblood); }
.st-title { margin-top: 1.1rem; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2.8rem, 8vw, 5.25rem); line-height: 1; text-wrap: balance; }
.st-by { margin-top: 1.3rem; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; }
.st-meta { margin-top: 0.5rem; color: var(--ink-3); }
/* a chapter from a novel: which book and chapter, and the chapter's own dateline */
.st-part { margin-top: 1rem; color: var(--ink-2); }
.st-dateline {
  max-width: var(--measure);
  margin: clamp(2.75rem, 7vw, 4.5rem) auto 0;
  text-align: center;
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.22rem);
  color: var(--ink-2);
  text-wrap: balance;
}
.st-dateline + .st-body { margin-top: 2rem; }
.st-body { max-width: var(--measure); margin: clamp(2.75rem, 7vw, 4.5rem) auto 0; font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem); line-height: 1.64; hyphens: auto; -webkit-hyphens: auto; }
/* block paragraphs with space between them, not book indents */
.st-body p { text-wrap: pretty; }
.st-body p + p { margin-top: 1.05em; }
/* a chapter heading, where an excerpt runs across more than one chapter */
.st-body h2 {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem);
  line-height: 1.15;
  text-wrap: balance;
}
.st-body p + h2 { margin-top: 2.6rem; }
/* the opening paragraph holds its whole drop cap, even when it is a single line */
.st-body > p:first-child, .st-body > h2:first-child + p { display: flow-root; }
.st-body > p:first-child::first-letter,
.st-body > h2:first-child + p::first-letter {
  float: left;
  margin: 0.07em 0.09em 0 -0.02em;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 4.3em;
  line-height: 0.8;
  color: var(--oxblood);
}
/* a scene break is set as the ivy leaf */
.st-body hr {
  border: 0;
  height: 1.4rem;
  margin: 2.4rem auto;
  background: center / 2.3rem auto no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cg transform='translate(12 0) rotate(-90 12 12)'%3E%3Cpath fill='%239a2c1e' d='M12 21 C4 15, 1 10, 4 6 C6 3, 10 3, 12 7 C14 3, 18 3, 20 6 C23 10, 20 15, 12 21 Z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%239a2c1e' stroke-width='1.4' stroke-linecap='round' d='M19 12 C13 12, 9.5 10, 8.5 6.5 C7.8 4, 9.4 2.6, 11.2 3.6'/%3E%3C/svg%3E");
}
.st-end { max-width: var(--measure); margin: 3rem auto 0; text-align: center; }
.st-end-mark { width: 0.55rem; height: 0.55rem; margin: 0 auto; background: var(--oxblood); transform: rotate(45deg); }
.st-end-by { margin-top: 1.6rem; color: var(--ink-3); font-style: italic; }
.st-end-by i { font-style: normal; }
.st-end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem; margin-top: 1rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.st-end-links a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 0.15rem; }
.st-end-links a:hover { color: var(--oxblood); border-color: var(--oxblood); }
.st-end-links i { text-transform: none; letter-spacing: 0; font-size: 1rem; }

/* ---------- small screens ---------- */
@media (max-width: 44rem) {
  .fx-entry { grid-template-columns: minmax(0, 1fr); }
  .fx-entry-meta { grid-column: 1; grid-row: auto; }
  .fx-shelf { max-width: 17rem; margin-inline: auto; }
  .fx-shelf > li, .js .fx-shelf > .fx-set:not(.is-open) { flex-basis: 100%; }
  .set-books { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}