/*
  The press room: motion layer for abhnv.in.

  Loaded after styles.css and interactive.css. Everything here is additive:
  remove the file and the paper still reads. Every moving part stops for
  prefers-reduced-motion, and nothing here is needed to reach content.

    1. Tokens and registered properties
    2. Heading registration (CMY misregistration that settles on entry)
    3. Declassified (the hero name comes out from under redaction)
    4. Halftone develop (images come up as a dot screen)
    5. EXTRA: the spinning front page
    6. The five products, fanned like papers on a desk
    7. Hold-to-stamp slip and the desk receipt
    8. Press dock (thumb-reach progress, contents, sound, menu)
    9. Touch blots
   10. Reduced motion
*/

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */

@property --pr-dot {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --pr-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

:root {
  --pr-cyan: rgba(0, 150, 214, 0.62);
  --pr-magenta: rgba(214, 0, 112, 0.55);
  --pr-yellow: rgba(242, 183, 5, 0.7);
  --pr-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pr-dock-h: 3.35rem;
  --pr-dock-gap: max(0.75rem, env(safe-area-inset-bottom));
}

/* Sticky stages need a viewport scroller. `hidden` on both html and body
   turns body into its own scroll container and quietly breaks sticky;
   `clip` trims the same overflow without creating one. */
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip !important;
  }
}

/* ------------------------------------------------------------------ */
/* 2. Heading registration                                             */
/* ------------------------------------------------------------------ */

.pr-reg {
  --reg: 0;
  text-shadow:
    calc(var(--reg) * -0.09em) calc(var(--reg) * 0.02em) 0 var(--pr-cyan),
    calc(var(--reg) * 0.08em) calc(var(--reg) * 0.035em) 0 var(--pr-magenta),
    calc(var(--reg) * 0.02em) calc(var(--reg) * -0.06em) 0 var(--pr-yellow);
}

.pr-w {
  display: inline-block;
  vertical-align: top;
}

.pr-wi {
  display: inline-block;
}

html.pr-motion .pr-set .pr-w {
  /* Clip only the bottom edge so words rise out of the baseline while the
     misregistered colour plates can still spill left, right and up. */
  clip-path: inset(-0.6em -0.4em -0.14em -0.4em);
}

html.pr-motion .pr-set .pr-wi {
  transform: translate3d(0, 108%, 0) rotate(3deg);
  transform-origin: 0 100%;
  transition: transform 900ms var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

html.pr-motion .pr-set.is-set .pr-wi {
  transform: none;
}

html.pr-motion .pr-set.is-done .pr-w {
  clip-path: none;
}

/* ------------------------------------------------------------------ */
/* 3. Paper-cut titles: every letter is a cut-out piece of paper       */
/* ------------------------------------------------------------------ */

/* app.js presses split titles in on load; here the letters are dropped
   in as cut paper instead, so that entrance is switched off. */
html.pr-motion body .split-title.pr-cut .hero-letter {
  animation: none !important;
  opacity: 0 !important;
  transform: none !important;
}

.split-title.pr-cut .hero-letter {
  position: relative;
  text-shadow:
    0.035em 0.05em 0 rgba(26, 25, 22, 0.16),
    0.012em 0.018em 0 rgba(255, 250, 238, 0.9);
  transform-origin: 50% 80%;
  transition: translate 360ms var(--pr-spring), rotate 360ms var(--pr-spring), text-shadow 300ms ease;
}

html.pr-motion body .split-title.pr-cut.is-in .hero-letter {
  opacity: 1 !important;
  rotate: var(--rest, 0deg);
  animation: prPaperDrop 820ms cubic-bezier(0.2, 1.3, 0.35, 1) both !important;
  animation-delay: calc(var(--k, 0) * 62ms) !important;
}

@keyframes prPaperDrop {
  0% {
    opacity: 0;
    translate: var(--fx, 0) -1.4em;
    rotate: var(--fr, -30deg);
    text-shadow: 0.2em 0.35em 0.15em rgba(26, 25, 22, 0.12), 0 0 0 transparent;
  }
  18% { opacity: 1; }
  100% {
    opacity: 1;
    translate: 0 0;
    rotate: var(--rest, 0deg);
  }
}

html.pr-motion body .split-title.pr-cut.is-in .hero-letter.is-lifted {
  translate: 0 -0.08em;
  rotate: calc(var(--rest, 0deg) * -3);
  text-shadow:
    0.08em 0.14em 0.04em rgba(26, 25, 22, 0.22),
    0.012em 0.018em 0 rgba(255, 250, 238, 0.9);
}

/* A cut line and a pair of scissors ahead of the name */
.pr-cutline {
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  bottom: -0.12em;
  height: 0;
  border-top: 2px dashed rgba(26, 25, 22, 0.45);
  clip-path: inset(0 calc(100% - var(--cut, 0%)) 0 0);
  pointer-events: none;
}

.pr-scissors {
  position: absolute;
  bottom: -0.12em;
  left: var(--cut, 0%);
  width: 0.34em;
  height: 0.34em;
  translate: -50% -50%;
  color: var(--red);
  pointer-events: none;
}

.pr-scissors svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pr-scissors .blade-a,
.pr-scissors .blade-b {
  transform-origin: 50% 50%;
  animation: prSnip 180ms ease-in-out infinite alternate;
}

.pr-scissors .blade-b {
  animation-direction: alternate-reverse;
}

@keyframes prSnip {
  from { rotate: -10deg; }
  to { rotate: 10deg; }
}

/* ------------------------------------------------------------------ */
/* 3b. Scissor-cut reveals for cards                                  */
/* ------------------------------------------------------------------ */

html.pr-motion .pr-cutout {
  position: relative;
}

html.pr-motion .pr-cutout:not(.is-cut) > * {
  opacity: 0;
}

html.pr-motion .pr-cutout:not(.is-cut) {
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
}

html.pr-motion .pr-cutout.is-cut {
  animation: prLift 620ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

/* The lift replaces any older entrance animation on the card (the hero's
   "What I do" cards faded in from opacity 0). Without this they stayed at
   0 and the panel read as an empty box. */
html.pr-motion body .pr-cutout.is-cut {
  opacity: 1 !important;
}

html.pr-motion .pr-cutout.is-cut > * {
  transition: opacity 420ms ease 120ms;
}

@keyframes prLift {
  0% { translate: 0 0.7rem; rotate: var(--lift-r, -1.2deg); filter: drop-shadow(0 0 0 rgba(26, 25, 22, 0)); }
  60% { translate: 0 -0.25rem; filter: drop-shadow(0 0.9rem 0.8rem rgba(26, 25, 22, 0.2)); }
  100% { translate: 0 0; rotate: 0deg; filter: drop-shadow(0 0 0 rgba(26, 25, 22, 0)); }
}

.pr-cut-svg {
  position: absolute;
  inset: -3px;
  z-index: 3;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: visible;
  pointer-events: none;
}

.pr-cut-svg rect {
  fill: none;
  stroke: rgba(26, 25, 22, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.pr-cut-svg .pr-cut-trace {
  stroke: var(--red);
  stroke-width: 2;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
  animation: prTrace 520ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

.pr-cut-svg.is-done {
  opacity: 0;
  transition: opacity 360ms ease;
}

@keyframes prTrace {
  to { stroke-dashoffset: 0; }
}

.pr-cut-snips {
  position: absolute;
  top: -0.7rem;
  left: 0;
  z-index: 4;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--red);
  pointer-events: none;
  animation: prSnipRun 520ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

@keyframes prSnipRun {
  from { left: -0.6rem; opacity: 1; }
  90% { opacity: 1; }
  to { left: calc(100% - 0.6rem); opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* 4. Halftone develop                                                 */
/* ------------------------------------------------------------------ */

html.pr-motion img.pr-halftone {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 var(--pr-dot), transparent calc(var(--pr-dot) + 0.75px));
  mask-image: radial-gradient(circle at 50% 50%, #000 var(--pr-dot), transparent calc(var(--pr-dot) + 0.75px));
  -webkit-mask-size: 7px 7px;
  mask-size: 7px 7px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  --pr-dot: 0px;
  transition: --pr-dot 1100ms cubic-bezier(0.45, 0, 0.2, 1);
}

html.pr-motion img.pr-halftone.is-developed {
  --pr-dot: 5.6px;
}

html.pr-motion img.pr-halftone.is-fixed {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ------------------------------------------------------------------ */
/* 5. EXTRA: the spinning front page                                   */
/* ------------------------------------------------------------------ */

.extra-spin {
  position: relative;
  height: 230vh;
  height: 230svh;
  width: 100vw;
  margin: clamp(2rem, 5vw, 4rem) 0 0 calc(50% - 50vw);
  color: var(--paper-light);
  background: #12110f;
  isolation: isolate;
  /* Content reveals here are driven by scroll, not by .reveal */
}

.extra-spin::before,
.extra-spin::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  height: 14px;
  pointer-events: none;
  background: var(--paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14' viewBox='0 0 60 14'%3E%3Cpath d='M0 0h60v6l-4 3-5-4-6 6-4-5-7 7-5-6-4 3-6-5-5 6-5-4-5 5-4-4V0z'/%3E%3C/svg%3E") 0 0 / 60px 14px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14' viewBox='0 0 60 14'%3E%3Cpath d='M0 0h60v6l-4 3-5-4-6 6-4-5-7 7-5-6-4 3-6-5-5 6-5-4-5 5-4-4V0z'/%3E%3C/svg%3E") 0 0 / 60px 14px repeat-x;
}

.extra-spin::before {
  top: -1px;
}

.extra-spin::after {
  bottom: -1px;
  transform: scaleY(-1);
}

.extra-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  /* One fixed cell the size of the stage, so a sheet taller than the screen
     is still centred (and then scaled to fit by --fit) rather than pinned
     to the top of an overgrown row. */
  grid-template: minmax(0, 100%) / minmax(0, 100%);
  place-items: center;
  overflow: hidden;
  perspective: 1600px;
}

.extra-rays {
  position: absolute;
  inset: -60%;
  z-index: -2;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(234, 223, 206, 0.075) 0deg 6deg,
      transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 58%);
  transform: rotate(var(--rays, 0deg));
  will-change: transform;
}

.extra-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 52%, rgba(209, 90, 53, 0.28), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(234, 223, 206, 0.1), transparent 62%);
  opacity: var(--glow, 0.4);
}

.extra-flicker {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%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)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.extra-cue {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  margin: 0;
  width: max-content;
  max-width: 92vw;
  translate: -50% -50%;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.2rem, 13vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(234, 223, 206, 0.34);
  opacity: var(--cue, 1);
  transform: scale(calc(1 + (1 - var(--cue, 1)) * 0.35));
  pointer-events: none;
}

.extra-cue small {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  -webkit-text-stroke: 0;
  color: rgba(234, 223, 206, 0.6);
}

.extra-paper {
  position: relative;
  z-index: 2;
  width: min(88vw, 44rem);
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 250, 238, 0.7), transparent 40%),
    linear-gradient(160deg, #efe5d4, #e1d5c2 55%, #d3c5ae);
  box-shadow:
    0 0 0 1px rgba(26, 25, 22, 0.2),
    0 2.4rem 5rem rgba(0, 0, 0, 0.55),
    0 0.6rem 1.2rem rgba(0, 0, 0, 0.3);
  transform-origin: 50% 50%;
  /* --fit shrinks the sheet on short screens so the whole page, stamp and
     all, stays inside the stage instead of being cut at its edge. */
  transform: rotate(var(--spin, 0deg)) scale(calc(var(--grow, 1) * var(--fit, 1)));
  opacity: var(--paper-o, 1);
  backface-visibility: hidden;
}

.extra-paper::after {
  /* Aged newsprint: a soft light across the sheet and darker edges. (A hard
     fold line used to cross the middle and ran straight through the text.) */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120, 96, 60, 0.12) 100%);
}

.extra-mast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px double var(--ink);
  font-family: var(--mono);
  font-size: clamp(0.5rem, 1.3vw, 0.62rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.extra-mast strong {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.25rem, 4.4vw, 2.3rem);
  letter-spacing: -0.01em;
  line-height: 1;
}

.extra-mast span:last-child {
  justify-self: end;
  padding: 0.2rem 0.45rem;
  color: var(--paper-light);
  background: var(--red);
}

.extra-kicker {
  margin: 0.8rem 0 0.35rem;
  font-family: var(--mono);
  font-size: clamp(0.55rem, 1.5vw, 0.66rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}

.extra-head {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 7.4vw, 4.4rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.extra-deck {
  margin: 0.8rem 0 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.98rem, 2.4vw, 1.28rem);
  line-height: 1.28;
  color: var(--ink-soft);
}

.extra-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0.8rem, 2.4vw, 1.4rem);
  margin-top: 0.9rem;
}

.extra-photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink);
  aspect-ratio: 4 / 4.4;
  background: #2a2723;
}

.extra-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) contrast(1.25) brightness(1.02);
  mix-blend-mode: luminosity;
}

.extra-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26, 25, 22, 0.55) 0.9px, transparent 1.3px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.extra-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.3rem 0.45rem;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-light);
  background: rgba(26, 25, 22, 0.78);
}

.extra-col p {
  margin: 0 0 0.7rem;
  font-size: clamp(0.84rem, 1.9vw, 0.98rem);
  line-height: 1.42;
  color: var(--ink-soft);
}

.extra-col p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.08em 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 3.1em;
  line-height: 0.8;
  color: var(--ink);
}

.extra-ranks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
}

.extra-ranks li {
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.extra-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.9rem;
  min-height: 2.9rem;
  padding: 0 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-light);
  background: var(--ink);
  transition: background 240ms ease, gap 320ms var(--ease);
}

.extra-link:hover,
.extra-link:focus-visible {
  background: var(--red);
}

.extra-link span:last-child {
  transition: transform 320ms var(--ease);
}

.extra-link:hover span:last-child,
.extra-link:focus-visible span:last-child {
  transform: translateX(0.35rem);
}

.extra-stamp {
  position: absolute;
  right: clamp(-1.4rem, -1.6vw, -0.4rem);
  bottom: clamp(3.4rem, 8vw, 4.6rem);
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(6.2rem, 19vw, 9rem);
  aspect-ratio: 1;
  border: 3px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font-family: var(--display);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  line-height: 0.9;
  opacity: 0;
  transform: rotate(-14deg) scale(2.6);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, 0.72) 75%, #000 100%);
  mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, 0.72) 75%, #000 100%);
}

.extra-stamp::before {
  content: "";
  position: absolute;
  inset: 0.32rem;
  border: 1px dashed currentColor;
  border-radius: 50%;
}

.extra-stamp span {
  font-size: clamp(1.45rem, 4.8vw, 2.2rem);
}

.extra-stamp small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(0.46rem, 1.3vw, 0.58rem);
  letter-spacing: 0.14em;
}

.extra-spin.is-stamped .extra-stamp {
  animation: prStampIn 520ms cubic-bezier(0.2, 0.9, 0.25, 1.15) forwards;
}

.extra-spin.is-stamped .extra-paper {
  animation: prPaperJolt 360ms ease-out;
}

@keyframes prStampIn {
  0%   { opacity: 0; transform: rotate(-14deg) scale(2.6); }
  55%  { opacity: 0.95; transform: rotate(-11deg) scale(0.92); }
  100% { opacity: 0.9; transform: rotate(-11deg) scale(1); }
}

@keyframes prPaperJolt {
  0%, 100% { translate: 0 0; }
  30% { translate: 0 5px; }
  60% { translate: 0 -2px; }
}

.extra-meter {
  position: absolute;
  left: 50%;
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  translate: -50% 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(234, 223, 206, 0.62);
  white-space: nowrap;
}

.extra-meter i {
  display: block;
  width: 5.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--red-hot) var(--pr-fill), rgba(234, 223, 206, 0.2) var(--pr-fill));
}

.extra-spin.is-static {
  height: auto;
}

.extra-spin.is-static .extra-stage {
  position: relative;
  height: auto;
  min-height: 0;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.extra-spin.is-static .extra-cue,
.extra-spin.is-static .extra-meter {
  display: none;
}

.extra-spin.is-static .extra-stamp {
  opacity: 0.9;
  transform: rotate(-11deg);
}

@media (max-width: 640px) {
  .extra-spin {
    height: 200svh;
  }

  .extra-paper {
    width: min(92vw, 70svh);
    padding: 0.95rem;
  }

  .extra-cols {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .extra-col p:not(:first-child) {
    display: none;
  }

  .extra-link {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }

  .extra-mast span:first-child {
    display: none;
  }

  .extra-mast {
    grid-template-columns: 1fr auto;
  }

  .extra-stamp {
    right: -0.5rem;
    bottom: 3.6rem;
  }
}

@media (max-height: 640px) and (max-width: 640px) {
  .extra-photo { aspect-ratio: 4 / 3.4; }
  .extra-deck { font-size: 0.9rem; }
}

/* ------------------------------------------------------------------ */
/* 6. The five products, fanned                                        */
/* ------------------------------------------------------------------ */

html.pr-motion body[data-page="index"] .home-work .project-rail {
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

html.pr-motion body[data-page="index"] .home-work .project-card {
  transform-origin: 50% 60%;
  rotate: y var(--fan-ry, 0deg);
  scale: var(--fan-s, 1);
  translate: 0 var(--fan-y, 0px);
  transition: rotate 90ms linear, scale 90ms linear, translate 90ms linear, box-shadow 400ms ease;
}

html.pr-motion body[data-page="index"] .home-work .project-card.is-selected {
  box-shadow: 0 1.8rem 3.2rem rgba(26, 25, 22, 0.24), 0 0 0 1px rgba(26, 25, 22, 0.4);
}

.pr-rail-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
}

@media (min-width: 981px) {
  body[data-page="index"] .home-work .pr-rail-dots {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.pr-rail-dots button {
  position: relative;
  width: 2.2rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pr-rail-dots button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  translate: 0 -50%;
  background: var(--rule);
  transition: background 300ms ease;
}

.pr-rail-dots button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  width: 0;
  translate: 0 -50%;
  background: var(--red);
  transition: width 500ms var(--ease);
}

.pr-rail-dots button[aria-current="true"]::after {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* 7. Hold-to-stamp: a rubber stamp and a correspondence slip          */
/* ------------------------------------------------------------------ */

.stamp-cta {
  --hold: 0;
  position: relative;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  max-width: 40rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.stamp-cta-desk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 1.8rem);
}

.stamp-cta-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(6.6rem, 20vw, 8rem);
  aspect-ratio: 1;
  margin-bottom: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 250, 238, 0.7) 0 55%, transparent 56%),
    repeating-conic-gradient(from 0deg, rgba(26, 25, 22, 0.06) 0 6deg, transparent 6deg 12deg);
  color: var(--ink);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.stamp-cta-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.stamp-cta-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.stamp-cta-ring {
  position: absolute;
  inset: 0;
}

.stamp-cta-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.stamp-cta-ring circle {
  fill: none;
  stroke-width: 3;
}

.stamp-cta-ring .track {
  stroke: var(--rule);
  stroke-dasharray: 2 4;
}

.stamp-cta-ring .fill {
  stroke: var(--red);
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: calc(289 - 289 * var(--hold));
}

/* The stamp rocks back as the ring fills, then drives down */
.stamp-cta-tool {
  position: relative;
  display: grid;
  justify-items: center;
  transform:
    translateY(calc(var(--hold) * 0.7rem - min(var(--hold), 0.35) * 1.2rem))
    rotate(calc(min(var(--hold), 0.35) * -18deg + max(var(--hold) - 0.35, 0) * 27deg))
    scaleY(calc(1 - var(--hold) * 0.08));
  transform-origin: 50% 100%;
}

.stamp-cta-knob {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d15a35, #a33128 55%, #5e1a14);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4);
}

.stamp-cta-neck {
  width: 0.62rem;
  height: 1.15rem;
  background: linear-gradient(90deg, #6b4a2d, #b68756 45%, #5b3d24);
}

.stamp-cta-base {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 1rem;
  border-radius: 0.25rem 0.25rem 0.1rem 0.1rem;
  background: linear-gradient(180deg, #8c6239, #5b3d24);
  box-shadow: 0 0.2rem 0 var(--red), 0 0.45rem 0.7rem rgba(26, 25, 22, 0.3);
}

.stamp-cta-base i {
  font: 900 0.5rem/1 var(--display);
  font-style: normal;
  letter-spacing: 0.2em;
  color: rgba(255, 238, 214, 0.6);
}

.stamp-cta.is-stamped .stamp-cta-tool {
  animation: prStampSlam 520ms cubic-bezier(0.3, 0.9, 0.3, 1.2);
}

@keyframes prStampSlam {
  0% { transform: translateY(-1.1rem) rotate(-8deg); }
  28% { transform: translateY(0.95rem) scaleY(0.84) scaleX(1.08); }
  48% { transform: translateY(0.4rem) scaleY(1.04); }
  100% { transform: none; }
}

.stamp-cta-label {
  position: absolute;
  bottom: -1.55rem;
  left: 50%;
  translate: -50% 0;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.stamp-cta.is-holding .stamp-cta-label { color: var(--red); }

/* The slip: a cut-out correspondence form with a folded corner */
.stamp-cta-slip {
  position: relative;
  isolation: isolate;
  min-height: 7rem;
  display: grid;
  align-content: center;
  padding: 1.1rem 1.3rem;
  rotate: -0.8deg;
}

/* Two sheets cut with the same corner: paper on red */
.stamp-cta-slip::before,
.stamp-cta-slip::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 0 100%);
  pointer-events: none;
}

.stamp-cta-slip::before {
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.35rem, rgba(37, 63, 84, 0.1) 1.35rem calc(1.35rem + 1px)),
    linear-gradient(180deg, #fbf6ec, #efe5d3);
  outline: 1.5px dashed rgba(26, 25, 22, 0.38);
  outline-offset: -0.45rem;
}

.stamp-cta-slip::after {
  z-index: -2;
  background: linear-gradient(135deg, var(--red-hot), var(--red));
  transform: translate(0.36rem, 0.4rem) rotate(0.9deg);
}

.stamp-cta-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.4rem;
  height: 1.4rem;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(45deg, #c7b8a4, #e6dac6);
  filter: drop-shadow(-1px 1px 1px rgba(26, 25, 22, 0.25));
}

.stamp-cta-slip-note {
  display: grid;
  gap: 0.25rem;
  transition: opacity 240ms ease;
}

.stamp-cta-slip-note small {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

.stamp-cta-slip-note strong {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.1;
  color: var(--ink);
}

.stamp-cta-slip-note em {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.stamp-cta-impression {
  position: absolute;
  inset: 0.6rem 0.9rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.15rem;
  border: 3px solid var(--red);
  border-radius: 0.3rem;
  box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 4px rgba(163, 49, 40, 0.5);
  color: var(--red);
  text-align: center;
  opacity: 0;
  transform: rotate(-3.5deg) scale(1.4);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size: 160px 80px;
  mask-size: 160px 80px;
  pointer-events: none;
}

.stamp-cta-impression small {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.stamp-cta-impression b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.1rem, 4.2vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.stamp-cta-ink {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.stamp-cta-ink i {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 46% 54% 40% 60%;
  background: var(--red);
  opacity: 0;
  animation: prInkFleck 520ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes prInkFleck {
  0% { opacity: 0; transform: translate(calc(var(--x) * 0.7), calc(var(--y) * 0.7)) scale(0.3); }
  30% { opacity: 0.95; }
  100% { opacity: 0.75; transform: translate(var(--x), var(--y)) scale(var(--s)); }
}

.stamp-cta.is-stamped .stamp-cta-impression {
  animation: prImpress 420ms 120ms cubic-bezier(0.2, 0.9, 0.25, 1.1) forwards;
}

.stamp-cta.is-stamped .stamp-cta-slip-note { opacity: 0; }

.stamp-cta.is-stamped .stamp-cta-slip {
  animation: prSlipJolt 320ms 120ms ease-out;
}

@keyframes prImpress {
  0% { opacity: 0; transform: rotate(-3.5deg) scale(1.4); }
  60% { opacity: 1; transform: rotate(-2.5deg) scale(0.97); }
  100% { opacity: 0.92; transform: rotate(-2.5deg) scale(1); }
}

@keyframes prSlipJolt {
  0%, 100% { translate: 0 0; }
  35% { translate: 0 3px; scale: 1 0.985; }
}

.stamp-cta.is-nudged .stamp-cta-btn {
  animation: prNudge 420ms ease;
}

@keyframes prNudge {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -7deg; }
  60% { rotate: 5deg; }
}

/* The contact page's hidden press mark is inked into the stamped slip */
.pm-mark-slot--slip {
  position: absolute;
  right: 0.7rem;
  bottom: 0.55rem;
  z-index: 2;
}

.stamp-cta .stamp-cta-hint {
  max-width: none !important;
  margin: 0.4rem 0 0 !important;
  min-height: 1.2em;
  font-family: var(--mono) !important;
  font-size: 0.64rem !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

.stamp-cta-hint a {
  color: var(--red);
}

@media (max-width: 520px) {
  .stamp-cta-desk {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .stamp-cta-slip {
    width: 100%;
  }

  .stamp-cta .stamp-cta-hint { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .stamp-cta.is-stamped .stamp-cta-tool,
  .stamp-cta.is-stamped .stamp-cta-slip { animation: none; }
}

/* ------------------------------------------------------------------ */
/* 8. Press dock                                                       */
/* ------------------------------------------------------------------ */

.press-dock {
  position: fixed;
  left: 50%;
  bottom: var(--pr-dock-gap);
  z-index: 4400;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  width: min(calc(100vw - 1.5rem), 25rem);
  height: var(--pr-dock-h);
  border: 1.5px solid var(--ink);
  background: linear-gradient(160deg, rgba(240, 231, 216, 0.96), rgba(222, 211, 193, 0.96));
  box-shadow: 0.24rem 0.24rem 0 rgba(26, 25, 22, 0.85), 0 1rem 2.2rem rgba(26, 25, 22, 0.24);
  translate: -50% calc(100% + var(--pr-dock-gap) + 1rem);
  transition: translate 520ms var(--ease);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.press-dock.is-shown {
  translate: -50% 0;
}

body.menu-open .press-dock,
body.palette-open .press-dock,
body:not(.intro-complete) .press-dock {
  translate: -50% calc(100% + var(--pr-dock-gap) + 1rem);
}

.press-dock-folio {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.12rem;
  min-width: 0;
  padding: 0 0.85rem;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.press-dock-kicker {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

.press-dock-label {
  display: block;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.press-dock-label.is-swapping {
  animation: prLabelSwap 420ms var(--ease);
}

@keyframes prLabelSwap {
  0%   { opacity: 0; transform: translateY(70%); filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: none; }
}

.press-dock-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(26, 25, 22, 0.12);
  pointer-events: none;
}

.press-dock-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--ink), var(--red));
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}

.press-dock-btn {
  display: grid;
  place-items: center;
  width: var(--pr-dock-h);
  padding: 0;
  border: 0;
  border-left: 1.5px solid var(--ink);
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 220ms ease, color 220ms ease;
}

.press-dock-btn:hover,
.press-dock-btn:focus-visible {
  background: rgba(26, 25, 22, 0.08);
}

.press-dock-btn:focus-visible,
.press-dock-folio:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -4px;
}

.press-dock-btn svg {
  width: 1.3rem;
  height: 1.3rem;
  overflow: visible;
}

.press-dock-btn[aria-pressed="true"] {
  color: var(--paper-light);
  background: var(--ink);
}

.press-dock-sound .wave {
  opacity: 0;
  transform-origin: 30% 50%;
  transition: opacity 200ms ease;
}

.press-dock-sound[aria-pressed="true"] .wave {
  opacity: 1;
  animation: prWave 1.6s ease-in-out infinite;
}

.press-dock-sound[aria-pressed="true"] .wave + .wave {
  animation-delay: 200ms;
}

.press-dock-sound[aria-pressed="true"] .mute {
  opacity: 0;
}

@keyframes prWave {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.press-dock-menu span {
  display: block;
  width: 1.2rem;
  height: 2px;
  margin: 2.5px 0;
  background: currentColor;
  transition: width 260ms var(--ease);
}

.press-dock-menu span:nth-child(2) {
  width: 0.8rem;
}

.press-dock-menu:hover span:nth-child(2) {
  width: 1.2rem;
}

/* Contents sheet: "In this issue" */
.press-index {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pr-dock-gap) + var(--pr-dock-h) + 0.7rem);
  z-index: 4410;
  width: min(calc(100vw - 1.5rem), 25rem);
  max-height: min(62vh, 30rem);
  overflow: auto;
  padding: 0.9rem 0.9rem 0.6rem;
  border: 1.5px solid var(--ink);
  background: linear-gradient(170deg, #f0e7d8, #ddd1bd);
  box-shadow: 0.24rem 0.24rem 0 rgba(26, 25, 22, 0.85), 0 1.4rem 3rem rgba(26, 25, 22, 0.3);
  translate: -50% 1rem;
  opacity: 0;
  visibility: hidden;
  transition: translate 380ms var(--ease), opacity 240ms ease, visibility 0s linear 380ms;
  overscroll-behavior: contain;
}

.press-index.is-open {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition: translate 420ms var(--ease), opacity 240ms ease, visibility 0s;
}

.press-index h2 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 3px double var(--ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.press-index ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.press-index a {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.press-index li:last-child a {
  border-bottom: 0;
}

.press-index a span:first-child {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--muted);
}

.press-index a span:nth-child(2) {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.15;
}

.press-index a span:last-child {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--red);
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 200ms ease, transform 300ms var(--ease);
}

.press-index a[aria-current="true"] span:nth-child(2) {
  font-style: italic;
  color: var(--red);
}

.press-index a:hover span:last-child,
.press-index a:focus-visible span:last-child,
.press-index a[aria-current="true"] span:last-child {
  opacity: 1;
  transform: none;
}

.press-index-foot {
  margin: 0.55rem 0 0;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

body.has-dock .footer {
  padding-bottom: calc(var(--pr-dock-h) + var(--pr-dock-gap) + 1.5rem);
}

body.has-dock .pm-toast {
  bottom: calc(var(--pr-dock-h) + var(--pr-dock-gap) + 0.9rem);
  z-index: 4405;
}

/* Notices: a receipt feeds up out of a slot at the foot of the page, a
   line at a time, then is torn off and flutters away up the screen. */
.pr-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pr-dock-h) + var(--pr-dock-gap) + 0.9rem);
  z-index: 4420;
  width: min(17.5rem, calc(100vw - 2.4rem));
  translate: -50% 0;
  pointer-events: none;
  visibility: hidden;
}

.pr-toast.is-in { visibility: visible; }

.pr-toast-feed {
  position: relative;
  overflow: hidden;
  padding: 0.6rem 0.4rem 0;
  margin: -0.6rem -0.4rem 0;
}

.pr-toast.is-torn .pr-toast-feed { overflow: visible; }

.pr-toast-slot {
  position: absolute;
  left: -0.8rem;
  right: -0.8rem;
  bottom: -0.45rem;
  z-index: 2;
  height: 0.9rem;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, #34302a, #0e0d0b);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 200ms ease, transform 380ms var(--pr-spring);
}

.pr-toast-slot i {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 0.34rem;
  height: 0.34rem;
  margin-top: -0.17rem;
  border-radius: 50%;
  background: #6ee07a;
  box-shadow: 0 0 6px #6ee07a;
  animation: prLed 400ms steps(2) infinite;
}

@keyframes prLed { 50% { opacity: 0.3; } }

.pr-toast.is-in .pr-toast-slot { opacity: 1; transform: none; }
.pr-toast.is-torn .pr-toast-slot { opacity: 0; transform: scaleX(0.3); transition-delay: 700ms; }
.pr-toast.is-torn .pr-toast-slot i { animation: none; background: var(--red-hot); box-shadow: 0 0 6px var(--red-hot); }

.pr-toast-paper {
  position: relative;
  display: grid;
  gap: 0.28rem;
  padding: 1rem 1.05rem 1.1rem;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 1.2rem, rgba(37, 63, 84, 0.06) 1.2rem calc(1.2rem + 1px)),
    linear-gradient(180deg, #fbf6ec, #efe5d3 80%, #e6d9c3);
  box-shadow: 0 0.8rem 1.8rem rgba(26, 25, 22, 0.24);
  transform: translateY(105%);
  transform-origin: 50% 100%;
}

/* Saw teeth: the top was torn from the last receipt; the bottom tears on exit */
.pr-toast-paper::before,
.pr-toast-paper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background:
    linear-gradient(-45deg, #fbf6ec 5px, transparent 0) 0 0 / 10px 7px repeat-x,
    linear-gradient(45deg, #fbf6ec 5px, transparent 0) 0 0 / 10px 7px repeat-x;
}

.pr-toast-paper::before { top: -7px; transform: scaleY(-1); }

.pr-toast-paper::after {
  bottom: -7px;
  background:
    linear-gradient(-45deg, #e6d9c3 5px, transparent 0) 0 0 / 10px 7px repeat-x,
    linear-gradient(45deg, #e6d9c3 5px, transparent 0) 0 0 / 10px 7px repeat-x;
  opacity: 0;
}

.pr-toast.is-in .pr-toast-paper {
  animation: prFeed 1000ms steps(10, end) forwards;
}

@keyframes prFeed {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}

.pr-toast.is-torn .pr-toast-paper {
  animation: prFlutter 1800ms cubic-bezier(0.45, 0, 0.5, 1) forwards;
}

.pr-toast.is-torn .pr-toast-paper::after { opacity: 1; }

@keyframes prFlutter {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  10% { transform: translate(-3px, 9px) rotate(-3deg); }
  20% { transform: translate(4px, -30px) rotate(4deg); }
  42% { transform: translate(46px, -34vh) rotate(-11deg) scale(0.96); }
  64% { transform: translate(-34px, -60vh) rotate(13deg) scale(0.92); }
  84% { transform: translate(28px, -84vh) rotate(-9deg) scale(0.88); opacity: 1; }
  100% { transform: translate(-6px, -108vh) rotate(18deg) scale(0.85); opacity: 0; }
}

.pr-toast-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink);
}

.pr-toast-head b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
}

.pr-toast-head small,
.pr-toast-when,
.pr-toast-thanks {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.pr-toast-title {
  margin-top: 0.15rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.02;
  text-transform: uppercase;
}

.pr-toast-detail {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--red);
  overflow-wrap: anywhere;
}

.pr-toast-lines {
  display: grid;
  gap: 0.15rem;
  margin: 0.25rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(26, 25, 22, 0.4);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pr-toast-lines div {
  display: flex;
  gap: 0.4rem;
}

.pr-toast-lines dt { color: var(--muted); }

.pr-toast-lines div::after {
  content: "";
  order: 1;
  flex: 1;
  border-bottom: 1px dotted rgba(26, 25, 22, 0.35);
  translate: 0 -0.25em;
}

.pr-toast-lines dd { order: 2; margin: 0; }

.pr-toast-code {
  display: block;
  height: 1.6rem;
  margin-top: 0.35rem;
}

.pr-toast-thanks { text-align: center; }

.pr-toast-filed {
  position: absolute;
  right: 0.8rem;
  top: 2.3rem;
  padding: 0.22rem 0.5rem;
  border: 2px solid var(--red);
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  rotate: -9deg;
  opacity: 0;
  scale: 2.2;
}

.pr-toast.is-in .pr-toast-filed {
  animation: prReceiptStamp 360ms 1050ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

@keyframes prReceiptStamp {
  to { opacity: 0.9; scale: 1; }
}

/* Crumbs of paper left in the slot when it tears */
.pr-toast-bits {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
}

.pr-toast-bits i {
  position: absolute;
  width: 6px;
  height: 4px;
  background: #efe5d3;
  box-shadow: 0 0 0 1px rgba(26, 25, 22, 0.25);
  opacity: 0;
}

.pr-toast.is-torn .pr-toast-bits i { animation: prCrumb 800ms ease-out forwards; }
.pr-toast-bits i:nth-child(1) { --x: -90px; --y: -24px; --r: 200deg; }
.pr-toast-bits i:nth-child(2) { --x: -40px; --y: -40px; --r: -140deg; }
.pr-toast-bits i:nth-child(3) { --x: 10px; --y: -46px; --r: 90deg; }
.pr-toast-bits i:nth-child(4) { --x: 55px; --y: -34px; --r: -220deg; }
.pr-toast-bits i:nth-child(5) { --x: 95px; --y: -20px; --r: 160deg; }
.pr-toast-bits i:nth-child(6) { --x: -8px; --y: -60px; --r: 300deg; }

@keyframes prCrumb {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 50px)) rotate(var(--r)); }
}

/* The shared print-out for other notices (press marks) */
@keyframes prPrint {
  from { clip-path: inset(100% 0 0 0); translate: 0 0.6rem; }
  to { clip-path: inset(0 0 0 0); translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-toast.is-in .pr-toast-paper { animation: none; transform: none; }
  .pr-toast.is-torn .pr-toast-paper { animation: none; opacity: 0; transition: opacity 200ms ease; }
}

/* The press-mark notice from interactive.js gets the same print-out. */
.pm-toast {
  -webkit-mask: radial-gradient(circle 0.32rem at 0.4rem 0, transparent 98%, #000) -0.4rem 0 / 0.8rem 100% repeat-x;
  mask: radial-gradient(circle 0.32rem at 0.4rem 0, transparent 98%, #000) -0.4rem 0 / 0.8rem 100% repeat-x;
  transform-origin: 50% 100%;
}

.pm-toast.is-in {
  animation: prPrint 900ms steps(9, end) both;
}

/* ------------------------------------------------------------------ */
/* 9. Touch blots                                       */
/* ------------------------------------------------------------------ */

.ink-blot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8000;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  pointer-events: none;
  background: radial-gradient(circle at 45% 45%, rgba(26, 25, 22, 0.28), rgba(26, 25, 22, 0.12) 45%, transparent 70%);
  opacity: 0;
}

.ink-blot.is-on {
  animation: prBlot 620ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes prBlot {
  0%   { opacity: 0.9; transform: scale(0.15) rotate(var(--r, 0deg)); }
  100% { opacity: 0; transform: scale(1.35) rotate(calc(var(--r, 0deg) + 30deg)); }
}

/* ------------------------------------------------------------------ */
/* 10. Reduced motion                                                  */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .extra-spin {
    height: auto;
  }

  .extra-stage {
    position: relative;
    height: auto;
    padding: 4rem 0;
  }

  .extra-cue,
  .extra-meter {
    display: none;
  }

  .extra-paper {
    transform: none;
  }

  .extra-stamp {
    opacity: 0.9;
    transform: rotate(-11deg);
  }

  .press-dock,
  .press-index,
  .pr-toast {
    transition: none;
  }

  .ink-blot {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* 11. Live wire ticker                                                */
/* ------------------------------------------------------------------ */

.wire {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  margin: 0.45rem 0 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: rgba(26, 25, 22, 0.04);
  overflow: hidden;
}

.wire-tag {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-light);
  background: var(--red);
  box-shadow: 0.6rem 0 0.8rem rgba(214, 204, 189, 0.9);
}

.wire-tag i {
  position: relative;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #ffe3c4;
}

/* The live dot pings with a ring that only scales and fades, so it runs on
   the compositor instead of repainting a shadow every frame. */
.wire-tag i::after,
.pg-map-kicker i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: prPulse 1.6s ease-out infinite;
}

@keyframes prPulse {
  0% { transform: scale(1); opacity: 0.8; }
  80%, 100% { transform: scale(3.2); opacity: 0; }
}

.wire-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}

.wire-track {
  display: flex;
  width: max-content;
  animation: prWire 55s linear infinite;
}

.wire:hover .wire-track,
.wire.is-paused .wire-track {
  animation-play-state: paused;
}

.wire-set {
  display: flex;
  align-items: center;
  flex: none;
}

.wire-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0 0.5rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.wire-item b {
  color: var(--red);
  font-weight: 700;
}

.wire-item::after {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  margin-left: 0.6rem;
  background: var(--red);
  transform: rotate(45deg);
}

@keyframes prWire {
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ */
/* 12. Kinetic type bands                                              */
/* ------------------------------------------------------------------ */

.kinetic {
  position: relative;
  margin: clamp(2.5rem, 6vw, 5rem) 0 clamp(1rem, 3vw, 2rem);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(0.6rem, 1.4vw, 1rem) 0;
  overflow: hidden;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  pointer-events: none;
  user-select: none;
}

.kinetic-row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.4rem, 11vw, 10rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transform: translate3d(var(--kx, 0px), 0, 0);
  will-change: transform;
}

.kinetic-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding-right: 0.25em;
}

.kinetic-row span::after {
  content: "\2736";
  font-size: 0.45em;
  color: var(--red);
  -webkit-text-stroke: 0;
}

.kinetic-row--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.kinetic-row--outline span:nth-child(odd) {
  color: var(--ink);
  -webkit-text-stroke: 0;
}

.kinetic-row--small {
  font-size: clamp(1.8rem, 5.4vw, 4.4rem);
  font-style: italic;
  font-weight: 400;
  color: var(--red);
  text-transform: none;
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* 13. Odometer numbers                                                */
/* ------------------------------------------------------------------ */

span[data-odometer],
.odo,
.odo span {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  opacity: 1 !important;
}

.odo {
  display: inline-flex !important;
  align-items: flex-end;
}

.odo {
  line-height: 1.16 !important;
}

.odo .odo-col {
  display: inline-block !important;
  height: 1.16em;
  line-height: 1 !important;
  overflow: hidden;
  vertical-align: bottom;
}

.odo .odo-strip {
  display: flex !important;
  flex-direction: column;
  transform: translate3d(0, 0, 0);
  transition: transform var(--odo-ms, 1600ms) cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--odo-delay, 0ms);
}

.odo .odo-strip span {
  display: block !important;
  height: 1.16em;
  line-height: 1.16 !important;
}

.odo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 14. Typewriter kickers                                              */
/* ------------------------------------------------------------------ */

.pr-typed {
  position: relative;
}

.pr-typed-ghost {
  visibility: hidden;
}

.pr-typed-live {
  position: absolute;
  inset: 0;
}

.pr-typed.is-typing .pr-typed-live::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.1em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: prCaret 0.5s steps(1) infinite;
}

@keyframes prCaret {
  50% { opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* 15. Stacking cards (phones)                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 760px) {
  html.pr-motion .pr-stack {
    display: block !important;
  }

  html.pr-motion .pr-stack > article {
    position: sticky !important;
    top: calc(0.9rem + var(--k, 0) * 0.85rem);
    margin: 0 0 1.1rem !important;
    min-height: 11rem;
    background: linear-gradient(165deg, #efe6d6, #ddd2bf) !important;
    box-shadow: 0 -0.2rem 0 rgba(26, 25, 22, 0.06), 0 0.9rem 1.8rem rgba(26, 25, 22, 0.16) !important;
    transform-origin: 50% 0;
    scale: var(--sink, 1);
    filter: brightness(var(--dim, 1));
  }

  html.pr-motion .pr-stack > article::before {
    content: attr(data-stack-no);
    position: absolute;
    right: 0.8rem;
    top: 0.6rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    color: var(--red);
  }
}

/* ------------------------------------------------------------------ */
/* 16. Footer signature                                                */
/* ------------------------------------------------------------------ */

.pr-sign {
  display: flex;
  justify-content: space-between;
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  padding-top: clamp(0.6rem, 1.4vw, 1rem);
  border-top: 3px double var(--ink);
  overflow: hidden;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4.2rem, 20.5vw, 21rem);
  line-height: 0.78;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  user-select: none;
}

.pr-sign span {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), color 300ms ease;
  transition-delay: calc(var(--i, 0) * 80ms);
  cursor: default;
}

.pr-sign.is-in span {
  transform: none;
}

.pr-sign span.is-hop {
  animation: prHop 520ms cubic-bezier(0.3, 1.6, 0.5, 1);
  color: var(--red);
}

@keyframes prHop {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 -12%; }
}

html:not(.pr-motion) .pr-sign span {
  transform: none;
}

/* ------------------------------------------------------------------ */
/* 17. Sound hint                                                      */
/* ------------------------------------------------------------------ */

.pr-sound-hint {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.7rem);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-light);
  background: var(--ink);
  box-shadow: 0.18rem 0.18rem 0 var(--red);
  opacity: 0;
  translate: 0 0.5rem;
  pointer-events: none;
  transition: opacity 300ms ease, translate 420ms var(--ease);
}

.pr-sound-hint::after {
  content: "";
  position: absolute;
  right: calc(var(--pr-dock-h) + 1.1rem);
  top: 100%;
  border: 0.4rem solid transparent;
  border-top-color: var(--ink);
}

.pr-sound-hint.is-in {
  opacity: 1;
  translate: 0 0;
}

.pr-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.8rem;
}

.pr-eq i {
  width: 2px;
  height: 100%;
  background: var(--red-hot);
  transform-origin: 50% 100%;
  animation: prEq 900ms ease-in-out infinite;
}

.pr-eq i:nth-child(2) { animation-delay: -300ms; }
.pr-eq i:nth-child(3) { animation-delay: -600ms; }
.pr-eq i:nth-child(4) { animation-delay: -150ms; }

@keyframes prEq {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .wire-track { animation: none; }
  .kinetic-row { transform: none; }
  .pr-sign span { transform: none; transition: none; }
  .odo-strip { transition: none; }
}

/* The front-page stats get the cut-out lift instead of their own fade, and
   the lift never sets opacity, so the fade's starting 0 used to stick. */
body.loaded .profile-stats li.pr-cutout { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Performance: nothing hidden keeps working                           */
/* ------------------------------------------------------------------ */

/* The fallback page cover (the canvas fire normally does page changes)
   carried flames, glow, embers and blurred smoke that animated forever
   while invisible. Out of the tree until it is used. */
.page-cover:not(.is-covering) { display: none; }

/* The dock is 96% opaque: the blur behind it cost a full re-blur on every
   scrolled frame for no visible difference. */
.press-dock {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.section-tabs {
  background: rgba(214, 204, 189, 0.97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Paper grain from a pre-rendered tile, laid on plainly: the old live SVG
   noise with a multiply blend made the browser re-blend the whole screen on
   every scroll frame. Same darkening, a fraction of the work. */
.grain {
  opacity: 1;
  mix-blend-mode: normal;
  background-image: url("/assets/grain.webp");
  background-size: 210px 210px;
}

/* Sections out of view hold every animation where it is (motion.js). */
.pr-off,
.pr-off * {
  animation-play-state: paused !important;
}