/* ============================================================
   @the_wildwolf — imprint home stylesheet
   The press's front door. Visual DNA shared with the book:
   dark, warm, typewriter + biro, the forest behind, leather
   and cream as the tactile vocabulary.
   ============================================================ */

/* ----- fonts (bundled biro) ----- */
@font-face {
  font-family: "Biro Script Plus";
  src: url("../fonts/BiroScriptPlus-Bold.woff2") format("woff2"),
       url("../fonts/BiroScriptPlus-Bold.woff") format("woff"),
       url("../fonts/BiroScriptPlus-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ----- variables ----- */
:root {
  --bg-deep:       #08070a;
  --bg-warm:       #110d0a;
  --leather-warm:  #1a1410;
  --leather-edge:  #2a1f18;
  --ink:           #f3ecd8;
  /* tier scale lifted for low-light readability. body prose moved from
     #c8bea8 (10.9:1 contrast) to a warmer brighter cream (~13:1). the
     two fainter tiers also nudged up so eyebrows and footer text read
     comfortably on a phone in dim light. */
  --ink-soft:      #e8ddc4;
  --ink-faint:     #a89f88;
  --ink-fainter:   #857d68;
  --accent:        #d8a44a;     /* warm gold */
  --accent-soft:   #b8853a;     /* slightly lifted too for the closing signature */
  --pen-blue:      #5e83a8;     /* lifted blue-biro for dark ground */
  --rule:          rgba(216, 164, 74, 0.22);
  --wood-1:        #2e1f12;
  --wood-2:        #1c1209;
  --wood-3:        #120a05;

  --font-typewriter: "Special Elite", "Courier Prime", "Courier New", monospace;
  --font-pen:        "Biro Script Plus", "Caveat", cursive;
  --font-serif:      "Cormorant Garamond", "Garamond", "Georgia", serif;
}

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

html, body {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-typewriter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  min-height: 100dvh;
  /* the same forest that lives behind every book page, but pulled
     deeper into shadow so the imprint feels like a quiet room with
     a window into the trees. The overlay is darkest at the bottom
     so footers stay legible; lightest at the top so the canopy can
     breathe through behind the wolf-mark. */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(216, 164, 74, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8, 7, 10, 0.82) 0%, rgba(8, 7, 10, 0.86) 50%, rgba(8, 7, 10, 0.89) 100%),
    url("../img/forest-canopy.jpg");
  background-size: cover, cover, cover;
  background-position: center top, center top, center center;
  background-attachment: fixed, fixed, fixed;
  background-color: var(--bg-deep);
  overflow-x: hidden;
}

/* paper-grain noise on top of the warm darkness — same kind of
   organic texture the book has on every paper page, here pitched
   for the dark ground */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
main {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2rem);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   HEADER — wolf mark and the press's name
   ============================================================ */
header.imprint-head {
  text-align: center;
  padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(0.8rem, 2vh, 1.2rem);
  /* on first paint the whole header rises gently into place */
  animation: fadeUp 1.2s ease both;
}
.brand-mark {
  width: clamp(80px, 14vw, 116px);
  height: auto;
  margin: 0 auto;
  opacity: 0.92;
  /* gold-tinged shadow under the mark — like a single low warm light
     above it casts the wolf's silhouette into the room */
  filter:
    drop-shadow(0 0 24px rgba(216, 164, 74, 0.22))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}
.brand-name {
  margin-top: 1.2rem;
  font-family: var(--font-typewriter);
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  letter-spacing: 6px;
  color: var(--ink);
  text-transform: lowercase;
  font-weight: normal;
}
.brand-tag {
  margin-top: 1.6rem;
  margin-left: auto;
  margin-right: auto;
  /* match the statement paragraph's column (540px) so the tagline's
     line edges align with the text directly beneath it on desktop */
  max-width: 540px;
  font-family: var(--font-pen);
  font-size: clamp(1.4rem, 3.8vw, 2rem);
  color: var(--accent);
  letter-spacing: 0.5px;
  line-height: 1.2;
  font-weight: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
  animation: fadeUp 1.4s 0.3s ease both;
}

/* ============================================================
   PRESS STATEMENT — the paragraph after the wolf mark
   ============================================================ */
section.statement {
  max-width: 540px;
  margin: clamp(1rem, 2.5vh, 1.6rem) auto 0;
  text-align: center;
  animation: fadeUp 1.4s 0.55s ease both;
}
.statement p {
  font-family: var(--font-typewriter);
  font-size: clamp(0.85rem, 2.1vw, 0.96rem);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.statement p:last-child {
  margin-bottom: 0;
}
.statement em {
  color: var(--accent);
  font-style: italic;
}
.statement strong {
  color: var(--ink);
  font-weight: bold;
}
.statement .closer {
  margin-top: 1.6rem;
  font-family: var(--font-pen);
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  color: var(--accent);
  letter-spacing: 0.3px;
}

/* small soft rule under the closer */
.soft-rule {
  width: 60px;
  height: 1px;
  margin: 2.2rem auto 0;
  background: linear-gradient(90deg, transparent 0%, var(--rule) 50%, transparent 100%);
}

/* ============================================================
   THE SHELF — where the books live
   The shelf is a warm wood plank rendered in CSS, with the
   one leather book standing upright on it (slight tilt for life).
   ============================================================ */
section.shelf-section {
  margin: clamp(3rem, 8vh, 5rem) 0 clamp(2rem, 5vh, 3rem);
  animation: fadeUp 1.4s 0.85s ease both;
  position: relative;
  /* overflow MUST be visible here. The shelf plank (::after/::before)
     spills -50vw on each side, but that horizontal spill is contained
     at the page level by `body { overflow-x: hidden }`, so we don't
     need to clip it here. We must NOT clip here because the
     .book-card::before moonlight halo bleeds above the cards - clipping
     the section (whether `overflow-x: hidden`, which also forces a
     y-axis scroll container, or `overflow: clip`) cuts the halo into a
     hard straight edge at the section's top. Leaving it visible lets
     the halo feather naturally and creates no inner scrollbar. */
  overflow: visible;
}
.shelf-eyebrow {
  text-align: center;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  letter-spacing: 5px;
  color: var(--ink-faint);
  text-transform: lowercase;
  margin-bottom: 1.8rem;
}
.shelf {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 4vw, 3rem);
  /* row-gap is larger so wrapped rows each read as their own shelf,
     with the wooden plank drawn under each row (see .shelf-row note).
     As the press grows past what fits on one row, books flow onto a
     new row rather than shrinking away or overflowing the page. */
  row-gap: clamp(3rem, 7vw, 4.4rem);
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(2.4rem, 6vw, 3.4rem);
  min-height: 360px;
}
/* the wooden plank — three layered gradients build a warm walnut
   plank with grain. drawn as a pseudo-element under the books.
   It extends to the viewport edges so the plank feels like it runs
   into the room walls, but is contained so it never widens the page.
   `left/right: calc((100vw - 100%) / -2)` reaches exactly from the
   centred section out to each viewport edge - no further - so there
   is no horizontal page overflow (the old -50vw overshot the edges
   and forced a page scrollbar). The mask still fades the ends to
   transparent so it reads as a plank dissolving into the dim. */
.shelf::after {
  content: "";
  position: absolute;
  left: calc((100vw - 100%) / -2);
  right: calc((100vw - 100%) / -2);
  bottom: 0;
  height: 36px;
  background:
    /* top edge — a sliver of brightness like light catching the edge */
    linear-gradient(180deg, rgba(216, 164, 74, 0.08) 0%, transparent 4px),
    /* the wood itself */
    linear-gradient(180deg, var(--wood-1) 0%, var(--wood-2) 60%, var(--wood-3) 100%);
  border-top: 1px solid rgba(216, 164, 74, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow:
    0 1px 0 rgba(216, 164, 74, 0.03) inset,
    0 -6px 12px rgba(0, 0, 0, 0.5);
  /* fade the wood out toward the very ends so it doesn't read as a
     painted bar; feels more like a plank dissolving into the dim */
  mask-image: linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%);
}
.shelf::before {
  content: "";
  position: absolute;
  left: calc((100vw - 100%) / -2);
  right: calc((100vw - 100%) / -2);
  bottom: 0;
  height: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='36'><filter id='g'><feTurbulence type='turbulence' baseFrequency='0.012 1.5' numOctaves='2' seed='8'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%);
}

/* ============================================================
   BOOK CARD — each book stands on the shelf as its own object
   ============================================================ */
.book-card {
  position: relative;
  width: clamp(160px, 22vw, 220px);
  text-align: center;
  text-decoration: none;
  color: inherit;
  /* a tiny tilt gives the book life — like it's been pulled out
     and not quite re-shelved straight */
  transform: rotate(-1.2deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.6s ease;
  z-index: 2;
}
/* A soft moonlight halo sits behind every book on the shelf, lifting
   the dark covers off the dark forest background. The halo is a wide
   radial gradient anchored to the book's centre and feathering out
   past its edges. It uses position:absolute with negative insets so
   it overflows beyond the card's bounds without affecting layout.
   Subtle by design - you should barely notice it consciously, but
   the books feel slightly luminous rather than swallowed by the dark. */
.book-card::before {
  content: "";
  position: absolute;
  /* wider spread than the card, but kept tighter at the bottom (-16%)
     so the glow doesn't bleed below the plank or past the clipped
     section edge. top/sides feather generously for the moonlit lift. */
  inset: -30% -38% -16% -38%;
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(222, 232, 250, 0.26) 0%,
    rgba(202, 217, 242, 0.15) 38%,
    rgba(182, 202, 232, 0.05) 62%,
    transparent 82%
  );
  pointer-events: none;
  z-index: -1;
  filter: blur(10px);
  transition: opacity 0.6s ease, background 0.6s ease;
}
.book-card:hover::before,
.book-card:focus-visible::before {
  /* on hover, the halo brightens slightly - the moonlight gets warmer
     as the reader leans in */
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(232, 242, 255, 0.34) 0%,
    rgba(212, 227, 250, 0.2) 38%,
    rgba(192, 212, 242, 0.07) 62%,
    transparent 82%
  );
}
.book-card:hover,
.book-card:focus-visible {
  transform: rotate(0deg) translateY(-8px);
  outline: none;
}
.book-cover {
  position: relative;
  width: 100%;
  /* leather cover proportions — match the book's actual cover image */
  aspect-ratio: 0.679;
  border-radius: 2px 4px 4px 2px;
  overflow: hidden;
  background: var(--leather-warm);
  /* the book casts a deep shadow onto the wood, plus a tiny ambient
     glow above as if a warm light hangs over the shelf */
  box-shadow:
    /* spine seam shadow */
    inset 6px 0 12px -4px rgba(0, 0, 0, 0.85),
    inset -1px 0 2px -1px rgba(255, 255, 255, 0.04),
    /* cast shadow on the wood */
    0 14px 24px -6px rgba(0, 0, 0, 0.8),
    0 30px 40px -8px rgba(0, 0, 0, 0.55),
    0 0 32px -6px rgba(216, 164, 74, 0.12);
  transition: box-shadow 0.6s ease;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-card:hover .book-cover {
  box-shadow:
    inset 6px 0 12px -4px rgba(0, 0, 0, 0.85),
    inset -1px 0 2px -1px rgba(255, 255, 255, 0.06),
    0 22px 32px -6px rgba(0, 0, 0, 0.85),
    0 40px 60px -8px rgba(0, 0, 0, 0.65),
    0 0 50px -6px rgba(216, 164, 74, 0.22);
}
.book-meta {
  margin-top: 1.1rem;
  /* meta sits below the book; minimal — the book itself is the brand */
}
.book-title {
  font-family: var(--font-pen);
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: var(--accent);
  font-weight: normal;
  letter-spacing: 0.3px;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.book-subtitle {
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: lowercase;
  color: var(--ink-faint);
}
.book-meta .read {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--ink-soft);
  text-transform: lowercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s ease;
}
.book-card:hover .read,
.book-card:focus-visible .read {
  opacity: 1;
  transform: translateY(0);
  color: var(--accent);
}

/* the "more coming" tile — a faint placeholder where the next book
   will go. quiet, intentional, not loud. just a hint that the shelf
   is growing. */
.book-card.coming {
  cursor: default;
  transform: rotate(0.8deg);
}
.book-card.coming .book-cover {
  background:
    repeating-linear-gradient(45deg,
      rgba(216, 164, 74, 0.04) 0,
      rgba(216, 164, 74, 0.04) 8px,
      transparent 8px,
      transparent 16px);
  border: 1px dashed rgba(216, 164, 74, 0.18);
  box-shadow:
    0 8px 16px -6px rgba(0, 0, 0, 0.5),
    0 16px 28px -10px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.book-card.coming:hover {
  transform: rotate(0.8deg);
}
.book-card.coming:hover .book-cover {
  box-shadow:
    0 8px 16px -6px rgba(0, 0, 0, 0.5),
    0 16px 28px -10px rgba(0, 0, 0, 0.4);
}
.coming-text {
  font-family: var(--font-pen);
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

/* ============================================================
   FOOTER — small, quiet
   ============================================================ */
footer.imprint-foot {
  margin-top: auto;
  padding: clamp(2rem, 5vh, 3rem) 0 clamp(1.4rem, 3vh, 2rem);
  text-align: center;
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--ink-fainter);
  text-transform: lowercase;
}
.foot-rule {
  width: 40px;
  height: 1px;
  margin: 0 auto 1.4rem;
  background: linear-gradient(90deg, transparent 0%, var(--ink-fainter) 50%, transparent 100%);
  opacity: 0.4;
}
.foot-line {
  margin: 0.45rem 0;
}
.foot-line a {
  color: var(--ink-faint);
  transition: color 0.3s ease;
  border-bottom: 1px dotted transparent;
}
.foot-line a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-soft);
}
.foot-bridge {
  margin-top: 1.4rem;
  font-style: italic;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  color: var(--ink-fainter);
}
.foot-bridge a {
  color: var(--ink-faint);
}

/* Site-wide footer social row — instagram · pinterest · email, on
   every page. Quiet, single line, wraps on narrow screens. */
.foot-social {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 1.8px;
}
.foot-social a {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}
.foot-social a:hover,
.foot-social a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent-soft);
  outline: none;
}
.foot-social .sep { color: var(--ink-fainter); opacity: 0.6; }
.foot-social .foot-soon {
  color: var(--ink-fainter);
  cursor: default;
  pointer-events: none;
}
.foot-social .foot-soon em {
  font-style: italic;
  opacity: 0.7;
  font-size: 0.92em;
}

/* ============================================================
   ABOUT-PAGE BUTTONS — clear, themed pill controls used on the
   about page: "read how it began" (origin) and the "for press &
   reviewers" toggle. Same outlined-accent language as the book
   covers' buttons, so they read unmistakably as controls.
   ============================================================ */
.about-actions {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
}
.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--accent);
  background: rgba(8, 6, 4, 0.45);
  border: 1px solid var(--accent-soft, rgba(216, 164, 74, 0.5));
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, gap 0.3s ease;
}
.about-btn:hover,
.about-btn:focus-visible {
  background: var(--accent);
  color: var(--paper, #110d0a);
  border-color: var(--accent);
  gap: 0.7rem;
  outline: none;
}
.about-btn-arr { transition: transform 0.3s ease; }
.about-btn:hover .about-btn-arr,
.about-btn:focus-visible .about-btn-arr { transform: translateX(2px); }

/* ============================================================
   PRESS KIT — a simple collapsible <details> on the about page.
   The summary is a clear button (.about-btn); open reveals the
   quotable lines + facts.
   ============================================================ */
.press-kit {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.press-kit-summary {
  list-style: none;
}
.press-kit-summary::-webkit-details-marker { display: none; }
.press-kit-caret {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.3s ease;
}
.press-kit[open] .press-kit-caret {
  transform: rotate(45deg); /* + becomes × */
}
.press-kit-body {
  margin-top: 1rem;
  width: 100%;
  animation: fadeUp 0.5s ease both;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .shelf {
    flex-direction: column;
    gap: 2.6rem;
    align-items: center;
    min-height: auto;
    padding-bottom: 3.4rem;
  }
  .book-card {
    width: 180px;
    transform: rotate(-1deg);
  }
  .book-card.coming {
    transform: rotate(0.6deg);
    width: 160px;
  }
  .shelf::after, .shelf::before {
    /* on mobile the shelf becomes a narrow band under each book.
       This keeps the visual metaphor while making it stack cleanly. */
    height: 28px;
  }
}

/* ============================================================
   TOP NAV - a tiny line of letters at the top of every imprint
   page. Not a UI bar; a breath of text. Each link is the same
   small caps as the wolf-header inside the book - same family.
   Always centred, always quiet.
   ============================================================ */
nav.imprint-nav {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: clamp(0.9rem, 2.6vh, 1.4rem) clamp(1rem, 4vw, 2rem) clamp(0.9rem, 2.6vh, 1.4rem);
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  letter-spacing: 5px;
  text-transform: lowercase;
  color: var(--ink-faint);
  /* a subtle darkened bar so the nav reads as a deliberate masthead
     rather than faint letters floating on the forest photo. The bar is
     barely-there at the sides and a touch deeper behind the words, with
     a hairline gold rule beneath to seat it. */
  background:
    linear-gradient(180deg, rgba(8, 7, 10, 0.55) 0%, rgba(8, 7, 10, 0.32) 100%);
  border-bottom: 1px solid rgba(216, 164, 74, 0.16);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* the nav itself fades in slowly so it doesn't shout for attention */
  animation: navFade 1.6s 0.4s ease both;
}
nav.imprint-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  margin: 0 0.15rem;
  display: inline-block;
  transition: color 0.3s ease;
  border-bottom: 1px dotted transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
nav.imprint-nav a:hover,
nav.imprint-nav a:focus-visible {
  color: var(--accent);
  outline: none;
  border-bottom-color: rgba(216, 164, 74, 0.4);
}
nav.imprint-nav a.current {
  color: var(--accent);
  /* the current page link gets a tiny dot below it - a fixed marker */
  position: relative;
}
nav.imprint-nav a.current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
nav.imprint-nav .sep {
  /* the centre dot between links - quieter than a slash or pipe */
  color: var(--ink-faint);
  margin: 0 0.15rem;
  opacity: 0.5;
  user-select: none;
}
@keyframes navFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 600px) {
  nav.imprint-nav {
    font-size: 0.62rem;
    letter-spacing: 3.5px;
    /* on mobile the items wrap onto two lines if needed; that's fine. */
  }
  nav.imprint-nav a { padding: 0.3rem 0.45rem; margin: 0; }
  nav.imprint-nav .sep { margin: 0 0.1rem; }
}

/* ============================================================
   SUBPAGE - shared layout for about / howl / contact / press
   A single quiet column. Same dark forest behind. Each section
   separated by a soft rule, mirroring the rhythm of the book's
   © modal and the home page's statement.
   ============================================================ */
main.subpage {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 3.4rem) clamp(1.4rem, 5vw, 2.2rem) clamp(3rem, 8vh, 5rem);
  min-height: calc(100dvh - 50px);
  display: flex;
  flex-direction: column;
}

/* the page header - eyebrow, title, optional subtitle */
.subpage-head {
  text-align: center;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
  animation: fadeUp 1.1s ease both;
}
.subpage-eyebrow {
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  letter-spacing: 5px;
  color: var(--ink-faint);
  text-transform: lowercase;
  margin-bottom: 1rem;
}
.subpage-title {
  font-family: var(--font-typewriter);
  font-size: clamp(1.05rem, 2.8vw, 1.25rem);
  letter-spacing: 3px;
  color: var(--ink);
  text-transform: lowercase;
  font-weight: normal;
  margin-bottom: 0.7rem;
  line-height: 1.3;
}
.subpage-subtitle {
  font-family: var(--font-pen);
  font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  color: var(--accent);
  line-height: 1.2;
  font-weight: normal;
  letter-spacing: 0.5px;
}

/* the body - prose blocks separated by soft rules */
.subpage-body {
  animation: fadeUp 1.3s 0.25s ease both;
}
.subpage-body .block {
  text-align: center;
  margin: 0;
  padding: clamp(1.2rem, 3vh, 1.8rem) 0;
}
.subpage-body .block:first-of-type { padding-top: 0; }
.subpage-body .block p {
  font-family: var(--font-typewriter);
  font-size: clamp(0.86rem, 2.1vw, 0.96rem);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.subpage-body .block p:last-child { margin-bottom: 0; }
.subpage-body .block em {
  color: var(--accent);
  font-style: italic;
}
.subpage-body .block strong {
  color: var(--ink);
  font-weight: bold;
}

/* a strong centred line for slogans / declarations within the body
   - like "the alternative; to AI." or "offered freely; sustained by gifts." */
.declaration {
  font-family: var(--font-pen);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--accent);
  text-align: center;
  margin: 0.4rem 0;
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.declaration-sub {
  font-family: var(--font-typewriter);
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.4rem;
}

/* the soft rule between blocks - same dotted rhythm as the © modal */
.block-rule {
  width: 60px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent 0%, var(--rule) 50%, transparent 100%);
  opacity: 0.8;
}

/* an email address rendered as the door */
.email-door {
  display: inline-block;
  margin: 0.4rem 0;
  font-family: var(--font-typewriter);
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  color: var(--accent);
  letter-spacing: 1.5px;
  border-bottom: 1px dashed rgba(216, 164, 74, 0.4);
  padding: 0.2rem 0.4rem;
  transition: color 0.3s ease, border-bottom-color 0.3s ease, background 0.3s ease;
  text-decoration: none;
}
.email-door:hover,
.email-door:focus-visible {
  color: #ffd97a;
  border-bottom-color: var(--accent);
  background: rgba(216, 164, 74, 0.06);
  outline: none;
}

/* a final breath at the end of every subpage - the signature line */
.subpage-signature {
  margin-top: clamp(2rem, 5vh, 3rem);
  text-align: center;
  font-family: var(--font-pen);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--accent-soft);
  letter-spacing: 0.3px;
  opacity: 0.9;
  animation: fadeUp 1.3s 0.6s ease both;
}

/* ============================================================
   HOWL - the page where the reader follows the wolf
   ============================================================ */
.howl-channels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: clamp(1rem, 3vh, 1.6rem) auto 0;
  max-width: 320px;
}
.howl-channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid rgba(216, 164, 74, 0.25);
  background: rgba(216, 164, 74, 0.02);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-typewriter);
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.howl-channel:hover,
.howl-channel:focus-visible {
  background: rgba(216, 164, 74, 0.08);
  border-color: rgba(216, 164, 74, 0.5);
  transform: translateY(-2px);
  outline: none;
}
.howl-channel .channel-name {
  flex: 1;
  text-align: left;
}
.howl-channel .channel-handle {
  color: var(--ink-faint);
  font-size: 0.75rem;
  letter-spacing: 1px;
}
.howl-channel.coming {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.howl-channel.coming:hover { transform: none; }
.howl-channel-icon {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ============================================================
   PRESS KIT - photo grid, downloads, fact sheet
   ============================================================ */
.press-section {
  margin-top: clamp(2rem, 5vh, 3rem);
  animation: fadeUp 1.2s 0.35s ease both;
}
.press-section-title {
  text-align: center;
  font-family: var(--font-typewriter);
  font-size: 0.62rem;
  letter-spacing: 5px;
  color: var(--ink-faint);
  text-transform: lowercase;
  margin-bottom: 1rem;
}
.press-facts {
  background: rgba(216, 164, 74, 0.025);
  border: 1px solid rgba(216, 164, 74, 0.15);
  padding: 1.4rem 1.6rem;
  margin: 1rem auto;
  max-width: 480px;
  font-family: var(--font-typewriter);
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.press-facts dt {
  display: inline-block;
  width: 130px;
  color: var(--ink-faint);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: lowercase;
  vertical-align: top;
  padding-right: 0.5rem;
}
.press-facts dd {
  display: inline-block;
  width: calc(100% - 140px);
  margin: 0 0 0.5rem;
  vertical-align: top;
}
.press-facts dd:last-child { margin-bottom: 0; }
.press-facts a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(216, 164, 74, 0.4);
}

.press-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}
.press-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(216, 164, 74, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, #1a1410 0%, #08070a 100%);
  border: 1px dashed rgba(216, 164, 74, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  letter-spacing: 3px;
  color: var(--ink-fainter);
  text-transform: lowercase;
  line-height: 1.5;
  border-radius: 2px;
  /* faint moonlight feel - matches the press's mood */
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.4);
}
.press-photo.has-image {
  border: 1px solid rgba(216, 164, 74, 0.15);
  padding: 0;
  overflow: hidden;
}
.press-photo.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.press-photo .placeholder {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}
.press-photo .placeholder .moon {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  opacity: 0.4;
}

.press-download {
  display: inline-block;
  margin: 0.6rem 0.4rem;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--ink);
  background: rgba(216, 164, 74, 0.03);
  border: 1px solid rgba(216, 164, 74, 0.4);
  text-decoration: none;
  text-transform: lowercase;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.press-download:hover,
.press-download:focus-visible {
  background: var(--accent);
  color: #1a1410;
  border-color: var(--accent);
  outline: none;
}

/* ============================================================
   FOOTER - shared across all subpages
   ============================================================ */
.subpage-foot {
  margin-top: auto;
  padding: clamp(2.2rem, 6vh, 3.4rem) 0 clamp(1.2rem, 3vh, 1.8rem);
  text-align: center;
  font-family: var(--font-typewriter);
  font-size: 0.62rem;
  letter-spacing: 2px;
  color: var(--ink-fainter);
  text-transform: lowercase;
}
.subpage-foot a {
  color: var(--ink-faint);
  transition: color 0.3s ease;
}
.subpage-foot a:hover { color: var(--accent); }
.subpage-foot .foot-rule {
  width: 40px;
  height: 1px;
  margin: 0 auto 1.2rem;
  background: linear-gradient(90deg, transparent 0%, var(--ink-fainter) 50%, transparent 100%);
  opacity: 0.4;
}

/* ============================================================
   EMBEDDED BOOK COVER - the floating leather hardback, lifted
   from the landing page so it can appear inline within prose
   on imprint pages (e.g. the origin page closing with the book
   the story produced). Smaller than the landing's centrepiece
   version because here it's a coda, not the focus.
   ============================================================ */
.book-embed {
  display: block;
  width: clamp(160px, 22vw, 230px);
  margin: clamp(1.4rem, 3vh, 2rem) auto 0.4rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  /* a soft warm halo around the cover, sitting in the dark like
     a moonlit object on a table */
}
.book-embed::before {
  content: "";
  position: absolute;
  inset: -10% -14% -10% -14%;
  background: radial-gradient(ellipse at 50% 50%, rgba(216, 164, 74, 0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.book-embed-cover {
  display: block;
  width: 100%;
  aspect-ratio: 0.679;
  position: relative;
  border-radius: 2px 6px 6px 2px;
  overflow: hidden;
  background: #14110d;
  box-shadow:
    /* spine inner shadow */
    inset 9px 0 18px -6px rgba(0, 0, 0, 0.92),
    inset -2px 0 4px -1px rgba(255, 255, 255, 0.05),
    inset 0 1px 2px rgba(255, 255, 255, 0.04),
    /* heavy floating shadow */
    0 18px 36px -8px rgba(0, 0, 0, 0.85),
    0 36px 56px -12px rgba(0, 0, 0, 0.5),
    /* warm gold rim glow */
    0 0 60px -10px rgba(216, 164, 74, 0.2);
  /* gentle perpetual breath */
  animation: bookFloat 9s ease-in-out infinite;
  transform-origin: center;
  transform: perspective(1400px) rotateY(-3deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.6s ease;
}
.book-embed-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-embed:hover .book-embed-cover,
.book-embed:focus-visible .book-embed-cover {
  transform: perspective(1400px) rotateY(0deg) translateY(-6px);
  box-shadow:
    inset 9px 0 18px -6px rgba(0, 0, 0, 0.92),
    inset -2px 0 4px -1px rgba(255, 255, 255, 0.07),
    inset 0 1px 2px rgba(255, 255, 255, 0.06),
    0 26px 44px -8px rgba(0, 0, 0, 0.9),
    0 48px 72px -12px rgba(0, 0, 0, 0.6),
    0 0 84px -10px rgba(216, 164, 74, 0.32);
  outline: none;
}
.book-embed-caption {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  letter-spacing: 3px;
  color: var(--ink-faint);
  text-transform: lowercase;
  transition: color 0.3s ease;
}
.book-embed-caption .open-arrow {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--accent);
  font-size: 0.85rem;
  transition: transform 0.4s ease;
}
.book-embed:hover .book-embed-caption,
.book-embed:focus-visible .book-embed-caption {
  color: var(--ink);
}
.book-embed:hover .open-arrow,
.book-embed:focus-visible .open-arrow {
  transform: translateX(4px);
}

@keyframes bookFloat {
  0%   { transform: perspective(1400px) rotateY(-3deg) translateY(0); }
  50%  { transform: perspective(1400px) rotateY(-3deg) translateY(-6px); }
  100% { transform: perspective(1400px) rotateY(-3deg) translateY(0); }
}

/* ============================================================
   INLINE PROSE LINK - a stronger "this is a link" style for
   prose contexts where the dotted-gold pattern is too quiet.
   Used for things like "the accountant saved by a wolf - how it
   began →" on the about page. Solid underline, gold, with a
   clear hover lift.
   ============================================================ */
.prose-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 164, 74, 0.55);
  padding-bottom: 1px;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
  font-style: normal;
}
.prose-link:hover,
.prose-link:focus-visible {
  color: #ffd97a;
  border-bottom-color: var(--accent);
  outline: none;
}
.prose-link .arr {
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform 0.3s ease;
}
.prose-link:hover .arr,
.prose-link:focus-visible .arr {
  transform: translateX(3px);
}

/* ============================================================
   BOOKS PAGE - catalog layout. Each book entry has the floating
   cover on the left and meta/prose on the right. Stacks on mobile.
   Designed to grow as more books are published.
   ============================================================ */
.book-entry {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: clamp(1.4rem, 4vw, 2.4rem);
  align-items: center;
  margin: clamp(1.4rem, 3vh, 2rem) 0;
  animation: fadeUp 1.2s ease both;
}
.book-entry .book-embed {
  width: 100%;
  margin: 0; /* override the default centred margin so it sits in the grid cell */
}
.book-entry-meta {
  text-align: left;
}
.book-entry-eyebrow {
  font-family: var(--font-typewriter);
  font-size: 0.62rem;
  letter-spacing: 4px;
  color: var(--ink-faint);
  text-transform: lowercase;
  margin-bottom: 0.8rem;
}
.book-entry-title {
  font-family: var(--font-pen);
  font-size: clamp(2rem, 5vw, 2.6rem);
  color: var(--accent);
  line-height: 1;
  font-weight: normal;
  margin: 0 0 0.25rem;
  letter-spacing: 0.5px;
}
.book-entry-subtitle {
  font-family: var(--font-typewriter);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}
.book-entry-lede {
  font-family: var(--font-typewriter);
  font-style: italic;
  font-size: clamp(0.85rem, 2.1vw, 0.96rem);
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.book-entry-meta p {
  font-family: var(--font-typewriter);
  font-size: clamp(0.85rem, 2.1vw, 0.92rem);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.book-entry-meta p:last-child { margin-bottom: 0; }
.book-entry-meta em { color: var(--accent); font-style: italic; }
.book-entry-invite {
  font-family: var(--font-typewriter);
  margin: 1rem 0 1.2rem !important;
}
.book-entry-invite em { color: var(--accent); }

/* Coming-soon tile that mirrors the shape of book-embed but without
   a real cover. Same striped placeholder used on the homepage shelf. */
.book-embed-coming {
  width: 100%;
  position: relative;
}
.book-embed-coming::before {
  content: "";
  position: absolute;
  inset: -10% -14% -10% -14%;
  background: radial-gradient(ellipse at 50% 50%, rgba(216, 164, 74, 0.04) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.coming-tile {
  width: 100%;
  aspect-ratio: 0.679;
  background:
    repeating-linear-gradient(45deg,
      rgba(216, 164, 74, 0.04) 0,
      rgba(216, 164, 74, 0.04) 8px,
      transparent 8px,
      transparent 16px);
  border: 1px dashed rgba(216, 164, 74, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 2px 6px 6px 2px;
  box-shadow:
    0 8px 16px -6px rgba(0, 0, 0, 0.5),
    0 16px 28px -10px rgba(0, 0, 0, 0.4);
}
.coming-text {
  font-family: var(--font-pen);
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.5px;
}
.book-entry-coming {
  opacity: 0.65;
}

@media (max-width: 640px) {
  .book-entry {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    text-align: center;
    justify-items: center;
  }
  .book-entry .book-embed {
    max-width: 180px;
  }
  .book-entry-meta {
    text-align: center;
  }
  .book-entry-meta p,
  .book-entry-meta .book-entry-invite { text-align: center; }
}