:root{--night:#09111d;--gold:#d1b47d;--paper:#f4efe6;--line:#38404b;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--paper);font:16px/1.65 "Avenir Next",sans-serif}
h1,h2,h3,.wordmark,.email{font-family:Georgia,serif;font-weight:400;line-height:1.06}
h1,h2,h3,p{margin:0}
a,button,summary{color:inherit}
button,summary{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-100vw}.skip:focus{left:0;z-index:9;background:var(--night)}
header,footer{padding:18px 7%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
header a,.button,.buy{text-decoration:none}
.wordmark{letter-spacing:.12em}nav{display:flex;gap:26px;font-size:14px}nav a:hover,.buy:hover{color:white;text-decoration:underline}
.hero{position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(360px,53vh,580px);padding:5% 7%}
.hero picture,.hero img,.hero:after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero:after{content:"";z-index:-1;background:linear-gradient(90deg,#070f1efa 0%,#070f1eee 34%,#070f1e40 75%)}
h1{font-size:clamp(48px,7vw,104px)}.intro p{color:#f4e6ce;margin:16px 0 24px;font:clamp(17px,2vw,24px)/1.4 Georgia,serif;max-width:480px}
.button{display:inline-block;background:var(--gold);color:#101620;padding:10px 20px}
main>section:not(.hero){max-width:1440px;margin:auto;padding:clamp(42px,6vw,85px) 7%;border-bottom:1px solid var(--line)}
h2{font-size:clamp(32px,4vw,54px);margin-bottom:26px}
.catalog,.spread{display:grid;grid-template-columns:1fr 1fr;gap:4vw}
.card{min-width:0;display:grid;grid-template-columns:36% 1fr;gap:16px 6%;align-content:start;border-top:1px solid var(--gold);padding:22px 0}
.cover img,.spread img{width:100%;display:block}.listing{align-self:center}small{color:var(--gold);font-size:12px;letter-spacing:.04em}h3{font-size:clamp(23px,2.7vw,42px);margin:8px 0 16px}
.buy,.email{color:var(--gold)}details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:8px}summary{color:var(--gold);font-size:14px}details p,.spread p{margin-top:14px;color:#ccd0d5}
.spread{align-items:center}.spread img{max-height:420px;object-fit:contain}.email{font-size:clamp(20px,3vw,36px);overflow-wrap:anywhere}button{background:transparent;border:1px solid var(--line);padding:9px 14px}footer{color:#afb5bf;font-size:12px}
@media(max-width:680px){header{padding:14px 5%;flex-wrap:wrap;gap:12px}nav{gap:13px;font-size:13px}.hero{min-height:290px}.hero:after{background:linear-gradient(90deg,#070f1ef5,#070f1eba 72%,#070f1e77)}.catalog,.spread{grid-template-columns:1fr;gap:12px}.card{grid-template-columns:64px 1fr;gap:0 16px;padding:12px 0}.cover{grid-row:1/3}.listing{align-self:start}h3{margin:3px 0;font-size:23px}.buy{font-size:14px;display:inline-block;padding:4px 0}.card details{grid-column:2;border:0;padding:0}.spread img{max-height:290px}.email,button{display:block;margin:12px 0}}

.hero { overflow: hidden; background: #080f1c; }
.hero picture { left: 26%; width: 74%; }
.hero picture img { object-position: center; }
.hero:after { z-index: -1; pointer-events: none; }
.intro h1 { text-transform: uppercase; }
.star-track { position: absolute; right: 3%; top: 15%; width: 58%; height: 65%; pointer-events: none; opacity: 0; }
.star-track path { fill: none; stroke: #ffe1a8; stroke-width: 1; stroke-dasharray: 8 102; filter: drop-shadow(0 0 3px #d1a55b); }
.cover { position: relative; align-self: start; isolation: isolate; }
.overclocked h3::after { content: ""; display: inline-block; width: 2px; height: .72em; background: var(--gold); margin-left: .12em; }
@media (prefers-reduced-motion: no-preference) {
  .hero picture { animation: approach 3s ease-out both; }
  .star-track { animation: trail-light 2.2s .25s both; }
  .star-track path { animation: trail-pass 2.2s .25s ease-out both; }
  .overclocked.entered h3::after { animation: cursor-pulse .45s steps(1,end) 2; }
}
@keyframes approach { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes trail-light { 0%,100% { opacity: 0; } 25%,70% { opacity: .9; } }
@keyframes trail-pass { from { stroke-dashoffset: 8; } to { stroke-dashoffset: -100; } }
@keyframes cursor-pulse { 0%,100% { opacity: 1; } 50% { opacity: .06; } }
@media (max-width: 680px) {
  .hero picture { left: 18%; width: 100%; animation: none; }
  .star-track { width: 60%; right: 0; }
  .overclocked.entered h3::after { animation: none; }
  .intro h1 { font-size: clamp(34px,9vw,48px); }
}

.starfield { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.intro { position:relative; pointer-events:none; }
.intro a { pointer-events:auto; }
.trace { position:absolute; right:5%; bottom:16px; z-index:2; color:#ffdfaa; background:#09111de6; border:1px solid #9b8056; border-radius:24px; padding:8px 16px; cursor:pointer; }
button.cover { display:block; width:100%; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  button.cover { transition:transform .3s; }
  button.cover:hover { transform:perspective(800px) rotateY(-6deg) translateY(-3px); }
}
/* A dark title page, a paper catalogue, and an illustrated chapter spread. */
:root {
  --night: #0a121c;
  --paper: #f3ead9;
  --gold: #dcbd84;
  --ink: #211f1c;
  --edge: clamp(22px, 6.5vw, 120px);
  --display: "Baskerville", "Times New Roman", Georgia, serif;
}
header { padding: 0 var(--edge); min-height: 66px; gap: 16px; }
.wordmark { display: flex; align-items: center; gap: 12px; font: 13px/1 Georgia, serif; letter-spacing: .15em; }
.wordmark svg { width: 29px; height: 29px; color: var(--gold); }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
.hero { min-height: clamp(420px, 52vw, 600px); padding: 52px var(--edge); }
.hero picture { left: 17%; width: 83%; }
.hero:after {
  background: linear-gradient(90deg, #09111dfc 0%, #09111de6 23%, #09111d66 51%, transparent 73%),
              linear-gradient(0deg, #09111d91, transparent 29%);
}
h1,h2,h3,.email { font-family: var(--display); font-weight: 400; }
.intro h1 { font-size: clamp(80px,9.6vw,155px); line-height: .87; letter-spacing: -.055em; }
.intro h1 em { display: block; color: var(--gold); font-weight: 400; }
.intro p { font: clamp(18px,1.5vw,23px)/1.45 var(--display); max-width: 28ch; margin: 22px 0; }
.button,.buy,.trace,.star-link,summary,button#copy { display: inline-flex; align-items: center; min-height: 44px; }
.button { font-size: 14px; padding: 8px 22px; }
.trace,.star-link { font-size: 13px; border: 0; border-bottom: 1px solid #d1b47d99; border-radius: 0; background: #09111de8; }
.trace { right: var(--edge); bottom: 22px; padding: 3px 10px; }
.star-link { text-decoration: none; position: absolute; z-index: 2; right: var(--edge); bottom: 76px; color: var(--paper); padding: 3px 10px; }
.star-link[hidden] { display: none; }
main>section:not(.hero) { padding: clamp(48px,6vw,92px) var(--edge); max-width: none; }
h2 { font-size: clamp(42px,5vw,78px); letter-spacing: -.045em; }
#books { background: var(--paper); color: var(--ink); color-scheme: light; }
#books h2 { margin-bottom: 30px; }
.catalog { gap: clamp(28px,4vw,76px); }
.catalog.single { grid-template-columns: minmax(0,1fr); max-width: min(100%, 860px); }
@media (min-width:681px) {
  .catalog.single .card { grid-template-columns: minmax(0,300px) minmax(0,1fr); align-items: center; gap: 20px 46px; }
  .catalog.single h3 { font-size: clamp(26px,3vw,46px); }
}
.card { grid-template-columns: minmax(0,.84fr) minmax(0,1fr); gap: 16px 7%; padding: 24px 0 8px; border-color: #958465; scroll-margin-top: 24px; }
.cover img { box-shadow: 3px 12px 15px -8px #271b0a66; }
small { color: #634725; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; }
h3 { font-size: clamp(25px,3.15vw,56px); letter-spacing: -.04em; overflow-wrap: anywhere; }
.overclocked h3::after { background: #8a6943; }
.hook { font: italic clamp(16px,1.43vw,23px)/1.35 var(--display); color: #534738; margin: 12px 0; }
.buy { color: var(--ink); font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.buy:hover,summary:hover { color: #74481c; }
details { border-color: #baab93; }
summary { width: 100%; justify-content: space-between; color: #53432e; font-size: 13px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 20px; } details[open] summary::after { content: "−"; }
details p { color: #443c32; max-width: 58ch; }
#universe { position: relative; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; min-height: clamp(430px,44vw,700px); }
#universe img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 13%; }
#universe::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg,#08101df2 0%,#08101de0 28%,#08101d18 73%),linear-gradient(0deg,#08101d99,transparent 60%); }
#universe h2 { max-width: 12ch; margin-bottom: 20px; }
#universe em { color: var(--gold); }
#universe p { max-width: 49ch; color: #eee9e1; }
#author { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 9%; }
#author img { width: min(100%,380px); justify-self: end; max-height:none; }
#author>div { max-width: 57ch; }
#rights { background: #111e2c; }
#rights h2 { font: 14px/1.5 "Avenir Next",sans-serif; letter-spacing: .08em; color: var(--gold); margin-bottom: 18px; }
.email { font-size: clamp(25px,4.4vw,72px); text-decoration-thickness: 1px; text-underline-offset: 8px; color: var(--paper); }
#copy { margin-left: 16px; }
footer { padding: 20px var(--edge); gap: 12px; } footer a { color: var(--gold); }
@media (min-width:681px) and (max-width:900px) {
  .card { grid-template-columns: 30% 1fr; gap: 12px; }
}
@media (max-width:680px) {
  header { min-height: 56px; gap: 4px 10px; padding-inline: 5%; }
  .wordmark { font-size: 10px; gap: 5px; letter-spacing: .06em; }
  .wordmark svg { width: 19px; } nav { gap: 10px; } nav a { font-size: 12px; }
  .hero { min-height: 390px; padding-block: 50px 78px; }
  .hero picture { left: 8%; width: 108%; }
  .hero picture img { object-position: 38% center; }
  .hero:after { background: linear-gradient(90deg,#09111df5 0%,#09111de0 43%,#09111d70 69%,#09111d16 95%),linear-gradient(0deg,#09111d,transparent 35%); }
  .intro h1 { font-size: clamp(60px,14.7vw,92px); }
  .intro p { max-width: 21ch; margin: 14px 0 18px; font-size: 18px; }
  .trace,.star-link { bottom: 6px; right: var(--edge); margin: 0; font-size: 11px; }
  .star-link { left: var(--edge); right: auto; }
  #books h2 { margin-bottom: 20px; }
  .catalog { grid-template-columns: 1fr; gap: 4px; }
  .card { grid-template-columns: 72px minmax(0,1fr); gap: 0 16px; padding: 14px 0; }
  .listing small { font-size: 9px; }
  h3 { font-size: clamp(22px,6.4vw,32px); margin: 3px 0; }
  .hook { font-size: 15px; margin: 7px 0 3px; }
  .card details { padding-top: 0; }
  summary { border-top: 1px solid #c9bfac; }
  #universe { min-height: 520px; }
  #universe::before { background: linear-gradient(0deg,#09111dfc 6%,#09111dd9 48%,transparent 92%); }
  #universe img { object-position: 60% 38%; }
  #author { grid-template-columns: 1fr; gap: 28px; }
  #author img { width: 74%; justify-self: start; }
  #copy { margin: 14px 0 0; } footer { align-items: flex-start; } footer a { flex:none; }
}
button.cover::after {
  content: "";
  position: absolute;
  inset: 2px -3px 0 auto;
  width: 3px;
  border-right: 1px solid #493b29;
  background: linear-gradient(90deg,#75664d,#e3d7b7,#a39479);
  pointer-events: none;
}
@media (max-width: 360px) {
  .hero { padding-bottom: 112px; }
  .star-link { bottom: 48px; }
}