/* press.css: the press page (press.html, SPEC.md "The press page"). Loaded after hero.css (tokens, the mark, the menu,
   the header fly-ins, the seam card). THE SEAM like the blog: LL paper left of the line, GW night right of it, every
   piece straddling the line on a neutral reading ground (torn paper with ink on its left edge, a stepped digital cut with
   a cyan fringe on its right); the line is the centre of the screen everywhere (phones too). Words that cross the line
   always sit on that neutral ground; words beside it take their half's colour (ink on the paper, light on the night).
   Then the PRESS KIT: rows across the line like the blog's months, the stills and the cut-outs of each persona on their
   own half. Two curves only: punch (LL) and breath (GW). */

@font-face { font-family: 'DM Serif Display'; src: url('/fonts/dm-serif-display.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

html[data-page="press"] {
  --gutter: 24px;
  --ll-accent: #b23a00;          /* the paint accent as text on the reading ground (4.5:1) */
  --gw-tx: #006b77;              /* the cyan as text on the reading ground (4.5:1) */
  --pr-w: min(56rem, calc(100vw - 2 * var(--gutter) - 3rem));
  --pr-gap: 30px;                /* the stills and the cut-out halves keep this much of the line clear between them */
}
@media (max-width: 719.98px) {
  html[data-page="press"] { --gutter: 16px; --pr-w: calc(100vw - 2 * var(--gutter) - 20px); --pr-gap: 22px; }
}
html[data-page="press"] body { touch-action: auto; }
html[data-page="press"] ::selection { background: rgba(0, 229, 255, 0.28); color: #0b0b0c; }

/* ---------------------------------------------------------------- the world before (or without) WebGL */
.pr-ground { position: fixed; inset: 0; z-index: 0; background: #f4f4f0; transition: opacity 700ms var(--breath); }
html[data-world="gw"] .pr-ground { background: #070708; }
.pr-ground i { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #0b0b0c; opacity: 0; }
html[data-gl="1"] .pr-ground { opacity: 0; pointer-events: none; }
html[data-gl="fail"] .pr-ground { background: linear-gradient(90deg, #f4f4f0 0 50%, #070708 50% 100%); }
html[data-gl="fail"] .pr-ground i { opacity: 1; background: linear-gradient(90deg, #0b0b0c 0 50%, #00e5ff 50% 100%); box-shadow: 6px 0 14px rgba(0, 229, 255, 0.5); }

/* ---------------------------------------------------------------- the top bar: the mark and the way back (the shell's,
   hero.css "the way back"), on the paper half */
html[data-page="press"] .top { left: var(--gutter); right: auto; }
html[data-page="press"] .menu-now .v { max-width: 22rem; }

.pr-page { position: relative; overflow-x: clip; }

/* ---------------------------------------------------------------- the opener: PRESS on the line */
.pr-open { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(6.6rem, 16vh, 10rem) var(--gutter) 0; }
/* centred on the line at every width (hero.css parks chapter headers at the left-edge spine on phones) */
.pr-head.ch-head, .pr-year-head.ch-head, .pr-kit-head.ch-head { margin: 0; translate: none; width: auto; max-width: 100%; align-items: center; text-align: center; }
.pr-head .side, .pr-year-head .side, .pr-kit-head .side { text-align: center; }
.pr-title.ch-title { font-size: clamp(7rem, 19vw, 20rem); line-height: 0.8; }
.pr-meta.ch-meta { display: grid; width: min(40rem, calc(100vw - 2 * var(--gutter))); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 1.6rem; white-space: nowrap; }
.pr-meta > :first-child { color: var(--ll-accent); }
.pr-meta > :last-child { color: var(--gw-dim); }
.pr-own.ch-own { margin-top: clamp(2.2rem, 5.5vh, 3.4rem); --paint: var(--p-orange); filter: drop-shadow(0 16px 22px rgba(11, 11, 12, 0.18)); }

/* the jump to the kit: the words on the paper side of the line, the arrow down on the night side */
.pr-jump { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.pr-jump a {
  display: grid; grid-template-columns: 11rem 11rem; align-items: center;
  font: 600 0.58rem/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase;
}
.pr-jump span { justify-self: end; margin-right: 20px; padding: 0.4rem 0; color: #0b0b0c; background: linear-gradient(#0b0b0c, #0b0b0c) 0 100% / 0 1px no-repeat; transition: background-size var(--d-mid) var(--punch); }
/* an arrow pointing down, its head on the stem's end (the house arrow, turned) */
.pr-jump i { justify-self: start; margin-left: 20px; position: relative; width: 9px; height: 26px; background: linear-gradient(var(--cyan), var(--cyan)) 50% 0 / 1px 70% no-repeat; filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.8)); transition: background-size var(--d-mid) var(--breath); }
.pr-jump i::after { content: ''; position: absolute; left: 1px; bottom: 1px; width: 7px; height: 7px; border-right: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan); transform: translateY(-5px) rotate(45deg); transition: transform var(--d-mid) var(--breath); }
.pr-jump a:hover span, .pr-jump a:focus-visible span { background-size: 100% 1px; }
.pr-jump a:hover i, .pr-jump a:focus-visible i { background-size: 1px 100%; }
.pr-jump a:hover i::after, .pr-jump a:focus-visible i::after { transform: rotate(45deg); }
.pr-jump a:focus-visible { outline: 2px solid #ff2e7e; outline-offset: 6px; }

/* the arrival: the meta splits out of the line, the own words settle after the title, the jump last */
.pr-meta, .pr-own, .pr-jump { opacity: 0; }
.pr-meta { clip-path: inset(0 50% 0 50%); }
.pr-own { transform: translateY(18px); }
html[data-arrived="1"] .pr-meta { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--breath) 180ms, opacity 200ms linear 180ms; }
html[data-arrived="1"] .pr-own { opacity: 1; transform: none; transition: opacity 600ms linear 980ms, transform 900ms var(--punch) 980ms; }
html[data-arrived="1"] .pr-jump { opacity: 1; transition: opacity 700ms var(--breath) 1300ms; }

/* ---------------------------------------------------------------- the highlight, lifted on the line */
.pr-lift { display: flex; justify-content: center; padding: 0 var(--gutter); margin-top: clamp(4.4rem, 11vh, 7rem); }
.pr-feat-wrap { position: relative; width: min(72rem, calc(100vw - 2 * var(--gutter) - 3rem)); filter: drop-shadow(0 30px 38px rgba(11, 11, 12, 0.3)); }
.pr-feat { color: var(--seam-ink); }
.pr-feat-face { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(16rem, 34vh, 22rem); }
.pr-feat-l { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 1rem; padding: 4.4rem 2.7rem 2.8rem 3rem; text-align: right; }
.pr-feat-o {
  font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 6.4vw, 7.4rem); line-height: 0.86; letter-spacing: 0.01em;
  color: #141412; text-transform: uppercase; text-wrap: balance;
  /* never broken inside a word (owner 2026-09-29: "zinstrel.com, the m in com is in a new line"): it breaks only at a
     space, and a name too wide for its half of the card is set smaller (press.js fitOutlets, js/fit-words.js) */
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.pr-feat-d { font: 500 0.62rem/1.4 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ll-accent); }
.pr-feat-r { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1rem; padding: 4.4rem 3.4rem 2.8rem 2.7rem; }
.pr-feat-t { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 2.9vw, 3rem); line-height: 1.08; color: #1a1917; text-wrap: balance; }
.pr-k { font: 500 0.6rem/1.4 var(--mono); letter-spacing: 0.2em; color: var(--gw-tx); }
/* the type, slapped on (PUNCH) */
.pr-feat-k {
  position: absolute; left: 2.2rem; top: 1.5rem; z-index: 1; padding: 0.55rem 0.8rem 0.5rem;
  font: 600 0.6rem/1 var(--mono); letter-spacing: 0.28em; text-transform: uppercase;
  color: #f4f4f0; background: #0b0b0c; box-shadow: 4px 4px 0 var(--paint); rotate: -2deg;
}
/* the line runs on through the card, between the paper side and the night side */
.pr-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; pointer-events: none;
  background: linear-gradient(90deg, #0b0b0c 0 50%, #00d4ec 50%);
  box-shadow: 4px 0 10px -3px rgba(0, 229, 255, 0.85);
}

.pr-feat-wrap { opacity: 0; transform: translateY(46px) scale(0.975); }
.pr-feat-k { opacity: 0; scale: 0.6; }
html[data-arrived="1"] .pr-feat-wrap { opacity: 1; transform: none; transition: opacity 600ms linear 620ms, transform 1000ms var(--punch) 620ms; }
html[data-arrived="1"] .pr-feat-k { opacity: 1; scale: 1; transition: opacity 120ms linear 1300ms, scale 420ms var(--punch) 1300ms; }

/* ---------------------------------------------------------------- the go (an arrow, not a dash: the house arrow) */
.pr-go { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 0.3rem; font: 600 0.58rem/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: #141412; }
.pr-go i { position: relative; display: block; flex: none; width: 3.74rem; height: 9px; background: linear-gradient(currentColor, currentColor) 0 50% / 58.8% 1px no-repeat; transition: background-size var(--d-mid) var(--punch); }
.pr-go i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-1.54rem) rotate(45deg); transition: transform var(--d-mid) var(--punch); }

/* hover and keyboard focus: each edge pulls its own side, the arrow reaches */
.pr-feat-wrap:hover .seam-ink, .pr-feat:focus-visible .seam-ink, .pr-item:hover .seam-ink, .pr-card:focus-visible .seam-ink { translate: -2px 0; }
.pr-feat-wrap:hover .seam-paint, .pr-feat:focus-visible .seam-paint, .pr-item:hover .seam-paint, .pr-card:focus-visible .seam-paint { opacity: 1; translate: -5px 0; }
.pr-feat-wrap:hover .seam-cyan, .pr-feat:focus-visible .seam-cyan, .pr-item:hover .seam-cyan, .pr-card:focus-visible .seam-cyan {
  translate: 4px 0; filter: drop-shadow(0 0 9px rgba(0, 229, 255, 1)) drop-shadow(0 0 22px rgba(0, 229, 255, 0.55));
}
.pr-feat-wrap:hover .seam-magenta, .pr-feat:focus-visible .seam-magenta, .pr-item:hover .seam-magenta, .pr-card:focus-visible .seam-magenta { translate: 1.5px 0; }
.pr-feat-wrap:hover .pr-go i, .pr-feat:focus-visible .pr-go i, .pr-item:hover .pr-go i, .pr-card:focus-visible .pr-go i { background-size: 100% 1px; }
.pr-feat-wrap:hover .pr-go i::after, .pr-feat:focus-visible .pr-go i::after, .pr-item:hover .pr-go i::after, .pr-card:focus-visible .pr-go i::after { transform: rotate(45deg); }
.pr-feat:focus-visible, .pr-card:focus-visible { outline: 2px solid #ff2e7e; outline-offset: 8px; border-radius: 1px; }
.pr-feat .seam-under, .pr-card .seam-under, .pr-own .seam-under, .pr-bio .seam-under, .pr-kit-lead .seam-under { clip-path: inset(0 -60px); }

/* a piece linked to a song or an essay: that lab page, under the card, on the night side */
.pr-rels { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 1rem 0 0 calc(50% + 1.4rem); font: 500 0.56rem/1.5 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; }
.pr-rel { display: inline-flex; gap: 0.7rem; color: var(--gw-dim); transition: color var(--d-hit) linear; }
.pr-rel b { font-weight: 600; color: var(--gw-fg); }
.pr-rel:hover, .pr-rel:focus-visible { color: var(--cyan); }
.pr-rel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------------------------------------------------------------- the line: the year, the months, the pieces */
.pr-all { margin-top: clamp(7rem, 19vh, 12rem); }
.pr-line { position: relative; padding-bottom: 1rem; }
.pr-line > li { position: relative; }
.pr-year { display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(3.4rem, 8vh, 5rem); }
.pr-year-t.ch-title { font-size: clamp(5rem, 11vw, 11.5rem); }

/* a month (and a kit row): a tick across the line; the word on the paper side, the machine words on the night side */
.pr-month, .pr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 1.5rem; margin: 0 0 clamp(2.2rem, 5vh, 3.2rem); position: relative; }
.pr-mo-l, .pr-row-l { justify-self: end; margin-right: 28px; font: 600 0.66rem/1.3 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: #0b0b0c; text-align: right; }
.pr-mo-r, .pr-row-r { justify-self: start; margin-left: 28px; font: 500 0.66rem/1.3 var(--mono); letter-spacing: 0.2em; color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); }
.pr-row-r { text-transform: uppercase; }
.pr-mo-r a { color: inherit; border-bottom: 1px solid currentColor; }
.pr-tick {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 2px; margin: -1px 0 0 -17px;
  background: linear-gradient(90deg, #0b0b0c 0 50%, #00e5ff 50%); box-shadow: 6px 0 8px -2px rgba(0, 229, 255, 0.75);
}
.pr-month.rv .pr-tick, .pr-row.rv .pr-tick { transform: scaleX(0); transition: transform 700ms var(--breath); }
.pr-month.rv .pr-mo-l, .pr-row.rv .pr-row-l { opacity: 0; transform: translateX(14px); transition: opacity 500ms linear 160ms, transform 600ms var(--punch) 160ms; }
.pr-month.rv .pr-mo-r, .pr-row.rv .pr-row-r { opacity: 0; transform: translateX(-14px); transition: opacity 700ms var(--breath) 220ms, transform 900ms var(--breath) 220ms; }
.pr-month.rv.is-in .pr-tick, .pr-month.rv.is-in .pr-mo-l, .pr-month.rv.is-in .pr-mo-r,
.pr-row.rv.is-in .pr-tick, .pr-row.rv.is-in .pr-row-l, .pr-row.rv.is-in .pr-row-r { opacity: 1; transform: none; }

/* a piece: the card straddles the line, split exactly on it */
.pr-item { margin: 0 auto clamp(4rem, 9vh, 6rem); width: var(--pr-w); filter: drop-shadow(0 18px 26px rgba(11, 11, 12, 0.22)); }
.pr-card { color: var(--seam-ink); }
.pr-face { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pr-l { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; padding: 1.9rem 2.2rem 2rem 2.6rem; text-align: right; }
.pr-type { font: 600 0.54rem/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: #f4f4f0; background: #0b0b0c; padding: 0.42rem 0.55rem 0.36rem; box-shadow: 3px 3px 0 var(--paint); }
.pr-o { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 3.1vw, 3.2rem); line-height: 0.9; letter-spacing: 0.01em; color: #141412; text-transform: uppercase; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
.pr-d { font: 500 0.6rem/1.4 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ll-accent); }
.pr-r { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.9rem 2.8rem 2rem 2.2rem; }
.pr-t { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(1.18rem, 1.45vw, 1.42rem); line-height: 1.3; color: #1f1d1a; text-wrap: pretty; }

/* the reveal: the card opens out of the line (BREATH) */
.pr-item.rv { opacity: 0; clip-path: inset(-90px 50% -90px 50%); transition: clip-path 1050ms var(--breath), opacity 260ms linear; }
.pr-item.rv.is-in { opacity: 1; clip-path: inset(-90px -90px -90px -90px); }

/* ---------------------------------------------------------------- THE PRESS KIT */
.pr-kit { position: relative; display: flex; flex-direction: column; align-items: stretch; margin-top: clamp(7rem, 18vh, 12rem); scroll-margin-top: 72px; }
.pr-kit-head { align-self: center; margin-bottom: clamp(2.2rem, 5vh, 3.2rem) !important; }
.pr-kit-t.ch-title { font-size: clamp(5rem, 11vw, 11.5rem); }
.pr-kit-lead.seam-card { align-self: center; width: min(32rem, var(--pr-w)); --paint: var(--p-yellow); filter: drop-shadow(0 14px 20px rgba(11, 11, 12, 0.16)); }
.pr-kit-lead .seam-face { padding: 1rem 2.2rem 1.05rem 2rem; font-family: var(--body); font-size: 1rem; line-height: 1.55; }
.pr-kit-lead.rv { opacity: 0; transform: translateY(16px); transition: opacity 500ms linear, transform 800ms var(--punch); }
.pr-kit-lead.rv.is-in { opacity: 1; transform: none; }

/* the doors: two equal halves, their seam on the line (the download, the contact) */
.pr-dl-row, .pr-contact { display: flex; justify-content: center; margin: clamp(2rem, 5vh, 3rem) 0 clamp(4.4rem, 10vh, 6.4rem); }
.pr-door { display: grid; grid-template-columns: 15.5rem 15.5rem; font: 600 0.6rem/1 var(--mono); letter-spacing: 0.28em; text-transform: uppercase; }
.pr-door .d-l, .pr-door .d-r { display: flex; align-items: center; padding: 1.1rem 1.2rem; transition: background-color var(--d-hit) linear, color var(--d-hit) linear, box-shadow var(--d-short) var(--breath), border-color var(--d-hit) linear; }
.pr-door .d-l { justify-content: flex-end; text-align: right; text-wrap: balance; color: #0b0b0c; background: rgba(244, 244, 240, 0.72); border: 1px solid #0b0b0c; border-right: 0; }
.pr-door .d-r { gap: 0.8rem; color: #eaf7f9; background: rgba(3, 7, 10, 0.55); border: 1px solid rgba(0, 229, 255, 0.55); border-left: 0; }
.pr-door:hover .d-l, .pr-door:focus-visible .d-l { background: #0b0b0c; color: #f4f4f0; }
.pr-door:hover .d-r, .pr-door:focus-visible .d-r { border-color: var(--cyan); box-shadow: 0 0 18px rgba(0, 229, 255, 0.25), inset 0 0 12px rgba(0, 229, 255, 0.12); }
.pr-door:focus-visible { outline: 2px solid #ff2e7e; outline-offset: 6px; }
/* the download's mark: an arrow down onto a tray */
.pr-dl .d-r::after, .pr-dl-i {
  content: ''; display: inline-block; flex: none; width: 11px; height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  position: relative;
}
.pr-dl .d-r { justify-content: space-between; }
/* the contact: his words on the paper half, the address on the night half, an arrow out */
.pr-door--say { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(46rem, calc(100vw - 2 * var(--gutter))); }
.pr-door--say .d-l { flex-direction: column; align-items: flex-end; gap: 0.6rem; font: 400 1rem/1.4 var(--body); letter-spacing: 0; text-transform: none; }
.pr-door--say .d-l .draft-tag { margin: 0; color: #9a3300; }
.pr-door--say:hover .d-l .draft-tag, .pr-door--say:focus-visible .d-l .draft-tag { color: #ffd23f; }
.pr-door--say .d-r i { position: relative; display: block; flex: none; width: 2.2rem; height: 9px; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; }
.pr-door--say .d-r i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.pr-dl-row.rv, .pr-contact.rv { opacity: 0; transition: opacity 700ms var(--breath); }
.pr-dl-row.rv.is-in, .pr-contact.rv.is-in { opacity: 1; }

/* the bio: the home's About me on the reading ground */
.pr-bio.seam-card { align-self: center; width: min(40rem, var(--pr-w)); margin-bottom: clamp(4.4rem, 10vh, 6.4rem); --paint: var(--p-magenta); filter: drop-shadow(0 16px 24px rgba(11, 11, 12, 0.2)); }
.pr-bio .seam-face { padding: 1.6rem 2.8rem 1.7rem 2.6rem; font-family: var(--body); font-size: 1.04rem; line-height: 1.6; }
.pr-bio-text p + p { margin-top: 0.9em; }
.pr-bio .draft-tag { margin: 0.9rem 0 0; }
.pr-bio.rv { opacity: 0; clip-path: inset(-60px 50% -60px 50%); transition: clip-path 1000ms var(--breath), opacity 260ms linear; }
.pr-bio.rv.is-in { opacity: 1; clip-path: inset(-60px -90px -60px -90px); }

/* the stills: the Architect's on the paper half, the Ghostwriter's on the night half, meeting at the line */
.pr-stills { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--pr-gap); align-self: center; width: min(80rem, calc(100vw - 2 * var(--gutter))); margin-bottom: clamp(4.4rem, 10vh, 6.4rem); }
.pr-still-a { display: grid; gap: 0.9rem; }
.pr-still--ll .pr-still-a { justify-items: end; }
.pr-still-img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.pr-still-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--punch), filter var(--d-mid) var(--breath); }
/* a print taped to the paper / a frame lit on the night */
.pr-still--ll .pr-still-img { border: 8px solid #fbfaf5; box-shadow: 0 1px 0 rgba(11, 11, 12, 0.08), 0 22px 34px -18px rgba(11, 11, 12, 0.55), 6px 6px 0 var(--p-yellow); rotate: -0.6deg; }
.pr-still--gw .pr-still-img { border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.4), 0 0 26px rgba(0, 229, 255, 0.16), 0 24px 40px -20px rgba(0, 0, 0, 0.8); }
.pr-still-a:hover .pr-still-img img, .pr-still-a:focus-visible .pr-still-img img { transform: scale(1.03); }
.pr-still--gw .pr-still-a:hover .pr-still-img, .pr-still--gw .pr-still-a:focus-visible .pr-still-img { box-shadow: 0 0 0 1px var(--cyan), 0 0 34px rgba(0, 229, 255, 0.35), 0 24px 40px -20px rgba(0, 0, 0, 0.8); }
.pr-still-a:focus-visible { outline: none; }
.pr-still--ll .pr-still-a:focus-visible .pr-still-img { outline: 2px solid #0b0b0c; outline-offset: 4px; }
.pr-still--gw .pr-still-a:focus-visible .pr-still-img { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* the caption: the half's colour (ink on the paper, light on the night) */
.pr-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; font: 500 0.56rem/1.5 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.pr-cap b { font-weight: 600; letter-spacing: 0.26em; }
.pr-still--ll .pr-cap, .pr-cuts-ll .pr-cap { justify-content: flex-end; color: #3b3934; }
.pr-still--ll .pr-cap b { color: #0b0b0c; }
.pr-still--gw .pr-cap, .pr-cuts-gw .pr-cap { color: var(--gw-dim); }
.pr-still--gw .pr-cap b { color: var(--gw-fg); }
.pr-dl-i { color: inherit; transition: transform var(--d-short) var(--punch); }
.pr-still-a:hover .pr-dl-i, .pr-still-a:focus-visible .pr-dl-i, .pr-cut-a:hover .pr-dl-i, .pr-cut-a:focus-visible .pr-dl-i { transform: translateY(2px); }
.pr-stills.rv { opacity: 0; transition: opacity 600ms linear; }
.pr-stills.rv .pr-still--ll { transform: translateX(-26px); transition: transform 700ms var(--punch); }
.pr-stills.rv .pr-still--gw { transform: translateX(26px); transition: transform 1000ms var(--breath); }
.pr-stills.rv.is-in { opacity: 1; }
.pr-stills.rv.is-in .pr-still--ll, .pr-stills.rv.is-in .pr-still--gw { transform: none; }

/* the cut-outs: each persona's on its own half, a sheet of stickers on the paper, a lit panel on the night */
.pr-cuts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--pr-gap); align-self: center; width: min(80rem, calc(100vw - 2 * var(--gutter))); margin-bottom: clamp(4.4rem, 10vh, 6.4rem); }
.pr-cuts-ll, .pr-cuts-gw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-content: start; }
.pr-cut-a { display: grid; gap: 0.7rem; }
.pr-cut-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 0.9rem; overflow: hidden; }
.pr-cut-img img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--d-short) var(--punch), filter var(--d-mid) var(--breath); }
.pr-cuts-ll .pr-cut-img { background: #fbfaf5 var(--grain); background-size: auto, 160px 160px; border: 2px solid #0b0b0c; box-shadow: 5px 5px 0 var(--paint, var(--p-magenta)); }
.pr-cuts-ll .pr-cut:nth-child(3n + 1) { --paint: var(--p-magenta); rotate: -1.2deg; }
.pr-cuts-ll .pr-cut:nth-child(3n + 2) { --paint: var(--p-yellow); rotate: 0.8deg; }
.pr-cuts-ll .pr-cut:nth-child(3n + 3) { --paint: var(--p-orange); rotate: -0.4deg; }
.pr-cuts-gw .pr-cut-img {
  border-radius: 4px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 50% 100%, rgba(0, 229, 255, 0.16), rgba(0, 229, 255, 0) 60%), #05080b;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.35), 0 0 22px rgba(0, 229, 255, 0.12);
}
.pr-cuts-ll .pr-cut-a:hover .pr-cut-img img, .pr-cuts-ll .pr-cut-a:focus-visible .pr-cut-img img { transform: scale(1.05) rotate(-2deg); }
.pr-cuts-gw .pr-cut-a:hover .pr-cut-img img, .pr-cuts-gw .pr-cut-a:focus-visible .pr-cut-img img { filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.55)); }
.pr-cuts-gw .pr-cut-a:hover .pr-cut-img, .pr-cuts-gw .pr-cut-a:focus-visible .pr-cut-img { box-shadow: inset 0 0 0 1px var(--cyan), 0 0 30px rgba(0, 229, 255, 0.3); }
.pr-cut-a:focus-visible { outline: none; }
.pr-cuts-ll .pr-cut-a:focus-visible .pr-cut-img { outline: 2px solid #0b0b0c; outline-offset: 4px; }
.pr-cuts-gw .pr-cut-a:focus-visible .pr-cut-img { outline: 2px solid var(--cyan); outline-offset: 4px; }
.pr-cuts.rv .pr-cuts-ll { opacity: 0; transform: translateY(28px); transition: opacity 400ms linear, transform 700ms var(--punch); }
.pr-cuts.rv .pr-cuts-gw { opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 400ms linear 120ms, clip-path 1100ms var(--breath) 120ms; }
.pr-cuts.rv.is-in .pr-cuts-ll { opacity: 1; transform: none; }
.pr-cuts.rv.is-in .pr-cuts-gw { opacity: 1; clip-path: inset(-40px -40px -40px -40px); }

/* the logo package: its door once it is there; until then the marked slot on the reading ground */
.pr-icons { display: flex; justify-content: center; margin-bottom: clamp(4.4rem, 10vh, 6.4rem); }
.pr-icons:not([data-slot]) { flex-direction: column; align-items: center; gap: clamp(1.4rem, 3vh, 2rem); }
.pr-icons .pr-dl-row { margin: 0; }
/* the app icon, centred on the line (its own split meets the page's) */
.pr-icon { display: block; width: clamp(6.5rem, 9vw, 8.5rem); aspect-ratio: 1; border-radius: 22%; overflow: hidden; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.25); }
.pr-icon img { display: block; width: 100%; height: 100%; }
.pr-slot {
  display: grid; justify-items: center; gap: 0.7rem; width: min(26rem, var(--pr-w)); padding: 1.5rem 1.6rem 1.4rem;
  background: var(--seam-ground) var(--grain); background-size: auto, 160px 160px; border: 1.5px dashed #9a3300; text-align: center;
}
.pr-slot-t { font: 600 0.62rem/1.3 var(--mono); letter-spacing: 0.28em; text-transform: uppercase; color: #1a1917; }
.pr-slot .draft-tag { margin: 0; color: #9a3300; }
.pr-icons.rv { opacity: 0; transition: opacity 700ms var(--breath); }
.pr-icons.rv.is-in { opacity: 1; }

/* the end of the line: a bead under the contact; the line stops there */
.pr-end { position: relative; height: 2rem; margin-top: -2rem; }
.pr-bead { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: linear-gradient(90deg, #0b0b0c 0 50%, #dffcff 50%); box-shadow: 0 0 0 3px var(--p-magenta), 5px 0 14px 1px rgba(0, 229, 255, 0.8); }
.pr-end.rv .pr-bead { transform: scale(0); transition: transform 520ms var(--punch); }
.pr-end.rv.is-in .pr-bead { transform: none; }

/* ---------------------------------------------------------------- the foot: paper half, night half */
.pr-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; align-items: start;
  padding: clamp(6rem, 16vh, 9rem) var(--gutter) max(2.6rem, env(safe-area-inset-bottom));
  font: 500 0.58rem/1.6 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
}
.pr-foot-l { justify-self: end; display: grid; justify-items: end; gap: 1.1rem; text-align: right; }
.pr-foot-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.4rem; }
.pr-foot-nav a { color: #0b0b0c; border-bottom: 1px solid transparent; transition: border-color var(--d-hit) linear; }
.pr-foot-nav a:hover { border-bottom-color: #0b0b0c; }
.pr-foot-socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.2rem; max-width: 26rem; }
.pr-foot-socials a { color: #46443f; transition: color var(--d-hit) linear; }
.pr-foot-socials a:hover { color: #0b0b0c; }
.pr-foot-r { justify-self: start; display: grid; justify-items: start; gap: 1.1rem; }
.pr-shot { font-size: 0.8rem; letter-spacing: 0.34em; color: var(--gw-fg); }
.pr-made { color: var(--gw-dim); transition: color var(--d-hit) linear; }
.pr-made:hover { color: var(--gw-fg); }
.pr-foot-l a:focus-visible { outline: 2px solid #0b0b0c; outline-offset: 3px; }
.pr-foot-r a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------------------------------------------------------------- phones: the line in the middle, the halves narrow */
@media (max-width: 719.98px) {
  .pr-open { padding-top: 5.6rem; }
  .pr-title.ch-title { font-size: clamp(5.4rem, 38vw, 9rem); }
  .pr-meta.ch-meta { column-gap: 2rem; min-width: 0; font-size: 0.54rem; letter-spacing: 0.2em; }
  .pr-own.ch-own { width: calc(100vw - 2 * var(--gutter) - 20px); }
  .pr-jump a { grid-template-columns: 9rem 9rem; font-size: 0.54rem; letter-spacing: 0.24em; }
  .pr-lift { margin-top: 3.6rem; }
  .pr-feat-wrap { width: calc(100vw - 2 * var(--gutter) - 20px); }
  .pr-feat-face { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pr-feat-l { align-items: flex-start; text-align: left; padding: 4rem 1.7rem 0.4rem 1.5rem; gap: 0.7rem; }
  .pr-feat-o { font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .pr-feat-r { padding: 0.9rem 1.7rem 1.7rem 1.5rem; gap: 0.8rem; }
  .pr-feat-t { font-size: clamp(1.6rem, 7.4vw, 2rem); }
  .pr-feat-k { left: 1.3rem; top: 1rem; font-size: 0.54rem; }
  .pr-feat .pr-seam, .pr-card .pr-seam { display: none; }
  /* stacked, the date shows once (the paper side's; the machine date is the same day) */
  .pr-k > [aria-hidden] { display: none; }
  .pr-r > .pr-k { margin-bottom: -0.6rem; }
  .pr-feat-r > .pr-k { margin-bottom: -0.8rem; }
  .pr-rels { margin-left: 1.5rem; }
  .pr-all { margin-top: 6rem; }
  .pr-year-t.ch-title, .pr-kit-t.ch-title { font-size: clamp(4.4rem, 26vw, 6.4rem); }
  .pr-mo-l, .pr-row-l { margin-right: 22px; font-size: 0.58rem; letter-spacing: 0.22em; }
  .pr-mo-r, .pr-row-r { margin-left: 22px; font-size: 0.58rem; letter-spacing: 0.16em; }
  .pr-item { margin-bottom: 3.4rem; }
  .pr-face { grid-template-columns: minmax(0, 1fr); }
  .pr-l { align-items: flex-start; text-align: left; padding: 1.3rem 1.6rem 0.2rem 1.4rem; gap: 0.55rem; }
  .pr-o { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .pr-r { padding: 0.6rem 1.6rem 1.4rem 1.4rem; gap: 0.6rem; }
  .pr-t { font-size: 1.08rem; }
  .pr-door { grid-template-columns: 10rem 10rem; letter-spacing: 0.16em; font-size: 0.52rem; line-height: 1.35; }
  .pr-door .d-l, .pr-door .d-r { padding: 0.95rem 0.8rem; }
  .pr-door--say { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-door--say .d-l { font-size: 0.9rem; }
  .pr-door--say .d-r { flex-direction: column; align-items: flex-start; justify-content: center; }
  .pr-bio .seam-face { padding: 1.3rem 1.7rem 1.4rem 1.6rem; font-size: 0.98rem; }
  .pr-cuts-ll, .pr-cuts-gw { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .pr-cut-img { padding: 0.6rem; }
  .pr-cap { font-size: 0.5rem; letter-spacing: 0.14em; gap: 0.2rem 0.6rem; }
  .pr-still--ll .pr-still-img { border-width: 5px; }
  .pr-foot { column-gap: 2.2rem; font-size: 0.52rem; letter-spacing: 0.16em; }
  .pr-foot-nav, .pr-foot-socials { gap: 0.3rem 0.9rem; }
  .pr-shot { font-size: 0.68rem; letter-spacing: 0.26em; }
}

/* ---------------------------------------------------------------- paint looks: muted dries the accents toward paper */
html[data-paint="muted"] .pr-feat-k, html[data-paint="muted"] .pr-type { box-shadow: 4px 4px 0 color-mix(in srgb, var(--paint) 45%, #d8d2c4); }
html[data-paint="muted"] .pr-bead { box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-magenta) 45%, #d8d2c4), 5px 0 14px 1px rgba(0, 229, 255, 0.8); }

/* ---------------------------------------------------------------- reduced motion: placed, with short fades */
html[data-rm="1"] .pr-meta { clip-path: none; }
html[data-rm="1"] .pr-own, html[data-rm="1"] .pr-feat-wrap { transform: none; }
html[data-rm="1"] .pr-feat-k { scale: 1; }
html[data-rm="1"][data-arrived="1"] .pr-meta, html[data-rm="1"][data-arrived="1"] .pr-own, html[data-rm="1"][data-arrived="1"] .pr-jump,
html[data-rm="1"][data-arrived="1"] .pr-feat-wrap, html[data-rm="1"][data-arrived="1"] .pr-feat-k { transition: opacity 200ms linear; }
html[data-rm="1"] .pr-item.rv, html[data-rm="1"] .pr-bio.rv { clip-path: none; transition: opacity 200ms linear; }
html[data-rm="1"] .pr-month.rv .pr-tick, html[data-rm="1"] .pr-month.rv .pr-mo-l, html[data-rm="1"] .pr-month.rv .pr-mo-r,
html[data-rm="1"] .pr-row.rv .pr-tick, html[data-rm="1"] .pr-row.rv .pr-row-l, html[data-rm="1"] .pr-row.rv .pr-row-r { transform: none; transition: opacity 200ms linear; }
html[data-rm="1"] .pr-month.rv .pr-tick, html[data-rm="1"] .pr-row.rv .pr-tick { opacity: 0; }
html[data-rm="1"] .pr-month.rv.is-in .pr-tick, html[data-rm="1"] .pr-row.rv.is-in .pr-tick { opacity: 1; }
html[data-rm="1"] .pr-kit-lead.rv, html[data-rm="1"] .pr-stills.rv .pr-still--ll, html[data-rm="1"] .pr-stills.rv .pr-still--gw,
html[data-rm="1"] .pr-cuts.rv .pr-cuts-ll { transform: none; transition: opacity 200ms linear; }
html[data-rm="1"] .pr-cuts.rv .pr-cuts-gw { clip-path: none; transition: opacity 200ms linear; }
html[data-rm="1"] .pr-stills.rv, html[data-rm="1"] .pr-dl-row.rv, html[data-rm="1"] .pr-contact.rv, html[data-rm="1"] .pr-icons.rv { transition: opacity 200ms linear; }
html[data-rm="1"] .pr-end.rv .pr-bead { transform: none; opacity: 0; transition: opacity 200ms linear; }
html[data-rm="1"] .pr-end.rv.is-in .pr-bead { opacity: 1; }
html[data-rm="1"] .pr-still-img img, html[data-rm="1"] .pr-cut-img img { transition: none; transform: none !important; }
html[data-rm="1"] .pr-go i, html[data-rm="1"] .pr-go i::after, html[data-rm="1"] .pr-jump span, html[data-rm="1"] .pr-jump i, html[data-rm="1"] .pr-jump i::after, html[data-rm="1"] .pr-dl-i { transition: none; }
html[data-rm="1"] .pr-ground { transition: opacity 200ms linear; }

/* reached through the shell's router (html data-via="router"): the opener comes with the unfold, out of the line */
html[data-via="router"][data-arrived="1"] .pr-meta { transition-delay: 0ms, 0ms; }
html[data-via="router"][data-arrived="1"] .pr-feat-wrap { transition-delay: 200ms, 200ms; }
html[data-via="router"][data-arrived="1"] .pr-own { transition-delay: 440ms, 440ms; }
html[data-via="router"][data-arrived="1"] .pr-feat-k { transition-delay: 760ms, 760ms; }
html[data-via="router"][data-arrived="1"] .pr-jump { transition-delay: 700ms; }