/* random.petruha.ge — two inks (black + fluorescent pink) on paper, like a riso flyer. */
@font-face { font-family: 'Pirata One'; src: url(/f/pirata.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Anton; src: url(/f/anton.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(/f/mono.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(/f/mono-bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --paper: #f2ece0;
  --ink: #141013;
  --pink: #ff3d7f;
  --pink-deep: #c9285e;
  --mono: 'Courier Prime', ui-monospace, Menlo, Consolas, monospace;
  --display: Anton, Impact, 'Arial Narrow', sans-serif;
  --gothic: 'Pirata One', 'Old English Text MT', serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .06 0 0 0 0 .07 .9 0 0 0 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle, var(--ink) 0 28%, transparent 31%);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 1rem/1.5 var(--mono);
  overflow-x: hidden;
}
::selection { background: var(--pink); color: var(--ink); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--pink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px dashed var(--pink); outline-offset: 4px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- ticker ---- */
.ticker {
  background: var(--ink);
  color: var(--pink);
  border-bottom: 3px solid var(--pink);
  overflow: hidden;
  white-space: nowrap;
  font: 700 .78rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ticker__track { display: inline-block; padding: .62rem 0; animation: tick 70s linear infinite; }
.ticker__track span { padding-right: 2.2em; }
.ticker__track span::before { content: '✹'; margin-right: 2.2em; color: var(--paper); }
@keyframes tick { to { transform: translate3d(-50%, 0, 0); } }

/* ---- layout ---- */
.stage {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 3.2rem) clamp(1rem, 4vw, 3.2rem) 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'mast' 'beast' 'act' 'stats' 'terms' 'evidence' 'foot';
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (min-width: 940px) {
  .stage {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: 'mast beast' 'act beast' 'terms beast' 'stats stats' 'evidence evidence' 'foot foot';
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .beast { position: sticky; top: 1rem; align-self: start; }
}
.mast { grid-area: mast; }
.beast { grid-area: beast; }
.act { grid-area: act; }
.stats { grid-area: stats; }
.terms { grid-area: terms; }
.evidence { grid-area: evidence; }
.foot { grid-area: foot; }

/* ---- masthead ---- */
.word {
  margin: 0;
  font: 400 clamp(6rem, 21vw, 14.5rem)/.74 var(--gothic);
  letter-spacing: -.015em;
  text-shadow: .05em .032em 0 var(--pink);
}
.word span { color: var(--pink); text-shadow: .05em .032em 0 var(--ink); }
.sub {
  margin: 1.4rem 0 0;
  font: 700 .82rem/1.3 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.sub::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .7em; background: var(--pink); vertical-align: -.05em; animation: rec 1.6s steps(1) infinite; }
.sub em { font-style: normal; color: var(--pink); }
@keyframes rec { 50% { background: var(--ink); } }

/* ---- the pineapple ---- */
.beast { margin: 0; position: relative; }
.pine { position: relative; width: min(100%, 440px, 44vh); margin: 0 auto; aspect-ratio: 560 / 1040; }
.pine img { position: relative; display: block; width: 100%; height: 100%; mix-blend-mode: multiply; }
/* eyeball on the (cropped, 560x1040) hero: x 172..400, y 626..734. The sclera sits under the
   multiplied print so the halo dots don't show through it; the pupil rides on top, clipped to the lens. */
.pine::before { content: ''; position: absolute; left: 28.6%; top: 59.1%; width: 45.3%; height: 12.8%; border-radius: 50%; background: #fbf8f1; }
.halo {
  position: absolute;
  inset: 0 -4% 4%;
  background: radial-gradient(circle, var(--pink) 0 36%, transparent 39%) 0 0 / 11px 11px;
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%);
  mask: radial-gradient(closest-side, #000 18%, transparent 100%);
  opacity: .8;
}
.eye {
  position: absolute;
  left: 30.71%;
  top: 60.19%;
  width: 40.89%;
  height: 10.48%;
  clip-path: url(#lens);
}
.iris {
  position: absolute;
  left: 29%;
  top: 4%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background:
    radial-gradient(circle, transparent 0 55%, rgba(20, 16, 19, .55) 56% 60%, transparent 61%),
    repeating-conic-gradient(var(--pink) 0 7deg, var(--pink-deep) 7deg 12deg);
  transition: transform .09s ease-out;
  will-change: transform;
}
.iris i {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.iris::after { content: ''; position: absolute; left: 58%; top: 16%; width: 18%; height: 18%; border-radius: 50%; background: #fff; }
.eye.wide .iris i { transform: scale(1.45); }
.eye.tiny .iris i { transform: scale(.55); }
.lid {
  position: absolute;
  inset: -4%;
  background: var(--pink-deep) var(--grain);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.eye.blink .lid { animation: blink .17s ease-in-out; }
@keyframes blink { 50% { transform: scaleY(1); } }

.stamp {
  position: absolute;
  top: 9%;
  right: 3%;
  padding: .45rem .8rem .35rem;
  border: 5px double var(--pink);
  color: var(--pink);
  font: 400 clamp(1.3rem, 3vw, 1.9rem)/.95 var(--display);
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-13deg);
  mix-blend-mode: multiply;
  -webkit-mask: var(--grain), linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: var(--grain) exclude, linear-gradient(#000 0 0);
}
.beast figcaption {
  margin-top: .6rem;
  text-align: center;
  font-size: .78rem;
  font-style: italic;
  letter-spacing: .05em;
}

/* ---- the button ---- */
.warn {
  margin: 0 0 1.1rem;
  padding: .45rem .6rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 14px, var(--pink) 14px 28px);
  color: var(--paper);
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 0 3px var(--ink), 0 0 3px var(--ink);
}
.big {
  --lift: 0px;
  display: block;
  width: 100%;
  padding: .16em .16em .1em;
  border: 0;
  background: var(--ink) var(--grain);
  color: var(--pink);
  font: 400 clamp(3.4rem, 11.5vw, 8.6rem)/.84 var(--display);
  letter-spacing: .005em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  box-shadow: calc(.085em + var(--lift)) calc(.085em + var(--lift)) 0 var(--pink), calc(.085em + var(--lift)) calc(.085em + var(--lift)) 0 3px var(--ink);
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  transition: transform .07s, box-shadow .07s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.big span { display: block; white-space: nowrap; }
.big span + span { text-align: right; }
.big i { display: inline-block; font-style: normal; transition: transform .07s; }
.big:hover { --lift: 5px; }
.big:active { --lift: -.085em; }
.big[aria-busy='true'] { cursor: progress; }
.big.on { background: var(--pink) var(--grain); color: var(--ink); box-shadow: .085em .085em 0 var(--ink); }
.big.on span:first-child::before { content: ''; display: inline-block; width: .42em; height: .42em; margin-right: .12em; border-radius: 50%; background: var(--ink); vertical-align: .12em; animation: rec 1.1s steps(1) infinite; }
.big--small { font-size: clamp(2rem, 6vw, 3.4rem); text-align: center; margin-top: 2rem; }

.status { min-height: 3em; margin: 1.6rem 0 0; font-weight: 700; font-size: 1.05rem; }
.status b { background: var(--pink); padding: 0 .25em; }

/* ---- control panel ---- */
.panel { margin-top: 1rem; padding: 1.2rem; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--paper); }
.panel h2 { margin: 0 0 1rem; font: 400 2rem/1 var(--display); text-transform: uppercase; }
.panel h2 small, .rule small, .label small { font: 400 .78rem var(--mono); text-transform: none; letter-spacing: 0; opacity: .7; }
.label { margin: 1.2rem 0 .45rem; font: 700 .78rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); border: 3px solid var(--ink); gap: 3px; background: var(--ink); }
.seg button {
  padding: .7rem .5rem .6rem;
  border: 0;
  background: var(--paper);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.seg button small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }
.seg button:hover { background: #fff; }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--pink); }
.stop { margin-top: 1.4rem; padding: 0; border: 0; background: none; font-size: .85rem; text-decoration: underline wavy var(--pink); text-underline-offset: 4px; cursor: pointer; }
.stop:hover { background: var(--pink); }

/* ---- section rules ---- */
.rule {
  margin: 0 0 1rem;
  padding-top: .7rem;
  border-top: 7px solid var(--ink);
  font: 400 clamp(2rem, 5vw, 3.2rem)/1 var(--display);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

/* ---- terms ---- */
.terms ol { margin: 0; padding: 0; list-style: none; counter-reset: term; }
.terms li { counter-increment: term; display: grid; grid-template-columns: 3.2rem 1fr; align-items: baseline; padding: .55rem 0; border-bottom: 2px dashed var(--ink); }
.terms li::before { content: counter(term, decimal-leading-zero); font: 400 1.7rem/1 var(--display); color: var(--pink); -webkit-text-stroke: 1px var(--ink); }

/* ---- numbers ---- */
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); border: 3px solid var(--ink); gap: 3px; background: var(--ink); }
.cell { padding: 1rem 1.1rem .9rem; background: var(--paper) var(--grain); }
.cell:nth-child(2) { background: var(--pink) var(--grain); }
.num { display: block; font: 400 clamp(3.6rem, 10vw, 7rem)/.9 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cell span { display: block; margin-top: .4rem; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.mass, .top { margin-top: 1.4rem; }
.mass p:last-child { margin: 0; font-size: 1.1rem; }
.mass q { quotes: '“' '”'; font-weight: 700; background: var(--pink); padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.top ol { margin: 0; padding-left: 1.6rem; }
.top li { padding: .2rem 0; }
.top li::marker { font-family: var(--display); color: var(--pink); }
.top li em { font-style: normal; font-weight: 700; }
.next { margin: 1.4rem 0 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.redact { background: var(--ink); color: var(--ink); padding: 0 .3em; animation: flicker 3.2s steps(1) infinite; }
@keyframes flicker { 92% { color: var(--pink); } 96% { color: var(--ink); } }

/* ---- evidence ---- */
.evidence ol { margin: 0; padding: 0; list-style: none; }
.evidence li { border-bottom: 2px solid var(--ink); }
.evidence li button {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: baseline;
  width: 100%;
  padding: .75rem .2rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.evidence li button:hover { background: var(--pink); }
.evidence .no { font: 400 1.5rem/1 var(--display); color: var(--pink); -webkit-text-stroke: 1px var(--ink); }
.evidence li button:hover .no { color: var(--ink); }
.evidence .msg b { display: block; }
.evidence .msg span { display: block; font-size: .88rem; white-space: pre-line; }
.evidence .when { font-size: .75rem; white-space: pre; text-align: right; }
.evidence .fresh { animation: fresh 1.2s ease-out; }
@keyframes fresh { from { background: var(--pink); } }

/* ---- footer ---- */
.foot { border-top: 7px solid var(--ink); padding-top: 1rem; font-size: .85rem; columns: 2 18rem; column-gap: 2.4rem; }
.foot p { margin: 0 0 .8rem; break-inside: avoid; }
.foot code { background: var(--ink); color: var(--pink); padding: 0 .3em; font-size: .9em; }
.made { font-style: italic; }

/* ---- exhibit (opened from a notification) ---- */
.exhibit {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: var(--pink) var(--grain);
}
.exhibit[hidden] { display: none; }
.exhibit::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--dots) 0 0 / 12px 12px;
  -webkit-mask: radial-gradient(circle at 100% 0, #000, transparent 55%);
  mask: radial-gradient(circle at 100% 0, #000, transparent 55%);
  opacity: .35;
  pointer-events: none;
}
.exhibit__card { position: relative; width: min(100%, 60rem); animation: slam .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes slam { from { transform: scale(1.08) rotate(-1.5deg); opacity: 0; } }
.exhibit__tag { margin: 0; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; }
.exhibit h2 { margin: .5rem 0 .9rem; font: 400 clamp(2.8rem, 9vw, 7.5rem)/.88 var(--display); text-transform: uppercase; overflow-wrap: anywhere; text-shadow: .04em .03em 0 var(--paper); }
.exhibit__body { margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 700; white-space: pre-line; overflow-wrap: anywhere; }
.exhibit__pressed { margin: 1.2rem 0 0; font-size: 1.1rem; }
.exhibit__pressed b { background: var(--ink); color: var(--pink); padding: 0 .3em; }
.exhibit__reveal { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 3px solid var(--ink); font-size: clamp(1rem, 2.2vw, 1.25rem); white-space: pre-line; min-height: 3em; }
.exhibit__reveal.typing::after { content: '▋'; animation: rec .7s steps(1) infinite; }
.exhibit__count { margin: 1rem 0 0; font-weight: 700; }
.exhibit__count b { font: 400 1.6em/1 var(--display); }
.exhibit__links a { font-weight: 700; font-size: 1.1rem; }

/* one pink frame when the torture begins */
.flash::after { content: ''; position: fixed; inset: 0; z-index: 20; background: var(--pink); pointer-events: none; animation: flash .45s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 939px) {
  .pine { width: min(58%, 300px); }
  .stamp { top: 6%; right: 2%; font-size: 1.15rem; }
  .big { font-size: min(17.5vw, 8.6rem); }
  .word { font-size: min(25vw, 11rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}