/* The work archive — shared by the three lab variants (A Sent · B Contact sheet · A+B).
   Same house as /uninvited/: paper, ink, Anton stickers, Archivo text, Plex Mono labels, yellow tape.
   New here: the china marker (grease pencil red) and the film strip. */
:root {
  --ink: #121110; --paper: #e9e4d6; --sheet: #f4f0e6; --back: #f1ede4;
  --tape: rgba(242, 194, 48, .74); --tape-ink: #2a2412;
  --pencil: #d3392b;
  --print: #0e0d0b; --rebate: #1d1b17; --edge: #cbc3ad;
  --gut: max(16px, 2.2vw);
  --t-xl: max(64px, min(9.6vw, 17vh)); --t-l: max(40px, 5vw); --t-m: max(28px, 2.9vw);
  --t-text: max(16px, 1.1vw); --t-cap: max(13px, .9vw); --t-label: max(10.5px, .68vw);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --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 .07 0 0 0 0 .06 0 0 0 0 .05 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 400 var(--t-text)/1.5 "Archivo", system-ui, sans-serif; min-height: 100vh;
  background-image: var(--grain); }   /* paper tooth: a faint printed grain, no image request */
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
.label { font: 500 var(--t-label)/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header (the story's bar, with the way back) */
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) var(--gut) 0; pointer-events: none; }
.bar::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -30px; background: var(--paper) var(--grain); pointer-events: none;
  -webkit-mask: linear-gradient(#000 64%, transparent); mask: linear-gradient(#000 64%, transparent); }
.bar > * { pointer-events: auto; }
.mark { text-decoration: none; display: inline-block; transform: rotate(-1.2deg); }
.mark span { display: inline-block; font: 400 max(17px, 1.25vw)/1 "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em;
  background: var(--ink); color: var(--paper); padding: .215em .34em .205em; clip-path: polygon(0 4%, 100% 0, 99% 100%, 1% 96%); }
.bar-r { display: flex; gap: .6rem; align-items: center; }
.tab-btn, .write { font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  background: var(--sheet); border: 1.5px solid var(--ink); padding: .9em 1.1em .85em; transition: background .2s, color .2s; color: var(--ink); cursor: pointer; }
.write i, .tab-btn i { font-style: normal; display: inline-block; transition: transform .25s cubic-bezier(.2,.9,.2,1.3); }
.write:hover, .tab-btn:hover { background: var(--ink); color: var(--paper); }
.write:hover i { transform: translateX(4px); }
.back:hover i { transform: translateX(-4px); }
@media (max-width: 640px) { .back-l { display: none; } .write, .tab-btn { padding: .8em .9em; } .bar-r { gap: .4rem; } }

/* ---------- page head */
.head { padding: max(120px, 17vh) var(--gut) max(34px, 5vh); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30em); gap: 3vh 5vw; align-items: end; }
.head .kicker { grid-column: 1 / -1; margin: 0 0 1.4em .2em; }
.intro { margin: 0 0 .4em; font: 450 max(17px, 1.28vw)/1.4 "Archivo", sans-serif; max-width: 30em; }
.intro b { font-weight: 650; }
.count { display: block; margin-top: 1.2em; }
@media (max-width: 760px) {
  :root { --t-xl: 19vw; --t-l: 11vw; --t-m: 8.6vw; --t-cap: 13.5px; --t-label: 10.5px; }
  .head { grid-template-columns: minmax(0, 1fr); padding-top: 108px; }
}

/* ---------- sticker titles (the story's grammar: every line its own black box, applied like vinyl) */
@property --c { syntax: '<length>'; inherits: true; initial-value: 0px; }
.stk { position: relative; margin: 0; display: flex; flex-direction: column; align-items: flex-start; font-weight: 400; width: fit-content; }
.stk .ln { position: relative; display: block; font: 400 var(--t-xl)/.9 "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .005em;
  color: var(--paper); white-space: nowrap; margin-top: -.04em; opacity: 0; transform-origin: 0% 100%; --c: 0px; --u: 1em; }
.stk .ln:first-of-type { margin-top: 0; }
.stk .ln b { display: block; font-weight: 400; background: var(--ink); padding: .095em .16em .125em .155em;
  clip-path: polygon(0 1%, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, .4% 100%); }
.stk .ln:last-of-type b { padding-bottom: .085em; }
.stk .ln.acc b { padding-top: .265em; }
.stk .ln::after { content: ""; position: absolute; right: 0; bottom: 0; width: var(--c); height: var(--c); background: linear-gradient(135deg, #fffdf6, var(--back) 60%, #d8d2c3);
  clip-path: polygon(0 0, 100% 0, 0 100%); filter: drop-shadow(-1px -1px 1px rgba(0,0,0,.25)); }
.stk .ln:nth-of-type(2n) { transform-origin: 100% 100%; margin-left: .18em; }
.stk .ln:nth-of-type(2n) b { clip-path: polygon(0 0, 100% 1%, 99.6% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.stk .ln:nth-of-type(2n)::after { right: auto; left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.stk-l .ln { font-size: var(--t-l); }
.stk-m .ln { font-size: var(--t-m); }
.stk.on .ln { animation: stick .7s cubic-bezier(.25,.8,.3,1) both, corner 1.4s linear both; animation-delay: calc(var(--i, 0) * .13s), calc(var(--i, 0) * .13s + .5s); }
.stk.on .ln:nth-of-type(2n) { animation-name: stick2, corner; }
.stk.now .ln { opacity: 1; --c: .16em; }
@keyframes stick {
  0% { opacity: 0; transform: perspective(900px) translate(-.25em, -.35em) rotate3d(1, -1, 0, 62deg) scale(1.06); filter: drop-shadow(8px 14px 10px rgba(0,0,0,.35)); }
  12% { opacity: 1; }
  62% { transform: perspective(900px) rotate3d(1, -1, 0, -4deg) scale(1.01); filter: drop-shadow(3px 5px 4px rgba(0,0,0,.25)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
}
@keyframes stick2 {
  0% { opacity: 0; transform: perspective(900px) translate(.25em, -.35em) rotate3d(1, 1, 0, 62deg) scale(1.06); filter: drop-shadow(-8px 14px 10px rgba(0,0,0,.35)); }
  12% { opacity: 1; }
  62% { transform: perspective(900px) rotate3d(1, 1, 0, -4deg) scale(1.01); filter: drop-shadow(-3px 5px 4px rgba(0,0,0,.25)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
}
@keyframes corner { 0% { --c: 0px; } 18% { --c: .3em; } 34% { --c: .09em; } 48% { --c: .2em; } 62% { --c: .13em; } 100% { --c: .16em; } }
/* reversed, for black grounds */
.stk-rev .ln { color: var(--ink); }
.stk-rev .ln b { background: var(--paper); }
.stk-rev .ln::after { background: linear-gradient(135deg, #3a3833, #121110 60%, #000); }

/* masking tape */
.tape { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1.55em; z-index: 2; font: 500 max(10px, .7vw)/1.55em "IBM Plex Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tape-ink); font-style: normal; white-space: nowrap; padding: 0 1.4em; text-align: center;
  background:
    linear-gradient(97deg, transparent 0 31%, rgba(90,60,0,.10) 31.4%, transparent 32.4% 63%, rgba(255,255,255,.18) 63.5%, transparent 64.6%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 40%, rgba(80,50,0,.10)),
    var(--tape);
  clip-path: polygon(0 6%, 3% 0, 6% 9%, 9% 0, 91% 0, 94% 8%, 97% 0, 100% 7%, 98% 22%, 100% 38%, 97.5% 55%, 100% 72%, 98% 88%, 100% 100%, 0 100%, 2% 86%, 0 70%, 2.5% 52%, 0 36%, 2% 20%);
  transform: rotate(var(--r)); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.tape-txt { width: auto; font-size: max(10.5px, .74vw); }
.stk.on .tape { animation: tape .5s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(.72s + var(--k, 0) * .16s); }
.stk.now .tape, .tape-on { opacity: 1; }
.ln > .tape:not(.tape-txt) { --t: min(var(--u), 118px); height: calc(var(--t) * .17); padding: 0; }
.ln > .tape-tl { left: calc(var(--t) * -.3); top: calc(var(--t) * .165); width: calc(var(--t) * .86); --r: -44deg; }
.ln > .tape-tr { left: calc(100% - var(--t) * .3); top: calc(var(--t) * -.435); width: calc(var(--t) * .86); --r: 44deg; }
.ln > .tape-br { left: calc(100% - var(--t) * .26); top: calc(100% + var(--t) * .065); width: calc(var(--t) * .82); --r: -45deg; }
.ln > .tape-bl { left: calc(var(--t) * -.3); top: calc(100% - var(--t) * .335); width: calc(var(--t) * .86); --r: 46deg; }
.ln > .tape-txt { left: var(--x, 30%); top: -1.12em; width: auto; --r: var(--rt, -3deg); }
@keyframes tape {
  0% { opacity: 1; transform: rotate(calc(var(--r) - 3deg)) scaleX(.05) translateY(-6px); }
  70% { transform: rotate(calc(var(--r) + .6deg)) scaleX(1.01) translateY(0); }
  100% { opacity: 1; transform: rotate(var(--r)) scaleX(1); }
}
.tape-inline { background: var(--tape); padding: .2em .55em .15em; font: 500 max(10px, .64vw)/1.2 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tape-ink); white-space: nowrap; display: inline-block; clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 0, 99% 50%, 100% 100%, 3% 96%, 0 100%, 1.5% 50%); }
.tape-inline.own { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); clip-path: none; }
.tape-inline.fill { background: #cfcabd; color: #4d483d; }

/* ---------- comic captions (the story's caption box) */
.cap { margin: 0; max-width: 34em; text-wrap: pretty; background: var(--sheet); border: 2px solid var(--ink); color: var(--ink);
  padding: .9em 1.15em .85em; font: 640 var(--t-cap)/1.42 "Archivo", sans-serif; font-stretch: 78%; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 4px 4px 0 rgba(18,17,16,.9); transform: rotate(-.5deg); }
.cap-2 { margin-left: max(14px, 1.4vw); transform: rotate(.5deg); }
.cap-aside { margin-left: max(30px, 3vw); background: var(--ink); color: var(--paper); transform: rotate(-.8deg); box-shadow: 4px 4px 0 rgba(18,17,16,.28); }

/* ---------- buttons */
.go-btn { display: inline-flex; gap: .7em; align-items: center; font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); padding: 1.05em 1.25em;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .2s, box-shadow .2s; cursor: pointer; }
.go-btn i { font-style: normal; }
.go-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.go-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.go-btn.ink { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 rgba(18,17,16,.3); }
.ghost-btn { font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 1.05em .2em; border-bottom: 1.5px solid currentColor; }
.ghost-btn:hover { border-bottom-width: 3px; }

/* ---------- the film strip (B + A+B): a 35 mm print, 4 perforations a frame, the frames cut from the real site */
.strip { --n: 6; --fg: max(4px, .32vw); position: relative; background: var(--rebate); padding: 0 var(--fg); border-radius: 1px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.rb { height: max(16px, 1.25vw); position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'%3E%3Crect x='6' y='4.6' width='8.6' height='6.8' rx='1.5' fill='%23050504'/%3E%3C/svg%3E");
  background-size: calc(100% / (var(--n) * 4)) 100%; background-repeat: repeat-x; }
.rb-b { height: max(22px, 1.75vw); background-size: calc(100% / (var(--n) * 4)) max(16px, 1.25vw); }
.rb-b .ed { position: absolute; left: 0; right: 0; bottom: .32em; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  font: 500 max(8px, .52vw)/1 "IBM Plex Mono", monospace; letter-spacing: .16em; color: var(--edge); opacity: .78; text-transform: uppercase; }
.rb-b .ed span { padding-left: .6em; white-space: nowrap; overflow: hidden; }
.frs { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--fg); }
.fr { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; outline: none; }
.fr img, .fr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fr img { filter: contrast(1.03) saturate(.96); transition: filter .3s, transform .5s var(--ease); }
.fr video { opacity: 0; transition: opacity .25s; }
.fr video.v { opacity: 1; }
.fr:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--pencil); }
.fill-row .fr img { filter: grayscale(1) contrast(.9) brightness(.85); }
.frw { position: relative; min-width: 0; }
.frw.sel { z-index: 2; }
/* the china-marker ring round the select, drawn when the strip comes into view */
.frw .pencil { left: -10%; top: -19%; width: 120%; height: 138%; }
.frw .pnote { right: -6%; top: -46%; }
.pencil { position: absolute; pointer-events: none; overflow: visible; z-index: 3; }
.pencil path { fill: none; stroke: var(--pencil); stroke-width: 3.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; }
/* drawn with a dash, then the dash dropped (non-scaling strokes measure dashes in screen space: no gap may survive) */
.drawn .pencil path { animation: pdraw .9s cubic-bezier(.5,.1,.3,1) .15s both; }
@keyframes pdraw {
  0% { opacity: .95; stroke-dasharray: 1 3; stroke-dashoffset: 1; }
  99.9% { opacity: .95; stroke-dasharray: 1 3; stroke-dashoffset: 0; }
  100% { opacity: .95; stroke-dasharray: none; stroke-dashoffset: 0; }
}
.pnote { position: absolute; z-index: 3; font: 600 max(19px, 1.45vw)/1 "Caveat", cursive; color: var(--pencil); white-space: nowrap; pointer-events: none;
  transform: rotate(-7deg); opacity: 0; transition: opacity .4s .9s; }
.drawn .pnote { opacity: 1; }

/* ---------- lab switcher (lab only, not part of the design) */
.lab { position: fixed; z-index: 60; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: stretch;
  background: var(--ink); color: var(--paper); font: 500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.lab b { padding: 1em 1.1em; background: var(--tape); color: var(--tape-ink); font-weight: 600; white-space: nowrap; }
.lab a { padding: 1em 1em; text-decoration: none; white-space: nowrap; opacity: .62; }
.lab a:hover { opacity: 1; }
.lab a.on { opacity: 1; box-shadow: inset 0 -3px 0 var(--tape); }
.lab i { width: 1px; background: rgba(233,228,214,.25); margin: .6em .2em; }
body { padding-bottom: 64px; }

/* ---------- footer */
.foot { margin: 12vh var(--gut) 0; padding: 1.4em 0 2em; border-top: 2px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2em 2.4em; align-items: center; }
.foot p { margin: 0; }
.foot .big { font: 600 max(20px, 1.6vw)/1.25 "Archivo", sans-serif; font-stretch: 86%; max-width: 30em; }

@media (prefers-reduced-motion: reduce) {
  .stk.on .ln, .stk.on .tape { animation-duration: .01s !important; animation-delay: 0s !important; }
  .drawn .pencil path { animation-duration: .01s; animation-delay: 0s; }
}
.lab .lab-k { display: flex; align-items: center; padding: 0 .3em 0 .9em; opacity: .42; white-space: nowrap; }