/* Stop OTA Tyranny — pamphlet stylesheet
   Two voices: the pamphlet (League Gothic / Caslon / Courier on ink and bone)
   and the platform (system-ui on rounded white cards). The platform is the intruder. */

:root {
  --ink: #0c0b0a;
  --bone: #ebe3d0;
  --red: #d9291c;
  --gilt: #a9812a;
  --parch: #e3d4ab;
  --pool: #1f8fa3;

  --display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --text: "Libre Caslon Text", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --black: "UnifrakturCook", "Libre Caslon Text", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gut: clamp(20px, 5vw, 72px);
  --slam: cubic-bezier(.2, 1.5, .4, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--text); }
img, video { display: block; max-width: 100%; }
p, h1, h2, dl, dd, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.paper :focus-visible, .join :focus-visible { outline-color: var(--ink); }

.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.hit, .hit-xl, .open__lines, .flip__word, .join__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .86; letter-spacing: -.005em;
  text-wrap: balance;
}
.hit--m   { font-size: clamp(2.6rem, 8vw, 6.5rem); }
.hit--l   { font-size: clamp(3.4rem, 11.5vw, 10.5rem); }
.hit--xl  { font-size: clamp(4rem, 15vw, 14rem); }
.hit--xxl { font-size: clamp(6rem, 30vw, 28rem); line-height: .8; }
.is-red { color: var(--red); }
.is-dim { opacity: .38; }

.quiet {
  font-size: clamp(1.1rem, 1.05rem + .7vw, 1.6rem); line-height: 1.5; max-width: 34em;
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.quiet sup a { text-decoration: none; color: var(--red); }

.textlink {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.textlink:hover { color: var(--red); }

/* reveal: big lines slam, quiet lines surface */
.js .hit { opacity: 0; transform: scale(1.07); transform-origin: left center; transition: opacity .05s linear, transform .32s var(--slam); }
.js .hit.in { opacity: 1; transform: none; }
.js .hit.is-dim.in { opacity: .38; }
.js .quiet, .js .thesis { opacity: 0; transform: translateY(10px); transition: opacity .9s ease .2s, transform .9s ease .2s; }
.js .quiet.in, .js .thesis.in { opacity: 1; transform: none; }

/* ---------- opening ---------- */
.open {
  min-height: 100svh; padding: var(--gut); display: grid; grid-template-rows: auto 1fr auto; gap: 2rem;
}
.imprint { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.imprint span { color: var(--red); margin: 0 .4em; }
.open__lines { align-self: center; font-size: 21vw; }
@media (min-width: 761px) { .open__lines { font-size: min(11.6vw, 27svh); } .open__lines span { white-space: nowrap; } }
.open__lines span { display: block; }
.open__b { color: var(--red); }
.open__c { font-style: italic; font-size: clamp(1.05rem, 1rem + .6vw, 1.5rem); margin-top: -1rem; align-self: start; grid-row: 2; align-self: end; }
.open { grid-template-rows: auto 1fr auto auto; }
.open__c { grid-row: 3; }
.open__foot { grid-row: 4; display: flex; justify-content: space-between; align-items: end; }
.open__scroll { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.open__scroll::after { content: ""; display: inline-block; width: 1px; height: 2.2em; background: currentColor; margin-left: .8em; vertical-align: middle; animation: drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.open__a, .open__b, .open__c, .open__foot { opacity: 0; }
.open__a { animation: slam .34s var(--slam) .35s forwards; }
.open__b { animation: slam .34s var(--slam) 1.75s forwards; }
.open__c { animation: surface 1.2s ease 3s forwards; }
.open__foot { animation: surface 1.2s ease 3.8s forwards; }
@keyframes slam { from { opacity: 0; transform: scale(1.09); } 12% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes surface { from { opacity: 0; } to { opacity: 1; } }
.open__a, .open__b { transform-origin: left center; }

/* ---------- act 1: ransom ---------- */
.ransom { height: 360vh; position: relative; }
.ransom__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ransom__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: clamp(0, calc(var(--p, 0) * 9), 1);
  filter: saturate(calc(1 - var(--p, 0) * .85)) brightness(calc(1 - var(--p, 0) * .5)) contrast(calc(1 + var(--p, 0) * .25));
  transform: scale(calc(1.08 - var(--p, 0) * .08));
}
.ransom__stamps { position: absolute; inset: 0; transition: opacity .3s; }
.stamp {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  font-family: var(--display); text-transform: uppercase; line-height: .9; white-space: nowrap;
  font-size: clamp(2.2rem, 7.4vw, 7rem); padding: .12em .22em .06em;
  transform: rotate(calc(var(--r) * 1deg)) scale(2.4); opacity: 0;
  box-shadow: 0 14px 40px rgb(0 0 0 / .45);
}
.stamp.on { opacity: 1; transform: rotate(calc(var(--r) * 1deg)) scale(1); transition: transform .16s cubic-bezier(.3, 0, .2, 1), opacity .04s; }
.stamp--red  { background: var(--red); color: var(--bone); }
.stamp--bone { background: var(--bone); color: var(--ink); }
.stamp--ink  { background: var(--ink); color: var(--red); }
.stamp--ring { color: var(--red); border: .07em solid var(--red); outline: .025em solid var(--red); outline-offset: .05em; background: rgb(12 11 10 / .55); box-shadow: none; }
.ransom__verdict {
  position: absolute; inset: 0; display: grid; align-content: center; gap: .1em; padding: var(--gut);
  background: rgb(12 11 10 / .82); opacity: 0; transition: opacity .25s;
}
.hit-xl { font-size: clamp(3.6rem, 13.5vw, 13rem); transform: scale(1.07); transform-origin: left center; opacity: 0; }
.ransom.verdict .ransom__verdict { opacity: 1; }
.ransom.verdict .hit-xl { opacity: 1; transform: none; transition: transform .32s var(--slam), opacity .05s; }
.ransom.verdict .hit-xl + .hit-xl { transition-delay: .5s; }

/* ---------- beats ---------- */
.beat {
  min-height: 100svh; padding: 14vh var(--gut); display: grid; align-content: center; gap: clamp(1.2rem, 3vh, 2.4rem);
}
.beat--solo { place-content: center; text-align: center; }
.beat--solo .hit { transform-origin: center; }
.beat--trap { gap: .6rem; }
.beat--pivot { gap: clamp(1rem, 2.5vh, 2rem); min-height: 120svh; }
.thesis { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1.12; max-width: 17em; text-wrap: balance; }
.thesis em { color: var(--red); }

/* ---------- the tithe ---------- */
.tithe { padding: 12vh var(--gut) 6vh; display: grid; justify-items: center; gap: 8vh; }
.tithe__why { justify-self: stretch; text-align: center; transform-origin: center !important; }

.receipt {
  position: relative; width: min(100%, 30rem); padding: 2.6rem 2.2rem 3.4rem; color: #2a1c10;
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(255 250 230 / .55), transparent 60%),
    radial-gradient(90% 60% at 80% 100%, rgb(120 80 30 / .22), transparent 70%),
    var(--parch);
  border: 1px solid #b89c5e; box-shadow: inset 0 0 0 6px var(--parch), inset 0 0 0 7px var(--gilt), inset 0 0 0 10px var(--parch), inset 0 0 0 11px rgb(169 129 42 / .5), 0 30px 80px rgb(0 0 0 / .6);
  transform: rotate(-1.4deg);
}
.receipt__over { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; opacity: .7; }
.receipt__title { font-family: var(--black); font-weight: 700; font-size: clamp(2.3rem, 9vw, 3.4rem); line-height: 1; text-align: center; margin-top: .5rem; color: #1a100a; }
.receipt__rule { text-align: center; color: var(--gilt); font-size: 1.3rem; margin: .3rem 0 1rem; }
.receipt__rows div { display: flex; align-items: baseline; gap: .5rem; padding: .36rem 0; font-size: 1.12rem; }
.receipt__rows dt::after { content: none; }
.receipt__rows div::before { content: ""; order: 2; flex: 1; border-bottom: 1.5px dotted rgb(42 28 16 / .45); transform: translateY(-.25em); }
.receipt__rows dd { order: 3; font-style: italic; }
.receipt .cap {
  font-family: var(--black); font-size: 2.1em; line-height: .7; color: var(--parch); background: var(--red);
  padding: .16em .14em .08em; margin-right: .1em; border: 2px solid var(--gilt); display: inline-block; vertical-align: -.12em;
}
.receipt__theirs { margin-top: .8rem; padding-top: .9rem !important; border-top: 2px solid #2a1c10; font-weight: 700; color: var(--red); font-size: 1.3rem !important; }
.receipt__theirs dd { font-style: normal !important; text-transform: uppercase; letter-spacing: .06em; }
.receipt__theirs::before { border-color: var(--red) !important; }
.receipt__foot { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 1.4rem; opacity: .7; }
.receipt__seal {
  position: absolute; right: -1.2rem; bottom: -1.4rem; width: 5.6rem; height: 5.6rem; border-radius: 50%; display: grid; place-content: center;
  font-family: var(--display); font-size: 2rem; color: #f3c9c0; transform: rotate(14deg);
  background: radial-gradient(circle at 35% 30%, #e8473a, #9d160d 70%); box-shadow: inset 0 0 0 5px rgb(0 0 0 / .13), 0 6px 14px rgb(0 0 0 / .45);
}
.receipt__seal small { font-size: .55em; }

/* ---------- pivot flip ---------- */
.flip { height: 220vh; }
.flip__stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.flip__word { font-size: clamp(5rem, 23vw, 22rem); color: var(--red); text-align: center; }
.flip__paper {
  position: absolute; inset: 0; display: grid; place-items: center; background: var(--bone);
  clip-path: circle(calc(var(--p, 0) * 135%) at 50% 54%);
}
.flip__paper .flip__word { color: var(--ink); }

/* ---------- paper half ---------- */
.paper { background: var(--bone); color: var(--ink); }
.ask, .road { padding: 16vh var(--gut); display: grid; gap: clamp(1rem, 2.5vh, 2rem); }
.ask .quiet, .road .quiet { margin-top: 1.5rem; }

/* demo: the platform voice */
.demo { font-family: var(--ui); margin: 5vh 0 2vh; max-width: 62rem; }
.demo__search, .demo__chat { background: #fff; border-radius: 28px; box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 18px 50px rgb(40 30 10 / .16); }
.demo__search { display: grid; grid-template-columns: 2fr 1fr 1fr auto; align-items: center; padding: .5rem .5rem .5rem 0; border-radius: 999px; transition: opacity .35s, transform .45s cubic-bezier(.6, 0, .2, 1); }
.demo__search div { padding: .55rem 1.6rem; border-right: 1px solid #e6e6e6; min-width: 0; }
.demo__search div:nth-of-type(3) { border: 0; }
.demo__search small { display: block; font-size: .72rem; font-weight: 700; color: #222; }
.demo__search span { font-size: .92rem; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.demo__search i { width: 3rem; height: 3rem; border-radius: 50%; background: #c9c4bb; display: block; }
.demo__chat { display: none; padding: 1.1rem 1.4rem 1.4rem; }
.demo[data-state="search"] .demo__search { opacity: 1; }
.demo:not([data-state="search"]) .demo__search { display: none; }
.demo:not([data-state="search"]) .demo__chat { display: block; animation: morph .45s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes morph { from { border-radius: 999px; transform: scaleY(.55); } }
.demo__prompt { font-size: clamp(1.05rem, 1rem + .6vw, 1.4rem); line-height: 1.4; color: #111; min-height: 1.4em; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: #111; margin-left: 2px; vertical-align: -.18em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo__reply { display: none; font-size: .98rem; color: #555; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ececec; }
.demo__cards { display: none; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1rem; }
.demo__cards li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; align-items: baseline; }
.demo__cards img { grid-column: 1 / -1; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; margin-bottom: .45rem; }
.demo__cards b { font-size: .95rem; color: #111; }
.demo__cards span { font-size: .85rem; color: #666; grid-row: 3; }
.demo__cards em { grid-row: 2 / 4; grid-column: 2; align-self: center; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--pool); padding: .35em .7em; border-radius: 999px; white-space: nowrap; }
.demo[data-state="answered"] .demo__reply { display: block; animation: surface .4s ease both; }
.demo[data-state="answered"] .demo__cards { display: grid; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.demo[data-state="answered"] .caret { display: none; }
.demo[data-state="answered"] .demo__cards li { animation: rise .5s cubic-bezier(.2, .9, .3, 1) .15s both; }
.demo[data-state="answered"] .demo__cards li:nth-child(2) { animation-delay: .3s; }
.demo[data-state="answered"] .demo__cards li:nth-child(3) { animation-delay: .45s; }
.demo__note { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-top: .9rem; }
.demo__note button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; border-bottom: 1px solid; padding: 0; color: inherit; cursor: pointer; }

/* road */
.road__print { margin: 4vh calc(var(--gut) * -1); }
.road__print img { width: 100%; height: auto; mix-blend-mode: multiply; }

/* the rip */
.rip { position: relative; display: grid; place-items: center; margin-top: 12vh; padding: 4vh 0 8vh; min-height: 34rem; }
.rip__under { position: absolute; font-family: var(--display); text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 6rem); line-height: .9; text-align: center; }
.rip__under b { color: var(--red); font-weight: 400; display: block; }
.rip__half { grid-area: 1 / 1; will-change: transform; }
.rip__half .receipt { transform: none; box-shadow: inset 0 0 0 6px var(--parch), inset 0 0 0 7px var(--gilt), inset 0 0 0 10px var(--parch), inset 0 0 0 11px rgb(169 129 42 / .5), 0 18px 40px rgb(40 30 10 / .28); }
.rip__half--l { transform: translateX(calc(var(--t, 0) * -34vw)) rotate(calc(var(--t, 0) * -11deg)); transform-origin: 30% 100%; }
.rip__half--r { transform: translateX(calc(var(--t, 0) * 34vw)) rotate(calc(var(--t, 0) * 9deg)); transform-origin: 70% 100%; }

/* ---------- film ---------- */
.film { padding: 14vh var(--gut); display: grid; gap: 1.4rem; justify-items: center; }
.film__label { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.film__label span { color: var(--red); margin: 0 .4em; }
.film__frame { width: min(100%, 78rem, 135svh); aspect-ratio: 16 / 9; background: #000; border: 1px solid rgb(235 227 208 / .18); }
.film__frame video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- join ---------- */
.join { background: var(--red); color: var(--ink); padding: 16vh var(--gut) 14vh; display: grid; gap: 1.6rem; justify-items: start; }
.join__over { font-family: var(--mono); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.join__title { font-size: clamp(5rem, 22vw, 21rem); color: var(--bone); margin-left: -.03em; }
.join__body { font-size: clamp(1.15rem, 1.05rem + .8vw, 1.7rem); line-height: 1.45; max-width: 30em; }
.join__cta, .join__go {
  font-family: var(--display); text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; letter-spacing: .01em;
  background: var(--ink); color: var(--bone); border: 0; padding: .5em .9em .42em; cursor: pointer;
  box-shadow: 8px 8px 0 rgb(12 11 10 / .28); transition: transform .12s, box-shadow .12s;
}
.join__cta:hover, .join__go:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 rgb(12 11 10 / .28); }
.join__cta:active, .join__go:active { transform: translate(5px, 5px); box-shadow: 2px 2px 0 rgb(12 11 10 / .28); }
.join__panel { width: min(100%, 44rem); background: var(--bone); padding: clamp(1.4rem, 4vw, 2.4rem); box-shadow: 10px 10px 0 var(--ink); animation: slam .3s var(--slam); }
.join__by { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.4rem; }
.join__by svg { width: 2.2rem; height: 2.2rem; color: var(--gilt); }
.join__pitch { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.45; margin-bottom: 1.6rem; max-width: 26em; }
.join__go { display: inline-block; text-decoration: none; background: var(--red) !important; margin: 0 1.6rem 1rem 0; }

/* ---------- footer ---------- */
.foot { padding: 8vh var(--gut) 14vh; display: grid; gap: 1rem; font-size: .82rem; line-height: 1.55; color: rgb(235 227 208 / .5); max-width: 62rem; }
.foot__sig { font-family: var(--display); font-size: 2rem; color: var(--bone); letter-spacing: .02em; }

/* ---------- the tollbooth (platform voice) ---------- */
.toll {
  position: fixed; z-index: 40; right: 22px; bottom: 22px; width: 268px; padding: 18px 18px 14px;
  font-family: var(--ui); color: #222; background: #fff; border-radius: 16px; box-shadow: 0 6px 16px rgb(0 0 0 / .18), 0 24px 60px rgb(0 0 0 / .4);
  transform: translateY(130%); transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}
.toll.on { transform: none; }
.toll.shoved { transform: translate(150%, -30%) rotate(24deg); transition: transform .38s cubic-bezier(.5, 0, .9, .4); }
.toll__eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #777; }
.toll__rate { font-size: .95rem; color: #555; margin-top: 2px; }
.toll__rate b { font-size: 1.5rem; color: #111; font-weight: 650; }
.toll__rows { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ebebeb; font-size: .88rem; }
.toll__rows div { display: flex; justify-content: space-between; padding: 3px 0; }
.toll__rows dt span { color: #999; }
.toll__rows div:nth-child(2) dd { color: var(--red); font-weight: 600; }
.toll__you { font-weight: 700; border-top: 1px solid #ebebeb; margin-top: 6px; padding-top: 8px !important; }
.toll__meter { margin-top: 12px; padding: 10px 12px; background: var(--ink); color: var(--bone); border-radius: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.toll__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
.toll__total b { font-family: var(--display); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--red); letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .stamp { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); font-size: clamp(2.2rem, 12vw, 4rem); }
  .ransom__img { object-position: 50% 50%; }
  .toll { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 0; border-radius: 12px; background: var(--ink); box-shadow: 0 0 0 1px rgb(235 227 208 / .22), 0 16px 40px rgb(0 0 0 / .6); }
  .toll__eyebrow, .toll__rate, .toll__rows { display: none; }
  .toll__meter { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .toll__total { gap: .7rem; margin: 0; }
  .toll__total b { font-size: 1.7rem; }
  .toll.shoved { transform: translate(120%, -60%) rotate(18deg); }
  .demo__search { grid-template-columns: 1fr auto; }
  .demo__search div:nth-of-type(n+2) { display: none; }
  .demo__search div { border: 0; }
  .demo__cards { grid-template-columns: 1fr; }
  .demo__cards li:nth-child(3) { display: none; }
  .receipt { padding: 2.2rem 1.5rem 3rem; }
  .receipt__seal { right: -.4rem; }
  .rip { min-height: 30rem; overflow: hidden; margin-inline: calc(var(--gut) * -1); }
  .foot { padding-bottom: 20vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .ransom, .flip { height: auto; }
  .ransom__stage, .flip__stage { position: relative; }
}