/* site.css — shared foundation for the Amy Irvine site.
 *
 * Standardized palette, typography helpers, navigation, button system, and the
 * tiered scroll-reveal classes. Linked from every page after the Google Fonts
 * <link> and before each page's own (trimmed) inline <style>, which keeps only
 * page-specific layout. The reference palette is the Trespass "desert
 * stratigraphy" band set; book pages inherit it rather than redefining it.
 */

:root {
  --parchment: #F2DFAD;
  --parch-deep:#E5C99A;
  --rust:      #C14E1A;
  --mahogany:  #7A2E0E;
  --ember:     #E8621C;
  --terra:     #D47A38;
  --ink:       #1A0C06;
  --ink-soft:  rgba(26, 12, 6, 0.62);
  --ink-faint: rgba(26, 12, 6, 0.40);

  /* Cover / woodcut desert tones */
  --charcoal:  #0D0D0D;
  --rockrust:  #9E5E38;
  --sanddust:  #D1A172;
  --slate:     #7A828A;

  /* Standard section bands — light at top to deep at foot */
  --band-hero:    #EDE6D4;
  --band-about:   #E6D9BF;
  --band-praise:  #DFCFAD;
  --band-award:   #D8C49C;
  --band-details: #D0B88A;

  /* Per-book signature accent (pages may override) */
  --accent: var(--rockrust);
}

html, body {
  margin: 0; padding: 0; width: 100%;
  background: var(--band-details);
  color: var(--ink);
  font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }

/* ---- Shared helpers --------------------------------------------------- */
.eyebrow {
  font: 500 15px/1.5 'Cagliostro', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow .sep { color: var(--ink-faint); opacity: 0.6; margin: 0 0.6em; }

.inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 6vw;
  box-sizing: border-box;
}


/* ---- Button system — a single quiet rust ghost ------------------------ */
/* One light outline style for every button: transparent fill, mahogany text,
   thin rust border. No patina, no wash; hover just deepens the rust a touch. */
.btn,
.btn-primary,
.btn-secondary {
  font: 500 14px/1 'Cagliostro', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  color: var(--mahogany);
  background: transparent;
  border: 1px solid rgba(110, 42, 14, 0.30);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.btn:hover,
.btn:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--rust);
  border-color: rgba(122, 46, 14, 0.55);
}

/* Primary (e.g. Pre-order) — the same ghost, just a little more present:
   a fuller border with a faint inner hairline. Still no fill. */
.btn-primary {
  border-color: rgba(122, 46, 14, 0.58);
  box-shadow: inset 0 0 0 1px rgba(122, 46, 14, 0.16);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  border-color: rgba(193, 78, 26, 0.85);
  box-shadow: inset 0 0 0 1px rgba(193, 78, 26, 0.30);
}

/* ---- Tiered scroll reveals -------------------------------------------- */
/* Tier 1 — blur emerge, reserved for large display pull-quotes. */
.reveal-quote {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(12px);
  transition: opacity 1.0s ease-out, filter 1.0s ease-out, transform 1.0s ease-out;
  will-change: opacity, filter, transform;
}
.reveal-quote.is-in { opacity: 1; filter: blur(0); transform: none; }

/* Tier 2 — light, quick fade-up for grids and lists (no blur). */
.reveal-up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  will-change: opacity, transform;
}
.reveal-up.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-quote, .reveal-up {
    transition: opacity 0.4s ease;
    transform: none;
    filter: none;
  }
}

/* ---- Praise: feature band + interactive rail + editorial offset ------- */
/* Shared by every book page. Accent colors use --accent so each book keeps
   its signature (rust / terra / cornflower). Markup pattern:
     .praise > .praise-head            (the "Praise" eyebrow)
            > .praise-feature          (full-bleed centerpiece quote)
              [--essay: pulled line + full quote, for long blurbs]
            > .praise-railwrap         (rail of cards; quote-heavy books)
              or .praise-offset        (alternating pull-quotes; few quotes)
              [--long: reading-scale type; .offset-right pins a figure right] */
.praise {
  position: relative;
  z-index: 1;
  /* Match the section above (about) so the heading blends in; the feature
     quote below is the one distinct band. */
  background: var(--band-about);
  padding: 0;
}
.praise figure { margin: 0; }
.praise .work {
  text-transform: none;
  letter-spacing: 0.04em;
  font-style: italic;
  color: var(--ink-soft);
}
.praise-head {
  max-width: 1100px;
  margin: 0 auto;
  /* Symmetric padding so the pill sits vertically centered in its row, with
     breathing room before the feature band. */
  padding: clamp(44px, 7vh, 84px) max(6vw, 24px);
  text-align: center;
}
/* The "Praise" label as a centered pill on a soft card background. */
.praise-label {
  display: inline-block;
  padding: 11px 28px;
  background: rgba(242, 223, 173, 0.70);
  border: 1px solid rgba(122, 46, 14, 0.20);
  border-radius: 999px;
  font-size: 17px;
  letter-spacing: 0.26em;
  color: var(--mahogany);
}

/* Feature — a full-bleed band, the section's centerpiece. */
.praise-feature {
  margin: 0;
  padding: clamp(52px, 8vh, 100px) max(6vw, 24px);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(122, 46, 14, 0.05), rgba(122, 46, 14, 0.10)),
    var(--band-praise);
  border-top: 1px solid rgba(122, 46, 14, 0.20);
  border-bottom: 1px solid rgba(122, 46, 14, 0.20);
}
.praise-feature blockquote {
  margin: 0 auto;
  max-width: 880px;
  font-family: 'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.7vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.praise-feature blockquote::before { content: '\201C'; color: var(--accent); }
.praise-feature blockquote::after  { content: '\201D'; color: var(--accent); }
.praise-feature cite {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-style: normal;
  font: 500 15px/1.6 'Cagliostro', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.praise-feature cite::before,
.praise-feature cite::after {
  content: '';
  display: inline-block;
  width: 32px; height: 0.5px;
  background: var(--ink-faint);
}

/* Essay-length feature: a short pulled line carries the display moment
   (and the accent quotes), then the full quote runs at reading measure
   beneath it. For blurbs far too long to set at display size whole. */
.praise-feature--essay .feature-pull {
  margin: 0 auto;
  max-width: 880px;
  font-family: 'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.7vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.praise-feature--essay .feature-pull::before { content: '\201C'; color: var(--accent); }
.praise-feature--essay .feature-pull::after  { content: '\201D'; color: var(--accent); }
.praise-feature--essay blockquote {
  /* Cormorant rather than Didot — Didot's hairlines turn harsh over a
     hundred-plus words of running text. */
  max-width: 640px;
  margin: 30px auto 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.62;
  letter-spacing: 0;
  text-align: left;
}
.praise-feature--essay blockquote::before,
.praise-feature--essay blockquote::after { content: none; }

/* Interactive rail — one horizontal track of quote cards. */
.praise-railwrap { padding: clamp(34px, 6vh, 68px) 0 clamp(44px, 8vh, 92px); }
.rail-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0 max(6vw, 24px);
}
.rail-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(122, 46, 14, 0.40);
  border-radius: 50%;
  background: transparent;
  color: var(--mahogany);
  font-size: 17px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.rail-btn:hover:not(:disabled),
.rail-btn:focus-visible:not(:disabled) {
  color: var(--rust);
  border-color: rgba(193, 78, 26, 0.70);
}
.rail-btn:disabled { opacity: 0.28; cursor: default; }
.praise-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 360px);
  gap: 26px;
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: max(6vw, 24px);
  padding: 0 max(6vw, 24px) 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 46, 14, 0.45) rgba(122, 46, 14, 0.12);
  cursor: grab;
}
.praise-rail:active { cursor: grabbing; }
/* While praise-rail.js owns the scroll (wheel glide / drag), CSS snap must
   stand down or it re-snaps against every scrollLeft write — the jerk. */
.praise-rail.is-gliding { scroll-snap-type: none; }
.praise-rail::-webkit-scrollbar { height: 8px; }
.praise-rail::-webkit-scrollbar-track { background: rgba(122, 46, 14, 0.10); border-radius: 8px; }
.praise-rail::-webkit-scrollbar-thumb { background: rgba(122, 46, 14, 0.40); border-radius: 8px; }
.praise-rail > figure {
  scroll-snap-align: start;
  margin: 0;
  padding: 26px 26px 28px;
  background: rgba(242, 223, 173, 0.45);
  border: 1px solid rgba(122, 46, 14, 0.18);
  border-top: 2px solid var(--accent);
  border-radius: 5px;
}
.praise-rail blockquote {
  margin: 0;
  font-family: 'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--ink);
}
.praise-rail blockquote::before { content: '\201C'; color: var(--accent); }
.praise-rail blockquote::after  { content: '\201D'; color: var(--accent); }
.praise-rail cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font: 500 13px/1.6 'Cagliostro', system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Editorial offset — alternating left/right pull-quotes (few quotes). */
.praise-offset {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(36px, 7vh, 80px) max(6vw, 24px) clamp(44px, 8vh, 92px);
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 6vh, 68px);
}
.praise-offset figure {
  margin: 0;
  max-width: 640px;
  padding-left: 28px;
  border-left: 2px solid var(--accent);
}
.praise-offset figure:nth-child(even),
.praise-offset figure.offset-right {
  align-self: flex-end;
  text-align: right;
  padding-left: 0;
  padding-right: 28px;
  border-left: none;
  border-right: 2px solid var(--accent);
}
.praise-offset blockquote {
  margin: 0;
  font-family: 'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 29px);
  line-height: 1.34;
  color: var(--ink);
}
.praise-offset cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font: 500 15px/1.6 'Cagliostro', system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Long-quote offset: reading-scale type for ~100-word quotes, which would
   run to a wall of italic at the default pull-quote size. */
.praise-offset--long figure { max-width: 720px; }
.praise-offset--long blockquote {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.58;
}

@media (max-width: 880px) {
  .rail-nav { display: none; }
  .praise-rail {
    /* Card narrower than the viewport so the next one peeks past the right
       edge, making the rail's scrollability obvious. */
    grid-auto-columns: 78vw;
    gap: 16px;
    scroll-snap-type: x mandatory;
    cursor: default;
  }
  .praise-offset figure,
  .praise-offset figure:nth-child(even),
  .praise-offset figure.offset-right {
    align-self: stretch;
    max-width: 100%;
    text-align: left;
    padding: 0 0 0 22px;
    border-left: 2px solid var(--accent);
    border-right: none;
  }
}