/* ============================================================
   ronanblake.co.uk
   Monochrome by design — the covers are the only colour on the site.
   Libre Caslon Display · EB Garamond · Schibsted Grotesk
   ============================================================ */

:root {
  --paper:      #f3f1ec;
  --paper-2:    #e9e6de;
  --ink:        #16171b;
  --ink-soft:   #55565c;
  --ink-faint:  #8b8c91;
  --hair:       rgba(22, 23, 27, 0.14);
  --hair-2:     rgba(22, 23, 27, 0.07);
  --on-dark:    #efece4;
  --hair-dark:  rgba(239, 236, 228, 0.18);

  --measure: 33rem;
  --gutter: clamp(1.5rem, 6vw, 6.5rem);
  --shell: 78rem;
  --rhythm: clamp(4.5rem, 11vw, 10rem);

  --micro: 0.688rem;
  --s0: clamp(1.05rem, 1rem + 0.22vw, 1.19rem);
  --s1: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --s2: clamp(1.7rem, 1.44rem + 1.15vw, 2.6rem);
  --s3: clamp(2.3rem, 1.75rem + 2.4vw, 4rem);
  --s4: clamp(3rem, 1.9rem + 4.8vw, 6.75rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: var(--s0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: "Libre Caslon Display", Caslon, Georgia, serif;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.8rem 1.1rem; }
.skip:focus { left: 0; }

/* ---------- micro type (labels, nav, captions) ---------- */

.micro, .site-nav a, .label, .caption, .btn, .site-foot {
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--micro);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.7;
}

.label { display: block; color: var(--ink-faint); margin: 0 0 1.9rem; }
.caption { color: var(--ink-faint); letter-spacing: 0.14em; }

/* ============================================================
   HEADER
   ============================================================ */

.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem var(--gutter) 1.35rem;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hair-2);
}

.site-head__name {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: 1.24rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; gap: clamp(1rem, 3vw, 2.6rem); flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--ink-soft); transition: color 300ms var(--ease); }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::before { content: "— "; color: var(--ink-faint); }

@media (max-width: 620px) {
  .site-head { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding-top: 1.1rem; }
  .site-nav { gap: 1rem 1.3rem; }
}

/* ============================================================
   LAYOUT
   ============================================================ */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.shell--narrow { max-width: 58rem; }

.band { padding: var(--rhythm) 0; }
.band--tint { background: var(--paper-2); }
.band--ink { background: var(--ink); color: var(--on-dark); }
.band--ink .label, .band--ink .caption { color: rgba(239, 236, 228, 0.55); }
.band--ink .rule { background: var(--hair-dark); }
.band--hair { border-top: 1px solid var(--hair); }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* ============================================================
   OPENING STATEMENT
   ============================================================ */

.opening { padding: clamp(4rem, 13vw, 11rem) 0 clamp(3.5rem, 9vw, 7rem); }

.opening__kicker { color: var(--ink-faint); margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.opening__statement {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: var(--s3);
  line-height: 1.14;
  letter-spacing: -0.018em;
  max-width: 24ch;
  margin: 0;
}
.opening__statement em { font-style: italic; }

.opening__sub {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: var(--s1);
  line-height: 1.55;
}

/* ============================================================
   COVER OBJECTS
   ============================================================ */

.cover {
  display: block;
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--paper-2);
  box-shadow:
    0 1px 1px rgba(22, 23, 27, 0.05),
    0 8px 18px -6px rgba(22, 23, 27, 0.14),
    0 26px 50px -20px rgba(22, 23, 27, 0.22);
  transition: transform 700ms var(--ease), box-shadow 700ms var(--ease);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.10);
  /* the faint gutter shadow down the spine edge */
  background: linear-gradient(90deg, rgba(22,23,27,0.16) 0%, rgba(22,23,27,0) 3.5%);
  pointer-events: none;
}

a.cover:hover, .entry:hover .cover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 1px rgba(22, 23, 27, 0.05),
    0 14px 26px -8px rgba(22, 23, 27, 0.16),
    0 40px 70px -24px rgba(22, 23, 27, 0.26);
}

/* ============================================================
   FEATURED
   ============================================================ */

.featured {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
}
.featured__title { font-size: var(--s2); margin-bottom: 0.5rem; }
.featured__sub { font-family: "EB Garamond", serif; font-style: italic; font-size: var(--s1); color: var(--ink-soft); margin-bottom: 1.6rem; }

@media (max-width: 780px) {
  .featured { grid-template-columns: minmax(0, 15rem); }
}

/* ============================================================
   STRAND INDEX (home)
   ============================================================ */

.strand + .strand { margin-top: var(--rhythm); padding-top: var(--rhythm); border-top: 1px solid var(--hair); }

.strand__head {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.strand__title { font-size: var(--s2); }
.strand__note { color: var(--ink-soft); max-width: 26rem; font-size: 0.98rem; line-height: 1.6; }

.hang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
.hang--tight { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 14rem)); max-width: 52rem; }

.hang__item { text-decoration: none; display: block; }
.hang__meta { margin-top: 1.1rem; }
.hang__name { font-family: "EB Garamond", serif; font-size: 1.05rem; line-height: 1.35; display: block; }
.hang__sub { display: block; margin-top: 0.35rem; }

/* ============================================================
   ENTRIES (book pages)
   ============================================================ */

.entry {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding: var(--rhythm) 0;
  border-top: 1px solid var(--hair);
  align-items: start;
}
.entry:first-of-type { border-top: 0; padding-top: clamp(2rem, 5vw, 4rem); }

.entry__title { font-size: var(--s2); margin-bottom: 0.45rem; }
.entry__sub { font-style: italic; color: var(--ink-soft); font-size: var(--s1); margin-bottom: 1.5rem; }
.entry__meta { margin-bottom: 2rem; }
.entry__body { max-width: var(--measure); }
.entry__body p { margin-bottom: 1.05em; }

.spec {
  margin: 2.2rem 0 2.4rem;
  border-top: 1px solid var(--hair);
  max-width: var(--measure);
}
.spec div {
  display: flex; gap: 1.5rem; justify-content: space-between;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--hair-2);
}
.spec dt, .spec dd {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.spec dt { color: var(--ink-faint); }
.spec dd { text-align: right; }

@media (max-width: 760px) {
  .entry { grid-template-columns: minmax(0, 14rem); }
}

/* ---------- links & buttons ---------- */

.acts { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }

.btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--ink);
  transition: background 400ms var(--ease), color 400ms var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: transparent; color: var(--ink); }
.band--ink .btn { border-color: var(--on-dark); }
.band--ink .btn:hover { background: var(--on-dark); color: var(--ink); }
.band--ink .btn--fill { background: var(--on-dark); color: var(--ink); }
.band--ink .btn--fill:hover { background: transparent; color: var(--on-dark); }

.tlink {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0.3rem;
  transition: border-color 400ms var(--ease);
}
.tlink:hover { border-bottom-color: var(--ink); }

.pill {
  display: inline-block;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--hair);
  padding: 0.3rem 0.65rem;
  margin-bottom: 1.4rem;
}

/* ============================================================
   PROSE / ABOUT
   ============================================================ */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: start;
}
@media (max-width: 800px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.margin-col { position: sticky; top: 7rem; }
@media (max-width: 800px) { .margin-col { position: static; } }
.margin-col dl { margin: 0; }
.margin-col div { padding: 0.75rem 0; border-top: 1px solid var(--hair); }
.margin-col dt {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.3rem;
}
.margin-col dd { margin: 0; font-size: 0.98rem; line-height: 1.5; }

.prose { max-width: var(--measure); }
.prose > p:first-child::first-line { font-variant-caps: small-caps; letter-spacing: 0.04em; }
.prose h2 {
  font-size: var(--s1);
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 3.2rem 0 1.1rem;
}
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--hair); transition: text-decoration-color 400ms var(--ease); }
.prose a:hover { text-decoration-color: var(--ink); }

.pullquote {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: var(--s2);
  line-height: 1.2;
  letter-spacing: -0.012em;
  max-width: 22ch;
  margin: 0;
}
.pullquote__attr { margin-top: 1.6rem; }

/* ============================================================
   SIGNUP
   ============================================================ */

.signup { max-width: 30rem; margin-top: 2.2rem; }
.signup__row { display: flex; border-bottom: 1px solid var(--hair-dark); }
.band--tint .signup__row, .band:not(.band--ink) .signup__row { border-bottom-color: var(--hair); }

.signup input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  padding: 0.7rem 0;
  font-family: "EB Garamond", serif;
  font-size: var(--s0);
  background: transparent; border: 0; color: inherit;
}
.signup input::placeholder { color: var(--ink-faint); opacity: 1; }
.band--ink .signup input::placeholder { color: rgba(239, 236, 228, 0.45); }
.signup input:focus { outline: 0; }
.signup__row:focus-within { border-bottom-color: currentColor; }

.signup button {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  background: transparent; border: 0; color: inherit;
  padding: 0.7rem 0 0.7rem 1.5rem;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 400ms var(--ease);
}
.signup button:hover { opacity: 1; }

.fineprint { margin-top: 1.2rem; font-size: 0.92rem; color: var(--ink-faint); max-width: 30rem; }
.band--ink .fineprint { color: rgba(239, 236, 228, 0.5); }

/* ============================================================
   FORMS (contact)
   ============================================================ */

.field { margin-bottom: 1.8rem; max-width: 32rem; }
.field label {
  display: block;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.55rem;
}
.field input, .field textarea {
  width: 100%;
  font-family: "EB Garamond", serif; font-size: var(--s0);
  padding: 0.7rem 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--hair);
  color: inherit;
  transition: border-color 400ms var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--ink); }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty { max-width: 36rem; padding: clamp(2rem, 5vw, 3rem) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-foot { background: var(--ink); color: var(--on-dark); padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.site-foot .shell { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2.5rem 3rem; }
.site-foot a { text-decoration: none; color: rgba(239, 236, 228, 0.62); transition: color 300ms var(--ease); display: block; }
.site-foot a:hover { color: var(--on-dark); }
.site-foot h3 { font-family: "Schibsted Grotesk", Arial, sans-serif; font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase; color: rgba(239, 236, 228, 0.4); margin-bottom: 1.1rem; font-weight: 500; }
.site-foot__end { grid-column: 1 / -1; border-top: 1px solid var(--hair-dark); padding-top: 1.6rem; margin-top: 1rem; color: rgba(239, 236, 228, 0.4); }

/* ============================================================
   MOTION
   ============================================================ */

.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 1100ms var(--ease), transform 1100ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   HERO  (statement + current title, above the fold)
   ============================================================ */

.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero__text { max-width: 34rem; }

.hero__book { display: block; }
.hero__book-meta { margin-top: 1.6rem; }
.hero__book-title { font-size: var(--s1); line-height: 1.15; }
.hero__book .btn { margin-top: 0.2rem; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 8vw, 4rem); }
  .hero__book { max-width: 15rem; }
}

/* stop the sticky header cropping section labels on jump-links */
[id] { scroll-margin-top: 6rem; }

.acts { align-items: baseline; }
.acts .tlink { padding-bottom: 0.85rem; }

/* ============================================================
   CONTENTS INDEX  (image-free landing)
   ============================================================ */

.idx { margin-top: clamp(3rem, 8vw, 5.5rem); }
.idx + .idx { margin-top: clamp(3rem, 7vw, 5rem); }

.idx__head {
  display: flex; align-items: baseline; gap: 1.5rem;
  margin-bottom: 0.4rem;
}
.idx__head h2 {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-faint); white-space: nowrap;
}
.idx__head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hair); }

.idx__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hair-2);
  text-decoration: none;
  transition: padding-left 500ms var(--ease), background 400ms var(--ease);
}
.idx__row:hover { padding-left: 0.75rem; background: linear-gradient(90deg, var(--paper-2), transparent 65%); }

.idx__t {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.5rem);
  line-height: 1.25;
}
.idx__t em { font-style: italic; color: var(--ink-faint); font-size: 0.78em; }

.idx__s {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); text-align: right; white-space: nowrap;
}
.idx__s--now { color: var(--ink); }

.idx__more { margin-top: 1.6rem; }

@media (max-width: 560px) {
  .idx__row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .idx__s { text-align: left; }
}

/* the two non-book destinations */
.also { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0; }
.also__item {
  display: block; text-decoration: none;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hair);
  margin: -0.5px;
  transition: background 400ms var(--ease);
}
.also__item:hover { background: var(--paper-2); }
.also__t { font-family: "Libre Caslon Display", Georgia, serif; font-size: var(--s1); display: block; margin-bottom: 0.6rem; }
.also__d { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; display: block; max-width: 24rem; }

/* ============================================================
   PLACARD  (a title that has no cover yet — ruled, not shadowed)
   ============================================================ */

.placard {
  aspect-ratio: 2 / 3;
  border: 1px solid var(--hair);
  background: transparent;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5rem;
  text-align: center;
}
.placard__t { font-family: "Libre Caslon Display", Georgia, serif; font-size: 1.2rem; line-height: 1.2; margin-top: auto; }
.placard__k, .placard__f {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink-faint);
}
.placard__f { margin-top: auto; }

/* ============================================================
   REFERENCE
   ============================================================ */

.ref + .ref { margin-top: var(--rhythm); }
.ref__title { font-size: var(--s2); margin-bottom: 0.4rem; }
.ref__note { color: var(--ink-soft); max-width: var(--measure); margin-bottom: 2rem; }
.ref__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); max-width: 46rem; }
.ref__list li { border-bottom: 1px solid var(--hair-2); }
.ref__list a, .ref__list span.pending {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem;
  align-items: baseline; padding: 1rem 0; text-decoration: none;
  transition: padding-left 500ms var(--ease);
}
.ref__list a:hover { padding-left: 0.7rem; }
.ref__n { font-size: 1.02rem; }
.ref__k {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}

/* ============================================================
   CREDENTIALS STRIP
   ============================================================ */

.creds {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
}
.creds span {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.creds span:first-child { color: var(--ink); }

/* ============================================================
   INDEX GROUPS — weighted
   ============================================================ */

.idx__intro {
  color: var(--ink-soft);
  max-width: 38rem;
  margin: 1.4rem 0 2rem;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* the primary strand sits on a heavier rule and larger heading */
.idx--lead .idx__head h2 {
  font-size: var(--s1);
  font-family: "Libre Caslon Display", Georgia, serif;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.idx--lead .idx__head { border-top: 2px solid var(--ink); padding-top: 1.1rem; margin-bottom: 0; }
.idx--lead .idx__head::after { display: none; }
.idx--lead .idx__row { padding: 1.3rem 0; }
.idx--lead .idx__t { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); }

/* the subordinate strand is quieter and tighter */
.idx--minor .idx__row { padding: 0.95rem 0; }
.idx--minor .idx__t { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem); }

.schedule {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--hair);
  background: var(--paper-2);
  max-width: 30rem;
}
.schedule h3 {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-faint); margin-bottom: 1rem;
}
.schedule ol { list-style: none; margin: 0; padding: 0; }
.schedule li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--hair-2);
  font-size: 1rem;
}
.schedule li:last-child { border-bottom: 0; }
.schedule li span:last-child {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}

/* ============================================================
   SPLIT HERO  (image right, message left)
   ============================================================ */

.hsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(86svh, 780px);
  border-bottom: 1px solid var(--hair);
}

.hsplit__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
.hsplit__inner { max-width: 32rem; }

.hsplit__h {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem);
  line-height: 1.08; letter-spacing: -0.018em;
  margin: 0 0 1.4rem;
}
.hsplit__sub { color: var(--ink-soft); font-size: var(--s1); line-height: 1.5; max-width: 27rem; }

.hsplit__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(2rem, 4vw, 2.75rem); }

.hsplit__img {
  background: var(--ink) center/cover no-repeat;
  min-height: 42svh;
}

@media (max-width: 860px) {
  .hsplit { grid-template-columns: 1fr; min-height: 0; }
  .hsplit__img { min-height: 54svh; order: 2; }
  .hsplit__text { order: 1; padding-top: clamp(2.5rem, 8vw, 4rem); }
}

/* ---------- credibility bar ---------- */

.credbar { background: var(--ink); color: var(--on-dark); padding: 1.15rem 0; }
.credbar .shell { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; justify-content: center; }
.credbar span {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  color: rgba(239, 236, 228, 0.66); white-space: nowrap;
}
.credbar span:first-child { color: var(--on-dark); }

/* ============================================================
   COVER GRID
   ============================================================ */

.shelf { margin-top: clamp(2rem, 5vw, 3rem); }
.shelf + .shelf { margin-top: clamp(3.5rem, 8vw, 6rem); }

.shelf__head {
  display: flex; align-items: baseline; gap: 1.25rem;
  border-top: 2px solid var(--ink); padding-top: 1rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.shelf__head h2 { font-size: var(--s1); }
.shelf__head a { margin-left: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 1.9rem);
}
.grid__item { text-decoration: none; display: block; }
.grid__item .cover { margin-bottom: 0.9rem; }
.grid__n { font-family: "EB Garamond", serif; font-size: 1rem; line-height: 1.3; display: block; }
.grid__v {
  display: block; margin-top: 0.15rem;
  font-family: "EB Garamond", serif; font-style: italic;
  color: var(--ink-faint); font-size: 0.95rem;
}
.grid__s {
  display: block; margin-top: 0.5rem;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.grid__s--now { color: var(--ink); }

/* ============================================================
   LEAD MAGNET
   ============================================================ */

.magnet { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 700px) { .magnet { grid-template-columns: minmax(0, 9rem); } }
.magnet__h { font-size: var(--s2); margin-bottom: 0.9rem; }

/* ============================================================
   DESTINATION CARDS
   ============================================================ */

.dest { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.dest__item {
  display: flex; flex-direction: column;
  text-decoration: none;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.dest__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(22, 23, 27, 0.22);
}
.dest__k {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1.1rem;
}
.dest__t { font-family: "Libre Caslon Display", Georgia, serif; font-size: var(--s1); margin-bottom: 0.7rem; }
.dest__d { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; margin-bottom: 1.5rem; }
.dest__go {
  margin-top: auto;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
}

/* covers need a different shadow when they sit on the ink band */
.band--ink .cover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 22px 45px -18px rgba(0,0,0,0.85);
}
.band--ink .cover::after { box-shadow: inset 0 0 0 1px rgba(239,236,228,0.10); }

/* ============================================================
   MIXED-RATIO COVERS
   Real covers arrive at 2:3, 5:8, sometimes square. Rather than
   crop them, fix the height and let width follow — books on a shelf.
   ============================================================ */

.cover { aspect-ratio: auto; background: transparent; width: fit-content; }
.cover img { width: auto; height: auto; max-width: 100%; }

.grid__item .cover { height: clamp(11rem, 17vw, 15rem); }
.grid__item .cover img { height: 100%; width: auto; }
.grid { align-items: start; }

.entry .cover { height: clamp(14rem, 24vw, 20rem); }
.entry .cover img { height: 100%; width: auto; }

.magnet .cover { height: clamp(11rem, 20vw, 15rem); }
.magnet .cover img { height: 100%; width: auto; }

.cover::after { display: none; }
.cover img {
  box-shadow:
    0 1px 1px rgba(22, 23, 27, 0.05),
    0 8px 18px -6px rgba(22, 23, 27, 0.18),
    0 26px 50px -20px rgba(22, 23, 27, 0.26);
  transition: transform 700ms var(--ease), box-shadow 700ms var(--ease);
}
a.cover:hover img, .grid__item:hover .cover img, .entry:hover .cover img {
  transform: translateY(-5px);
  box-shadow:
    0 1px 1px rgba(22, 23, 27, 0.05),
    0 14px 26px -8px rgba(22, 23, 27, 0.2),
    0 40px 70px -24px rgba(22, 23, 27, 0.3);
}
.cover { box-shadow: none !important; transform: none !important; }
.band--ink .cover img {
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 22px 45px -18px rgba(0,0,0,0.85);
}

/* ============================================================
   SHELF BANNER  (replaces the split hero — the photo is landscape
   and deserves full width rather than being cropped into a column)
   ============================================================ */

.shelfband {
  background: #16171b;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter);
}
.shelfband img {
  width: 100%;
  max-width: 62rem;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* author brand banner (About page) */
.bannerband { background: #0d1117; border-bottom: 1px solid var(--hair); }
.bannerband img { width: 100%; height: auto; max-height: min(46svh, 420px); object-fit: cover; object-position: center; display: block; }

/* ============================================================
   QUESTION BANK
   ============================================================ */

.qbar {
  position: sticky; top: 3.9rem; z-index: 30;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hair);
  padding: 1rem 0;
}
@media (max-width: 620px) { .qbar { top: 6.6rem; } }

.qbar__row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.qsearch {
  flex: 1 1 16rem; min-width: 0;
  font-family: "EB Garamond", serif; font-size: var(--s0);
  padding: 0.65rem 0.85rem;
  background: transparent; color: inherit;
  border: 1px solid var(--hair);
}
.qsearch:focus { outline: 0; border-color: var(--ink); }
.qsearch::placeholder { color: var(--ink-faint); }

.qsel {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.7rem 0.8rem;
  background: transparent; color: inherit;
  border: 1px solid var(--hair);
  cursor: pointer;
}
.qsel:focus { outline: 0; border-color: var(--ink); }

.qtoggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.7rem 0.9rem; border: 1px solid var(--hair); cursor: pointer;
  user-select: none;
}
.qtoggle input { accent-color: var(--ink); margin: 0; }
.qtoggle:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }

.qcount {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 0.85rem;
}

.qgroup { margin-top: clamp(2.5rem, 6vw, 4rem); }
.qgroup__head {
  display: flex; align-items: baseline; gap: 1rem;
  border-top: 2px solid var(--ink); padding-top: 0.9rem; margin-bottom: 0.5rem;
}
.qgroup__head h2 { font-size: var(--s1); }
.qgroup__n {
  margin-left: auto;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}

.q { border-bottom: 1px solid var(--hair-2); }
.q > summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  display: block;
  transition: padding-left 500ms var(--ease);
}
.q > summary::-webkit-details-marker { display: none; }
.q > summary:hover { padding-left: 0.6rem; }
.q > summary::after {
  content: "+";
  position: absolute; right: 0.4rem; top: 1rem;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: 1.1rem; color: var(--ink-faint);
  transition: transform 400ms var(--ease);
}
.q[open] > summary::after { content: "−"; }

.q__q {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  line-height: 1.3; display: block;
}
.q__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.5rem;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.q__common { color: var(--ink); }
.q__common::before { content: "● "; }

.q__body { padding: 0 2.5rem 1.9rem 0; max-width: 44rem; }
.q__body p { margin-bottom: 1em; }
.q__checking {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  background: var(--paper-2); border-left: 2px solid var(--ink);
}
.q__checking span {
  display: block; margin-bottom: 0.4rem;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.q__checking p { margin: 0; font-size: 0.98rem; }

.qempty { padding: 3rem 0; color: var(--ink-soft); }

/* ============================================================
   HOME HERO — tightened so the books reach the fold
   ============================================================ */

.opening--home {
  padding-top: clamp(2.25rem, 6vw, 4.25rem);
  padding-bottom: clamp(2rem, 4.5vw, 3rem);
}
.opening--home .opening__statement { max-width: 19ch; }

/* ============================================================
   COLLAPSIBLE NAV  (small screens only)
   ============================================================ */

.navtoggle { display: none; }

@media (max-width: 760px) {
  .site-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem var(--gutter);
    flex-wrap: wrap;
  }

  .navtoggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 2.5rem; height: 2.5rem; margin-right: -0.5rem;
    background: none; border: 0; cursor: pointer; padding: 0.6rem;
  }
  .navtoggle span {
    display: block; height: 1px; width: 100%; background: var(--ink);
    transition: transform 300ms var(--ease), opacity 300ms var(--ease);
  }
  .navtoggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

  .site-nav {
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 420ms var(--ease);
  }
  .site-nav.is-open { max-height: 26rem; }
  .site-nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hair-2);
    font-size: 0.72rem;
  }
  .site-nav a:first-child { border-top: 1px solid var(--hair-2); margin-top: 0.6rem; }
  .site-nav a[aria-current="page"]::before { content: ""; }

  /* nav is closed by default, so the sticky bar stays slim */
  .qbar { top: 4.2rem; }
}

/* keyboard and no-JS safety: if scripting is off, show the nav */
@media (max-width: 760px) {
  .no-js .site-nav { max-height: none; }
  .no-js .navtoggle { display: none; }
}

/* ============================================================
   TEXTURE — a fine grain over the whole page, like paper stock.
   SVG turbulence, so no extra request and it scales cleanly.
   ============================================================ */

body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* ============================================================
   MORE STRUCTURAL CONTRAST
   ============================================================ */

:root {
  --hair:   rgba(22, 23, 27, 0.20);
  --hair-2: rgba(22, 23, 27, 0.10);
}

/* alternate the ground behind book entries so the page has rhythm */
.entry:nth-of-type(even) {
  background: var(--paper-2);
  box-shadow: 0 0 0 100vmax var(--paper-2);
  clip-path: inset(0 -100vmax);
}
.entry:nth-of-type(even) .spec { border-top-color: rgba(22,23,27,0.22); }

/* ============================================================
   TAGLINE BAND — the author's own cover lines, set large on ink
   ============================================================ */

.tagband + .band--ink { border-top: 1px solid rgba(239, 236, 228, 0.16); }

.tagband {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(3.5rem, 9vw, 7rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tagband::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(239,236,228,0.10), transparent 62%);
  pointer-events: none;
}
.tagband p {
  position: relative;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
.tagband cite {
  position: relative;
  display: block;
  margin-top: 1.8rem;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  font-style: normal;
  color: rgba(239, 236, 228, 0.5);
}

/* ============================================================
   HOUSE PALETTE — taken from the covers themselves.
   Deep navy and gold run through the Honest Guides; the
   Chronicles are gold on near-black. The site now matches.
   ============================================================ */

:root {
  --navy:       #16283f;
  --navy-deep:  #0e1a29;
  --navy-lift:  #24405f;
  --gold:       #b8862f;
  --gold-lift:  #d7a44e;
  --gold-hair:  rgba(184, 134, 47, 0.34);
}

/* paper gains a barely-there vertical warmth so it is not one flat field */
body {
  background:
    linear-gradient(180deg, #f5f3ee 0%, var(--paper) 38%, #eeebe4 100%) fixed;
}

/* ---------- dark grounds become navy, with depth ---------- */

.band--ink,
.credbar,
.shelfband,
.tagband {
  background:
    radial-gradient(ellipse at 50% 0%, var(--navy-lift) 0%, transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.site-foot {
  background:
    linear-gradient(180deg, var(--navy-deep) 0%, #0a1420 100%);
}
.bannerband { background: var(--navy-deep); }

.tagband::before {
  background: radial-gradient(ellipse at 50% 118%, rgba(184, 134, 47, 0.16), transparent 60%);
}
.tagband + .band--ink { border-top: 1px solid rgba(184, 134, 47, 0.22); }

/* ---------- gold as the accent, used sparingly ---------- */

.label, .eyebrow { color: var(--gold); }
.band--ink .label, .tagband cite { color: var(--gold-lift); }

.idx__s--now, .grid__s--now { color: var(--gold); }

.shelf__head, .idx--lead .idx__head, .qgroup__head {
  border-top-color: var(--navy);
}

.entry__meta { color: var(--gold); }
.pill { border-color: var(--gold-hair); color: var(--gold); }

.q__checking { border-left-color: var(--gold); }
.tlink:hover { border-bottom-color: var(--gold); }
.prose a { text-decoration-color: var(--gold-hair); }
.prose a:hover { text-decoration-color: var(--gold); }

.site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a[aria-current="page"]::before { color: var(--gold-hair); }
.site-nav a:hover { color: var(--navy); }

::selection { background: var(--navy); color: var(--paper); }

/* ---------- buttons ---------- */

.btn { border-color: var(--navy); color: var(--navy); }
.btn:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn--fill { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.btn--fill:hover { background: var(--gold); border-color: var(--gold); color: #1b1405; }

.band--ink .btn { border-color: rgba(239,236,228,0.55); color: var(--on-dark); }
.band--ink .btn:hover { background: var(--gold); border-color: var(--gold); color: #1b1405; }
.band--ink .btn--fill { background: var(--gold); border-color: var(--gold); color: #1b1405; }
.band--ink .btn--fill:hover { background: transparent; border-color: var(--on-dark); color: var(--on-dark); }

.signup button { color: var(--gold-lift); opacity: 1; }
.signup button:hover { color: #fff; }
.band--ink .signup__row { border-bottom-color: rgba(184,134,47,0.4); }

/* ---------- headings pick up the navy ---------- */

h1, h2, .hsplit__h, .opening__statement, .entry__title, .featured__title,
.idx__t, .also__t, .dest__t, .ref__title, .q__q, .pullquote {
  color: var(--navy);
}
.band--ink h2, .band--ink .pullquote, .tagband p { color: var(--on-dark); }

.dest__item:hover { border-color: var(--gold-hair); }

/* ============================================================
   DENSITY — the sections were breathing too hard, and content
   hugged the left on wide screens leaving half the page empty.
   ============================================================ */

:root {
  --rhythm: clamp(2.75rem, 6vw, 5.25rem);
}

.opening { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.opening--home { padding-top: clamp(2rem, 4.5vw, 3.25rem); }
.opening__kicker { margin-bottom: clamp(1.1rem, 2.5vw, 1.75rem); }
.opening__sub { margin-top: clamp(1.1rem, 2.5vw, 1.75rem); }
.creds { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1.1rem; }
.hsplit__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.entry { padding: clamp(2rem, 4.5vw, 3.5rem) 0; }
.shelf + .shelf { margin-top: clamp(2.5rem, 5vw, 4rem); }
.shelf { margin-top: clamp(1.25rem, 3vw, 2rem); }
.tagband { padding: clamp(2.75rem, 6vw, 5rem) 0; }
.idx + .idx { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.ref + .ref { margin-top: clamp(2.5rem, 5vw, 4rem); }
.qgroup { margin-top: clamp(2rem, 4vw, 3rem); }

/* on wide screens the lede moves alongside the headline rather than
   under it — fills the measure and removes a screenful of height */
@media (min-width: 900px) {
  .opening .shell {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .opening .shell > .label { grid-column: 1 / -1; }
  .opening__statement { grid-column: 1; max-width: 15ch; }
  .opening--home .opening__statement { max-width: 14ch; }
  .opening__sub {
    grid-column: 2;
    margin-top: 0.6rem;
    max-width: 28rem;
  }
  .opening .creds, .opening .hsplit__cta { grid-column: 1 / -1; }
}

/* the two-up hang was floating in a wide empty row */
.hang--tight { max-width: none; }

/* ============================================================
   INDIVIDUAL BOOK PAGES
   ============================================================ */

.crumb {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
  display: inline-block; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.crumb:hover { color: var(--gold); }

.bookhead {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 820px) { .bookhead { grid-template-columns: minmax(0, 16rem); } }

.bookhead .cover { height: auto; }
.bookhead .cover img { width: 100%; height: auto; }

.book__title { font-size: var(--s3); line-height: 1.05; margin-bottom: 0.5rem; }
.book__sub {
  font-family: "EB Garamond", serif; font-style: italic;
  font-size: var(--s1); color: var(--ink-soft); margin-bottom: 1.6rem;
}

.book__body { max-width: var(--measure); }
.book__body p { margin-bottom: 1.05em; }

/* other titles strip */
.alsoby {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.alsoby a { text-decoration: none; display: block; }
.alsoby .cover { height: clamp(9rem, 14vw, 12rem); }
.alsoby .cover img { height: 100%; width: auto; }
.alsoby__n {
  display: block; margin-top: 0.8rem;
  font-family: "EB Garamond", serif; font-size: 0.95rem; line-height: 1.3;
}
.alsoby__s {
  display: block; margin-top: 0.25rem;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* two dark bands running together read as one long slab — separate them */
.band--ink + .site-foot,
.tagband + .site-foot { border-top: 1px solid rgba(184, 134, 47, 0.22); }

/* ============================================================
   ACCESSIBILITY — measured contrast fixes.
   Gold on cream came out at 2.87:1 (WCAG AA needs 4.5 for the
   small caps it was used on). Gold reads beautifully on navy and
   badly on paper, so it now lives on dark grounds only; micro type
   on light grounds takes the navy, which measures 13.2:1.
   ============================================================ */

:root {
  --ink-faint: #66676c;         /* was #8b8c91 — 2.97:1, now 5.0:1 */
  --gold-on-light: #8a5a14;     /* bronze, for the rare gold-on-cream case */
}

/* micro type on light grounds -> navy */
.label, .eyebrow { color: var(--navy); }
.entry__meta { color: var(--navy); }
.idx__s--now, .grid__s--now { color: var(--navy); font-weight: 600; }
.pill { color: var(--gold-on-light); border-color: rgba(138, 90, 20, 0.4); }

/* on dark grounds gold stays, and passes at 6.6:1 */
.band--ink .label,
.tagband cite,
.credbar span:first-child,
.site-foot h3 { color: var(--gold-lift); }

.site-nav a[aria-current="page"] { color: var(--gold-on-light); }
.site-nav a[aria-current="page"]::before { color: rgba(138, 90, 20, 0.45); }

/* keep the gold rules and hovers — decoration, not text */
.q__checking { border-left-color: var(--gold-on-light); }
.crumb:hover { color: var(--gold-on-light); }

/* no horizontal scroll on the narrowest phones */
html, body { overflow-x: hidden; max-width: 100%; }
.shelfband img, .bannerband img { max-width: 100%; }
.qbar__row > * { min-width: 0; }
.qsel { max-width: 100%; }
.spec div { flex-wrap: wrap; }

@media (max-width: 460px) {
  /* credentials line was nowrap and wider than the phone */
  .credbar span { white-space: normal; }
  .credbar .shell { gap: 0.45rem 1.5rem; }
  /* footer columns had a 12rem minimum that could not fit */
  .site-foot .shell { grid-template-columns: 1fr; }
}

/* ============================================================
   RESOURCE PAGES  (glossary, salaries, paths, learning, checklist)
   ============================================================ */

.gloss { column-count: 2; column-gap: clamp(2rem, 5vw, 4rem); max-width: 62rem; }
@media (max-width: 780px) { .gloss { column-count: 1; } }
.gloss div { break-inside: avoid; margin-bottom: 1.5rem; }
.gloss dt {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; margin-bottom: 0.3rem;
}
.gloss dd { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }

.paytable { width: 100%; border-collapse: collapse; max-width: 46rem; margin-top: 1.25rem; }
.paytable caption {
  text-align: left; margin-bottom: 0.9rem;
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy);
}
.paytable th, .paytable td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--hair-2); }
.paytable thead th { border-bottom: 1px solid var(--navy); font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.paytable td:last-child, .paytable th:last-child { text-align: right; white-space: nowrap; }
.paytable + .paytable { margin-top: clamp(2rem, 4vw, 3rem); }

.pathcard { border-top: 1px solid var(--hair); padding: clamp(1.5rem, 3vw, 2.25rem) 0; display: grid;
  grid-template-columns: 4.5rem minmax(0,1fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.pathcard__l {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--gold-on-light);
}
.pathcard h2 { font-size: var(--s1); margin-bottom: 0.6rem; }
.pathcard p { color: var(--ink-soft); max-width: var(--measure); }

.checklist { max-width: 44rem; }
.checklist section { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.checklist h2 {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--navy); border-top: 1px solid var(--navy); padding-top: 0.8rem; margin-bottom: 0.9rem;
}
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: 0.55rem 0 0.55rem 2rem; border-bottom: 1px solid var(--hair-2); line-height: 1.5; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.85rem;
  width: 0.85rem; height: 0.85rem; border: 1px solid var(--navy);
}

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.75rem; }
.dl__item { border: 1px solid var(--hair); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; }
.dl__k { font-family: "Schibsted Grotesk", Arial, sans-serif; font-size: var(--micro);
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.9rem; }
.dl__t { font-family: "Libre Caslon Display", Georgia, serif; font-size: var(--s1); margin-bottom: 0.6rem; color: var(--navy); }
.dl__d { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.55; margin-bottom: 1.4rem; }
.dl__item .btn { margin-top: auto; align-self: flex-start; }

.updated {
  font-family: "Schibsted Grotesk", Arial, sans-serif;
  font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--hair-2);
}