/* ============================================================
   BOOKS HERO
   ------------------------------------------------------------
   Full-bleed painterly hero under the `bh-` namespace. Loaded
   after styles.css so none of the older .books-hero rules apply.

   The backdrop is built from layered gradients plus an SVG grain
   pass rather than a photograph: it keeps the page under 10KB of
   new weight, scales to any viewport without art-directed crops,
   and lets the palette be tuned to the brand instead of to a
   stock image.
   ============================================================ */

.bh {
  --bh-ink: #ffffff;
  --bh-muted: rgba(255, 255, 255, .78);
  --bh-rule: rgba(255, 255, 255, .45);

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86vh, 880px);
  padding: calc(var(--nav-height, 76px) + clamp(2rem, 5vw, 4rem))
           clamp(1.25rem, 5vw, 4rem)
           clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  color: var(--bh-ink);
  background: #241a2b;
}

/* ---- 1 · painted ground ----
   Tight, high-contrast colour fields. Wide soft blooms muddied into brown
   where they met; keeping each one smaller and more opaque lets the
   magenta, amber and teal stay separate the way worked paint does. */
.bh-bg {
  position: absolute;
  inset: -8%;
  z-index: -3;
  background:
    radial-gradient(32% 30% at 14% 10%,  rgba(126, 34, 104, .98), transparent 70%),
    radial-gradient(30% 26% at 42% 4%,   rgba(190, 44, 66, .95),  transparent 68%),
    radial-gradient(26% 24% at 68% 14%,  rgba(158, 58, 122, .9),  transparent 70%),
    radial-gradient(34% 30% at 26% 40%,  rgba(232, 126, 40, .97), transparent 68%),
    radial-gradient(28% 26% at 48% 58%,  rgba(214, 92, 44, .9),   transparent 70%),
    radial-gradient(30% 28% at 4% 66%,   rgba(158, 78, 24, .95),  transparent 70%),
    radial-gradient(34% 32% at 82% 56%,  rgba(16, 122, 110, .98), transparent 68%),
    radial-gradient(28% 26% at 96% 22%,  rgba(32, 86, 128, .95),  transparent 68%),
    radial-gradient(32% 30% at 62% 90%,  rgba(20, 104, 82, .96),  transparent 68%),
    radial-gradient(26% 24% at 30% 88%,  rgba(96, 46, 96, .9),    transparent 70%),
    radial-gradient(24% 22% at 90% 88%,  rgba(24, 78, 96, .9),    transparent 70%),
    linear-gradient(158deg, #4a1f42 0%, #8a4620 42%, #10514a 100%);
  filter: saturate(1.18) contrast(1.06);
}

/* ---- 1b · impasto relief ----
   Flat turbulence alone reads as cloud, not paint: real impasto is legible
   because ridges catch light and cast micro-shadow. Running the noise
   through feDiffuseLighting with a fixed distant light turns the height
   field into actual lit relief, which is what sells it as pigment with
   thickness rather than a soft gradient. */
.bh-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .44;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><filter id='i' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.017' numOctaves='5' seed='9' stitchTiles='stitch' result='h'/><feDiffuseLighting in='h' lighting-color='white' surfaceScale='2.4' diffuseConstant='1.05'><feDistantLight azimuth='128' elevation='56'/></feDiffuseLighting></filter><rect width='1200' height='1200' filter='url(%23i)'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---- 1c · palette-knife drag ----
   Strongly anisotropic frequency (x an order finer than y) stretches the
   noise into directional streaks, then the same lighting pass gives each
   streak a lit edge. This is the knife-mark layer. */
.bh-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  /* A 25:1 frequency ratio here streaked the whole hero horizontally and
     read as motion blur. Paint drags are shorter, softer and off-axis, so
     the anisotropy is milder and the layer is rotated well off horizontal
     and kept quiet enough to sit under the impasto rather than over it. */
  opacity: .17;
  mix-blend-mode: soft-light;
  transform: rotate(-19deg) scale(1.5);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'><filter id='k' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.007 0.028' numOctaves='4' seed='23' stitchTiles='stitch' result='h'/><feDiffuseLighting in='h' lighting-color='white' surfaceScale='2.8' diffuseConstant='1'><feDistantLight azimuth='150' elevation='50'/></feDiffuseLighting></filter><rect width='1400' height='1400' filter='url(%23k)'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---- 1d · canvas weave ----
   Deliberately regular. Brushwork must never be a repeating pattern, but
   woven linen is exactly that, so a fine cross-hatch is the correct tool
   here where it was the wrong one for the strokes. */
.bh-weave {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
}

/* ---- 2 · grain ---- */
.bh-grain {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .28;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 220px 220px;
}

/* ---- 3 · legibility scrim ---- */
/* Weighted to the left, where the type sits, so the right side of
   the painting stays bright behind the book. */
.bh-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(96deg, rgba(14, 8, 18, .74) 0%, rgba(14, 8, 18, .46) 38%,
                    rgba(14, 8, 18, .12) 62%, rgba(14, 8, 18, .3) 100%),
    linear-gradient(to bottom, rgba(10, 6, 14, .5) 0%, transparent 26%,
                    transparent 72%, rgba(10, 6, 14, .55) 100%);
}

/* ---- layout ---- */
/* The copy column is the wider of the two: each sentence of the headline
   has to sit on one line, and "Trading tests the discipline." is the
   measure that decides how much room the type needs. */
.bh-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
}

/* ---- copy ---- */
.bh-copy { min-width: 0; }

.bh-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 4.35vw, 4.15rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--bh-ink);
  text-shadow: 0 2px 28px rgba(0, 0, 0, .42);
}
/* One sentence per line above the stacking breakpoint; below it they are
   allowed to wrap rather than shrink into illegibility. */
.bh-title span { display: block; white-space: nowrap; }

/* Rule with a bead, echoing the reference's divider. */
.bh-rule {
  display: flex;
  align-items: center;
  width: clamp(120px, 15vw, 190px);
  height: 1px;
  margin: clamp(1.6rem, 3.4vw, 2.6rem) 0;
  background: var(--bh-rule);
}
.bh-rule span {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border: 1px solid var(--bh-rule);
  border-radius: 50%;
  background: transparent;
}

.bh-sub {
  max-width: 46ch;
  margin: 0 0 clamp(1.8rem, 3.6vw, 2.8rem);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(.98rem, 1.35vw, 1.13rem);
  line-height: 1.6;
  color: var(--bh-muted);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .4);
}

.bh-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: .95rem 2rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #17121d;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.bh-cta:hover {
  background: transparent;
  color: #ffffff;
  transform: translateY(-1px);
}
.bh-cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ============================================================
   THE BOOK
   ------------------------------------------------------------
   Drawn in CSS so the title and author are real, selectable text
   - no bitmap to re-export when the copy changes.
   ============================================================ */

.bh-art {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  perspective: 1400px;
}

/* Real geometry rather than a rectangle with a painted-on edge: a front
   face, a page block receding in Z, and a top edge, turned far enough to
   read the thickness. --d is the block depth. */
.bh-book {
  position: relative;
  width: clamp(210px, 25vw, 330px);
  aspect-ratio: 41 / 62;
  --d: clamp(20px, 2.6vw, 34px);
}

.bh-book-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateZ(13deg) rotateY(19deg);
  will-change: transform;
}

/* Cast shadow lives outside the 3D context, so a transformed face cannot
   drag it out of shape. */
.bh-book::after {
  content: "";
  position: absolute;
  left: 6%;
  right: -6%;
  bottom: -6%;
  height: 26%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6), transparent 72%);
  filter: blur(18px);
}

.bh-book-face {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  border-radius: 2px 4px 4px 2px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .34),
    0 30px 64px -22px rgba(0, 0, 0, .6);
}

/* Page block: swung back around the cover's left edge. */
.bh-book-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--d);
  transform-origin: left center;
  transform: rotateY(-90deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.3), transparent 34%, rgba(0,0,0,.16)),
    repeating-linear-gradient(180deg,
      #f6f1e6 0 1.5px, #ded6c6 1.5px 3px);
  box-shadow: inset 0 0 14px rgba(90, 74, 48, .3);
}

/* Top edge, same trick around the upper border. */
.bh-book-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--d);
  transform-origin: center top;
  transform: rotateX(90deg);
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), transparent 46%),
    repeating-linear-gradient(90deg,
      #f4efe3 0 1.5px, #dbd3c2 1.5px 3px);
}

/* painted cover face */
.bh-book-art {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background:
    radial-gradient(38% 28% at 24% 12%, rgba(255, 190, 88, .99), transparent 70%),
    radial-gradient(34% 26% at 66% 8%,  rgba(246, 92, 54, .97),  transparent 68%),
    radial-gradient(36% 28% at 40% 38%, rgba(238, 132, 48, .92), transparent 70%),
    radial-gradient(30% 24% at 14% 46%, rgba(226, 78, 62, .85),  transparent 70%),
    radial-gradient(42% 32% at 56% 78%, rgba(18, 132, 152, .99), transparent 70%),
    radial-gradient(34% 28% at 16% 86%, rgba(22, 96, 132, .95),  transparent 70%),
    radial-gradient(28% 24% at 84% 62%, rgba(28, 148, 138, .9),  transparent 70%),
    linear-gradient(168deg, #f5a63f 0%, #ea5f3c 36%, #17849a 76%, #0f5f72 100%);
}
/* Same lit-relief treatment as the ground, at a tighter frequency so the
   impasto scales with the smaller surface, and lit from the same angle so
   the cover and the wall behind it agree about where the light is. */
.bh-book-art::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .62;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='c' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.026 0.05' numOctaves='5' seed='13' stitchTiles='stitch' result='h'/><feDiffuseLighting in='h' lighting-color='white' surfaceScale='2.2' diffuseConstant='1.05'><feDistantLight azimuth='128' elevation='56'/></feDiffuseLighting></filter><rect width='520' height='520' filter='url(%23c)'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

/* magenta band carrying the title */
.bh-book-band {
  position: relative;
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.1rem;
  padding: 1.4rem .5rem;
  background: linear-gradient(180deg, #e8175a 0%, #d5104f 55%, #b80c43 100%);
}

.bh-book-title,
.bh-book-author {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #ffffff;
  white-space: nowrap;
}

.bh-book-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 2.1vw, 1.85rem);
  font-weight: 600;
  letter-spacing: .012em;
  line-height: 1;
}

.bh-book-author {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(.62rem, .95vw, .8rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .92;
  line-height: 1;
}

/* Sheen across the cover. Lives on the face, not the book, so it turns
   with the geometry instead of sitting flat over the whole element.
   The gradient runs against the light used for the impasto relief. */
.bh-book-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg,
    rgba(255,255,255,.2) 0%, rgba(255,255,255,.04) 28%,
    transparent 54%, rgba(0,0,0,.2) 100%);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: keep the two columns but rebalance toward the type. */
@media (max-width: 1080px) {
  .bh-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: 2rem; }
  .bh-book { width: clamp(180px, 26vw, 250px); }
}

/* Stack: type first, book beneath it and centred. */
@media (max-width: 820px) {
  .bh {
    min-height: 0;
    padding-top: calc(var(--nav-height, 76px) + 2.5rem);
    padding-bottom: 3rem;
  }
  .bh-inner {
    grid-template-columns: 1fr;
    gap: clamp(2.4rem, 8vw, 3.4rem);
    text-align: left;
  }
  .bh-sub { max-width: 100%; }
  /* Below this width a full sentence cannot fit one line at a readable
     size, so let it wrap instead of overflowing. */
  .bh-title span { white-space: normal; }
  .bh-art { order: 2; }
  .bh-book { width: min(58vw, 258px); transform: rotate(12deg); }
  /* The scrim no longer needs a left bias once the type is full width. */
  .bh-scrim {
    background:
      linear-gradient(to bottom, rgba(12, 7, 16, .72) 0%, rgba(12, 7, 16, .42) 44%,
                      rgba(12, 7, 16, .34) 70%, rgba(12, 7, 16, .66) 100%);
  }
}

@media (max-width: 480px) {
  .bh-title { font-size: clamp(2.05rem, 9.2vw, 2.9rem); }
  .bh-rule { margin: 1.3rem 0; }
  .bh-cta { width: 100%; }
  .bh-book { width: min(64vw, 220px); transform: rotate(10deg); }
  .bh-book-band { flex-basis: 32%; gap: .8rem; padding: 1rem .4rem; }
}

/* ============================================================
   MOTION + FALLBACKS
   ============================================================ */

/* One calm entrance, matching the rest of the site. */
@media (prefers-reduced-motion: no-preference) {
  .bh-copy > *,
  .bh-art {
    animation: bh-rise .7s cubic-bezier(.22, .8, .3, 1) both;
  }
  .bh-title { animation-delay: .04s; }
  .bh-rule  { animation-delay: .12s; }
  .bh-sub   { animation-delay: .18s; }
  .bh-cta   { animation-delay: .24s; }
  .bh-art   { animation-delay: .1s; }
}

@keyframes bh-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* The book keeps its rotation, so it animates opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .bh-art { animation-name: bh-fade; }
}
@keyframes bh-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-copy > *, .bh-art { animation: none; }
  .bh-cta { transition: none; }
}

/* Vertical writing is well supported, but if it is not, fall back to
   a horizontal band rather than clipped text. */
@supports not (writing-mode: vertical-rl) {
  .bh-book-band { flex-basis: auto; flex-direction: column; padding: 1rem .6rem; }
  .bh-book-title, .bh-book-author { writing-mode: horizontal-tb; white-space: normal; }
}