/* Oliver Atwood — Paperback Shelf */
:root {
  --ground: #D7E0E3;      /* page background */
  --sheet: #FBFBF8;       /* reading page, cards */
  --ink: #1C2326;
  --ink-2: #46525A;
  --rule: #A9B6BB;
  --accent: #C9531A;      /* site orange */
  --accent-ink: #FFFFFF;
  --accent-text: #8A3410; /* orange dark enough for small text */
  --wood: #6B4A2F;
  --wood-dark: #4E3420;
  --display: "Gilda Display", Georgia, serif;
  --ui: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --read: "Literata", Georgia, serif;
  --wide: 75rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #151B1E;
    --sheet: #1E2629;
    --ink: #E6ECEE;
    --ink-2: #A9B7BD;
    --rule: #34424A;
    --accent-text: #F0A27C;
    --wood: #4A3322;
    --wood-dark: #33231A;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--ink); color: var(--ground); padding: .5rem .8rem; }
.muted { color: var(--ink-2); }

.wrap { max-width: var(--wide); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }

/* ---------- Masthead ---------- */
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand__mark {
  width: 2.9rem; height: 2.9rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  border: 3px solid var(--ground); box-shadow: 0 0 0 2px var(--accent);
  font-weight: 700; font-size: 1rem; letter-spacing: .02em;
}
.brand__name { font-weight: 600; font-size: 1.5rem; letter-spacing: .02em; }
.nav { display: flex; gap: 1.75rem; font-weight: 500; font-size: 1.06rem; }
.nav a { text-decoration: none; padding: .4rem 0; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .4rem; text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn {
  display: inline-flex; align-items: center; min-height: 3rem;
  background: var(--ink); color: var(--ground);
  font-weight: 600; font-size: 1.06rem; text-decoration: none;
  padding: .85rem 1.7rem; border-radius: 999px; border: 2px solid var(--ink);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--outline { background: transparent; color: var(--ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.btn--on-band { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.btn--on-band:hover, .btn--outline-on-band:hover { background: transparent; color: var(--band-ink); border-color: var(--band-ink); opacity: .85; }
.btn--outline-on-band { background: transparent; color: var(--band-ink); border-color: var(--band-ink); }

.kicker { margin: 0; font-weight: 600; font-size: .9rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.kicker--on-band { color: var(--band-ink); opacity: .85; }

/* ---------- Covers ---------- */
.cover { display: flex; flex-direction: column; aspect-ratio: 2 / 3; width: 100%; overflow: hidden; background: var(--sheet); }
.cover--image img { width: 100%; height: 100%; object-fit: cover; }
.cover--drawn { background: #F2F2EE; color: #1C2326; }
.cover__band { flex: 1; background: var(--band); color: var(--band-ink); display: flex; align-items: center; justify-content: center; padding: .8rem; }
.cover__band--bottom { align-items: flex-end; padding-bottom: 1.1rem; }
.cover__middle { flex: 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6rem; padding: 1rem 1.4rem; }
.cover__pill { background: #FFFFFF; color: #1C2326; border-radius: 999px; padding: .35rem 1.1rem; font-weight: 600; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; }
.cover__author { font-weight: 500; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; }
.cover__title { font-family: var(--display); font-size: 2.6rem; line-height: 1.04; }
.cover__rule { width: 2.5rem; height: 2px; background: var(--band); }
.cover__foot { font-weight: 600; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
.cover--md .cover__title { font-size: 2.2rem; }
.cover--sm .cover__middle { padding: .3rem; }
.cover--sm .cover__title { font-size: .82rem; line-height: 1.1; }

/* ---------- Home: hero ---------- */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 3.5rem; padding-top: 1.25rem; }
.hero__cover {
  position: relative; display: block; flex: 0 1 23.75rem; min-width: 15rem; text-decoration: none;
  transform: rotate(-2deg); transition: transform .2s ease;
}
.hero__cover .cover { box-shadow: 2px 0 0 var(--rule), 1.1rem 1.5rem 2.5rem rgba(20, 26, 29, .3); }
.hero__cover:hover { transform: rotate(0deg) translateY(-4px); }
.hero__sticker {
  position: absolute; right: -1.1rem; top: 4.5rem; transform: rotate(6deg);
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  padding: .5rem .9rem; font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
}
.hero__text { flex: 999 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1.4rem; }
.hero__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 7vw, 5.75rem); line-height: .98; }
.hero__summary { margin: 0; font-size: 1.25rem; line-height: 1.6; max-width: 42ch; }
.hero--empty { padding-top: 3rem; padding-bottom: 1rem; }

/* ---------- Sections ---------- */
.section { padding-top: 5.5rem; }
.section--first { padding-top: 2rem; }
.section__title { margin: 0 0 .4rem; font-family: var(--display); font-weight: 400; font-size: 2.75rem; line-height: 1.05; }
.section__title--sm { font-size: 2.1rem; margin-bottom: .9rem; }
.section__lede { margin: 0 0 1.75rem; font-size: 1.06rem; color: var(--ink-2); }
.plain-title { margin: 0 0 .75rem; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; }

/* ---------- The shelf ---------- */
.shelf { overflow-x: auto; padding-top: 1.5rem; scrollbar-width: thin; }
.shelf__row {
  display: flex; align-items: flex-end; gap: .4rem; width: max-content; min-width: 100%;
  padding: 0 .75rem; border-bottom: 1.1rem solid var(--wood); box-shadow: 0 .6rem 0 var(--wood-dark);
}
.shelf__gap { width: 2.5rem; flex: none; }
.spine {
  flex: none; width: 4.25rem; display: flex; align-items: center; justify-content: center;
  background: var(--spine); color: var(--spine-ink); text-decoration: none;
  border-top: .6rem solid rgba(255, 255, 255, .9);
  box-shadow: inset -6px 0 0 rgba(0, 0, 0, .12), inset 4px 0 0 rgba(255, 255, 255, .12);
  transition: transform .15s ease;
}
.spine:hover { color: var(--spine-ink); transform: translateY(-.75rem); }
.spine--tilt { transform: rotate(-6deg); transform-origin: bottom left; margin-left: .75rem; }
.spine--tilt:hover { transform: rotate(-6deg) translateY(-.75rem); }
.spine__text {
  writing-mode: vertical-rl; font-weight: 600; font-size: 1.02rem; letter-spacing: .05em;
  max-height: calc(100% - 1.5rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.spine--next {
  background: transparent; color: var(--ink-2); border: 3px dashed var(--rule); box-shadow: none;
}
.spine--next .spine__text { font-weight: 500; font-size: .92rem; }

/* ---------- Series cards ---------- */
.series { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.75rem; }
.series__card { display: flex; gap: 1.5rem; align-items: flex-start; background: var(--sheet); padding: 1.25rem; border-radius: 4px; text-decoration: none; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.series__card:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(20, 26, 29, .12); }
.series__card .cover { width: 7rem; flex: none; box-shadow: .25rem .4rem .9rem rgba(20, 26, 29, .25); }
.series__body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.series__meta { font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.series__title { font-family: var(--display); font-size: 2rem; line-height: 1.05; }
.series__card:hover .series__title { color: var(--accent-text); }
.series__summary { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- Story page ---------- */
.band { background: var(--band); color: var(--band-ink); margin-top: 1.5rem; }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 3.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.band__cover { flex: 0 1 20rem; min-width: 13.75rem; }
.band__cover .cover { box-shadow: 1.1rem 1.5rem 2.5rem rgba(0, 0, 0, .35); }
.band__text { flex: 999 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.band__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 7vw, 6rem); line-height: .98; }
.band__summary { margin: 0; font-size: 1.35rem; line-height: 1.55; max-width: 38ch; opacity: .92; }

.story-body { display: flex; flex-wrap: wrap; gap: 3.5rem; padding-top: 4rem; }
.story-body__about { flex: 1 1 22rem; min-width: 0; }
.story-body__toc { flex: 1 1 26rem; min-width: 0; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc__row { display: flex; align-items: center; gap: 1.1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.toc__row--next { border-bottom: 0; color: var(--ink-2); font-style: italic; }
.toc__spine {
  width: 2.25rem; height: 3.4rem; flex: none; display: grid; place-items: center;
  background: var(--spine); color: var(--spine-ink); border-top: 5px solid rgba(255, 255, 255, .85);
  font-family: var(--display); font-size: 1.1rem;
}
.toc__spine--next { background: transparent; border: 2px dashed var(--rule); }
.toc__title { flex: 1; font-size: 1.3rem; font-weight: 500; }
a.toc__row:hover .toc__title { color: var(--accent-text); }
.toc__date { font-size: .95rem; color: var(--ink-2); white-space: nowrap; }

/* ---------- Reading page ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 5; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--spine); transform-origin: 0 50%; transform: scaleX(0); }

.page-sheet {
  max-width: 46rem; background: var(--sheet); margin-top: .5rem;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem);
  border-radius: 3px; box-shadow: 0 1px 0 var(--rule), 0 1.5rem 3rem rgba(20, 26, 29, .08);
}
.page-sheet--plain { margin-top: 1rem; }

.chapter { text-align: center; margin-bottom: 2.75rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.chapter__story { display: inline-flex; align-items: center; gap: .7rem; font-weight: 500; font-size: 1rem; text-decoration: none; color: var(--ink-2); margin-bottom: 1.5rem; }
.chapter__story .cover { width: 2.4rem; box-shadow: .15rem .25rem .5rem rgba(20, 26, 29, .25); }
.chapter__num { font-family: var(--display); font-size: 4.5rem; line-height: 1; color: var(--spine); }
.chapter__label { margin: .2rem 0 0; font-weight: 600; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.chapter__title { margin: .5rem 0 .6rem; font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: 1.05; }
.chapter__meta { margin: 0; font-size: .95rem; color: var(--ink-2); }

.note { background: var(--ground); border-radius: 3px; padding: 1rem 1.25rem; margin: 0 0 2.5rem; font-family: var(--read); font-style: italic; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.note__label { display: block; font-family: var(--ui); font-style: normal; font-weight: 600; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .25rem; }
.end-mark + .note { margin-top: 2.5rem; }

.prose { font-family: var(--read); font-size: 1.08rem; line-height: 1.7; }
.prose p { margin: 0 0 1.1em; }
.prose a { text-decoration-color: var(--accent); text-underline-offset: .2em; }
.prose h2, .prose h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 2em 0 .6em; }
.prose h2 { font-size: 1.9rem; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.1rem; border-left: 3px solid var(--accent); font-style: italic; color: var(--ink-2); }
.prose hr { border: 0; margin: 2.2em 0; text-align: center; }
.prose hr::before { content: "⁂"; font-size: 1.3rem; color: var(--ink-2); }
.prose img { height: auto; margin: 1.5em auto; }
.prose--story { font-size: 1.19rem; line-height: 1.78; }
.prose--story > p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-size: 3.7em; line-height: .82;
  padding: .08em .1em 0 0; color: var(--spine, var(--accent));
}
.end-mark { text-align: center; margin: 3rem 0 0; font-family: var(--display); font-size: 1.5rem; color: var(--ink-2); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 3.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.pager__link { display: grid; gap: .2rem; text-decoration: none; padding: .25rem 0; }
.pager__link--next { text-align: right; }
.pager__dir { font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pager__title { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.pager__link:hover .pager__title { color: var(--accent-text); }

/* ---------- Footer ---------- */
.footer { padding-top: 5.5rem; padding-bottom: 3rem; }
.footer__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; border-top: 2px solid var(--ink); padding-top: 1.75rem; }
.footer__line { margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1.15; }
.footer__small { margin: 1.5rem 0 0; font-size: .9rem; color: var(--ink-2); }

/* ---------- Small screens ---------- */
@media (max-width: 40rem) {
  .hero { gap: 2.5rem; }
  .hero__cover { margin: 0 auto; flex-basis: 16rem; }
  .band__inner { gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .band__cover { margin: 0 auto; flex-basis: 14rem; }
  .series__card { gap: 1rem; }
  .series__card .cover { width: 5.5rem; }
  .series__title { font-size: 1.6rem; }
  .pager { grid-template-columns: 1fr; }
  .pager__link--next { text-align: left; }
  .prose--story { font-size: 1.1rem; }
  .page-sheet { border-radius: 0; margin-left: 0; margin-right: 0; }
  .spine { width: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* In dark mode, lighten story colors used as text so they stay readable */
@media (prefers-color-scheme: dark) {
  .chapter__num,
  .prose--story > p:first-of-type::first-letter { color: color-mix(in srgb, var(--spine, var(--accent)) 45%, #FFFFFF); }
  .progress span { background: color-mix(in srgb, var(--spine) 60%, #FFFFFF); }
  .page-sheet { box-shadow: 0 1px 0 var(--rule); }
}