:root {
  color-scheme: light;
  --night: #07111f;
  --night-soft: #101f32;
  --accent: #7ed7ff;
  --paper: #f7f5f0;
  --ink: #202833;
  --muted: #66717d;
  --line: #d9d9d2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
section, nav, article { scroll-margin-top: 5rem; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: white;
  color: var(--night);
}
.skip-link:focus { top: .8rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(7, 17, 31, .96);
  color: #eaf1f7;
  font-family: Arial, Helvetica, sans-serif;
}
.header-inner, .footer-inner {
  width: min(1160px, calc(100% - 2.5rem));
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.header-inner { min-height: 66px; }
.brand {
  flex: none;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .07em;
}
.brand-mark { color: var(--accent); font-size: 1.3rem; }
.header-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.header-nav a { color: #b8cad8; font-size: .87rem; text-decoration: none; }
.header-nav a:hover, .header-nav a:focus-visible { color: #fff; text-decoration: underline; }

.hero {
  background:
    radial-gradient(circle at 16% 20%, rgba(56, 189, 248, .13), transparent 32%),
    linear-gradient(130deg, var(--night), var(--night-soft));
  color: #f1f6fa;
}
.hero-inner {
  width: min(1020px, calc(100% - 2.5rem));
  margin: auto;
  min-height: 450px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding: 3.5rem 0;
}
.eyebrow, .section-label, .chapter-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow { color: var(--accent); }
.hero h1 {
  margin: 1.1rem 0 1rem;
  font-size: clamp(3.1rem, 7vw, 6.2rem);
  line-height: .97;
  letter-spacing: -.045em;
}
.hero-author { margin: 0; color: #b4c8d8; font-family: Arial, Helvetica, sans-serif; font-size: 1.05rem; }
.hero-description { margin: 2rem 0; font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.5; }
.hero-button {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  border-radius: 100px;
  padding: .78rem 1.3rem;
  background: var(--accent);
  color: var(--night);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
}
.hero-button:hover, .hero-button:focus-visible { background: #ace8ff; }
.book-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px 10px 10px 3px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
}

.paper { width: min(100%, 900px); margin: 0 auto; padding: 0 2rem; }
.frontmatter, .contents, .chapter { width: min(100%, 690px); margin: 0 auto; }
.frontmatter { padding: 5rem 0 4.5rem; border-bottom: 1px solid var(--line); }
.frontmatter h2, .contents h2 {
  margin: .45rem 0 2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.frontmatter p:not(.section-label) { font-size: 1.17rem; line-height: 1.75; }
.frontmatter p:last-child { margin-bottom: 0; }
.section-label { margin: 0; color: #17678b; }
.author-note { padding-top: 4rem; }

.contents { padding: 4.5rem 0 6rem; }
.contents-front { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-bottom: 1.9rem; }
.contents-front a { color: #315e78; font-family: Arial, Helvetica, sans-serif; font-size: .93rem; }
.contents ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contents li { border-bottom: 1px solid var(--line); }
.contents li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem .1rem;
  font-size: 1.1rem;
  text-decoration: none;
}
.contents li a:hover, .contents li a:focus-visible { color: #12608b; }
.contents li a span:last-child { color: #6e8a9e; font-family: Arial, Helvetica, sans-serif; }

.manuscript { border-top: 1px solid var(--line); }
.chapter { padding: 5.5rem 0 7rem; border-bottom: 1px solid var(--line); }
.chapter-label { margin: 0 0 1rem; color: #315e78; }
.chapter h2 {
  margin: 0 0 3rem;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.chapter p { margin: 0 0 .9em; font-size: 1.14rem; line-height: 1.78; }
.chapter p:not(.scene-meta):not(.body-strong):not(.signal) { text-indent: 1.3em; }
.chapter h2 + p, .chapter .scene-meta + p, .chapter .scene-break + p { text-indent: 0 !important; }
.scene-meta {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .83rem !important;
  line-height: 1.5 !important;
  text-indent: 0 !important;
}
.body-strong {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .95rem !important;
  font-weight: 700;
  text-indent: 0 !important;
}
.signal {
  overflow-x: auto;
  border-left: 3px solid #7aaac1;
  border-radius: 3px;
  padding: .65rem 1rem;
  background: #eaf0f2;
  font-size: .92rem !important;
  text-indent: 0 !important;
}
code { font-family: Consolas, "Courier New", monospace; font-size: .87em; }
.scene-break {
  display: block;
  height: auto;
  margin: 2.3rem 0;
  border: 0;
  color: #637d8b;
  text-align: center;
}
.scene-break::after { content: "*   *   *"; letter-spacing: .3em; }

.site-footer { background: var(--night); color: #c5d5e1; font-family: Arial, Helvetica, sans-serif; }
.footer-inner { min-height: 100px; font-size: .86rem; }
.footer-inner a { color: #c5d5e1; }

@media (max-width: 700px) {
  .header-inner { min-height: 60px; }
  .header-nav { gap: .8rem; }
  .header-nav a:last-child { display: none; }
  .hero-inner { min-height: 0; grid-template-columns: 1fr 120px; gap: 1.25rem; padding: 3rem 0; }
  .hero h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .hero-description { margin: 1.2rem 0; }
  .frontmatter, .contents, .chapter { width: 100%; }
  .paper { padding: 0 1.3rem; }
  .chapter { padding: 4rem 0 5rem; }
  .chapter p { font-size: 1.08rem; line-height: 1.7; }
}

@media (max-width: 470px) {
  .header-inner { width: calc(100% - 1.5rem); }
  .brand { font-size: .74rem; }
  .header-nav a:nth-child(2) { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .book-cover { width: min(58%, 190px); margin-top: 1rem; }
  .footer-inner { flex-wrap: wrap; padding: 1.5rem 0; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print {
  .site-header, .hero-button, .site-footer { display: none; }
  .hero { background: none; color: #111; }
  .hero-inner { min-height: 0; padding: 0; }
  .book-cover { box-shadow: none; max-width: 90mm; }
  .paper { width: auto; padding: 0; }
  .chapter { break-before: page; border: 0; }
  .chapter p { font-size: 11pt; }
}