/* The Book Banner: a quiet strip under the site header advertising the book.
   Self-contained; every rule is scoped to #trd-book so page styles and these never collide.
   Larger (still calm) version: #trd-book.trb-big (set per page in bookbanner.js CONFIG.BIG).
   Include once per page, in <head>, before duckpod:
     <link rel="stylesheet" href="/assets/trd/bookbanner.css" data-trd-keep>
     <script src="/assets/trd/bookbanner.js" data-trd-keep></script>
   Sizes: desktop ~84px tall, landscape phone ~56px, portrait phone ~90px. Contents flush left.          */

@font-face{font-family:'TRB Steelfish';src:url('/assets/trd/fonts/Steelfish-Bd.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'TRB Courier';src:url('/assets/trd/fonts/CourierPrime-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

#trd-book{
  --trb-red:#C8241C; --trb-red-txt:#FF5A4F; --trb-red-mute:#C9554C; --trb-line:#4A0E0A;
  --trb-cream:#F3EBD6; --trb-mute:#BDB4A0;
  --trb-display:'TRB Steelfish','Steelfish','Arial Narrow',Impact,sans-serif;
  --trb-mono:'TRB Courier','Courier Prime','Courier New',Courier,monospace;
  --trb-ease:cubic-bezier(.16,1,.3,1);
  --trb-fit:line; --trb-max:34px; --trb-min:17px;   /* read by bookbanner.js: title sized to fill its line, between --trb-min and --trb-max */
  position:relative; z-index:150; display:block; clear:both; flex:none; grid-column:1/-1;
  width:100%; max-width:none; margin:0; padding:0;
  background:#121111;
  border-top:1px solid #1c1c1c; border-bottom:1px solid var(--trb-line);
  font-family:var(--trb-mono); color:var(--trb-cream); text-align:left; line-height:1.2;
}
#trd-book *,#trd-book *::before,#trd-book *::after{box-sizing:border-box}

/* flush left: cover, then label, title, price and button, one even row */
#trd-book .trb-in{
  display:flex; align-items:center; justify-content:flex-start; gap:22px;
  width:min(1240px,100%); margin:0 auto; padding:10px 24px; min-height:84px;
  color:inherit; text-decoration:none; cursor:pointer;
}
#trd-book .trb-in:focus-visible{outline:1px solid var(--trb-red-txt); outline-offset:-3px}

/* ---------- the book: a cover thumbnail built from the site's chrome duck ---------- */
#trd-book .trb-book{
  font-size:6.2px; display:block; position:relative; width:7.6em; height:10.2em; flex:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.85));
}
#trd-book .trb-book::after{
  content:""; position:absolute; top:.3em; bottom:.3em; right:-.5em; width:.5em; border-radius:0 .2em .2em 0;
  background:#d9cfb4; opacity:.75;
}
#trd-book .trb-cover{
  position:absolute; inset:0; overflow:hidden; border-radius:.3em .5em .5em .3em;
  display:flex; flex-direction:column; align-items:center;
  background:radial-gradient(circle at 50% 46%,rgba(200,36,28,.45),transparent 58%),linear-gradient(160deg,#250504,#0a0101 70%);
  border:1px solid #3d0d09; box-shadow:inset .5em 0 0 #120101;
  padding:.55em .35em 0 .9em;
}
#trd-book .trb-c-top{
  position:relative; z-index:2; font-family:var(--trb-display); font-weight:700;
  font-size:.95em; line-height:.9; letter-spacing:.04em; color:var(--trb-cream); text-align:center;
}
#trd-book .trb-c-q{position:relative; z-index:1; font-family:var(--trb-display); font-weight:700; font-size:4.6em; line-height:.82; color:var(--trb-red); margin-top:.04em}
#trd-book .trb-c-duck{position:absolute; z-index:2; left:52%; top:48%; width:5.4em; height:auto; transform:translate(-50%,0)}
#trd-book .trb-c-by{
  position:absolute; z-index:3; left:.5em; right:0; bottom:0; padding:.3em .2em .32em;
  background:var(--trb-red); color:#fff; text-align:center;
  font-family:var(--trb-display); font-weight:700; text-transform:uppercase; font-size:.78em; letter-spacing:.08em; line-height:1;
}

/* ---------- the line: label, title, price ---------- */
#trd-book .trb-copy{display:flex; flex-direction:column; justify-content:center; gap:4px; flex:1 1 auto; min-width:0}
#trd-book .trb-line{
  display:flex; align-items:baseline; justify-content:flex-start; gap:18px; min-width:0; white-space:nowrap;
}
#trd-book .trb-k{
  flex:none; font-weight:700; font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:var(--trb-mute);
}
#trd-book .trb-k b{font-weight:700; color:var(--trb-red-mute); margin-right:.35em}
#trd-book .trb-t{
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--trb-display); font-weight:700; font-size:24px; line-height:1.05;
  letter-spacing:.02em; color:var(--trb-cream);
}
#trd-book .trb-p{flex:none; font-weight:700; font-size:22px; letter-spacing:.01em; color:var(--trb-red-txt)}
#trd-book .trb-d{display:none; font-size:14px; color:var(--trb-mute); text-align:left}

#trd-book .trb-cta{
  flex:none; font-weight:700; font-size:15px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  color:#FFE6E2; background:rgba(200,36,28,.16); padding:11px 18px 10px; border-radius:4px;
  border:1px solid rgba(255,90,79,.7);
  transition:background .25s var(--trb-ease),border-color .25s var(--trb-ease),color .25s var(--trb-ease);
}
#trd-book .trb-cta-s{display:none}
#trd-book .trb-in:hover .trb-cta,#trd-book .trb-in:focus-visible .trb-cta{background:rgba(200,36,28,.32); border-color:var(--trb-red-txt); color:#fff}
#trd-book .trb-in:hover .trb-t{color:#fff8e8}

/* ---------- the store page: the same strip, scaled up ~1.2x ---------- */
#trd-book.trb-big{--trb-max:36px; --trb-min:18px; border-top-color:var(--trb-line); background:#141111}
#trd-book.trb-big .trb-in{min-height:96px; padding:12px 30px; gap:26px}
#trd-book.trb-big .trb-book{font-size:7px}
#trd-book.trb-big .trb-copy{gap:7px}
#trd-book.trb-big .trb-line{display:grid; grid-template-columns:minmax(0,auto) auto; justify-content:start; align-items:baseline; column-gap:20px; row-gap:5px}
#trd-book.trb-big .trb-k{grid-column:1/-1; font-size:15px}
#trd-book.trb-big .trb-p{font-size:24px}
#trd-book.trb-big .trb-d{display:block; font-size:15px}
#trd-book.trb-big .trb-cta{font-size:16px; padding:12px 19px 11px}

/* ---------- smaller screens ---------- */
@media (max-width:900px){
  #trd-book .trb-in{gap:16px; padding:10px 20px}
  #trd-book .trb-line{gap:14px}
  #trd-book .trb-k{display:none}
  #trd-book.trb-big .trb-in{padding:12px 20px; gap:18px}
}
/* landscape phone: one short line, ~56px */
@media (max-width:950px) and (max-height:500px){
  #trd-book{--trb-max:22px; --trb-min:14px}
  #trd-book .trb-in{min-height:54px; padding:6px 20px; gap:14px}
  #trd-book .trb-book{font-size:4.2px}
  #trd-book .trb-p{font-size:16px}
  #trd-book .trb-cta{font-size:13px; padding:7px 12px 6px}
  #trd-book.trb-big{--trb-max:24px}
  #trd-book.trb-big .trb-in{min-height:64px; padding:7px 20px}
  #trd-book.trb-big .trb-book{font-size:4.8px}
  #trd-book.trb-big .trb-p{font-size:18px}
  #trd-book.trb-big .trb-cta{font-size:14px; padding:8px 13px 7px}
  #trd-book.trb-big .trb-d{display:none}
}

/* ---------- portrait phones: cover, then label + title (two lines) flush left, and "$19.99 ›"; the whole strip is the link ---------- */
@media (max-width:600px){
  #trd-book,#trd-book.trb-big{--trb-fit:none}
  #trd-book .trb-in{gap:14px; padding:10px 16px; min-height:0}
  #trd-book .trb-book{font-size:6.2px}
  #trd-book .trb-copy{gap:4px}
  #trd-book .trb-line{display:flex; flex-direction:column; align-items:flex-start; gap:4px; white-space:normal; text-align:left}
  #trd-book .trb-k{display:block; font-size:12px; letter-spacing:.06em}
  #trd-book .trb-t{font-size:18px; line-height:1.1; white-space:normal; text-wrap:balance; overflow:hidden;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2}
  #trd-book .trb-p{display:none}
  #trd-book .trb-cta{font-size:15px; letter-spacing:.02em; padding:10px 11px 9px; align-self:center}
  #trd-book .trb-cta-l{display:none}
  #trd-book .trb-cta-s{display:inline}
  #trd-book.trb-big .trb-in{padding:12px 16px; gap:14px}
  #trd-book.trb-big .trb-line{display:flex; row-gap:4px}
  #trd-book.trb-big .trb-book{font-size:7px}
  #trd-book.trb-big .trb-k{font-size:13px}
  #trd-book.trb-big .trb-t{font-size:18px}
  #trd-book.trb-big .trb-d{display:none}
  #trd-book.trb-big .trb-cta{font-size:16px; padding:11px 12px 10px}
}
@media (max-width:360px){
  #trd-book .trb-in{gap:11px; padding:9px 12px}
  #trd-book .trb-book{font-size:5.4px}
  #trd-book .trb-t{font-size:17px}
  #trd-book .trb-cta{font-size:14px; padding:9px 9px 8px}
  #trd-book.trb-big .trb-t{font-size:17px}
  #trd-book.trb-big .trb-in{gap:11px; padding:10px 12px}
  #trd-book.trb-big .trb-book{font-size:6px}
  #trd-book.trb-big .trb-cta{font-size:14px; padding:9px 9px 8px}
}
@media (prefers-reduced-motion:reduce){#trd-book .trb-cta{transition:none}}

/* ---------- the title card: "anon mission / or / all you need to know about q - and how they made you afraid to ask" ----------
   Mike's exact words, all lowercase (never text-transformed). Kubrick's title-card rhythm: the big lead,
   a small "or", then the long subtitle smaller. Two lines, sized by CSS (no auto-fit). */
#trd-book,#trd-book.trb-big{--trb-fit:none}
#trd-book .trb-copy{gap:2px}
#trd-book .trb-in{padding-top:6px; padding-bottom:6px}
#trd-book .trb-line{align-items:baseline; gap:18px}
#trd-book .trb-k{display:none}
#trd-book .trb-t{flex:none; overflow:visible; font-size:33px; line-height:1; letter-spacing:.03em; text-transform:none; color:#FBF3E0}
#trd-book .trb-p{font-size:22px}
#trd-book .trb-sub{display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:none;
  font-family:var(--trb-display); font-weight:700; font-size:20px; line-height:1.05; letter-spacing:.03em; color:#D9CFB8}
#trd-book .trb-or{font-family:var(--trb-mono); font-style:italic; font-weight:700; font-size:.7em; letter-spacing:.02em; color:var(--trb-red-txt); margin-right:.3em}
#trd-book .trb-in:hover .trb-sub{color:#efe6d0}
#trd-book.trb-big .trb-line{display:flex}
#trd-book.trb-big .trb-t{font-size:44px}
#trd-book.trb-big .trb-p{font-size:26px}
#trd-book.trb-big .trb-sub{font-size:25px}
#trd-book.trb-big .trb-copy{gap:5px}
#trd-book.trb-big .trb-d{font-size:14px}
@media (max-width:1100px){
  #trd-book .trb-t{font-size:32px}
  #trd-book .trb-sub{font-size:18px}
  #trd-book.trb-big .trb-t{font-size:40px}
  #trd-book.trb-big .trb-sub{font-size:21px}
}
@media (max-width:900px){
  #trd-book .trb-sub,#trd-book.trb-big .trb-sub{white-space:normal; font-size:16px; line-height:1.1; text-wrap:balance}
  #trd-book.trb-big .trb-d{display:none}
}
@media (max-width:950px) and (max-height:500px){
  #trd-book .trb-t,#trd-book.trb-big .trb-t{font-size:24px}
  #trd-book .trb-sub,#trd-book.trb-big .trb-sub{white-space:nowrap; font-size:14px}
}
@media (max-width:600px){
  #trd-book .trb-line{flex-direction:row; align-items:baseline}
  #trd-book .trb-t,#trd-book.trb-big .trb-t{font-size:28px; white-space:nowrap; display:block; -webkit-line-clamp:unset}
  #trd-book .trb-sub,#trd-book.trb-big .trb-sub{font-size:15px; line-height:1.12; white-space:normal; text-wrap:pretty}
  #trd-book .trb-k{display:none}
}
@media (max-width:360px){
  #trd-book .trb-t,#trd-book.trb-big .trb-t{font-size:25px}
  #trd-book .trb-sub,#trd-book.trb-big .trb-sub{font-size:14px}
}


/* ---------- TRD Collectibles: a small vintage shop sign in the site header, every page ----------
   Placed by bookbanner.js into header.banner .banner-in (not on merch.html itself).
   Wide screens: pinned to the header's right edge. Narrow: its own small row under the links. */
@font-face{font-family:'Bungee';src:url('/assets/trd/fonts/Bungee-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Yellowtail';src:url('/assets/trd/fonts/Yellowtail-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
.banner .banner-in{position:relative}
a.trd-shopsign{flex:none; position:relative; display:inline-flex; flex-direction:column; align-items:center; text-decoration:none;
  padding:0 0 8px; border-radius:6px 6px 4px 4px; overflow:hidden; line-height:1;
  background:linear-gradient(180deg,#3d2616,#2a190e); border:2px solid #E3A82B;
  box-shadow:0 0 0 1px #2a190e,0 6px 14px rgba(0,0,0,.55),0 0 18px rgba(227,168,43,.18);
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease}
a.trd-shopsign::before{content:""; align-self:stretch; height:9px; margin-bottom:6px;
  background:repeating-linear-gradient(90deg,#C8302B 0 10px,#E2652A 10px 20px,#E3A82B 20px 30px,#7A4A24 30px 40px)}
.trd-shopsign-k{font-family:'Yellowtail','Brush Script MT',cursive; font-size:15px; color:#FFD77A; padding:0 14px}
.trd-shopsign-n{font-family:'Bungee','Arial Black',Impact,sans-serif; font-size:15px; letter-spacing:.02em; color:#F6ECD4; padding:2px 14px 0;
  text-shadow:0 1px 0 #C8302B,0 2px 0 #7A1D16; white-space:nowrap}
a.trd-shopsign:hover,a.trd-shopsign:focus-visible{transform:translateY(-2px); box-shadow:0 0 0 1px #2a190e,0 10px 20px rgba(0,0,0,.6),0 0 24px rgba(255,200,110,.35)}
a.trd-shopsign:focus-visible{outline:2px solid #FFD77A; outline-offset:3px}
@media (min-width:1100px){
  a.trd-shopsign{position:absolute; right:24px; top:50%; transform:translateY(-50%)}
  a.trd-shopsign:hover,a.trd-shopsign:focus-visible{transform:translateY(calc(-50% - 2px))}
}
@media (max-width:1099px) and (min-width:761px){ a.trd-shopsign .trd-shopsign-k{font-size:13px} a.trd-shopsign .trd-shopsign-n{font-size:13px} }
@media (max-width:760px){
  a.trd-shopsign{flex-direction:row; align-items:center; gap:8px; padding:5px 12px 5px 0; border-radius:999px; border-width:1.5px}
  a.trd-shopsign::before{align-self:stretch; width:22px; height:auto; margin:-5px 0; background:repeating-linear-gradient(180deg,#C8302B 0 6px,#E2652A 6px 12px,#E3A82B 12px 18px,#7A4A24 18px 24px)}
  .trd-shopsign-k{padding:0; font-size:15px}
  .trd-shopsign-n{padding:0; font-size:13px}
}
@media print{a.trd-shopsign{display:none}}
/* mid widths (761-1099px): the header row is too tight for the shop sign beside the links, so it wraps under them */
@media (max-width:1099px) and (min-width:761px){ .banner .banner-in{flex-wrap:wrap; row-gap:8px} }

/* ---------- square anon mission cover art (replaces the CSS-built tall cover); same height, so the banner stays 86px ---------- */
#trd-book .trb-book{width:10.2em; height:10.2em}
#trd-book .trb-book::after{content:none}
#trd-book .trb-cover-img{display:block; width:100%; height:100%; object-fit:cover; border-radius:.3em; border:1px solid #2a2a2a}
/* the CTA sits right after the title block, in the same row */
#trd-book .trb-copy{flex:0 1 auto}