/* Dead Signal section 02 — the trilogy. Light surface against the full-bleed hero. One section
   carries all three books with Static featured, so "what comes after" needs no section of its
   own. Every book's copy is in the HTML: the panels are hidden with the hidden attribute, never
   injected, so Resonance and Silence stay indexable.
   Motion is the system's range only: 160ms fade plus a 2px lift on the incoming panel. */
.tri{position:relative;background:var(--bg-page);padding:100px 0 112px}
.tri .rt-seam{background:var(--seam-color)}
.tri-marker{position:absolute;left:0;top:100px;width:calc(var(--seam) - 32px);text-align:right;font-family:var(--font-serif);font-weight:400;font-size:24px;line-height:1;color:rgba(15,26,46,.35)}
/* The three years ride the seam here and nowhere else on the page, in reading order down the
   section. Composition B sets the covers in one row, so the years cannot align horizontally with
   them; the sequence is what carries the pairing. */
.tri .rt-seam-label{left:var(--seam);z-index:4;background:var(--bg-page)}
.tri .tri-yr-1{top:470px}
.tri .tri-yr-2{top:580px}
.tri .tri-yr-3{top:690px}
.tri-col{margin-left:calc(var(--seam) + var(--seam-inset));margin-right:56px}
.tri-h{margin:0;font-family:var(--font-serif);font-weight:500;font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.1;letter-spacing:var(--tracking-tight);color:var(--color-navy)}
.tri-note{margin:26px 0 0;max-width:60ch;font-size:17.5px;line-height:1.72;color:rgba(26,26,31,.84);text-wrap:pretty}
.tri-sub{margin:16px 0 0;max-width:62ch;font-size:16.5px;line-height:1.6;color:rgba(26,26,31,.74)}
/* Panels. Only the selected one is in the flow; the others stay in the source. */
.tri-panel[hidden]{display:none}
.tri-panel{animation:tri-in 160ms cubic-bezier(0.2,0.7,0.2,1) both}
@keyframes tri-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tri-panel{animation:none}}
.tri-title{margin:0;font-family:var(--font-display-industrial);font-weight:400;font-size:clamp(2.4rem,5vw,4.2rem);line-height:.92;letter-spacing:.01em;color:var(--color-navy)}
.tri-rule{width:56px;height:3px;margin:0;background:var(--accent)}
.tri-tag{margin:20px 0 0;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.35;color:var(--color-navy)}
.tri-meta{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:11px;font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:rgba(15,26,46,.55)}
.tri-meta b{color:var(--accent);font-weight:600}
.tri-desc{margin:22px 0 0;max-width:56ch;font-size:16.5px;line-height:1.6;color:rgba(26,26,31,.78)}
.tri-cta{margin-top:26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.tri-buy{font-size:12px;font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-coral);text-decoration:none}
.tri-buy:hover{color:#C73B4E;text-decoration:underline;text-underline-offset:4px}
.tri-status{font-size:12px;font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:rgba(15,26,46,.5)}
/* Selector. The two unselected books are the control; the selected one is marked by its rule. */
.tri-pick{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin:0;padding:0;list-style:none}
.tri-pick button{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:block;text-align:left;font:inherit;color:inherit}
.tri-pick img{display:block;width:100%;height:auto;transition:opacity 160ms cubic-bezier(0.2,0.7,0.2,1),transform 160ms cubic-bezier(0.2,0.7,0.2,1)}
.tri-pick button:hover img{transform:translateY(-2px)}
.tri-pick li{flex:0 0 104px;min-width:0}
.tri-pick li img{opacity:.62}
.tri-pick li[aria-current="true"] img{opacity:1}
.tri-pick .tri-picklabel{display:block;margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:rgba(15,26,46,.5)}
.tri-pick li[aria-current="true"] .tri-picklabel{color:var(--pick-accent)}
.tri-cover img{display:block;width:100%;height:auto}
@media(max-width:767px){.tri{padding:60px 0 68px}.tri-col{margin:0;padding:0 20px}.tri-marker{position:static;width:auto;text-align:left;padding:0 20px 6px}.tri .rt-seam-label{display:none;padding:0 20px 10px;top:auto}}

/* A — stage. Large cover left in the channel, copy right, selector under the copy. */
.tri--a .tri-stage{margin-top:52px;display:grid;grid-template-columns:minmax(348px,36%) minmax(0,1fr);gap:56px;align-items:start}
.tri--a .tri-cover{max-width:360px}
@media(max-width:1023px){.tri--a .tri-stage{grid-template-columns:1fr;gap:36px}.tri--a .tri-cover{max-width:260px}}

/* B — shelf. The three covers run as a shelf across the top at equal scale, the selected one
   marked by an outline in its own escalation colour, with the copy beneath in one column. */
.tri--b .tri-shelf{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:end;max-width:760px}
.tri--b .tri-shelf li{flex:none;width:auto}
.tri--b .tri-shelf li[aria-current="true"] img{outline:3px solid var(--pick-accent);outline-offset:0}
.tri--b .tri-body{margin-top:48px;border-top:1px solid rgba(15,26,46,.18);padding-top:34px}
.tri--b .tri-cover{display:none}
@media(max-width:767px){.tri--b .tri-shelf{gap:16px}}