:root {
  --parchment: #F6F1E8;
  --parchment-deep: #EFE8DB;
  --ink: #221B15;
  --ink-soft: #5C5348;
  --forest: #1D4A38;
  --forest-deep: #123527;
  --sage: #8FA893;
  --terracotta: #C9836B;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(1.25rem, 6vw, 6rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(29,74,56,0.05) 0 1px, transparent 1px 96px),
    var(--parchment);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

em { font-style: italic; }

.kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--forest);
}

h2 {
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  margin-top: 0.75rem;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid rgba(143, 168, 147, 0.35);
}

.nav__wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
}

.nav__wordmark em, .footer__mark em, .book__brand em { color: var(--forest); }

.nav__right { display: flex; align-items: center; gap: 2rem; }

.nav__logo {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  overflow: hidden;
  transition: transform 250ms var(--ease);
}

.nav__logo:hover { transform: translateY(-1px); }

.nav__logo img { display: block; width: 100%; height: 100%; border-radius: 11px; }

.nav__links { display: flex; gap: 2rem; }

.nav__links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 250ms var(--ease);
}

.nav__links a:hover { color: var(--forest); }

.nav__links a[aria-current="page"] { color: var(--forest); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(3.5rem, 9vh, 7rem);
}

.hero__title {
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 1.1rem 0 1.4rem;
}

.hero__title em { color: var(--forest); font-weight: 500; }

.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.hero__actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

.btn {
  display: inline-block;
  background: var(--forest);
  color: var(--parchment);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 250ms var(--ease), transform 250ms var(--ease);
}

.btn:hover { background: var(--forest-deep); transform: translateY(-1px); }

.link-mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid rgba(29, 74, 56, 0.3);
  padding-bottom: 2px;
  transition: border-color 250ms var(--ease);
}

.link-mono:hover { border-color: var(--forest); }

.hero__meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--sage);
  margin-top: 1.75rem;
}

.hero__artifact {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.book {
  position: relative;
  width: min(310px, 78%);
  aspect-ratio: 3 / 4;
  transform: rotateX(6deg) rotateY(-14deg) rotateZ(2deg);
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease);
  z-index: 2;
}

.hero__artifact:hover .book { transform: rotateX(3deg) rotateY(-8deg) rotateZ(1deg); }

.book--under {
  position: absolute;
  top: 7%;
  left: 54%;
  translate: -50% 0;
  width: min(310px, 78%);
  background: var(--forest-deep);
  border-radius: 4px 10px 10px 4px;
  z-index: 1;
  box-shadow: 24px 32px 60px rgba(34, 27, 21, 0.28);
}

.book__spine {
  position: absolute;
  left: -10px;
  top: 3px;
  bottom: 3px;
  width: 12px;
  background: var(--forest-deep);
  border-radius: 3px 0 0 3px;
  transform: translateZ(-6px);
}

.book__cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #235743 0%, var(--forest) 55%, #17402F 100%);
  border-radius: 4px 10px 10px 4px;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  box-shadow: inset 1px 0 0 rgba(246, 241, 232, 0.18);
}

.book__top { display: flex; justify-content: space-between; align-items: center; }

.book__badge {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--forest-deep);
  background: var(--parchment);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.book__brand {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--parchment);
}

.book__brand em { color: var(--sage); }

.book__title {
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.12;
  color: var(--parchment);
  margin: auto 0 1rem;
}

.book__chart { width: 100%; height: auto; opacity: 0.9; }

.book__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(246, 241, 232, 0.25);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--sage);
}

.findings { background: var(--parchment-deep); border-block: 1px solid rgba(143, 168, 147, 0.35); }

.findings__inner { padding: clamp(3rem, 7vh, 5rem) var(--gutter); }

.findings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: 2.25rem;
}

.finding { border-top: 1px solid var(--sage); padding-top: 1.25rem; }

.finding__num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--forest);
  line-height: 1;
}

.finding__cap { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.75rem; max-width: 34ch; }

.contents { padding: clamp(3.5rem, 9vh, 6.5rem) var(--gutter); }

.contents__head { margin-bottom: 2.5rem; max-width: 60ch; }

.contents__list { list-style: none; }

.contents__list li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 4.5rem;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(143, 168, 147, 0.4);
}

.contents__list li:last-child { border-bottom: 1px solid rgba(143, 168, 147, 0.4); }

.ch-num, .ch-pg {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--sage);
}

.ch-pg { text-align: right; }

/* Whole-row link for each chapter. display:contents lets the anchor wrap the
   three grid cells without becoming a grid item itself. */
.contents__list a.ch-row { display: contents; color: inherit; text-decoration: none; }
.contents__list a.ch-row:hover h3 { color: var(--terracotta); }

.contents__list h3 {
  font-family: var(--serif);
  font-weight: 480;
  font-size: 1.3rem;
  line-height: 1.2;
}

.contents__list p { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.3rem; max-width: 62ch; }

.cta-band { background: var(--forest-deep); }

.cta-band__inner {
  padding: clamp(3rem, 8vh, 5rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-band h2 { color: var(--parchment); margin: 0; }

.btn--light { background: var(--parchment); color: var(--forest-deep); }

.btn--light:hover { background: #fff; }

.library { padding: clamp(3.5rem, 9vh, 6.5rem) var(--gutter); }

.library__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.card { text-decoration: none; color: var(--ink); display: block; }

.card__cover {
  aspect-ratio: 4 / 3;
  border-radius: 4px 8px 8px 4px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 10px 14px 30px rgba(34, 27, 21, 0.14);
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}

.card:hover .card__cover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: 12px 20px 40px rgba(34, 27, 21, 0.2); }

.card__cover p {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--parchment);
}

.card__cover--forest { background: linear-gradient(150deg, #235743, var(--forest-deep)); }
.card__cover--terra { background: linear-gradient(150deg, var(--terracotta), #9E5F44); }
.card__cover--ink { background: linear-gradient(150deg, #3A2F26, var(--ink)); }

.card__badge {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: var(--parchment);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  align-self: flex-start;
}

.card__meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--sage);
  margin: 1rem 0 0.4rem;
}

.card h3 {
  font-family: var(--serif);
  font-weight: 480;
  font-size: 1.2rem;
  line-height: 1.25;
}

.card__dl {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--forest);
  margin-top: 0.7rem;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem var(--gutter);
  border-top: 1px solid rgba(143, 168, 147, 0.35);
}

.footer__mark { font-family: var(--serif); font-size: 1.1rem; }

.footer__mono { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--sage); }

.reveal { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.js-enabled .reveal { opacity: 0; transform: translateY(24px); }
html.js-enabled .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero__artifact { order: -1; margin-bottom: 1rem; }
  .book { width: min(240px, 70%); }
  .findings__grid, .library__grid { grid-template-columns: 1fr; }
  .library__grid { gap: 2.5rem; }
  .card { max-width: 400px; }
  .contents__list li { grid-template-columns: 3rem minmax(0, 1fr); }
  .ch-pg { display: none; }
  .nav__links { gap: 1.1rem; }
}

/* Narrow nav (mirrors css/styles.css): drop the wordmark before it wraps to two
   lines, right-align the logo, and wrap the links on phones instead of letting
   them run off-screen. Also enlarge the link tap area for touch. */
@media (max-width: 600px) {
  .nav { justify-content: flex-end; }
  .nav__wordmark { display: none; }
  .nav__links a { padding: 0.45rem 0; }
}

@media (max-width: 560px) {
  .nav__right { gap: 1.1rem; }
  .nav__links {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem 0.9rem;
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .btn, .book, .card__cover { transition: none !important; }
  html.js-enabled .reveal { opacity: 1; transform: none; }
  .hero__artifact:hover .book { transform: rotateX(6deg) rotateY(-14deg) rotateZ(2deg); }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* === App shell embedding ===
   When this report is loaded inside the site's app shell (index.html) it hides
   its own nav and uses the shell's persistent nav. Opened directly, it shows its
   own nav and works standalone. See css/styles.css for the shell rationale. */
html.embedded .nav { display: none; }