:root {
  --ink: #16202e;
  --paper: #f6f1e7;
  --paper-2: #ece4d3;
  --rule: #cfc4ad;
  --accent: #b23a2b;
  --muted: #5d6573;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
}
.wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; margin: 0; }
a { color: inherit; }

/* Masthead */
.masthead {
  background: var(--ink);
  color: var(--paper);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 79px, rgb(255 255 255 / .04) 79px 80px);
}
.masthead__bar { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid rgb(255 255 255 / .15); }
.mark { font-family: var(--serif); font-weight: 800; font-size: 1.4rem; letter-spacing: .02em; }
.mark span { color: var(--accent); margin: 0 .15em; }
nav { display: flex; gap: 1.5rem; align-items: center; font-size: .9rem; }
nav a { text-decoration: none; opacity: .8; }
nav a:hover { opacity: 1; }
.print-btn {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 0; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
}
.hero { padding: 5rem 0 4rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; color: #e8a597; margin: 0 0 1.5rem; }
.hero h1 { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 400; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; color: #f0c9a8; }
.byline { font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.5rem); margin: 2rem 0 .75rem; }
.byline span { color: var(--accent); font-style: italic; }
.lede { max-width: 46ch; opacity: .75; margin: 0; }
.stats { display: flex; gap: 3rem; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .15); }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; opacity: .6; }
.stats dd { margin: 0; font-family: var(--serif); font-size: 2.25rem; }

/* Covers — typographic, generated from data */
.cover {
  --c1: #1d2b45; --c2: #f0c9a8;
  aspect-ratio: 2 / 3;
  background: var(--c1);
  color: var(--c2);
  border-radius: 2px 6px 6px 2px;
  padding: 10% 9%;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  box-shadow: inset 6px 0 0 rgb(0 0 0 / .18), 0 18px 30px -18px rgb(22 32 46 / .7);
  font-family: var(--serif);
}
.cover::before {
  content: ""; position: absolute; right: -30%; top: 28%;
  width: 90%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .25;
}
.cover::after {
  content: ""; position: absolute; left: 9%; right: 9%; top: 52%;
  height: 1px; background: currentColor; opacity: .5;
}
.cover__series { font-family: var(--sans); font-size: .6em; text-transform: uppercase; letter-spacing: .18em; opacity: .8; }
.cover__title { font-size: 1.35em; line-height: 1.05; font-weight: 600; position: relative; }
.cover__authors { font-family: var(--sans); font-size: .55em; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
.cover--navy    { --c1: #1d2b45; --c2: #f0c9a8; }
.cover--teal    { --c1: #1f5a5c; --c2: #f4e7c9; }
.cover--crimson { --c1: #8f2d24; --c2: #f7e2cf; }
.cover--forest  { --c1: #2f4a32; --c2: #e9dfb8; }
.cover--gold    { --c1: #d9a441; --c2: #2a1f12; }
.cover--plum    { --c1: #4c2a4f; --c2: #f0d6c9; }
.cover--slate   { --c1: #3d4756; --c2: #f2c26b; }
.cover--sand    { --c1: #e6d5b5; --c2: #4a2d22; }

/* Featured */
.featured {
  display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 4rem; align-items: center;
  padding: 5rem 0; border-bottom: 1px solid var(--rule);
}
.featured .cover { font-size: 1.6rem; transform: rotate(-2deg); }
.featured__label { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; font-weight: 600; }
.featured h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin: .75rem 0 .5rem; }
.featured .subtitle { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--muted); margin: 0 0 1.25rem; }
.featured p { max-width: 60ch; }

/* Catalogue */
#catalogue { padding: 4rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; }
.section-head h2, .authors h2 { font-size: clamp(2rem, 4vw, 3rem); }
.controls { display: flex; gap: .75rem; flex-wrap: wrap; }
.controls input, .controls select {
  font: inherit; font-size: .9rem; padding: .6rem .9rem;
  background: #fffaf0; border: 1px solid var(--rule); border-radius: 6px; color: var(--ink);
}
.controls input { width: 260px; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 2.5rem; }
.chip {
  font: inherit; font-size: .85rem; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3rem 2rem; }
.card { display: flex; flex-direction: column; }
.card button { all: unset; cursor: pointer; display: block; }
.card .cover { font-size: 1rem; transition: transform .25s ease; }
.card button:hover .cover, .card button:focus-visible .cover { transform: translateY(-6px) rotate(-1deg); }
.card button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.card__meta { margin-top: 1.1rem; }
.card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; color: var(--accent); font-weight: 600; }
.card h3 { font-size: 1.25rem; margin: .35rem 0 .25rem; }
.card .subtitle { font-size: .88rem; color: var(--muted); margin: 0 0 .75rem; }
.formats { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.formats li { font-size: .75rem; border: 1px solid var(--rule); border-radius: 4px; padding: .15rem .5rem; }
.formats b { font-weight: 600; }
.empty { text-align: center; color: var(--muted); padding: 3rem 0; }

/* Detail dialog */
.detail {
  border: 0; padding: 0; border-radius: 12px; width: min(860px, 100% - 2rem);
  background: var(--paper); color: var(--ink);
}
.detail::backdrop { background: rgb(22 32 46 / .7); backdrop-filter: blur(3px); }
.detail__inner { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; padding: 2.5rem; }
.detail .cover { font-size: 1.15rem; }
.detail h2 { font-size: 2.1rem; margin: .5rem 0; }
.detail .subtitle { font-family: var(--serif); font-style: italic; color: var(--muted); margin: 0 0 1rem; font-size: 1.1rem; }
.detail table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .9rem; }
.detail td { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.detail td:last-child { text-align: right; font-weight: 600; }
.specs { display: grid; grid-template-columns: repeat(2, auto); gap: .25rem 1.5rem; font-size: .82rem; color: var(--muted); margin: 0; }
.specs dt { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
.specs dd { margin: 0 0 .5rem; color: var(--ink); }
.close {
  position: absolute; top: .75rem; right: .75rem; font-size: 1.5rem; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--ink); padding: .5rem;
}
.amazon-link {
  display: inline-block; margin-top: .5rem; padding: .7rem 1.3rem; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem;
}

/* Authors */
.authors { padding: 4rem 0; border-top: 1px solid var(--rule); }
.authors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
.authors h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.authors p { color: var(--muted); margin: 0; }
.footer { padding: 2rem 0 3rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--rule); }

@media (max-width: 760px) {
  .featured, .detail__inner, .authors__grid { grid-template-columns: 1fr; gap: 2rem; }
  .featured .cover, .detail .cover { max-width: 240px; }
  .stats { gap: 1.5rem; }
  nav a { display: none; }
  .controls input { width: 100%; }
}

/* Printed catalogue: list every title, no interactive chrome */
@media print {
  body { background: #fff; font-size: 11pt; }
  .masthead { background: #fff; color: var(--ink); }
  .masthead__bar, .controls, .filters, .detail, .featured { display: none; }
  .hero { padding: 1rem 0; }
  .hero h1 em { color: var(--accent); }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .card { break-inside: avoid; }
  .cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; }
}