/* Homepage featured publication: Governing Contractor Risk.
   Uses the site tokens (styles.css, eco-theme.css) so it follows both the
   dark eco theme and the light Apple theme. One extra colour: the hairline
   gold of the book's own cover. Motion is enhancement only: without
   JavaScript, or with reduced motion, everything shows at rest. */

.pub{--pub-gold:#b8935a;--pub-cover:#2c2f36;--pub-ease:cubic-bezier(.16,1,.3,1);padding-block:clamp(3rem,7vw,6rem)}
.pub-plate{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,5rem);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,5vw,4.5rem) clamp(2rem,4vw,3.5rem);
  border:1px solid var(--border);border-radius:24px;background:var(--surface);overflow:hidden}
:root[data-theme="dark"] .pub-plate{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),rgba(4,20,14,.55)}
/* The gold hairline from the cover, run down the plate edge */
.pub-plate::before{content:"";position:absolute;left:0;top:clamp(2.5rem,5vw,4.5rem);width:3px;height:72px;background:var(--pub-gold)}

/* ---------------------------------------------------------------- book */
.pub-stage{position:relative;display:flex;align-items:center;justify-content:center;perspective:1600px;min-height:100%}
.pub-book{position:relative;width:min(100%,300px);aspect-ratio:1000/1499;transform-style:preserve-3d;
  transform:rotateY(calc(-26deg + var(--tilt-x,0deg))) rotateX(calc(4deg + var(--tilt-y,0deg)));transition:transform .9s var(--pub-ease)}
.pub-book img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:2px 4px 4px 2px;
  transform:translateZ(14px);backface-visibility:hidden;box-shadow:inset 3px 0 6px rgba(255,255,255,.06)}
/* light falling across the cover, and the hinge groove near the spine */
.pub-book::after{content:"";position:absolute;inset:0;transform:translateZ(14.5px);border-radius:2px 4px 4px 2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(255,255,255,.08) 2.4%,rgba(0,0,0,.18) 4%,transparent 9%),
    linear-gradient(115deg,rgba(255,255,255,.10),transparent 42%,rgba(0,0,0,.18))}
.pub-spine{position:absolute;top:0;left:0;width:28px;height:100%;background:linear-gradient(90deg,#1d1f24,var(--pub-cover) 60%,#24272d);
  transform-origin:left center;transform:translateZ(14px) rotateY(-90deg);backface-visibility:hidden}
.pub-pages{position:absolute;top:1.2%;right:0;width:26px;height:97.6%;transform-origin:right center;transform:translateZ(12px) rotateY(90deg);
  background:repeating-linear-gradient(90deg,#f3efe6 0 1px,#e2dccf 1px 2px);backface-visibility:hidden}
.pub-floor{position:absolute;left:12%;right:4%;bottom:-6%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);
  filter:blur(6px);transform:translateZ(-40px);transition:transform .9s var(--pub-ease),opacity .9s}
.pub-stage:hover .pub-book{transform:rotateY(calc(-14deg + var(--tilt-x,0deg))) rotateX(calc(2deg + var(--tilt-y,0deg)))}

/* ---------------------------------------------------------------- copy */
.pub-copy{align-self:center;max-width:36rem}
.pub-copy h2{margin-top:var(--sp-4,1rem);font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.pub-copy h2 em{font-style:normal;color:var(--brand)}
.pub-desc{margin-top:var(--sp-5,1.5rem);color:var(--fg-muted);font-size:var(--fs-md,1.1875rem);line-height:1.6;max-width:62ch}
.pub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4,1rem) var(--sp-5,1.5rem);margin-top:var(--sp-6,2rem)}
.pub-cta svg{width:16px;height:16px;margin-left:.5rem;transition:transform .3s var(--pub-ease)}
.pub-cta:hover svg,.pub-cta:focus-visible svg{transform:translateX(3px)}
.pub-cta:focus-visible{outline:2px solid var(--ring,var(--brand));outline-offset:3px}
.pub-credit{display:flex;flex-direction:column;gap:2px;padding-left:var(--sp-4,1rem);border-left:1px solid var(--border-strong,var(--border));font-size:var(--fs-sm,.9375rem);color:var(--fg-muted)}
.pub-credit strong{color:var(--fg);font-weight:600}

/* ---------------------------------------------------------------- chain */
.pub-chain{grid-column:1/-1;margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--border)}
.pub-chain-label{font-size:12px;font-weight:600;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--fg-subtle,var(--fg-muted))}
.pub-chain ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5,1.5rem);margin:var(--sp-5,1.5rem) 0 0;padding:0;list-style:none}
/* the connecting rule runs through the node centres */
.pub-chain ol::before{content:"";position:absolute;left:6px;right:0;top:6px;height:1px;background:var(--pub-gold);opacity:.7;transform-origin:left center}
.pub-chain li{position:relative;padding-top:28px}
.pub-chain li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--pub-gold);background:var(--surface)}
:root[data-theme="dark"] .pub-chain li::before{background:#081a13}
.pub-chain h3{font-family:var(--eco-sans,inherit);font-size:13px;font-weight:700;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--fg)}
.pub-chain p{margin-top:6px;font-size:var(--fs-sm,.9375rem);line-height:1.5;color:var(--fg-muted)}

/* ---------------------------------------------------------------- motion
   Added by home-book.js only when motion is allowed: the rule draws from
   DECIDE to PERFORM and each stage follows it in. */
.pub[data-animate] .pub-chain ol::before{transform:scaleX(0);transition:transform 1.4s var(--pub-ease) .2s}
.pub[data-animate] .pub-chain li{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s var(--pub-ease)}
.pub[data-animate] .pub-chain li:nth-child(2){transition-delay:.35s}
.pub[data-animate] .pub-chain li:nth-child(3){transition-delay:.7s}
.pub[data-animate] .pub-chain li:nth-child(4){transition-delay:1.05s}
.pub[data-animate] .pub-chain li:nth-child(1){transition-delay:0s}
.pub[data-animate].is-in .pub-chain ol::before{transform:scaleX(1)}
.pub[data-animate].is-in .pub-chain li{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .pub-book,.pub-floor,.pub-cta svg{transition:none}
  .pub-stage:hover .pub-book{transform:rotateY(-26deg) rotateX(4deg)}
}

/* ---------------------------------------------------------------- layout */
@media (max-width:900px){
  .pub-plate{grid-template-columns:1fr;row-gap:clamp(2rem,6vw,3rem)}
  .pub-book{width:min(52vw,220px)}
  .pub-copy{max-width:none}
}
@media (max-width:600px){
  .pub-plate{border-radius:18px}
  .pub-chain ol{grid-template-columns:1fr;gap:var(--sp-4,1rem);padding-left:28px}
  .pub-chain ol::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto;transform-origin:center top}
  .pub[data-animate] .pub-chain ol::before{transform:scaleY(0)}
  .pub[data-animate].is-in .pub-chain ol::before{transform:scaleY(1)}
  .pub-chain li{padding-top:0}
  .pub-chain li::before{left:-28px}
  .pub-credit{border-left:0;padding-left:0}
}