/* ==========================================================================
   Between Hope & Fear — site styles
   Palette sampled from the cover: night sky above, city glow below.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Sampled off the cover art: #162947 is the night sky, #f6a93d is FEAR. */
  --ink:        #0b1a30;   /* below the sky, page top and footer */
  --navy:       #162947;   /* body ground — the cover sky */
  --navy-lift:  #1e3557;   /* raised surfaces */
  --surface:    #223d63;   /* cards */
  --amber:      #f6a93d;   /* the FEAR lettering */
  --amber-hi:   #ffc978;   /* city glow */
  --paper:      #f3ede2;   /* off-white text */
  --muted:      #9db0cb;   /* secondary text */
  --rule:       rgba(246,169,61,.24);
  --hairline:   rgba(243,237,226,.14);

  --display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --body:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --util:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(1.25rem, 5vw, 2.5rem);
  --band-pad: clamp(3.5rem, 9vw, 7rem);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--amber-hi); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--amber-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 50;
  background: var(--amber); color: var(--ink);
  padding: .7rem 1.1rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gut) * 2), 68rem);
  margin-inline: auto;
}
.measure { max-width: 40rem; }

.band {
  padding-block: var(--band-pad);
  border-top: 1px solid var(--hairline);
  position: relative;
}

/* --- Type ----------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 1.3rem + 7vw, 5.6rem);
  color: var(--paper);
}
/* The jacket sets HOPE in white and FEAR in gold. The headline does the same. */
h1 .fear { color: var(--amber); }
h1 .amp  { font-style: italic; color: var(--amber); }

h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  color: var(--amber-hi);
  margin-bottom: .7em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }

.eyebrow {
  font-family: var(--util);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 1.4em;
  display: flex;
  align-items: center;
  gap: .9em;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.lede { color: var(--paper); font-size: 1.08em; }

.arrow-link { margin-top: 1.6em; font-family: var(--util); font-size: .9rem; letter-spacing: .02em; }
.arrow-link a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .2em; }
.arrow-link a:hover { border-bottom-color: var(--amber-hi); }
.arrow-link span { display: inline-block; transition: transform .25s var(--ease); }
.arrow-link a:hover span { transform: translateX(4px); }

/* --- The year spine ------------------------------------------------------- */
/* The book is organised year by year; the page's progress indicator is that
   chronology, not a neutral scrollbar. */
.spine {
  position: fixed;
  left: clamp(.9rem, 2.2vw, 1.9rem);
  top: 12vh; bottom: 12vh;
  width: 3.4rem;
  z-index: 20;
  pointer-events: none;
  display: none;
}
.spine__rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--hairline);
}
.spine__fill {
  position: absolute; left: -1px; top: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, rgba(246,169,61,.35), var(--amber));
  transition: height .12s linear;
}
.spine__ticks { list-style: none; margin: 0; padding: 0; }
.spine__ticks li {
  position: absolute;
  left: 0;
  top: calc(var(--at) * 100%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  opacity: .5;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}
.spine__ticks li::before {
  content: "";
  width: .5rem; height: 1px;
  background: currentColor;
  flex: none;
}
.spine__ticks span {
  font-family: var(--util);
  font-size: .62rem;
  letter-spacing: .1em;
}
.spine__ticks li.is-past { opacity: .8; }
.spine__ticks li.is-now { opacity: 1; color: var(--amber-hi); }

/* Mobile gets the same idea, one pixel tall. */
.topline {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  z-index: 20; pointer-events: none;
  background: var(--hairline);
}
.topline__fill { display: block; height: 100%; width: 0; background: var(--amber); }

@media (min-width: 62rem) {
  .spine { display: block; }
  .topline { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 7rem);
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(246,169,61,.20), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--navy) 82%);
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 30%, var(--rule) 70%, transparent);
}

.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 54rem) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.hero__sub {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem);
  line-height: 1.3;
  color: var(--amber-hi);
  margin-bottom: 1.1em;
}
.hero__hook {
  color: var(--paper);
  max-width: 34rem;
  margin-bottom: 2.2em;
}

/* Cover, presented as an object rather than a picture. */
.cover {
  margin: 0;
  position: relative;
  width: 100%;
  max-width: min(22rem, 62vw);   /* keep the headline near the fold on phones */
  justify-self: center;
  transform: perspective(1400px) rotateY(-8deg) rotateX(1.5deg);
  transform-origin: right center;
}
@media (min-width: 54rem) { .cover { justify-self: start; max-width: 24rem; } }

.cover img {
  width: 100%;
  border-radius: 2px 4px 4px 2px;
  box-shadow:
    0 1px 0 rgba(243,237,226,.16),
    -14px 0 22px -18px rgba(0,0,0,.9),
    24px 34px 60px -22px rgba(0,0,0,.75),
    0 0 90px -30px rgba(246,169,61,.35);
}
.cover::before {   /* the spine edge */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 9px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.06) 55%, rgba(0,0,0,.35));
  z-index: 1;
}

.cover__placeholder {
  display: none;
  aspect-ratio: 2 / 3;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ink), var(--surface));
  color: var(--muted);
  font-family: var(--util);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  place-content: center;
}
.cover__placeholder small { font-size: .68rem; letter-spacing: .04em; text-transform: none; opacity: .7; }
.cover.is-empty { transform: none; }
.cover.is-empty picture, .cover.is-empty::before { display: none; }
.cover.is-empty .cover__placeholder { display: grid; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  padding: .95em 1.5em;
  border: 1px solid var(--amber);
  border-radius: 2px;
  background: var(--amber);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--amber-hi); border-color: var(--amber-hi); color: var(--ink); transform: translateY(-1px); }

.btn--quiet {
  background: transparent;
  color: var(--amber-hi);
  border-color: var(--rule);
}
.btn--quiet:hover { background: rgba(246,169,61,.10); border-color: var(--amber); color: var(--amber-hi); }

.buylinks {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 0 1.1rem;
}
.buylinks .btn { flex: 0 0 auto; min-width: 8.5rem; }

.fineprint {
  font-family: var(--util);
  font-size: .78rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--muted);
  margin: 1rem 0 0;
}

/* --- Signup --------------------------------------------------------------- */
/* Substack's form arrives in an iframe with a white background we can't reach.
   Rather than fight the seam, the whole card is white — a reply card tipped
   into the page. It also puts the brightest thing on screen on the one action
   that matters before launch. */
.signup {
  background: #fff;
  border: 1px solid rgba(11, 26, 48, .12);
  border-radius: 3px;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  max-width: 34rem;
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .85);
}
.signup__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 .7rem;
}
.signup__frame {
  width: 100%;
  height: 118px;
  border: 0;
  display: block;
  color-scheme: light;
  border-radius: 2px;
  overflow: hidden;
}
.signup__note {
  font-family: var(--util);
  font-size: .78rem;
  line-height: 1.7;
  color: #5b6b84;
  margin: 0;
}
.signup__note code { color: #a76a12; font-size: .95em; }

.band--signup {
  background:
    radial-gradient(90% 60% at 50% 130%, rgba(246,169,61,.16), transparent 60%),
    var(--navy);
}
.band--signup .signup { margin-top: 2rem; }

/* --- Praise --------------------------------------------------------------- */
.blurb {
  margin: 0 0 2.4rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--rule);
}
.blurb:last-child { margin-bottom: 0; }
.blurb q {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  quotes: "\201C" "\201D";
  color: var(--paper);
}
.blurb cite {
  display: block;
  margin-top: .9rem;
  font-style: normal;
  font-family: var(--util);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--muted);
}
.blurb cite b { color: var(--amber); font-weight: 500; }

/* --- Author --------------------------------------------------------------- */
.author__grid {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.25rem);
  align-items: start;
}
@media (min-width: 54rem) {
  .author__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.portrait { margin: 0; width: 100%; max-width: 18rem; }
.portrait img {
  width: 100%;
  border-radius: 2px;
  filter: saturate(.85) contrast(1.02);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.9);
}
.portrait__placeholder {
  display: none;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--rule);
  border-radius: 2px;
  background: var(--navy-lift);
  color: var(--muted);
  font-family: var(--util);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  place-content: center;
}
.portrait__placeholder small { font-size: .68rem; letter-spacing: .04em; text-transform: none; opacity: .7; }
.portrait.is-empty img { display: none; }
.portrait.is-empty .portrait__placeholder { display: grid; }

/* --- Footer --------------------------------------------------------------- */
.foot {
  background: var(--ink);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2rem, 5vw, 3rem);
  color: var(--muted);
  font-size: .85rem;
}
.foot__grid { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.foot__mark { width: 30px; height: 30px; color: var(--amber); opacity: .75; flex: none; }
.foot__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.foot__line .dot { opacity: .45; }
.foot a { color: var(--muted); text-decoration-color: var(--rule); }
.foot a:hover { color: var(--amber-hi); }

/* --- Press page ----------------------------------------------------------- */
.masthead {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
  background: linear-gradient(180deg, var(--ink), var(--navy));
  border-bottom: 1px solid var(--hairline);
}
.masthead h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); margin-bottom: .3em; }
.masthead .backlink {
  font-family: var(--util);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  display: inline-block;
  margin-bottom: 2rem;
}
.masthead .backlink:hover { color: var(--amber-hi); }

.press .band { padding-block: clamp(2rem, 4.5vw, 3.25rem); }

.press h2 {
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
  color: var(--amber-hi);
}
.press h3 {
  font-family: var(--util);
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 2rem 0 .8rem;
}

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--hairline);
}
.list-plain li:first-child { border-top: 1px solid var(--hairline); }

.dl-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dl-item .meta {
  font-family: var(--util);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.dl-item[aria-disabled="true"] { color: var(--muted); }

.facts { width: 100%; border-collapse: collapse; font-size: .95rem; }
.facts th, .facts td {
  text-align: left;
  padding: .65rem .8rem .65rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.facts th {
  font-family: var(--util);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  width: 11rem;
}
.facts td .tbd { color: var(--muted); font-family: var(--util); font-size: .8rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

a.dl-item { text-decoration: none; color: var(--paper); }
a.dl-item:hover { color: var(--amber-hi); }
a.dl-item:hover .meta { color: var(--amber); }

.topics li { display: flex; gap: .9rem; }
.topics .yr {
  font-family: var(--util);
  font-size: .74rem;
  color: var(--amber);
  letter-spacing: .06em;
  flex: none;
  padding-top: .2em;
  width: 5.5rem;
}

/* --- Entrance ------------------------------------------------------------- */
.js .reveal { opacity: 0; }
body.is-ready .reveal {
  animation: rise .75s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 90ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
body.is-ready .cover.reveal {
  animation-name: rise-cover;
  animation-duration: 1s;
}
@keyframes rise-cover {
  from { opacity: 0; transform: perspective(1400px) rotateY(-16deg) translateY(18px); }
  to   { opacity: 1; transform: perspective(1400px) rotateY(-8deg) rotateX(1.5deg); }
}
/* No cover file yet: the placeholder sits square, not tilted. */
body.is-ready .cover.is-empty { animation-name: rise; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal, body.is-ready .reveal { opacity: 1; transform: none; }
}