/* ==========================================================================
   The Prophet Years — design system
   Black · newsprint · acid yellow. All colours are CSS custom properties and
   are overridden from the Customizer (see inc/customizer.php).
   ========================================================================== */

/* ---------- 1. Self-hosted fonts (no third-party CDN → GDPR safe) -------- */
@font-face{font-family:"TP Display";src:url("../fonts/archivoblack.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"TP Cond";src:url("../fonts/barlowcond-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"TP Mono";src:url("../fonts/spacemono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TP Mono";src:url("../fonts/spacemono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"TP Text";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TP Text";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- 2. Tokens --------------------------------------------------- */
:root{
  --tp-black:#0A0A0A;
  --tp-black-2:#121212;
  --tp-black-3:#191919;
  --tp-acid:#DDEE33;
  --tp-acid-bright:#EEFF55;
  --tp-paper:#EDE9DE;
  --tp-paper-2:#CFC8B6;
  --tp-ink:#0A0A0A;
  --tp-muted:#8E8E86;
  --tp-line:rgba(237,233,222,.16);
  --tp-line-acid:rgba(221,238,51,.45);

  --tp-font-display:"TP Display","Arial Black",Impact,sans-serif;
  --tp-font-cond:"TP Cond","TP Display","Arial Narrow",sans-serif;
  --tp-font-mono:"TP Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --tp-font-text:"TP Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --tp-shell:1280px;
  --tp-gut:clamp(20px,4vw,56px);
  --tp-nav-h:74px;
  --tp-radius:2px;

  /* distressed-letterpress noise, inlined so it costs no request */
  --tp-noise:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -.72'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  /* a torn, hand-inked rule used instead of hairline borders */
  /* BLACK speckles — multiply these into light type to eat the ink away. */
  --tp-erode:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.0 0 0 0 -1.38'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23f)'/%3E%3C/svg%3E");
  --tp-erode-2:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.14' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -1.85'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23f)'/%3E%3C/svg%3E");
  --tp-erode-3:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.030' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -1.55'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23f)'/%3E%3C/svg%3E");
  --tp-noise-2:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.4 0 0 0 -1.55'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23b)'/%3E%3C/svg%3E");
  --tp-rule:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='4'%3E%3Cpath d='M0 2.4 18 1.5l14 1.6 21-1.1 16 1.4 25-1.7 13 1.2 22-.9 17 1.5 24-1.3 15 1.1 20-1.6 26 1.4 14-1 23 1.3 18-1.5 21 1.1 16-.8 25 1.6 13-1.2 22 .9 17-1.4 24 1.2 15-1 20 1.5 26-1.3 14 1.1 23-1.5 18 1.3 21-1 16 1.4' stroke='%23ede9de' stroke-opacity='.34' stroke-width='1.15' fill='none'/%3E%3C/svg%3E");
  --tp-misreg:rgba(221,238,51,.20);
  /* Display type is WHITE, not newsprint cream — the cream read as yellow. */
  --tp-display-ink:#F8F7F5;
  --tp-grain:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- 3. Reset / base -------------------------------------------- */
/* The UA sheet hides [hidden] with display:none, which ANY author rule setting a
   display beats — .tp-tl__panel and .tp-modal each needed their own override
   before this existed, and .tp-tile{display:block} silently defeated the press
   filter the same way. One rule so the next component cannot repeat it. */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--tp-nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--tp-black);color:var(--tp-paper);
  font-family:var(--tp-font-text);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{ /* global film grain */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:var(--tp-grain);opacity:.075;mix-blend-mode:screen;
}
body::after{ /* photocopy speckle — the second pass through the machine */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:var(--tp-noise);background-size:300px 300px;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--tp-acid);text-decoration:none}
a:hover{color:var(--tp-acid-bright)}
button{font:inherit}
:focus-visible{outline:2px solid var(--tp-acid);outline-offset:3px}
.tp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tp-skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--tp-acid);color:#000;padding:12px 20px;font-family:var(--tp-font-mono);font-weight:700}
.tp-skip:focus{left:8px;top:8px}

/* ---------- 4. Layout --------------------------------------------------- */
.tp-shell{max-width:var(--tp-shell);margin-inline:auto;padding-inline:var(--tp-gut)}
.tp-section{position:relative;z-index:2;padding-block:clamp(56px,7vw,104px);border-top:0}
.tp-section::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background-image:var(--tp-rule);background-repeat:repeat-x;background-size:600px 4px;opacity:.9}
.tp-section--flush::before,.tp-section:first-of-type::before{display:none}
.tp-sec-head{max-width:74ch}
.tp-section:first-of-type{border-top:0}
.tp-section--flush{padding-block:0;border-top:0}
.tp-grid{display:grid;gap:clamp(24px,3vw,44px)}
@media(min-width:860px){
  .tp-grid--2{grid-template-columns:1fr 1fr}
  .tp-grid--3{grid-template-columns:repeat(3,1fr)}
  .tp-grid--sidebar{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)}
  .tp-grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
}
@media(min-width:560px) and (max-width:859px){.tp-grid--3,.tp-grid--2{grid-template-columns:1fr 1fr}}

/* ---------- 5. Type ----------------------------------------------------- */
.tp-display{
  font-family:var(--tp-font-display);font-weight:400;line-height:.84;
  letter-spacing:.02em;text-transform:uppercase;margin:0;
  color:var(--tp-display-ink);
}
/* distressed letterpress: solid colour × noise, clipped to the glyphs */
.tp-distress .tp-display--distress,
.tp-display--distress{
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:var(--tp-erode),var(--tp-erode-2),var(--tp-erode-3),linear-gradient(var(--tp-display-ink),var(--tp-display-ink));
  background-blend-mode:normal,normal,normal,normal;background-size:280px 280px,340px 340px,520px 520px,100% 100%;
  -webkit-background-clip:text;background-clip:text;
  /* drop-shadow follows the eroded glyph outline, so the misprint reads at the
     edges instead of flooding the letter interiors the way text-shadow does. */
  filter:drop-shadow(.02em .013em 0 var(--tp-misreg)) drop-shadow(-.011em -.008em 0 rgba(0,0,0,.6));
}
.no-distress .tp-display--distress{
  color:var(--tp-paper);-webkit-text-fill-color:var(--tp-paper);background-image:none;
}
.tp-h1{font-size:clamp(1.9rem,5.1vw,4.9rem)}
/* Fit the wordmark to whatever column it is dropped into. */
.tp-hero__col{container-type:inline-size}
@supports (font-size:1cqi){.tp-hero__col .tp-h1{font-size:clamp(1.9rem,10.6cqi,5.4rem)}}
.tp-hero--collage .tp-h1{font-size:clamp(1.9rem,4.2vw,4.4rem)}
@supports (font-size:1cqi){.tp-hero--collage .tp-hero__col .tp-h1{font-size:clamp(1.9rem,10.6cqi,4.7rem)}}
.tp-h2{font-size:clamp(1.4rem,3.1vw,2.2rem);line-height:1}
.tp-h3{font-size:clamp(1.1rem,1.85vw,1.55rem);line-height:1.04}
.tp-h4{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.05}

.tp-eyebrow{
  font-family:var(--tp-font-mono);font-weight:700;font-size:.72rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--tp-acid);margin:0 0 .9rem;
  display:flex;align-items:center;gap:14px;
}
.tp-eyebrow::after{content:"";flex:1;height:4px;background-image:var(--tp-rule);background-repeat:repeat-x;background-size:600px 4px;opacity:.75}
.tp-eyebrow--plain::after{display:none}
.tp-kicker{font-family:var(--tp-font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tp-acid)}
.tp-lede{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--tp-paper);opacity:.86;max-width:56ch}
.tp-body{color:var(--tp-paper);opacity:.72;max-width:62ch}
.tp-body p{margin:0 0 1em}
.tp-body a{text-decoration:underline;text-underline-offset:3px}
.tp-meta{font-family:var(--tp-font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-muted)}

.tp-underline{position:relative;display:inline-block;padding-bottom:.18em}
.tp-underline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tp-acid)}

/* ---------- 6. Buttons -------------------------------------------------- */
.tp-btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--tp-font-mono);font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--tp-acid);border-radius:var(--tp-radius);white-space:nowrap;
  background:transparent;color:var(--tp-acid);cursor:pointer;
  transition:background .14s ease,color .14s ease,transform .14s ease,box-shadow .14s ease;
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
}
.tp-btn:hover{background:var(--tp-acid);color:#000;transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.55)}
.tp-btn--fill{background:var(--tp-acid);color:#000}
.tp-btn--fill:hover{background:var(--tp-acid-bright);color:#000}
.tp-btn--ghost{border-color:var(--tp-line);color:var(--tp-paper)}
.tp-btn--ghost:hover{border-color:var(--tp-paper);background:var(--tp-paper);color:#000}
.tp-btn--sm{padding:10px 18px;font-size:.7rem}
.tp-btn__ico{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center}
.tp-btn__ico svg{width:9px;height:9px;fill:currentColor}
.tp-arrow{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ---------- 7. Pinned nav ---------------------------------------------- */
.tp-nav{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--tp-nav-h);
  display:flex;align-items:center;
  background:rgba(10,10,10,.55);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease,height .25s ease;
}
.tp-nav.is-stuck{background:rgba(10,10,10,.86);border-bottom-color:var(--tp-line)}
.tp-nav__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);width:100%}
.tp-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.tp-brand__mark{font-family:var(--tp-font-display);font-size:.72rem;letter-spacing:.01em;line-height:.92;text-transform:uppercase;color:var(--tp-paper);letter-spacing:.01em}
.tp-brand__mark span{display:block}
.tp-brand img{max-height:46px;width:auto}
.tp-nav__menu{margin-left:auto;display:flex;align-items:center;gap:clamp(9px,1.2vw,20px);list-style:none;padding:0;margin-block:0;flex-wrap:nowrap}
.tp-nav__menu a{
  font-family:var(--tp-font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tp-paper);opacity:.82;padding:6px 0;position:relative;white-space:nowrap;
}
@media(min-width:1181px) and (max-width:1400px){.tp-nav__menu a{font-size:.63rem;letter-spacing:.1em}}
.tp-nav__menu a:hover,.tp-nav__menu .current-menu-item>a,.tp-nav__menu li.is-active>a{color:var(--tp-acid);opacity:1}
.tp-nav__menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--tp-acid);transition:right .2s ease}
.tp-nav__menu a:hover::after,.tp-nav__menu li.is-active>a::after{right:0}
.tp-nav__cta{margin-left:clamp(8px,1.5vw,20px);flex:0 0 auto}
.tp-nav__mobile-cta{display:none}
.tp-burger{margin-left:auto;display:none;width:44px;height:44px;background:none;border:1px solid var(--tp-line);border-radius:var(--tp-radius);color:var(--tp-paper);cursor:pointer;place-items:center}
.tp-burger span{display:block;width:18px;height:1.5px;background:currentColor;margin:3px auto;transition:transform .22s ease,opacity .22s ease}
.tp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.tp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:1180px){
  .tp-burger{display:grid}
  .tp-nav__cta{display:none}
  .tp-nav__menu{
    position:fixed;top:var(--tp-nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--tp-black);
    border-bottom:1px solid var(--tp-line);padding:8px var(--tp-gut) 22px;
    max-height:calc(100dvh - var(--tp-nav-h));overflow:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.22s ease;
  }
  .tp-nav__menu.is-open{transform:none;opacity:1;visibility:visible}
  .tp-nav__menu a{display:block;padding:14px 0;border-bottom:1px solid var(--tp-line);font-size:.86rem}
  .tp-nav__menu a::after{display:none}
  .tp-nav__menu .tp-nav__mobile-cta{display:block;padding-top:18px;border:0}
}

/* ---------- 8. Hero (layout A: collage · layout B: photo) -------------- */
.tp-hero{position:relative;min-height:clamp(600px,94vh,940px);display:flex;align-items:center;padding-top:var(--tp-nav-h);overflow:hidden}
.tp-hero__bg{position:absolute;inset:0;z-index:0}
.tp-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center right;filter:grayscale(1) contrast(1.12)}
.tp-hero__veil{position:absolute;inset:0;background:
  linear-gradient(100deg,var(--tp-black) 6%,rgba(10,10,10,.80) 32%,rgba(10,10,10,.18) 62%,rgba(10,10,10,.62) 100%),
  radial-gradient(120% 90% at 78% 34%,transparent 0%,rgba(10,10,10,.55) 70%)}
.tp-hero__in{position:relative;z-index:3;width:100%;padding-block:clamp(48px,8vh,96px)}
.tp-hero__title{margin-bottom:clamp(18px,2.6vw,30px)}
.tp-hero__claim{font-family:var(--tp-font-mono);font-size:clamp(.95rem,1.5vw,1.22rem);line-height:1.6;color:var(--tp-acid);letter-spacing:.02em;max-width:30ch;margin:0 0 20px}
.tp-hero__intro{max-width:44ch;margin:0 0 30px}
.tp-hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.tp-hero__scroll{margin-top:clamp(28px,5vh,54px);display:inline-flex;align-items:center;gap:10px;font-family:var(--tp-font-mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tp-muted)}
.tp-hero__scroll svg{width:10px;height:16px;stroke:currentColor;fill:none;animation:tp-bob 2.2s ease-in-out infinite}
@keyframes tp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Layout A — press collage on the right */
.tp-hero--collage .tp-hero__in{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:960px){.tp-hero--collage .tp-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}}
.tp-collage{position:relative;min-height:min(72vh,620px)}
.tp-collage__item{position:absolute;box-shadow:0 22px 50px rgba(0,0,0,.62);border:1px solid rgba(0,0,0,.5);transition:transform .3s ease}
.tp-collage__item::before,.tp-fan__item::before{
  content:"";position:absolute;left:50%;top:-11px;width:74px;height:22px;transform:translateX(-50%) rotate(-2.5deg);
  background:rgba(237,233,222,.17);border-left:1px dashed rgba(237,233,222,.22);border-right:1px dashed rgba(237,233,222,.22);
  z-index:5;pointer-events:none}
.tp-fan__item:nth-child(2n)::before{transform:translateX(-50%) rotate(3deg)}
.tp-collage__item:hover{transform:rotate(0deg) scale(1.03)!important;z-index:9}
.tp-collage__item img{width:100%;filter:grayscale(1) contrast(1.06)}
.tp-collage__item:nth-of-type(1){width:47%;left:0;top:0;transform:rotate(-3deg);z-index:2}
.tp-collage__item:nth-of-type(2){width:43%;right:0;top:5%;transform:rotate(3.4deg);z-index:1}
.tp-collage__item:nth-of-type(3){width:41%;right:4%;bottom:0;transform:rotate(-2deg);z-index:3}
.tp-collage__item:nth-of-type(4){width:36%;left:3%;bottom:6%;transform:rotate(2.6deg);z-index:4}
@media(max-width:959px){
  .tp-collage{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .tp-collage__item{position:static;width:auto!important;transform:none!important}
  .tp-collage__item::before{display:none}
}
.tp-pullquote{
  position:absolute;z-index:6;left:2%;bottom:-9%;max-width:58%;margin:0;
  background:var(--tp-black);border:1px solid var(--tp-line);padding:18px 22px;transform:rotate(-1.2deg);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.tp-pullquote p{margin:0;font-family:"Bradley Hand","Segoe Script",var(--tp-font-mono);font-size:1.02rem;line-height:1.45;color:var(--tp-paper)}
.tp-pullquote cite{display:block;margin-top:10px;font-family:var(--tp-font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tp-muted);font-style:normal}
@media(max-width:959px){.tp-pullquote{position:static;max-width:none;transform:none;margin-top:16px;grid-column:1/-1}}

/* Layout B — full-bleed photo, claim top-right */
.tp-hero--photo .tp-hero__top{display:grid;gap:22px;margin-bottom:clamp(20px,4vh,44px)}
@media(min-width:960px){.tp-hero--photo .tp-hero__top{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .tp-hero--photo .tp-hero__claim{justify-self:end;text-align:left;margin-top:14px}}

/* ---------- 9. Torn-paper divider -------------------------------------- */
.tp-tear{position:relative;z-index:2;background:var(--tp-paper);color:var(--tp-ink);padding-block:clamp(34px,5vw,58px);margin-block:0}
.tp-tear::before,.tp-tear::after{content:"";position:absolute;left:0;right:0;height:22px;background:var(--tp-paper);
  -webkit-mask-size:100% 22px;mask-size:100% 22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.tp-tear::before{top:-21px;
  -webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V9l24-3 18 5 22-7 26 6 19-8 25 7 21-4 28 8 17-9 24 6 22-5 20 7 27-6 18 8 25-7 21 5 26-8 19 6 24-3 22 7 20-8 26 5 18 4 25-7 21 6 27-5 19 7 24-8 22 6 20-4 26 7 18-6 25 5 21-7 27 6 19-4 24 8 22-7 20 5V22z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V9l24-3 18 5 22-7 26 6 19-8 25 7 21-4 28 8 17-9 24 6 22-5 20 7 27-6 18 8 25-7 21 5 26-8 19 6 24-3 22 7 20-8 26 5 18 4 25-7 21 6 27-5 19 7 24-8 22 6 20-4 26 7 18-6 25 5 21-7 27 6 19-4 24 8 22-7 20 5V22z' fill='%23000'/%3E%3C/svg%3E")}
.tp-tear::after{bottom:-21px;transform:scaleY(-1);
  -webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V7l22 6 20-8 26 5 18 5 25-8 21 7 27-6 19 8 24-9 22 7 20-5 26 8 18-7 25 6 21-8 27 7 19-5 24 9 22-8 20 6 26-4 18 7 25-9 21 8 27-6 19 5 24-7 22 8 20-6 26 4 18-7 25 9 21-8 27 6 19-5 24 7 22-8 20 6V22z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V7l22 6 20-8 26 5 18 5 25-8 21 7 27-6 19 8 24-9 22 7 20-5 26 8 18-7 25 6 21-8 27 7 19-5 24 9 22-8 20 6 26-4 18 7 25-9 21 8 27-6 19 5 24-7 22 8 20-6 26 4 18-7 25 9 21-8 27 6 19-5 24 7 22-8 20 6V22z' fill='%23000'/%3E%3C/svg%3E")}
.tp-tear__in{position:relative;text-align:center}
.tp-tear__q{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.35rem,3.6vw,2.6rem);line-height:1.06;margin:0;letter-spacing:.005em;
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:var(--tp-noise),var(--tp-noise-2),linear-gradient(var(--tp-ink),var(--tp-ink));
  background-blend-mode:normal,normal,normal;background-size:300px 300px,460px 460px,100% 100%;
  -webkit-background-clip:text;background-clip:text}
.no-distress .tp-tear__q{color:var(--tp-ink);-webkit-text-fill-color:var(--tp-ink);background-image:none}
.tp-tear__mark{color:var(--tp-acid);-webkit-text-stroke:1px rgba(0,0,0,.35)}
.tp-tear__cite{display:block;margin-top:12px;font-family:var(--tp-font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,10,10,.6)}

/* ---------- 10. Cards / records ---------------------------------------- */
.tp-card{background:var(--tp-black-2);border:1px solid var(--tp-line);padding:clamp(20px,2.4vw,30px);border-radius:var(--tp-radius);position:relative;
  box-shadow:4px 4px 0 rgba(0,0,0,.5)}
.tp-card::after,.tp-table-wrap::after,.tp-tile::after,.tp-chart::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:var(--tp-grain);background-size:200px 200px;opacity:.07;mix-blend-mode:overlay}
.tp-table-wrap,.tp-tile,.tp-chart{position:relative}
.tp-card--acid{border-color:var(--tp-line-acid)}
.tp-card--pad-lg{padding:clamp(26px,3.4vw,44px)}

.tp-release{display:grid;gap:clamp(18px,2.4vw,32px);align-items:center}
@media(min-width:560px){.tp-release{grid-template-columns:minmax(130px,.92fr) minmax(0,1.08fr)}}
.tp-classics-a{align-items:start}
.tp-classics-a .tp-release{align-items:start}
@media(min-width:1100px){.tp-classics-a{grid-template-columns:minmax(0,3.25fr) minmax(200px,.85fr)!important}}
.tp-classics-a .tp-release{gap:clamp(14px,1.6vw,22px)}
@media(min-width:560px){.tp-classics-a .tp-release{grid-template-columns:minmax(104px,.68fr) minmax(0,1.32fr)}}
.tp-release--rev{direction:rtl}.tp-release--rev>*{direction:ltr}
.tp-release__art{position:relative}
.tp-release__art img,.tp-release__art svg{width:100%;border-radius:50%;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.tp-release__art--sleeve img,.tp-release__art--sleeve svg{border-radius:0}
.tp-release__label{margin:0 0 6px}
.tp-release__title{margin:0 0 4px}
.tp-release__cred{font-family:var(--tp-font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tp-acid);margin:0 0 12px}
.tp-release__body{margin:0 0 18px}

.tp-spin{animation:tp-spin 14s linear infinite;animation-play-state:paused}
.tp-release:hover .tp-spin{animation-play-state:running}
@keyframes tp-spin{to{transform:rotate(360deg)}}

/* ---------- 11. Receipts table (the credits evidence) ------------------- */
.tp-table-wrap{overflow-x:auto;border:1px solid var(--tp-line);border-radius:var(--tp-radius);background:var(--tp-black-2)}
.tp-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.9rem}
.tp-table th,.tp-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--tp-line);vertical-align:top}
.tp-table thead th{font-family:var(--tp-font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tp-acid);background:var(--tp-black-3);white-space:nowrap}
.tp-table tbody tr:last-child td{border-bottom:0}
.tp-table tbody tr:hover{background:rgba(221,238,51,.04)}
.tp-table td strong{color:var(--tp-paper)}
.tp-tag{display:inline-block;font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;border-radius:2px;white-space:nowrap}
.tp-tag--ok{color:var(--tp-acid)}
.tp-tag--no{color:#FF6B4A}
.tp-tag--part{color:#E8B23A}

/* ---------- 12. Charts -------------------------------------------------- */
.tp-charts{display:grid;gap:14px}
@media(min-width:700px){.tp-charts{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.tp-chart{border:1px solid var(--tp-line);background:var(--tp-black-2);padding:22px;position:relative;overflow:hidden}
.tp-chart__peak{font-family:var(--tp-font-display);font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:.94;color:var(--tp-acid);margin:6px 0 4px;position:relative;z-index:2;text-shadow:.03em .02em 0 rgba(0,0,0,.75)}
.tp-chart__peak sup{font-size:.34em;vertical-align:super;font-family:var(--tp-font-mono)}
.tp-chart__peak--tbc{font-size:clamp(1.1rem,2vw,1.5rem);color:var(--tp-muted);line-height:1.5;font-family:var(--tp-font-mono);letter-spacing:.1em}
.tp-chart__terr{font-family:var(--tp-font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tp-muted)}
.tp-chart__name{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:1.02rem;letter-spacing:.02em;margin:0 0 2px;color:var(--tp-paper)}
.tp-chart__meta{font-size:.78rem;color:var(--tp-muted);margin:0}
.tp-chart::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border:1px solid var(--tp-line-acid);border-radius:50%}

/* ---------- 13. Press / flyers / archive ------------------------------- */
.tp-tiles{display:grid;gap:clamp(14px,2vw,22px)}
@media(min-width:600px){.tp-tiles--3{grid-template-columns:repeat(3,1fr)}.tp-tiles--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tp-tiles--4{grid-template-columns:repeat(4,1fr)}}
.tp-tile{position:relative;display:block;background:var(--tp-black-2);border:1px solid var(--tp-line);overflow:hidden;border-radius:var(--tp-radius);
  box-shadow:4px 5px 0 rgba(0,0,0,.45);transition:transform .25s ease}
.tp-tiles .tp-tile:nth-child(4n+1){transform:rotate(-.7deg)}
.tp-tiles .tp-tile:nth-child(4n+2){transform:rotate(.5deg)}
.tp-tiles .tp-tile:nth-child(4n+3){transform:rotate(-.35deg)}
.tp-tiles .tp-tile:nth-child(4n){transform:rotate(.8deg)}
.tp-tiles .tp-tile:hover{transform:rotate(0) translateY(-3px)}
.tp-tile img,.tp-tile svg{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .4s ease,filter .4s ease}
.tp-tile:hover img,.tp-tile:hover svg{transform:scale(1.04);filter:grayscale(0) contrast(1.05)}
.tp-tile__cap{padding:12px 14px 14px;border-top:1px solid var(--tp-line)}
.tp-tile__cap h4{margin:0 0 3px;font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:.98rem;letter-spacing:.02em;color:var(--tp-paper)}
.tp-tile__cap p{margin:0}
.tp-tile__badge{position:absolute;top:10px;right:10px;background:var(--tp-acid);color:#000;font-family:var(--tp-font-mono);font-weight:700;font-size:.6rem;letter-spacing:.12em;padding:4px 8px;text-transform:uppercase}

.tp-fan{position:relative;min-height:clamp(300px,38vw,440px)}
.tp-fan__item{position:absolute;width:30%;box-shadow:0 20px 44px rgba(0,0,0,.6);transition:transform .3s ease,z-index 0s}
.tp-fan__item img,.tp-fan__item svg{width:100%;filter:grayscale(1) contrast(1.06)}
.tp-fan__item:hover{transform:rotate(0) translateY(-8px) scale(1.05)!important;z-index:9}
.tp-fan__item:nth-child(1){left:0;top:8%;transform:rotate(-7deg);z-index:1}
.tp-fan__item:nth-child(2){left:22%;top:0;transform:rotate(-2deg);z-index:2}
.tp-fan__item:nth-child(3){left:44%;top:5%;transform:rotate(4deg);z-index:3}
.tp-fan__item:nth-child(4){left:66%;top:1%;transform:rotate(9deg);z-index:4}
@media(max-width:700px){.tp-fan{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .tp-fan__item{position:static;width:auto;transform:none!important}
  .tp-fan__item::before{display:none}}

.tp-stamp{position:absolute;width:clamp(78px,9vw,116px);aspect-ratio:1;border-radius:50%;background:var(--tp-acid);color:#000;display:grid;place-items:center;text-align:center;transform:rotate(-9deg);font-family:var(--tp-font-display);line-height:.94;font-size:clamp(.8rem,1.3vw,1.15rem);text-transform:uppercase;right:2%;top:-6%;z-index:5;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.tp-stamp small{display:block;font-family:var(--tp-font-mono);font-size:.44em;letter-spacing:.1em;margin-top:2px}

/* ---------- 14. Timeline ------------------------------------------------ */
.tp-tl__years{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid var(--tp-line);scrollbar-width:thin}
.tp-tl__year{flex:0 0 auto;font-family:var(--tp-font-mono);font-size:.78rem;letter-spacing:.12em;padding:8px 16px;border:1px solid var(--tp-line);background:transparent;color:var(--tp-muted);cursor:pointer;border-radius:var(--tp-radius);transition:.18s}
.tp-tl__year:hover{color:var(--tp-paper);border-color:var(--tp-paper)}
.tp-tl__year[aria-selected="true"]{color:var(--tp-acid);border-color:var(--tp-acid);background:rgba(221,238,51,.07)}
.tp-tl__panel[hidden]{display:none}
.tp-tl__panel{display:grid;gap:clamp(18px,2.6vw,34px)}
@media(min-width:800px){.tp-tl__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.tp-tl__big{font-family:var(--tp-font-display);font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:.96;color:var(--tp-paper);margin:0 0 12px}
.tp-tl__img img,.tp-tl__img svg{width:100%;filter:grayscale(1) contrast(1.08);border:1px solid var(--tp-line)}

/* ---------- 15. Video (privacy: click-to-load facade) ------------------- */
.tp-video{position:relative;background:var(--tp-black-2);border:1px solid var(--tp-line);overflow:hidden;aspect-ratio:16/9}
.tp-video img,.tp-video svg,.tp-video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.tp-video__btn{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,10,.42);border:0;cursor:pointer;color:var(--tp-paper);width:100%}
.tp-video__btn:hover{background:rgba(10,10,10,.28)}
.tp-video__play{width:64px;height:64px;border-radius:50%;border:2px solid var(--tp-paper);display:grid;place-items:center;background:rgba(0,0,0,.3)}
.tp-video__play svg{position:static;width:18px;height:20px;fill:var(--tp-paper)}
.tp-video__consent{position:absolute;left:0;right:0;bottom:0;background:rgba(10,10,10,.92);border-top:1px solid var(--tp-line);padding:10px 14px;font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.06em;line-height:1.5;color:var(--tp-muted);text-align:left}
.tp-video__consent a{text-decoration:underline}

/* ---------- 16. Dropzone / forms --------------------------------------- */
.tp-drop{border:2px dashed var(--tp-line-acid);border-radius:var(--tp-radius);padding:clamp(26px,4vw,44px);text-align:center;background:rgba(221,238,51,.03);transition:.2s}
.tp-drop.is-over{background:rgba(221,238,51,.11);border-color:var(--tp-acid)}
.tp-drop__ico{width:44px;height:44px;margin:0 auto 14px;border:1px solid var(--tp-line-acid);border-radius:50%;display:grid;place-items:center;color:var(--tp-acid)}
.tp-drop__ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.tp-drop h4{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;margin:0 0 6px;color:var(--tp-acid)}
.tp-drop p{margin:0;color:var(--tp-muted);font-size:.88rem}
.tp-drop__types{margin-top:12px;font-family:var(--tp-font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--tp-muted)}
.tp-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.tp-drop__list{margin-top:14px;font-family:var(--tp-font-mono);font-size:.7rem;color:var(--tp-acid);text-align:left}
.tp-drop--note{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:clamp(18px,2.6vw,26px)}
.tp-drop--note .tp-drop__ico{margin:0;flex:0 0 auto}
.tp-drop--note > span:last-child{color:var(--tp-muted);font-size:.9rem;line-height:1.6}
.tp-drop--note strong{display:block;color:var(--tp-acid);font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;margin-bottom:3px}
.tp-drop--note a{color:var(--tp-acid);text-decoration:underline;text-underline-offset:3px}

.tp-field{margin-bottom:16px}
.tp-field label{display:block;font-family:var(--tp-font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tp-muted);margin-bottom:7px}
.tp-field .req{color:var(--tp-acid)}
.tp-input,.tp-textarea,.tp-select{
  width:100%;background:var(--tp-black);border:1px solid var(--tp-line);color:var(--tp-paper);
  padding:13px 15px;font-family:var(--tp-font-text);font-size:.94rem;border-radius:var(--tp-radius);
}
.tp-input:focus,.tp-textarea:focus,.tp-select:focus{border-color:var(--tp-acid);outline:none}
.tp-textarea{min-height:150px;resize:vertical}
.tp-consent{display:flex;gap:12px;align-items:flex-start;margin:18px 0;font-size:.82rem;line-height:1.55;color:var(--tp-muted)}
.tp-consent input[type=checkbox]{margin-top:3px;width:17px;height:17px;accent-color:var(--tp-acid);flex:0 0 17px}
.tp-consent a{text-decoration:underline}
.tp-hp{position:absolute!important;left:-9999px;top:-9999px}
.tp-notice{padding:13px 16px;border:1px solid;margin-bottom:18px;font-size:.88rem;border-radius:var(--tp-radius)}
.tp-notice--ok{border-color:var(--tp-line-acid);background:rgba(221,238,51,.07);color:var(--tp-acid)}
.tp-notice--err{border-color:#FF6B4A;background:rgba(255,107,74,.08);color:#FF9E85}

.tp-newsletter{display:flex;gap:0;max-width:420px}
.tp-newsletter .tp-input{border-right:0}
.tp-newsletter button{flex:0 0 52px;background:var(--tp-acid);border:1px solid var(--tp-acid);color:#000;cursor:pointer;display:grid;place-items:center}
.tp-newsletter button:hover{background:var(--tp-acid-bright)}

/* ---------- 17. Footer -------------------------------------------------- */
.tp-footer{position:relative;z-index:2;border-top:1px solid var(--tp-line);padding-block:clamp(40px,5vw,64px) 0;background:var(--tp-black)}
.tp-footer__grid{display:grid;gap:clamp(26px,3.4vw,48px)}
@media(min-width:820px){.tp-footer__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr)}}
.tp-footer h4{font-family:var(--tp-font-mono);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tp-acid);margin:0 0 16px}
.tp-links{list-style:none;margin:0;padding:0}
.tp-links li{border-bottom:1px solid var(--tp-line)}
.tp-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;color:var(--tp-paper);font-size:.9rem}
.tp-links a:hover{color:var(--tp-acid)}
.tp-links small{display:block;font-family:var(--tp-font-mono);font-size:.66rem;color:var(--tp-muted);letter-spacing:.06em}
.tp-social{display:flex;gap:14px;margin-top:18px}
.tp-social a{width:36px;height:36px;border:1px solid var(--tp-line);display:grid;place-items:center;color:var(--tp-paper);border-radius:var(--tp-radius)}
.tp-social a:hover{border-color:var(--tp-acid);color:var(--tp-acid)}
.tp-social svg{width:16px;height:16px;fill:currentColor}
.tp-colophon{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--tp-line);padding-block:20px 26px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.tp-colophon p,.tp-colophon a{font-family:var(--tp-font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tp-muted);margin:0}
.tp-colophon nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.tp-colophon a:hover{color:var(--tp-acid)}
.tp-colophon .tp-sign{color:var(--tp-acid)}

/* ---------- 18. Cookie banner ------------------------------------------ */
.tp-cookie{position:fixed;left:0;right:0;bottom:0;z-index:950;background:rgba(10,10,10,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--tp-line-acid);
  padding:clamp(16px,2.4vw,24px) 0;transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tp-cookie.is-open{transform:none}
.tp-cookie__in{display:grid;gap:18px}
@media(min-width:900px){.tp-cookie__in{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.tp-cookie h4{margin:0 0 6px;font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:1.05rem;letter-spacing:.05em;color:var(--tp-acid)}
.tp-cookie p{margin:0;font-size:.84rem;color:var(--tp-muted);max-width:70ch;line-height:1.6}
.tp-cookie p a{text-decoration:underline}
.tp-cookie__acts{display:flex;flex-wrap:wrap;gap:10px}
.tp-cookie__prefs{margin-top:16px;padding-top:16px;border-top:1px solid var(--tp-line);display:none;grid-column:1/-1}
.tp-cookie.is-prefs .tp-cookie__prefs{display:block}
.tp-cookie__cat{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--tp-line)}
.tp-cookie__cat:last-child{border-bottom:0}
.tp-cookie__cat input{margin-top:3px;width:17px;height:17px;accent-color:var(--tp-acid);flex:0 0 17px}
.tp-cookie__cat strong{display:block;font-family:var(--tp-font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-paper)}
.tp-cookie__cat span{font-size:.8rem;color:var(--tp-muted)}
.tp-cookie-reopen{position:fixed;left:16px;bottom:16px;z-index:940;width:40px;height:40px;border-radius:50%;border:1px solid var(--tp-line);background:rgba(10,10,10,.85);color:var(--tp-muted);display:none;place-items:center;cursor:pointer}
.tp-cookie-reopen.is-on{display:grid}
.tp-cookie-reopen:hover{color:var(--tp-acid);border-color:var(--tp-acid)}
.tp-cookie-reopen svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ---------- 19. Interior pages (legal, contact) ------------------------ */
.tp-page{padding-top:calc(var(--tp-nav-h) + clamp(40px,6vw,80px));padding-bottom:clamp(48px,7vw,96px)}
.tp-page__head{margin-bottom:clamp(28px,4vw,48px);padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--tp-line)}
.tp-prose{max-width:74ch}
.tp-prose h2{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--tp-acid);margin:2.2em 0 .6em}
.tp-prose h3{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:var(--tp-paper);margin:1.8em 0 .5em}
.tp-prose p,.tp-prose li{color:var(--tp-paper);opacity:.78;line-height:1.75}
.tp-prose ul,.tp-prose ol{padding-left:1.2em}
.tp-prose li{margin-bottom:.5em}
.tp-prose a{text-decoration:underline;text-underline-offset:3px}
.tp-prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.9rem}
.tp-prose th,.tp-prose td{border:1px solid var(--tp-line);padding:10px 13px;text-align:left}
.tp-prose th{background:var(--tp-black-3);font-family:var(--tp-font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-acid)}
.tp-prose blockquote{border-left:2px solid var(--tp-acid);margin:1.4em 0;padding:.2em 0 .2em 1.2em;color:var(--tp-paper);opacity:.9}
.tp-toc{border:1px solid var(--tp-line);background:var(--tp-black-2);padding:20px 24px;margin-bottom:2em}
.tp-toc ol{margin:0;padding-left:1.1em}
.tp-toc a{color:var(--tp-paper);text-decoration:none}
.tp-toc a:hover{color:var(--tp-acid)}

/* ---------- 20. Reveal-on-scroll --------------------------------------- */
.tp-js .tp-rise{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.tp-rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tp-rise{opacity:1;transform:none}}

/* ---------- 21. WP core classes ---------------------------------------- */
.alignleft{float:left;margin:0 1.6em 1em 0}
.alignright{float:right;margin:0 0 1em 1.6em}
.aligncenter{margin-inline:auto}
.wp-caption-text,.screen-reader-text{font-size:.8rem;color:var(--tp-muted)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 22. On-page item panel (keeps the site a single page) ------- */
.tp-open:not(.tp-btn){
  display:block;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;
  text-align:inherit;cursor:pointer;width:100%;
}
.tp-open.tp-btn{cursor:pointer}
.tp-open--inline{display:inline;width:auto;color:var(--tp-paper);text-decoration:underline;text-underline-offset:3px}
.tp-open--inline:hover{color:var(--tp-acid)}
.tp-open--row,
.tp-open.tp-open--row:not(.tp-btn){display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;color:var(--tp-paper);width:100%}
.tp-open--row:hover{color:var(--tp-acid)}
.tp-open--row small{display:block;font-family:var(--tp-font-mono);font-size:.66rem;color:var(--tp-muted);letter-spacing:.06em}
.tp-tile__hit{cursor:zoom-in}

.tp-modal{position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:clamp(16px,4vw,48px)}
.tp-modal[hidden]{display:none}
.tp-modal__scrim{position:absolute;inset:0;background:rgba(5,5,5,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:0;cursor:zoom-out}
.tp-modal__panel{
  position:relative;width:min(1040px,100%);max-height:min(88vh,900px);overflow:auto;
  background:var(--tp-black-2);border:1px solid var(--tp-line-acid);border-radius:var(--tp-radius);
  box-shadow:0 40px 90px rgba(0,0,0,.7);animation:tp-pop .28s cubic-bezier(.2,.8,.2,1)
}
@keyframes tp-pop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.tp-modal__in{display:grid;gap:0}
@media(min-width:820px){.tp-modal__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.tp-modal__media{background:var(--tp-black);display:grid;place-items:center;padding:clamp(18px,3vw,34px)}
.tp-modal__media img,.tp-modal__media svg{width:100%;max-height:64vh;object-fit:contain}
.tp-modal__body{padding:clamp(22px,3vw,38px)}
.tp-modal__x{
  position:absolute;top:10px;right:12px;z-index:3;width:38px;height:38px;line-height:1;
  background:rgba(10,10,10,.7);border:1px solid var(--tp-line);color:var(--tp-paper);
  font-size:24px;cursor:pointer;border-radius:var(--tp-radius)
}
.tp-modal__x:hover{border-color:var(--tp-acid);color:var(--tp-acid)}
body.tp-locked{overflow:hidden}

/* ---------- 23. Grunge switch ------------------------------------------- */
body.no-distress::after,
.no-distress .tp-card::after,
.no-distress .tp-table-wrap::after,
.no-distress .tp-tile::after,
.no-distress .tp-chart::before{display:none}
.no-distress .tp-display--distress{filter:none}
.no-distress .tp-section::before{background-image:none;background:var(--tp-line);height:1px}
.no-distress .tp-eyebrow::after{background-image:none;background:var(--tp-line);height:1px}
.no-distress .tp-tiles .tp-tile{transform:none}
.no-distress .tp-collage__item::before,.no-distress .tp-fan__item::before{display:none}
.no-distress .tp-btn,.no-distress .tp-card,.no-distress .tp-tile{box-shadow:none}

/* ---------- 24. Further reading ----------------------------------------- */
.tp-reading{display:grid;gap:clamp(14px,1.8vw,20px)}
@media(min-width:760px){.tp-reading{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.tp-reading{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tp-source{
  position:relative;display:flex;flex-direction:column;
  background:var(--tp-black-2);border:1px solid var(--tp-line);border-radius:var(--tp-radius);
  padding:clamp(18px,2vw,24px);box-shadow:4px 4px 0 rgba(0,0,0,.5);
  transition:border-color .2s ease,transform .2s ease;
}
.tp-source::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--tp-grain);background-size:200px 200px;opacity:.06;mix-blend-mode:overlay;
}
.tp-source:hover{border-color:var(--tp-line-acid);transform:translateY(-2px)}
.tp-source__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tp-source__kind{
  font-family:var(--tp-font-mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#000;background:var(--tp-acid);padding:4px 9px;border-radius:2px;
}
.tp-source__lang{font-family:var(--tp-font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tp-muted);border:1px solid var(--tp-line);padding:3px 8px;border-radius:2px}
.tp-source__pub{font-family:var(--tp-font-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tp-muted);margin:0 0 8px}
.tp-source__title{
  font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.1;margin:0 0 12px;color:var(--tp-paper);
}
.tp-source__sum{color:var(--tp-paper);opacity:.74;font-size:.88rem;line-height:1.65}
.tp-source__sum p{margin:0 0 .8em}
.tp-source__sum p:last-child{margin-bottom:0}
.tp-source__why{
  margin:14px 0 0;padding-left:12px;border-left:2px solid var(--tp-line-acid);
  font-family:var(--tp-font-mono);font-size:.7rem;line-height:1.6;letter-spacing:.02em;color:var(--tp-acid);
}
.tp-source__foot{margin-top:auto;padding-top:16px}
.tp-source__link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--tp-font-mono);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.tp-source__link svg{stroke:currentColor;fill:none;stroke-width:1.4}

/* ==========================================================================
   25. ROUGH PRINT PASS
   Nothing on a photocopied, taped-up flyer has a straight edge or an even
   surface. This layer breaks up the ground, the edges and the flat fills.
   All of it switches off with body.no-distress.
   ========================================================================== */

:root{
  /* Big soft blotches — the concrete wall / uneven toner across a page. */
  --tp-concrete:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.25'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23c)'/%3E%3C/svg%3E");
  /* Vertical drag — the streak a tired copier leaves down the page. */
  --tp-streak:repeating-linear-gradient(90deg,
     rgba(255,255,255,.030) 0 1px, transparent 1px 3px,
     rgba(255,255,255,.016) 3px 4px, transparent 4px 11px,
     rgba(0,0,0,.10) 11px 12px, transparent 12px 23px);
  /* Halftone screen for anything photographic. */
  --tp-halftone:radial-gradient(circle at 50% 50%, rgba(0,0,0,.62) .75px, transparent 1.15px);
  /* A hand-cut rectangle, used as a border-image so no box is square. */
  --tp-torn:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M7 5 20 7 33 4 47 8 60 5 74 7 88 4 101 8 115 5 128 7 133 6 135 19 132 32 136 46 133 59 135 73 132 87 136 100 133 114 135 128 134 134 121 132 108 136 94 133 81 135 67 132 54 136 40 133 27 135 13 132 6 134 4 121 7 108 3 94 6 81 4 67 7 54 3 40 6 27 4 13Z' fill='none' stroke='%23ede9de' stroke-opacity='.30' stroke-width='2.4'/%3E%3C/svg%3E");
  --tp-torn-acid:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M7 5 20 7 33 4 47 8 60 5 74 7 88 4 101 8 115 5 128 7 133 6 135 19 132 32 136 46 133 59 135 73 132 87 136 100 133 114 135 128 134 134 121 132 108 136 94 133 81 135 67 132 54 136 40 133 27 135 13 132 6 134 4 121 7 108 3 94 6 81 4 67 7 54 3 40 6 27 4 13Z' fill='none' stroke='%23ddee33' stroke-opacity='.62' stroke-width='2.8'/%3E%3C/svg%3E");
}

/* ---- 25.1 The ground: concrete + toner streak, not flat black ---------- */
.tp-distress body::before,
body.tp-distress::before{
  background-image:var(--tp-concrete),var(--tp-grain);
  background-size:700px 700px,200px 200px;
  opacity:.16;mix-blend-mode:screen;
}
body.tp-distress::after{
  background-image:var(--tp-streak),var(--tp-noise);
  background-size:auto,300px 300px;
  opacity:.075;mix-blend-mode:overlay;
}
/* Every band sits on its own sheet of unevenly-inked stock. */
.tp-distress .tp-section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--tp-concrete);background-size:820px 820px;
  opacity:.10;mix-blend-mode:overlay;
}
.tp-distress .tp-section:nth-of-type(2n)::after{background-position:220px 140px;transform:scaleX(-1)}
.tp-distress .tp-section > *{position:relative;z-index:1}

/* ---- 25.2 Torn edges instead of hairline boxes ------------------------- */
.tp-distress .tp-card,
.tp-distress .tp-source,
.tp-distress .tp-chart,
.tp-distress .tp-table-wrap,
.tp-distress .tp-tile,
.tp-distress .tp-video{
  border:3px solid transparent;
  border-image:var(--tp-torn) 5 / 3px / 0 round;
}
.tp-distress .tp-card--acid,
.tp-distress .tp-drop{
  border:3px dashed transparent;
  border-image:var(--tp-torn-acid) 5 / 3px / 0 round;
}
.tp-distress .tp-source:hover,
.tp-distress .tp-tile:hover{border-image:var(--tp-torn-acid) 5 / 3px / 0 round}

/* ---- 25.3 Section rules become torn strips ----------------------------- */
.tp-distress .tp-section::before{
  height:7px;
  background-image:var(--tp-rule),var(--tp-rule);
  background-size:600px 4px,431px 4px;
  background-position:0 0,90px 3px;
  opacity:.85;
}

/* ---- 25.4 Nothing flat keeps a straight edge --------------------------- */
.tp-distress .tp-btn--fill,
.tp-distress .tp-source__kind,
.tp-distress .tp-tile__badge,
.tp-distress .tp-tag,
.tp-distress .tp-newsletter button{filter:url(#tp-rough)}
.tp-distress .tp-stamp{filter:url(#tp-rough-hard)}
.tp-distress .tp-eyebrow,
.tp-distress .tp-kicker,
.tp-distress .tp-source__lang,
.tp-distress .tp-tl__year{filter:url(#tp-rough-soft)}

/* Screen-printed things sit a hair off square. */
.tp-distress .tp-source__kind{transform:rotate(-.7deg)}
.tp-distress .tp-source__lang{transform:rotate(.5deg)}
.tp-distress .tp-tile__badge{transform:rotate(1.4deg)}
.tp-distress .tp-source:nth-child(3n+1){transform:rotate(-.35deg)}
.tp-distress .tp-source:nth-child(3n+2){transform:rotate(.3deg)}
.tp-distress .tp-source:nth-child(3n){transform:rotate(-.15deg)}
.tp-distress .tp-source:hover{transform:rotate(0) translateY(-3px)}
.tp-distress .tp-chart:nth-child(2n){transform:rotate(.4deg)}
.tp-distress .tp-chart:nth-child(3n){transform:rotate(-.5deg)}

/* ---- 25.5 Photographs go through the copier --------------------------- */
.tp-distress .tp-tile img,.tp-distress .tp-tile svg,
.tp-distress .tp-fan__item img,.tp-distress .tp-fan__item svg,
.tp-distress .tp-collage__item img,.tp-distress .tp-collage__item svg,
.tp-distress .tp-tl__img img,.tp-distress .tp-tl__img svg,
.tp-distress .tp-hero__bg img{filter:url(#tp-xerox)}
/* NB: .tp-collage__item / .tp-fan__item are already absolutely positioned —
   do not add position:relative here or the collage collapses into a stack. */
.tp-distress .tp-tile,
.tp-distress .tp-tl__img,
.tp-distress .tp-video{position:relative}
.tp-distress .tp-tile::before,
.tp-distress .tp-fan__item::after,
.tp-distress .tp-collage__item::after,
.tp-distress .tp-tl__img::after,
.tp-distress .tp-video::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--tp-halftone);background-size:3px 3px;
  mix-blend-mode:multiply;opacity:.26;
}
.tp-distress .tp-video::before{z-index:1}

/* ---- 25.6 The newsprint band: uneven stock, inked unevenly ------------- */
.tp-distress .tp-tear{
  background-image:var(--tp-concrete);background-size:640px 640px;
  background-color:var(--tp-paper);background-blend-mode:multiply;
}
.tp-distress .tp-tear::before,.tp-distress .tp-tear::after{
  background-image:var(--tp-concrete);background-size:640px 640px;
  background-color:var(--tp-paper);background-blend-mode:multiply;
}

/* ---- 25.7 Tape, everywhere something is stuck down --------------------- */
.tp-distress .tp-collage__item::before,
.tp-distress .tp-fan__item::before{
  background:rgba(237,233,222,.20);
  box-shadow:inset 0 0 0 1px rgba(237,233,222,.10);
  filter:url(#tp-rough-soft);
}

/* ---- 25.8 Keep the reading room legible under all of it --------------- */
.tp-distress .tp-source__sum,
.tp-distress .tp-body,
.tp-distress .tp-prose p,
.tp-distress .tp-table td{filter:none}

@media (prefers-reduced-motion:reduce){
  .tp-distress .tp-source,.tp-distress .tp-chart,.tp-distress .tp-tiles .tp-tile{transform:none}
}

/* ---- 25.9 The switch ---------------------------------------------------*/
body.no-distress .tp-section::after{display:none}
body.no-distress .tp-filters{display:none}

/* ---------- 26. The wordmark: sprayed through a worn stencil ------------ */
:root{
  /* Horizontal drag — the streak a squeegee or a dying toner drum leaves. */
  --tp-scratch:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .5' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -1.70'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23s)'/%3E%3C/svg%3E");
}
.tp-distress .tp-display--distress{
  background-image:var(--tp-erode),var(--tp-erode-2),var(--tp-erode-3),linear-gradient(var(--tp-display-ink),var(--tp-display-ink));
  background-size:280px 280px,340px 340px,520px 520px,100% 100%;
}
/* The hero wordmark takes the full treatment: three erosion layers plus a
   displaced outline, so no stroke is straight and no fill is solid. */
.tp-distress .tp-hero__title,
.tp-distress .tp-h2.tp-display--distress,
.tp-distress .tp-tl__big{filter:none}
body.no-distress .tp-hero__title,
body.no-distress .tp-h2.tp-display--distress,
body.no-distress .tp-tl__big{filter:none}

/* ---------- 27. Full-bleed live photograph ------------------------------ */
.tp-live{padding-block:0}
.tp-live__frame{position:relative;min-height:clamp(420px,58vh,700px);display:flex;align-items:flex-end;overflow:hidden}
.tp-live__media{position:absolute;inset:0}
.tp-live__media img,.tp-live__media svg{width:100%;height:100%;object-fit:cover}
.tp-live__veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,0) 34%,rgba(10,10,10,.30) 58%,rgba(10,10,10,.90) 100%)}
.tp-live__in{position:relative;z-index:2;width:100%;padding-block:clamp(28px,4vw,54px)}
.tp-live__line{
  font-size:clamp(1.1rem,2.5vw,2.1rem);line-height:1.06;max-width:26ch;margin:0 0 12px;
}
.tp-live__cite{font-family:var(--tp-font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tp-muted);margin:0}
.tp-live__strip{display:grid;gap:clamp(10px,1.4vw,18px);margin-top:18px}
@media(min-width:700px){.tp-live__strip{grid-template-columns:repeat(3,1fr)}}
.tp-live__strip figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--tp-line)}
.tp-live__strip img,.tp-live__strip svg{width:100%;aspect-ratio:4/3;object-fit:cover}
/* .tp-live__media is position:absolute — never override it here (see the
   collage bug: adding position:relative collapses it to intrinsic size). */
.tp-distress .tp-live__media img,.tp-distress .tp-live__media svg,
.tp-distress .tp-live__strip img,.tp-distress .tp-live__strip svg{filter:url(#tp-xerox)}
.tp-distress .tp-live__frame::after,.tp-distress .tp-live__strip figure::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--tp-halftone);background-size:3px 3px;mix-blend-mode:multiply;opacity:.22;
}
.tp-source__region{font-family:var(--tp-font-mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tp-acid);border:1px solid var(--tp-line-acid);padding:3px 8px;border-radius:2px}
.tp-distress .tp-source__region{filter:url(#tp-rough-soft);transform:rotate(.4deg)}

/* ==========================================================================
   28. UI FIXES — flyer-fan clearance, video rows, mobile tables, selection
   ========================================================================== */

/* The fanned flyers rotate past the container's min-height; give the band
   real clearance so the CTA underneath never sits on top of them. */
.tp-fan{min-height:clamp(320px,42vw,500px);margin-bottom:clamp(18px,3vw,34px)}
@media(max-width:700px){.tp-fan{margin-bottom:0}}

/* Video list rows: give the play affordance a ring and a hover state so the
   rows read as playable, not as leftover hairlines. */
.tp-open--row svg{
  flex:0 0 auto;box-sizing:content-box;width:11px;height:11px;padding:9px;
  border:1px solid var(--tp-line);border-radius:50%;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.tp-open--row:hover svg{border-color:var(--tp-acid);color:var(--tp-acid);background:rgba(221,238,51,.08)}

/* Wide tables on small screens: tighter cells, and a visible acid scrollbar
   so the horizontal swipe is discoverable. */
.tp-table-wrap{scrollbar-width:thin;scrollbar-color:var(--tp-line-acid) transparent}
.tp-table-wrap::-webkit-scrollbar{height:7px}
.tp-table-wrap::-webkit-scrollbar-track{background:var(--tp-black-3)}
.tp-table-wrap::-webkit-scrollbar-thumb{background:var(--tp-line-acid);border-radius:4px}
@media(max-width:700px){
  .tp-table{min-width:560px;font-size:.82rem}
  .tp-table th,.tp-table td{padding:10px 11px}
}

/* Text selection carries the accent. */
::selection{background:var(--tp-acid);color:#000}

/* ==========================================================================
   29. RAVE PASS — motion and furniture, gated by body.tp-rave.
   Every animation dies under prefers-reduced-motion via the global kill in
   section 3, and the whole layer switches off with the Customizer toggle.
   ========================================================================== */

/* ---- 29.1 Chart ticker: the peaks loop across the hero's lower edge ----- */
.tp-ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:4;overflow:hidden;
  border-top:1px solid var(--tp-line);
  background:rgba(10,10,10,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.tp-ticker__track{display:flex;width:max-content;animation:tp-marquee 38s linear infinite}
.tp-ticker:hover .tp-ticker__track{animation-play-state:paused}
.tp-ticker__seq{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,34px);
  padding:12px clamp(10px,1.2vw,17px) 12px clamp(20px,2.4vw,34px);
  font-family:var(--tp-font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tp-paper);white-space:nowrap;
}
.tp-ticker__seq>span{display:inline-flex;align-items:center;gap:12px}
.tp-ticker__seq b{color:var(--tp-acid);font-weight:700}
.tp-ticker__seq i{font-style:normal;color:var(--tp-muted);letter-spacing:.12em}
.tp-ticker__dot{width:6px;height:6px;background:var(--tp-acid);transform:rotate(45deg);flex:0 0 auto}
@keyframes tp-marquee{to{transform:translateX(-33.3333%)}}
.tp-rave .tp-hero{padding-bottom:52px}
.no-rave .tp-ticker{display:none}
.no-rave .tp-hero{padding-bottom:0}
/* Reduced motion freezes the track at 0 — it reads as a static fact strip. */

/* ---- 29.2 Stepped "photocopier" motion instead of smooth eases ---------- */
.tp-rave .tp-collage__item,
.tp-rave .tp-fan__item{transition-timing-function:steps(3,end)}
.tp-rave .tp-tiles .tp-tile{transition-timing-function:steps(2,end)}
.tp-rave .tp-tile img,.tp-rave .tp-tile svg{transition:transform .34s steps(3,end),filter .34s steps(2,end)}
.tp-rave .tp-btn{transition-timing-function:steps(2,end)}
.tp-rave .tp-source{transition-timing-function:steps(2,end)}
.tp-rave .tp-nav__menu a::after{transition:right .18s steps(3,end)}

/* ---- 29.3 The projector slips: a rare, tiny jolt on the wordmark -------- */
.tp-rave .tp-hero__title{animation:tp-jolt 9s steps(1,end) infinite}
@keyframes tp-jolt{
  0%,96.4%,98.6%,100%{transform:none}
  96.8%{transform:translate(2px,-1px) skewX(.5deg)}
  97.6%{transform:translate(-2px,1px)}
}

/* ---- 29.4 Neon buzz: the acid accents flicker like a tired sign --------- */
.tp-rave .tp-eyebrow{animation:tp-buzz 7.3s linear infinite}
.tp-rave .tp-tear__mark{animation:tp-buzz 5.9s linear infinite}
.tp-rave .tp-hero__claim{animation:tp-buzz 11.4s linear infinite}
@keyframes tp-buzz{
  0%,89.6%,93.2%,100%{opacity:1}
  90.4%{opacity:.68}
  91.2%{opacity:.96}
  92.4%{opacity:.78}
}

/* ---- 29.5 Spinning roundel — the record-label stamp on the collage ------ */
.tp-roundel{
  position:absolute;right:-12px;top:-38px;z-index:7;
  width:clamp(96px,9.4vw,128px);aspect-ratio:1;color:var(--tp-acid);
  animation:tp-rotate 26s linear infinite;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
}
.tp-roundel svg{width:100%;height:100%}
.tp-roundel text{font-family:var(--tp-font-mono);font-weight:700;fill:currentColor}
@keyframes tp-rotate{to{transform:rotate(360deg)}}
@media(max-width:959px){.tp-roundel{display:none}}
.no-rave .tp-roundel{display:none}

/* ---- 29.6 Ghost section numerals, flyer-catalogue style ----------------- */
.tp-rave.tp-onepage main{counter-reset:tpsec}
.tp-rave.tp-onepage .tp-section{counter-increment:tpsec}
.tp-rave.tp-onepage .tp-section>.tp-shell{position:relative}
.tp-rave.tp-onepage .tp-section>.tp-shell::before{
  content:counter(tpsec,decimal-leading-zero);
  position:absolute;top:-8px;right:var(--tp-gut);z-index:0;pointer-events:none;
  font-family:var(--tp-font-display);font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(237,233,222,.15);
  letter-spacing:.04em;
}
.tp-rave.tp-onepage .tp-section--flush>.tp-shell::before{display:none}
@media(max-width:700px){.tp-rave.tp-onepage .tp-section>.tp-shell::before{font-size:2.1rem;top:-2px;-webkit-text-stroke-color:rgba(237,233,222,.12)}}

/* ---- 29.7 The pulse: scroll hint bobs at 128 BPM ------------------------ */
.tp-rave .tp-hero__scroll svg{animation:tp-bpm 469ms ease-in-out infinite alternate}
@keyframes tp-bpm{from{transform:translateY(0)}to{transform:translateY(4px)}}

/* ---- 29.8 Colophon furniture: barcode + smiley sign-off ----------------- */
.tp-barcode{
  height:26px;flex:0 0 118px;opacity:.5;
  background:repeating-linear-gradient(90deg,
    var(--tp-paper) 0 1px,transparent 1px 3px,
    var(--tp-paper) 3px 5px,transparent 5px 6px,
    var(--tp-paper) 6px 7px,transparent 7px 10px,
    var(--tp-paper) 10px 11px,transparent 11px 12px,
    var(--tp-paper) 12px 14px,transparent 14px 17px);
}
.no-rave .tp-barcode{display:none}
.tp-sign{display:inline-flex;align-items:center;gap:8px}
.tp-sign svg{width:14px;height:14px}
.tp-rave .tp-cookie-reopen:hover{transform:rotate(-12deg)}
.tp-cookie-reopen{transition:transform .2s steps(2,end),color .18s ease,border-color .18s ease}

/* ---------- 28. Categorised press archive -------------------------------- */
/* Chips reuse the button language (mono caps, hard 1px edge, acid on select)
   rather than inventing a pill. The count sits in the chip so a category never
   hides how much is behind it. NB: .tp-filters is the SVG <filter> defs
   container elsewhere in this file — these are .tp-cat*, deliberately. */
.tp-catbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px}
.tp-cat{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--tp-font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
  background:transparent;color:var(--tp-paper);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.tp-cat:hover{border-color:var(--tp-paper);transform:translate(1px,1px)}
.tp-cat[aria-selected="true"]{background:var(--tp-acid);border-color:var(--tp-acid);color:#000;box-shadow:1px 1px 0 rgba(0,0,0,.55)}
.tp-cat--kind{color:var(--tp-muted)}
.tp-cat--kind[aria-selected="true"]{color:#000}
.tp-cat__n{font-size:.66rem;opacity:.65;font-variant-numeric:tabular-nums}
.tp-cat[aria-selected="true"] .tp-cat__n{opacity:.8}
.tp-catbar__sep{width:1px;align-self:stretch;background:var(--tp-line);margin:0 6px}
.tp-catbar__count{min-height:1em}

/* Marked passages: the page image re-framed to one paragraph by CSS, so no
   second copy of the artwork ships. Geometry is inline per figure — the window
   takes the crop's aspect ratio, the image is scaled to 1/w and pulled back. */
.tp-crops{display:grid;gap:14px;margin-top:12px}
.tp-crop{margin:0;border:1px solid var(--tp-line);background:var(--tp-paper);border-radius:var(--tp-radius);overflow:hidden}
.tp-crop__win{display:block;position:relative;overflow:hidden;width:100%;background:var(--tp-paper)}
.tp-crop__win img{position:absolute;max-width:none;display:block}
.tp-crop__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:9px 12px;background:var(--tp-black-2);border-top:1px solid var(--tp-line)}
.tp-crop__tag{font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--tp-acid);padding:2px 7px;border-radius:var(--tp-radius)}
.tp-crop__hit{font-size:.82rem;color:var(--tp-paper);flex:1 1 auto;min-width:0}
.tp-crop__cap .tp-meta{margin-left:auto}

/* Every scanned page of a multi-page piece. */
.tp-pages{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.tp-pages__it{margin:0;width:110px}
.tp-pages__it img{width:100%;display:block;border:1px solid var(--tp-line);background:var(--tp-paper);filter:grayscale(1) contrast(1.05)}
.tp-pages__it figcaption{margin-top:5px;font-size:.62rem}

@media (min-width:700px){
  .tp-crops{grid-template-columns:1fr}
  .tp-pages__it{width:132px}
}
@media (max-width:560px){
  .tp-cat{padding:8px 11px;font-size:.64rem}
  .tp-catbar{gap:6px}
}
.tp-chart__printed{font-family:var(--tp-font-mono);font-size:.66rem;line-height:1.5;color:var(--tp-paper);opacity:.72;margin:10px 0 0;word-break:break-word}
.tp-chart__scan{margin:12px 0 0;max-width:150px}
.tp-chart__scan img{width:100%;display:block;border:1px solid var(--tp-line);background:var(--tp-paper);filter:grayscale(1) contrast(1.05)}

/* ==========================================================================
   9. The exhibition
   Complete pages in the scroll, details beside them, torn paper between the
   chapters. Nothing here hides a document behind an interaction.
   ========================================================================== */

:root{
  --tp-rip-paper:#C9C5BA;
  --tp-rip-up:url("data:image/svg+xml;charset=utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='46'%20viewBox='0%200%201200%2046'%20preserveAspectRatio='none'><path%20d='M0,27.9%20L18.1,27.9%20L38.4,37.1%20L64.9,35.0%20L77.2,25.2%20L102.1,29.3%20L107.3,24.0%20L125.2,20.2%20L142.6,20.0%20L157.4,30.5%20L180.2,24.7%20L193.8,30.5%20L217.2,30.8%20L224.5,27.4%20L238.6,21.7%20L246.9,27.9%20L256.6,23.3%20L267.7,31.5%20L285.6,26.8%20L304.8,20.1%20L321.2,16.3%20L340.5,17.5%20L357.3,12.0%20L365.0,8.9%20L387.0,3.1%20L403.4,5.9%20L428.6,14.2%20L438.5,4.1%20L465.2,14.3%20L478.4,17.4%20L484.9,11.0%20L490.7,16.0%20L507.6,16.9%20L518.7,20.6%20L534.5,17.0%20L547.5,9.3%20L567.0,10.2%20L591.7,6.0%20L618.6,13.7%20L627.6,12.7%20L643.4,6.9%20L658.5,13.0%20L673.4,5.9%20L688.8,9.0%20L713.4,18.4%20L725.0,18.5%20L746.7,19.5%20L767.8,26.5%20L773.1,22.3%20L796.7,27.0%20L807.8,26.8%20L829.7,30.6%20L849.9,24.2%20L860.9,22.6%20L878.6,17.0%20L893.1,18.8%20L903.2,17.2%20L920.6,19.5%20L925.7,29.2%20L933.9,24.9%20L955.1,21.6%20L972.8,28.7%20L992.0,31.1%20L1004.3,35.6%20L1029.9,24.8%20L1046.6,23.6%20L1070.9,23.1%20L1096.0,17.2%20L1116.4,15.0%20L1139.0,16.8%20L1149.5,7.3%20L1176.2,27.9%20L1184.7,18.3%20L1200,11.8%20L1200,46%20L0,46%20Z'%20fill='%23C9C5BA'/></svg>");
  --tp-rip-down:url("data:image/svg+xml;charset=utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='46'%20viewBox='0%200%201200%2046'%20preserveAspectRatio='none'><path%20d='M0,15.0%20L23.0,15.0%20L37.8,10.6%20L51.1,15.9%20L61.0,11.2%20L78.7,12.6%20L104.4,11.1%20L118.9,2.0%20L145.8,14.0%20L160.2,15.4%20L179.3,16.0%20L186.1,18.6%20L199.2,10.3%20L217.8,18.4%20L240.6,18.7%20L257.7,19.4%20L267.1,15.8%20L272.8,7.6%20L295.5,17.8%20L313.4,23.0%20L319.9,20.3%20L331.0,18.8%20L351.7,22.1%20L373.7,19.1%20L390.3,24.3%20L398.3,24.3%20L405.7,27.1%20L414.2,25.3%20L433.2,24.6%20L444.9,31.5%20L471.1,35.1%20L481.0,32.1%20L497.7,35.1%20L508.4,26.3%20L531.1,36.8%20L555.5,22.4%20L565.8,32.0%20L583.0,24.0%20L607.0,17.7%20L625.3,20.5%20L635.6,18.5%20L646.7,19.0%20L654.1,11.7%20L680.4,24.6%20L691.7,23.7%20L703.3,19.5%20L714.1,18.7%20L721.2,13.4%20L744.4,17.1%20L767.9,23.9%20L773.9,23.1%20L787.5,11.5%20L809.7,17.3%20L833.1,6.9%20L858.6,2.0%20L878.9,2.0%20L891.8,4.5%20L902.2,4.5%20L909.8,11.7%20L932.1,5.8%20L943.1,6.8%20L963.5,12.7%20L983.7,17.9%20L995.5,16.2%20L1002.6,21.0%20L1016.2,14.5%20L1029.3,16.9%20L1046.4,12.4%20L1051.5,19.8%20L1070.4,13.3%20L1094.5,13.7%20L1118.5,18.7%20L1136.0,23.7%20L1144.1,14.6%20L1149.7,12.6%20L1175.0,16.3%20L1190.8,19.3%20L1200,19.8%20L1200,0%20L0,0%20Z'%20fill='%23C9C5BA'/></svg>");
  --tp-rip-up2:url("data:image/svg+xml;charset=utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='46'%20viewBox='0%200%201200%2046'%20preserveAspectRatio='none'><path%20d='M0,28.1%20L6.5,28.1%20L31.7,21.2%20L41.2,14.1%20L64.8,16.5%20L73.8,18.5%20L98.1,12.0%20L119.0,6.2%20L129.5,2.0%20L145.3,2.0%20L156.7,7.6%20L181.1,10.0%20L199.2,3.5%20L224.1,2.0%20L246.9,7.8%20L254.4,5.7%20L269.5,6.4%20L276.1,11.7%20L287.6,13.7%20L301.4,23.1%20L316.0,27.1%20L321.8,27.8%20L334.8,24.1%20L352.1,19.3%20L366.4,23.4%20L373.4,13.3%20L394.2,18.8%20L415.7,10.3%20L423.9,24.3%20L435.2,24.1%20L460.6,37.3%20L485.6,29.1%20L502.9,20.3%20L513.4,36.3%20L527.2,31.2%20L539.5,23.0%20L548.5,29.1%20L555.0,36.2%20L565.6,31.8%20L591.7,30.0%20L617.6,31.4%20L630.1,32.2%20L650.4,30.9%20L657.6,31.3%20L672.7,22.1%20L695.0,14.4%20L711.3,25.7%20L726.0,26.1%20L734.4,25.5%20L739.6,23.8%20L752.8,24.4%20L762.8,21.4%20L775.1,16.3%20L797.8,30.8%20L821.4,25.3%20L846.0,16.9%20L866.5,15.3%20L875.1,20.9%20L900.9,25.0%20L910.3,5.2%20L936.5,3.5%20L963.4,13.4%20L981.1,7.9%20L1000.6,15.1%20L1010.2,16.4%20L1032.6,16.4%20L1050.6,21.3%20L1067.9,16.9%20L1084.1,16.8%20L1100.5,20.1%20L1120.5,12.5%20L1140.9,13.3%20L1157.3,22.1%20L1181.9,18.1%20L1200,10.2%20L1200,46%20L0,46%20Z'%20fill='%23C9C5BA'/></svg>");
  --tp-rip-down2:url("data:image/svg+xml;charset=utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='46'%20viewBox='0%200%201200%2046'%20preserveAspectRatio='none'><path%20d='M0,18.2%20L12.0,18.2%20L25.6,24.3%20L31.3,19.2%20L46.6,16.9%20L59.1,20.8%20L81.4,29.1%20L93.8,27.3%20L109.0,15.1%20L128.4,13.1%20L146.2,25.8%20L152.3,25.9%20L160.5,17.1%20L167.3,23.5%20L179.4,22.4%20L193.8,8.2%20L203.8,16.9%20L211.5,2.0%20L228.2,12.3%20L233.9,2.0%20L256.8,5.2%20L279.2,8.2%20L284.6,14.0%20L297.1,11.0%20L309.2,2.0%20L327.7,8.2%20L352.0,6.6%20L365.5,7.6%20L377.3,24.4%20L389.3,19.9%20L399.0,2.0%20L420.8,7.8%20L425.9,20.8%20L450.5,10.4%20L472.7,10.3%20L491.1,11.0%20L516.3,21.5%20L532.2,12.4%20L539.8,11.3%20L554.1,17.9%20L581.1,19.5%20L588.6,19.4%20L595.7,31.2%20L610.5,37.6%20L622.5,38.6%20L644.7,28.6%20L652.3,29.8%20L664.4,27.4%20L691.4,36.6%20L706.2,19.3%20L723.2,32.5%20L745.1,31.1%20L759.5,29.2%20L783.6,22.3%20L801.9,15.4%20L809.8,17.4%20L819.9,18.4%20L837.9,17.7%20L853.6,22.8%20L871.4,30.2%20L883.5,29.7%20L902.1,20.4%20L922.2,19.5%20L930.3,18.1%20L943.9,14.1%20L965.8,6.8%20L985.0,5.7%20L1007.6,10.2%20L1012.9,11.5%20L1035.9,14.1%20L1049.8,6.1%20L1063.7,9.9%20L1090.2,7.4%20L1114.7,12.5%20L1127.5,23.8%20L1139.2,13.2%20L1159.2,12.8%20L1169.4,13.0%20L1176.4,12.3%20L1198.0,14.8%20L1200,5.7%20L1200,0%20L0,0%20Z'%20fill='%23C9C5BA'/></svg>");
  --tp-rip-paper-2:#B6B2A6;
  --tp-doc-shadow:0 18px 46px rgba(0,0,0,.62), 0 2px 8px rgba(0,0,0,.5);
  --tp-tilt:0deg;
}

/* ---------- 9.1 Ripped-paper chapter dividers --------------------------- */
.tp-rip{position:relative;z-index:3;margin-block:clamp(52px,7vw,104px) 0;scroll-margin-top:calc(var(--tp-nav-h) + 6px)}
.tp-rip__paper{
  position:relative;
  background-color:var(--tp-rip-paper);
  background-image:var(--tp-noise);
  background-size:300px 300px;
  padding-block:clamp(30px,4.4vw,62px);
  color:#15130f;
}
.tp-rip__paper::before,.tp-rip__paper::after{
  content:"";position:absolute;left:0;right:0;height:34px;pointer-events:none;
  background-repeat:repeat-x;background-size:1200px 34px;
}
.tp-rip__paper::before{top:-33px;background-image:var(--tp-rip-up)}
.tp-rip__paper::after{bottom:-33px;background-image:var(--tp-rip-down)}
.tp-rip__in{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(14px,2vw,28px)}
.tp-rip__title{
  font-size:clamp(2.4rem,8.4vw,6.6rem);line-height:.82;margin:0;
  --tp-display-ink:#15130f;--tp-misreg:rgba(0,0,0,.16);
  color:#15130f;-webkit-text-fill-color:currentColor;
}
/* the distressed treatment is built for light ink on black — on paper it needs
   the ink colour swapped, and the misregistration pulled right back */
.tp-rip .tp-display--distress{
  background-image:var(--tp-erode),var(--tp-erode-2),linear-gradient(#15130f,#15130f);
  background-size:280px 280px,340px 340px,100% 100%;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(.012em .008em 0 rgba(0,0,0,.22));
}
.tp-rip__sub{
  font-family:var(--tp-font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(21,19,15,.62);margin:0;padding-bottom:.35em;
}

/* ---------- 9.2 Torn newsprint quotation strip -------------------------- */
.tp-tear2{position:relative;z-index:3;margin-block:clamp(44px,6vw,88px)}
.tp-tear2__paper{
  position:relative;background-color:var(--tp-rip-paper-2);
  background-image:var(--tp-noise);background-size:300px 300px;
  padding-block:clamp(30px,4vw,54px);
}
.tp-tear2__paper::before,.tp-tear2__paper::after{
  content:"";position:absolute;left:0;right:0;height:30px;pointer-events:none;
  background-repeat:repeat-x;background-size:1200px 30px;filter:saturate(.85) brightness(.92);
}
.tp-tear2__paper::before{top:-29px;background-image:var(--tp-rip-up2)}
.tp-tear2__paper::after{bottom:-29px;background-image:var(--tp-rip-down2)}
.tp-tear2__in{text-align:center}
.tp-tear2__q{
  font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.35rem,3.9vw,3rem);line-height:1.02;letter-spacing:.005em;
  color:#15130f;margin:0 auto;max-width:22ch;
}
.tp-tear2__q span{color:rgba(21,19,15,.34)}
.tp-tear2__cite{
  display:block;margin-top:14px;font-family:var(--tp-font-mono);font-style:normal;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(21,19,15,.6);
}

/* ---------- 9.3 Acid wall text ------------------------------------------ */
.tp-wall{
  margin:clamp(38px,6vw,80px) auto;max-width:min(100%,960px);text-align:center;
  transform:rotate(var(--tp-tilt,0deg));
}
.tp-wall--left{margin-inline:0;text-align:left}
.tp-wall--left .tp-wall__q{margin-inline:0}
.tp-wall--right{margin-inline:auto 0;text-align:right}
.tp-wall--right .tp-wall__q{margin-inline:auto 0}
.tp-wall__q{
  font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,4.6vw,3.6rem);line-height:1;letter-spacing:.004em;
  color:var(--tp-acid);margin:0 auto;max-width:20ch;text-wrap:balance;
}
.tp-wall__mark{color:rgba(221,238,51,.42)}
.tp-wall__cite{
  display:block;margin-top:16px;font-family:var(--tp-font-mono);font-style:normal;
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tp-muted);
}

/* ---------- 9.4 A complete page ----------------------------------------- */
.tp-doc{margin:0;position:relative;min-width:0}
.tp-doc__sheet{
  position:relative;display:block;background:#0f0f0f;
  box-shadow:var(--tp-doc-shadow);
  transform:rotate(var(--tp-tilt,0deg));
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
.tp-doc__img{width:100%;height:auto;display:block}
.tp-doc__sheet:hover{transform:rotate(var(--tp-tilt,0deg)) translateY(-3px)}
.tp-doc__redact{
  position:absolute;background:#111;border:1px solid rgba(237,233,222,.22);
  background-image:repeating-linear-gradient(135deg,#111 0 5px,#1c1c1c 5px 10px);
}
.tp-doc__zoomin{
  position:absolute;right:8px;bottom:8px;width:34px;height:34px;display:grid;place-content:center;
  background:rgba(10,10,10,.74);color:var(--tp-acid);border:1px solid var(--tp-line-acid);
  cursor:pointer;opacity:0;transition:opacity .25s;padding:0;
}
.tp-doc__sheet:hover .tp-doc__zoomin,.tp-doc__zoomin:focus-visible{opacity:1}
.tp-doc__cap{
  display:flex;flex-direction:column;gap:3px;margin-top:12px;
  border-left:2px solid var(--tp-line-acid);padding-left:11px;
}
.tp-doc__pub{font-family:var(--tp-font-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-acid)}
.tp-doc__title{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:1rem;line-height:1.15;color:var(--tp-paper)}
.tp-doc__by,.tp-doc__note{font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.08em;color:var(--tp-muted)}

/* ---------- 9.5 A zoomed detail ----------------------------------------- */
.tp-zoom{margin:0 0 22px;position:relative}
.tp-zoom__img{
  width:100%;height:auto;display:block;
  border:1px solid rgba(237,233,222,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  background:#efece2;
}
.tp-zoom__cap{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.tp-zoom__tag{
  align-self:flex-start;font-family:var(--tp-font-mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:#0a0a0a;background:var(--tp-acid);padding:3px 8px;
}
.tp-zoom__note{font-size:.86rem;line-height:1.5;color:var(--tp-paper)}
.tp-zoom__src{font-family:var(--tp-font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-muted)}

/* ---------- 9.6 Block layouts ------------------------------------------- */
.tp-chapter{padding-block:clamp(44px,6vw,86px)}
.tp-chapter::before{display:none}
.tp-chapter__block + .tp-chapter__block{margin-top:clamp(40px,5.5vw,86px)}

.tp-solo{max-width:820px;margin-inline:auto}
.tp-pair{display:grid;gap:clamp(20px,3vw,40px)}
.tp-strip{display:grid;gap:clamp(18px,2.4vw,32px);grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.tp-spread{display:grid;gap:clamp(22px,3vw,44px);align-items:start}
.tp-spread__lead{font-size:1.02rem;line-height:1.55;color:var(--tp-paper);margin:0 0 18px;max-width:40ch}
.tp-spread__zoom{position:sticky;top:calc(var(--tp-nav-h) + 22px)}
@media(min-width:900px){
  .tp-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tp-spread{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
  .tp-spread--flip .tp-spread__doc{order:2}
  .tp-spread--flip .tp-spread__zoom{order:1}
}
@media(max-width:899px){.tp-spread__zoom{position:static}}

.tp-inter{max-width:60ch;margin-inline:auto;text-align:center}
.tp-inter--wide{max-width:none}
.tp-inter__kick{font-family:var(--tp-font-mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tp-acid);margin:0 0 12px}
.tp-inter__head{font-size:clamp(1.7rem,4.4vw,3.1rem);line-height:.94;margin:0 0 18px}
.tp-inter__p{font-size:1.03rem;line-height:1.68;color:var(--tp-paper);margin:0 0 14px;opacity:.92}

/* ---------- 9.7 Photographs as physical prints -------------------------- */
.tp-obj{margin:0;transform:rotate(var(--tp-tilt,0deg));transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.tp-obj img{width:100%;height:auto;display:block;box-shadow:var(--tp-doc-shadow)}
.tp-obj--print img{
  background:#EDEAE0;padding:9px 9px 46px;
  box-shadow:0 16px 40px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5);
}
.tp-obj--print{position:relative}
.tp-obj > figcaption{
  margin-top:9px;font-family:var(--tp-font-mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tp-muted);
}
.tp-obj--print figcaption{
  position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;color:#4a463c;
}
.tp-obj:hover{transform:rotate(var(--tp-tilt,0deg)) translateY(-4px) scale(1.012)}
.tp-photorow{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));align-items:start}

/* ---------- 9.8 Hero ----------------------------------------------------- */
/* the nav is pinned over the top of the page, so the headline needs its height */
/* anchor jumps land clear of the fixed nav, and inside the spy's line */
.tp-ex-rip,.tp-section{scroll-margin-top:84px}
.tp-hero2{position:relative;z-index:2;padding-top:calc(var(--tp-nav-h) + clamp(10px,2.4vw,34px));overflow:hidden}
/* the painted wall: the collage backplate. Texture, density, chaos — everything
   readable on top of it is real. */

/* the acid smiley, sprayed in the left upper corner */
.tp-hero2__smiley{
  position:absolute;z-index:6;pointer-events:none;
  left:clamp(4px,0.8vw,16px);top:calc(var(--tp-nav-h) + clamp(26px,4vw,60px));
  width:clamp(64px,6.5vw,104px);transform:rotate(-9deg);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));
}
.tp-hero2__smiley img{display:block;width:100%}
@media(max-width:899px){.tp-hero2__smiley{width:56px;top:calc(var(--tp-nav-h) + 14px)}}
/* a soft pool of black so the real type never fights the painted type */
.tp-hero2__col{
  background:radial-gradient(150% 140% at 30% 22%, rgba(6,6,6,.97) 58%, rgba(6,6,6,0) 88%);
  padding:clamp(14px,1.6vw,26px);
  margin:calc(clamp(14px,1.6vw,26px) * -1);
}
.tp-hero2__top{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;position:relative}
.tp-hero2__col{position:relative;z-index:7}
.tp-hero2__screen{position:relative;z-index:2}
.tp-hero2__screen .tp-screen{transform:rotate(-1.3deg)}
.tp-hero2__title{
  /* Sized against the column it sits in, not the viewport: at 12vw the word
     PROPHET is wider than the left column and gets clipped by the section. */
  font-size:clamp(2.9rem,7.7vw,7rem);line-height:.8;letter-spacing:-.008em;
  word-break:normal;hyphens:none;
}
.tp-hero2__title span{display:block}
/* The erosion is tuned for headline sizes; at hero scale the same noise reads
   as television static, so the same texture is used at a much coarser grain. */
.tp-hero2__title.tp-display--distress{background-size:820px 820px,1040px 1040px,1500px 1500px,100% 100%}
@media(max-width:899px){.tp-hero2__title{font-size:clamp(2.9rem,13vw,5rem)}}
.tp-hero2__claim{
  margin:clamp(18px,2.4vw,30px) 0 0;font-family:var(--tp-font-mono);font-weight:700;
  font-size:clamp(.78rem,1.55vw,1.05rem);letter-spacing:.09em;text-transform:uppercase;
  color:var(--tp-acid);line-height:1.5;
}
.tp-hero2__claim span{display:block}
.tp-hero2__intro{
  margin:clamp(16px,2vw,26px) 0 0;font-size:clamp(.94rem,1.5vw,1.06rem);
  line-height:1.62;color:var(--tp-paper);opacity:.9;max-width:34ch;
}
.tp-hero2__intro span{display:block}
.tp-hero2__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,34px)}
.tp-hero2__actions .tp-btn{font-size:.76rem;padding:15px 24px}
.tp-hero2__screen{align-self:start}

.tp-hero2__table{position:relative;z-index:4;margin-top:clamp(-30px,-2vw,-8px)}
.tp-hero2__stage{
  position:relative;width:100%;
  background:url(/assets/img/hero-grunge.webp) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 14%);
}
.tp-lay{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z);--tp-tilt:var(--r)}
.tp-doc--laid .tp-doc__sheet{box-shadow:0 22px 52px rgba(0,0,0,.72),0 2px 7px rgba(0,0,0,.6)}
/* the film sits below the pile and slides under its bottom edge */
.tp-hero2__film{position:relative;z-index:3;max-width:min(100%,820px);margin:clamp(-70px,-4.5vw,-30px) auto 0}
.tp-hero2__film .tp-screen{transform:rotate(-.8deg)}
.tp-hero2__film .tp-screen__cap{text-align:center}
/* scrapbook tape on a few pieces of the pile */
.tp-hero2__stage .tp-lay:nth-child(2)::after,
.tp-hero2__stage .tp-lay:nth-child(6)::after,
.tp-hero2__stage .tp-lay:nth-child(9)::after{
  content:"";position:absolute;top:-10px;left:50%;width:38%;height:19px;
  background:rgba(221,238,51,.22);transform:translateX(-50%) rotate(-3.5deg);
  box-shadow:0 1px 3px rgba(0,0,0,.4);z-index:30;pointer-events:none;
}
.tp-hero2__stage .tp-lay:nth-child(6)::after{width:30%;transform:translateX(-50%) rotate(4deg)}
.tp-hero2__stage .tp-lay:nth-child(9)::after{transform:translateX(-50%) rotate(2deg);background:rgba(237,233,222,.28)}
.tp-hero2__scroll{
  position:relative;z-index:10;display:flex;align-items:center;gap:9px;margin:18px 0 0;
  padding-inline:var(--tp-gut);max-width:var(--tp-shell);margin-inline:auto;
  font-family:var(--tp-font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tp-muted);
}

/* ---------- 9.4a2 An immersive archive — how to visit ------------------- */
.tp-immersive{
  position:relative;z-index:6;
  padding-block:clamp(58px,10vw,138px);
  background:var(--tp-black);
}
.tp-immersive::before{
  content:"";position:absolute;left:var(--tp-gut);right:var(--tp-gut);top:0;height:2px;
  background:var(--tp-acid);opacity:.55;
}
.tp-immersive__in{max-width:768px;text-align:center}
.tp-immersive__kick{
  font-family:var(--tp-font-mono);font-weight:700;font-size:.66rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--tp-acid);
  margin:0 0 clamp(14px,2vw,20px);
}
.tp-immersive__h{
  font-size:clamp(2rem,5.6vw,3.5rem);line-height:.9;margin:0;color:var(--tp-paper);
}
.tp-immersive__rule{
  width:54px;height:3px;background:var(--tp-acid);
  margin:clamp(20px,3vw,30px) auto clamp(26px,4vw,40px);
}
.tp-immersive__lede{
  font-family:var(--tp-font-text);
  font-size:clamp(1.1rem,1.7vw,1.34rem);line-height:1.58;
  color:var(--tp-paper);opacity:.96;
  max-width:33ch;margin:0 auto clamp(26px,3.6vw,40px);
}
.tp-immersive__body{max-width:58ch;margin-inline:auto;text-align:left}
.tp-immersive__body p{
  font-family:var(--tp-font-text);
  font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.82;
  color:var(--tp-paper);opacity:.74;margin:0 0 1.15em;
}
.tp-immersive__body p:last-child{margin-bottom:0}
.tp-immersive__close{
  font-family:var(--tp-font-display);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.5rem,4vw,2.5rem);line-height:1.02;
  color:var(--tp-paper);margin:clamp(34px,5vw,56px) 0 0;
}
.tp-immersive__close span{color:var(--tp-acid)}
.tp-immersive__sign{
  font-family:var(--tp-font-mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tp-muted);
  margin:clamp(18px,2.6vw,28px) 0 0;
}
.tp-immersive__sign span{color:var(--tp-acid)}

@media(min-width:900px){
  .tp-hero2__top{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .tp-hero2__col{max-width:min(100%,640px)}
  .tp-hero2__title{font-size:clamp(3rem,5.4vw,4.9rem)}
  .tp-hero2__stage{aspect-ratio:1440/1000}
  /* the pile rises into the title zone: chaos beside the type */
  .tp-hero2__table{margin-top:clamp(-96px,-6.5vw,-40px)}
}
@media(max-width:899px){
  /* The still life on a phone: a thrown pile, not a grid. The pieces keep
     their full tilt, alternate sides down the page and lean into each other,
     so the composition reads as one scatter rather than rows of cards. */
  .tp-hero2__stage{
    display:block;position:relative;
    margin-top:clamp(20px,5vw,40px);padding-inline:var(--tp-gut);
    background-size:cover;background-position:center;
    /* no top fade here: on a tall flowing stage it would grey out the
       first pieces — the shirt has to land fully visible */
    -webkit-mask-image:none;mask-image:none;
  }
  /* one thrown pile: scrap-sized pieces, hard overlap, source order decides
     what sits on top (last thrown = on top), each shoved off a different edge */
  .tp-lay{
    position:relative;left:auto;top:auto;z-index:auto;
    width:min(80%,300px);margin:0 auto 0 -4%;
    --tp-tilt:calc(var(--r)*2.6);
  }
  .tp-lay:nth-child(2n){margin-left:auto;margin-right:-6%;width:min(76%,286px);--tp-tilt:calc(var(--r)*-2.2)}
  .tp-lay:nth-child(3n){width:min(92%,346px);margin-left:2%;margin-right:auto;--tp-tilt:calc(var(--r)*3.2)}
  .tp-lay:nth-child(4n){width:min(62%,232px);margin-left:auto;margin-right:16%;--tp-tilt:calc(var(--r)*-2.8)}
  .tp-lay:nth-child(5n){width:min(68%,256px);margin-left:26%;margin-right:auto;--tp-tilt:calc(var(--r)*3.4)}
  .tp-lay:nth-child(7n){width:min(84%,318px);margin-left:-10%;margin-right:auto}
  .tp-lay + .tp-lay{margin-top:clamp(-240px,-42vw,-108px)}
  .tp-lay:nth-child(4n) + .tp-lay,
  .tp-lay:nth-child(6n) + .tp-lay{margin-top:clamp(-300px,-56vw,-150px)}
  .tp-lay:nth-child(5n) + .tp-lay{margin-top:clamp(-140px,-24vw,-64px)}
  .tp-lay--object:first-child{width:min(82%,340px);margin:0 auto;z-index:3}
  /* the four photographs — makeup mirror, phone, hands in the air, keyboard —
     stay legible in the pile: full size, centred, lifted above the scraps,
     and the next piece thrown does not bury them */
  .tp-hero2__stage .tp-lay.tp-lay--photo{
    width:min(80%,308px);margin-left:auto;margin-right:auto;
    z-index:2;--tp-tilt:calc(var(--r)*2);
  }
  .tp-lay.tp-lay--photo + .tp-lay{margin-top:clamp(-92px,-15vw,-40px)}
  .tp-lay--hm{display:none}
  .tp-note{display:none}
  .tp-hero2__scroll{margin-top:24px}
}

/* ---------- 9.4b Pinned to the wall — the announcement board -------------- */
.tp-wall{position:relative}
.tp-wall__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,38px);margin-top:clamp(26px,3.4vw,48px)}
@media(max-width:980px){.tp-wall__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vw,34px)}}
@media(max-width:520px){.tp-wall__grid{grid-template-columns:minmax(0,1fr)}}
.tp-wall__label{margin:0 0 16px;line-height:1}
.tp-wall__label span{
  display:inline-block;padding:9px 16px;border:2px solid var(--tp-acid);color:var(--tp-acid);
  font-family:var(--tp-font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  transform:rotate(-1.7deg);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  background:rgba(221,238,51,.05);
}
.tp-wall__cat:nth-child(2n) .tp-wall__label span{transform:rotate(1.9deg);border-radius:15px 225px 15px 255px/255px 15px 225px 15px}
.tp-wall__fan{position:relative;aspect-ratio:3/4;filter:drop-shadow(0 18px 34px rgba(0,0,0,.6))}
.tp-wall__page{position:absolute;width:74%;--tp-tilt:-4deg}
.tp-wall__page:nth-child(1){left:0;top:0;z-index:1}
.tp-wall__page:nth-child(2){left:15%;top:11%;z-index:2;--tp-tilt:3.2deg}
.tp-wall__page:nth-child(3){left:29%;top:23%;z-index:3;width:68%;--tp-tilt:-1.6deg}
.tp-wall__page .tp-doc__sheet{box-shadow:0 14px 30px rgba(0,0,0,.65)}

/* ---------- 9.9 The screen ---------------------------------------------- */
.tp-screen{position:relative;background:#050505;border:clamp(9px,1.1vw,15px) solid #1a1a1a;box-shadow:0 26px 60px rgba(0,0,0,.75),inset 0 0 0 1px rgba(237,233,222,.07)}
.tp-screen__glass{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.tp-screen__glass img,.tp-screen__glass iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.tp-screen .tp-video__btn{position:absolute;inset:0;display:grid;place-content:center;background:transparent;border:0;cursor:pointer}
.tp-screen .tp-video__play{
  width:clamp(56px,7vw,86px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;
  border:3px solid var(--tp-acid);color:var(--tp-acid);background:rgba(10,10,10,.34);
  transition:transform .3s,background .3s;
}
.tp-screen .tp-video__btn:hover .tp-video__play{transform:scale(1.07);background:rgba(221,238,51,.16)}
.tp-screen .tp-video__consent{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:9px 12px;
  background:rgba(6,6,6,.86);font-family:var(--tp-font-mono);font-size:.56rem;
  letter-spacing:.06em;line-height:1.5;color:var(--tp-muted);
}
.tp-screen__chrome{height:30px;background:#101010;display:flex;align-items:center;padding-inline:12px}
.tp-screen__bar{flex:1;height:3px;background:rgba(237,233,222,.16);position:relative}
.tp-screen__bar::before{content:"";position:absolute;inset:0 84% 0 0;background:var(--tp-acid)}
.tp-screen__cap{margin:12px 0 0;font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-muted)}
/* a first-party film: the archive's own player */
.tp-video__file{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.tp-screen--empty .tp-screen__glass{display:grid;place-content:center;background:repeating-linear-gradient(135deg,#0b0b0b 0 12px,#101010 12px 24px)}
.tp-screen__slot{margin:0;text-align:center;font-family:var(--tp-font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tp-acid);padding:20px}
.tp-screen__slot span{display:block;margin-top:10px;font-size:.6rem;letter-spacing:.06em;text-transform:none;color:var(--tp-muted);max-width:34ch}

/* ---------- 9.9b On the newsstand — the magazine covers --------------- */
.tp-covers__grid{
  list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;
  display:grid;gap:clamp(16px,2.4vw,36px);
  grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));
  align-items:end;
}
@media(min-width:620px){
  .tp-covers__grid{grid-template-columns:repeat(auto-fill,minmax(min(188px,100%),1fr))}
}
.tp-covers__item,.tp-covers__fig{margin:0}
.tp-covers__img{
  width:100%;height:auto;display:block;
  border:1px solid rgba(0,0,0,.55);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  background:#0f0f0f;cursor:zoom-in;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.tp-covers__item:hover .tp-covers__img{transform:translateY(-5px) rotate(-.6deg)}
.tp-covers__cap{
  margin-top:11px;font-family:var(--tp-font-mono);
  font-size:.58rem;letter-spacing:.05em;line-height:1.45;color:var(--tp-muted);
}
.tp-covers__cap b{
  display:block;color:var(--tp-acid);font-weight:700;
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px;
}

/* ---------- 9.10 The press run ------------------------------------------ */
.tp-press2__intro{max-width:62ch}
.tp-run{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(22px,3vw,46px);margin-top:34px}
.tp-run__it{grid-column:span 12;margin:0;display:flex;flex-direction:column}
.tp-run__wall{grid-column:1/-1}
@media(min-width:760px){.tp-run__it{grid-column:span var(--span)}}
.tp-run__sheets{display:grid;gap:14px}
.tp-run__pages--multi .tp-run__sheets{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.tp-run__pages--withzoom{display:grid;gap:clamp(18px,2.4vw,34px)}
@media(min-width:900px){.tp-run__pages--withzoom{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}}
.tp-run__cap{margin-top:14px;border-left:2px solid var(--tp-line-acid);padding-left:12px}
.tp-run__pub{font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-acid);margin:0 0 4px}
.tp-run__title{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:1.06rem;line-height:1.14;margin:0;color:var(--tp-paper)}
.tp-run__by,.tp-run__n{font-family:var(--tp-font-mono);font-size:.6rem;letter-spacing:.1em;color:var(--tp-muted);margin:5px 0 0}

/* ---------- 9.11 Charts -------------------------------------------------- */
.tp-peaks{display:grid;gap:clamp(18px,2.6vw,34px);grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));margin-top:30px}
.tp-peak{border-top:2px solid var(--tp-line-acid);padding-top:14px}
.tp-peak__n{
  font-family:var(--tp-font-display);font-size:clamp(3.4rem,8vw,6.2rem);line-height:.8;
  color:var(--tp-acid);margin:0 0 10px;letter-spacing:-.02em;
}
.tp-peak__n span{font-size:.44em;vertical-align:.5em;opacity:.6}
.tp-peak--none{border-top-color:var(--tp-line)}
.tp-peak__none{
  font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:.95;color:var(--tp-muted);margin:0 0 14px;
}
.tp-receipt__src{margin:14px 0 0}
.tp-receipt__src a{font-family:var(--tp-font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.tp-peak__track{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:1.05rem;margin:0 0 4px;color:var(--tp-paper)}
.tp-peak__chart,.tp-peak__when{font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.09em;color:var(--tp-muted);margin:0}
.tp-peak__when{margin-top:4px;opacity:.75}

.tp-receipts{display:grid;gap:clamp(38px,5vw,76px);margin-top:clamp(38px,5vw,72px)}
.tp-receipt{display:grid;gap:clamp(20px,3vw,40px);align-items:start}
@media(min-width:900px){
  .tp-receipt{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .tp-receipt--plain{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
}
.tp-receipt__peak{font-family:var(--tp-font-display);font-size:clamp(2.6rem,6vw,4.6rem);line-height:.8;color:var(--tp-acid);margin:0 0 8px}
.tp-receipt__peak span{font-size:.44em;vertical-align:.5em;opacity:.6}
.tp-receipt__track{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:1.15rem;margin:0 0 4px}
.tp-receipt__chart{font-family:var(--tp-font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--tp-paper);margin:0}
.tp-receipt__when,.tp-receipt__note{font-family:var(--tp-font-mono);font-size:.6rem;letter-spacing:.09em;color:var(--tp-muted);margin:5px 0 0}
.tp-receipt__printed{
  font-family:var(--tp-font-mono);font-size:.66rem;margin:14px 0 18px;padding:8px 10px;
  color:#0a0a0a;background:var(--tp-acid);display:inline-block;
}
.tp-alltable{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--tp-line);padding-top:18px}
.tp-alltable > summary{
  cursor:pointer;font-family:var(--tp-font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tp-acid);list-style:none;padding:6px 0;
}
.tp-alltable > summary::-webkit-details-marker{display:none}
.tp-alltable > summary::before{content:"+ ";}
.tp-alltable[open] > summary::before{content:"– ";}

/* ---------- 9.12 The two records ---------------------------------------- */
.tp-classics2__top{display:grid;gap:clamp(28px,4vw,60px);align-items:start;margin-top:30px}
@media(min-width:900px){.tp-classics2__top{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
@media(min-width:900px){.tp-classics2__top--solo{grid-template-columns:minmax(0,1fr)}.tp-classics2__top--solo .tp-records{max-width:860px}}
.tp-sleeve{margin:0}
.tp-doc--sleeve .tp-doc__sheet{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tp-sleeve:hover .tp-doc__sheet{transform:rotate(-1.1deg) scale(1.014)}
.tp-sleeve figcaption{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.tp-sleeve__label{font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:1.1rem;color:var(--tp-paper)}
.tp-sleeve__meta{font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tp-acid)}
.tp-records{display:grid;gap:clamp(40px,5vw,68px)}
.tp-rec{position:relative;border-top:2px solid var(--tp-line-acid);padding-top:16px}
/* a single with its 12-inch sleeve: art beside the text, art on top on a phone */
.tp-rec--hassleeve{display:grid;gap:clamp(20px,3.4vw,44px)}
@media(min-width:760px){
  .tp-rec--hassleeve{grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:start}
  .tp-rec--hassleeve.tp-rec--flip{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
  .tp-rec--flip .tp-rec__sleeve{order:2}
}
.tp-rec__sleeve{max-width:320px}
.tp-rec__sleeve .tp-obj{margin:0;width:100%}
.tp-rec__sleeve .tp-obj img{width:100%;display:block}
@media(max-width:759px){.tp-rec__sleeve{max-width:min(80%,300px)}}
.tp-rec__n{font-family:var(--tp-font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--tp-acid);margin:0 0 8px}
.tp-rec__title{font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:.9;margin:0 0 10px}
.tp-rec__meta{font-family:var(--tp-font-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-muted);margin:0 0 14px}
.tp-rec__body{font-size:.98rem;line-height:1.65;opacity:.9}
.tp-rec__body p{margin:0 0 10px}
.tp-rec__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tp-classics2__proof{margin-top:clamp(44px,6vw,84px)}

/* ---- 34. Stuck-on scraps: crooked hand-drawn jump tabs on the ---------
   Analogue Theatre banner. Two chapters with no nav entry, tacked onto
   the poster at careless angles like flyer scraps. */
.tp-rip--stuck{overflow:visible}
/* a centred row of acid jump-tabs, hanging past the torn edge onto the black */
.tp-rip__stick{
  position:absolute;left:0;right:0;bottom:-40px;z-index:6;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:clamp(8px,1.6vw,20px);padding-inline:var(--tp-gut);
  pointer-events:none;
}
.tp-stick{
  pointer-events:auto;
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 16px 8px;
  font-family:var(--tp-font-mono);font-weight:700;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;line-height:1;
  color:#0a0a0a;background:var(--tp-acid);text-decoration:none;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
  transition:background .14s ease,transform .16s ease,box-shadow .16s ease;
}
.tp-distress .tp-stick{filter:url(#tp-rough)}
.tp-rave .tp-stick{transition-timing-function:steps(2,end)}
.tp-stick__t{position:relative}
.tp-stick__arr{width:12px;height:14px;margin-top:1px}
.tp-stick__arr path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:tp-bob 1.7s ease-in-out infinite}
.tp-stick:nth-child(2) .tp-stick__arr path{animation-delay:.35s}
.tp-stick:nth-child(3) .tp-stick__arr path{animation-delay:.7s}
.tp-stick:hover,.tp-stick:focus-visible{
  background:var(--tp-acid-bright);
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 rgba(0,0,0,.5);outline:none;
}
.tp-stick:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tp-stick__arr path{animation:none}}
@media(max-width:760px){
  .tp-rip__stick{bottom:-32px;gap:7px}
  .tp-stick{font-size:.52rem;padding:7px 9px 6px;letter-spacing:.08em}
  .tp-stick__arr{width:10px;height:12px}
}

.tp-callout{
  margin-top:clamp(40px,5vw,72px);display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  justify-content:space-between;border:1px solid var(--tp-line-acid);padding:clamp(18px,2.4vw,30px);
}
.tp-callout p{margin:0;font-family:var(--tp-font-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,2.2vw,1.5rem);line-height:1.15;max-width:34ch}

/* ---------- 9.13 Video band --------------------------------------------- */
.tp-videoband__intro{max-width:60ch}
.tp-videoband__frame{max-width:940px;margin-inline:auto;margin-top:26px}
.tp-videoband__title{font-size:clamp(1.5rem,3.6vw,2.6rem);text-align:center;margin-top:24px}

/* ---------- 9.14 Long-page navigation ------------------------------------ */
.tp-nav__menu a[aria-current="true"]{color:var(--tp-acid)}
.tp-nav__menu a[aria-current="true"]::after{opacity:1;transform:scaleX(1)}
.tp-totop{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:60;
  width:44px;height:44px;display:grid;place-content:center;padding:0;cursor:pointer;
  background:rgba(10,10,10,.82);color:var(--tp-acid);border:1px solid var(--tp-line-acid);
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s;
}
.tp-totop svg{transform:rotate(180deg)}
.tp-totop.is-on{opacity:1;pointer-events:auto;transform:none}

/* ---------- 9.15 Larger view --------------------------------------------- */
.tp-lightbox{
  position:fixed;inset:0;z-index:200;display:none;place-content:center;
  background:rgba(6,6,6,.95);padding:clamp(14px,3vw,46px);
}
.tp-lightbox[open]{display:grid}
.tp-lightbox img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.tp-lightbox__cap{
  margin:16px auto 0;text-align:center;font-family:var(--tp-font-mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tp-muted);max-width:70ch;
}
.tp-lightbox__x{
  position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:44px;height:44px;display:grid;place-content:center;cursor:pointer;padding:0;
  background:transparent;color:var(--tp-acid);border:1px solid var(--tp-line-acid);font-size:1.3rem;line-height:1;
}

/* ---------- 9.16 Motion, restrained -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tp-doc__sheet,.tp-obj{transform:rotate(var(--tp-tilt,0deg))!important;transition:none}
  .tp-doc__sheet:hover,.tp-obj:hover{transform:rotate(var(--tp-tilt,0deg))!important}
}

/* ---------- 9.4c marker notes on the wall --------------------------------- */
.tp-note{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z);
  font-family:var(--tp-font-mono);font-size:clamp(.68rem,1.05vw,.95rem);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.6;color:var(--tp-acid);
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}

/* ---------- 9.4d the notice wall — torn paper, six doors ------------------ */
.tp-hero2__nav{
  position:relative;z-index:4;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.6vw,24px);
  padding-inline:var(--tp-gut);max-width:var(--tp-shell);
  margin:clamp(14px,2vw,30px) auto 0;
}
.tp-notice{
  position:relative;display:block;
  background:linear-gradient(175deg,#ece7da,#ded8c8);
  padding:9px 9px 10px;
  clip-path:polygon(0% 6%, 6% 2%, 14% 5%, 23% 0%, 32% 4%, 41% 1%, 50% 5%, 59% 1%, 68% 4%, 77% 0%, 86% 4%, 94% 1%, 100% 4%, 100% 94%, 93% 99%, 84% 95%, 75% 100%, 66% 95%, 57% 100%, 48% 95%, 39% 100%, 30% 95%, 21% 100%, 12% 95%, 4% 100%, 0% 95%);
  transform:rotate(var(--tilt,-1.3deg));
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.tp-notice:nth-child(2n){--tilt:1.5deg}
.tp-notice:nth-child(3n){--tilt:-2.4deg}
.tp-notice:nth-child(5n){--tilt:2.1deg}
.tp-notice:hover{transform:rotate(0deg) translateY(-5px)}
.tp-notice__page{display:block;height:clamp(150px,15vw,225px);overflow:hidden}
.tp-notice__page .tp-doc__sheet{box-shadow:none}
.tp-notice__link{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding:2px 2px 3px}
.tp-notice__label{display:block;min-width:0}
.tp-notice__label span{
  display:inline-block;padding:6px 10px;border:2px solid #15130f;background:var(--tp-acid);color:#15130f;
  font-family:var(--tp-font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-1.4deg);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.tp-notice:nth-child(2n) .tp-notice__label span{transform:rotate(1.6deg)}
.tp-notice__go{color:#15130f;flex:none}
@media(max-width:899px){
  .tp-hero2__nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .tp-notice{padding:7px 7px 8px}
  .tp-notice__label span{font-size:.5rem;padding:5px 7px;letter-spacing:.08em}
}
@media(max-width:560px){
  .tp-hero2__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the white-label disc, rim-lit so it reads off the black wall */
.tp-obj--vinyl img{filter:drop-shadow(0 16px 30px rgba(0,0,0,.85)) drop-shadow(0 0 3px rgba(221,238,51,.3))}

/* ---------- 9.4e the wall dances ------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  .tp-lay.tp-dance{animation:tp-sway var(--d,5.5s) ease-in-out infinite alternate}
}
@keyframes tp-sway{
  0%   {transform:translateY(0) rotate(0deg)}
  35%  {transform:translateY(-9px) rotate(.8deg)}
  70%  {transform:translateY(5px) rotate(-.6deg)}
  100% {transform:translateY(0) rotate(0deg)}
}

/* ---------- moving on: the chapter in his own words --------------------- */
.tp-moving__head{max-width:900px;margin:clamp(26px,4vw,54px) auto 0}
.tp-moving__title{font-size:clamp(2.5rem,5vw,4.4rem);line-height:1.04;margin:0 0 26px}
.tp-moving__head .tp-body{margin-top:0}
/* his account, set as a quotation: acid rule down the side, acid opening
   mark, his own name signed at the foot */
.tp-moving__words{
  max-width:860px;margin:clamp(28px,4vw,54px) auto 0;
  padding-left:clamp(18px,3.4vw,40px);
  border-left:3px solid var(--tp-acid);
}
.tp-moving__words p{
  margin:0 0 1.4em;color:var(--tp-paper);opacity:.88;
  font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.82;
}
.tp-moving__words p:last-child{margin-bottom:0}
.tp-moving__words em{color:var(--tp-paper);opacity:.95}
.tp-moving__words strong{color:var(--tp-acid);font-weight:700}
.tp-moving__words--open{position:relative}
.tp-moving__words--open::before{
  content:"\201C";position:absolute;left:clamp(-16px,-1.8vw,-8px);top:-.44em;
  font-family:var(--tp-font-display);font-size:clamp(3.4rem,8vw,6rem);line-height:1;
  color:var(--tp-acid);pointer-events:none;
}
.tp-moving__words .tp-moving__sign{
  margin:clamp(24px,3.4vw,38px) 0 0;
  font-family:var(--tp-font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tp-acid);opacity:1;
}
.tp-moving__pull{margin:clamp(30px,4.5vw,58px) 0;max-width:820px}
.tp-moving__pullquote{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.1;margin:0}
.tp-moving__cite{
  font-family:var(--tp-font-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tp-muted);margin:18px 0 0;
}