/* possum.ing/hi: Elizabeth's card, the swap form, her sharing screen and the shoebox of people she met.
   Three faces: Archivo (display), IBM Plex Mono (captions, specs), Schibsted Grotesk (body, UI).
   One orange action per view. The card is an object: highlighter-yellow stock, black ink, the swirl stamped on. */
:root{
  --void:#0b0b0c; --night:#111214; --slate:#1b1c20; --rule:#2c2e34;
  --bone:#f4f1ea; --silver:#c8cbd0; --gray:#9a9ea6; --dim:#b9bcc2;
  --yel:#f1ff00; --yel-deep:#d9e600; --orange:#ff5a1f; --orange-hi:#ff7a45; --pink:#ff4fb0; --aqua:#7fd4e0;
  --kraft:#b07a3a; --kraft-hi:#cf9a55; --kraft-lo:#7a4f22;
  --fur:#a4a4a0; --fur-d:#74747a; --face:#f2eee6; --ink:#26262a; --nose:#eaa49c;
  --display:'Archivo', 'Arial Black', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --body:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gut:max(16px, env(safe-area-inset-left));
  --ease-pop:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--void)}
body{margin:0; min-height:100svh; background:var(--void); color:var(--bone); font:400 clamp(16px, .96rem + .2vw, 18px)/1.55 var(--body); -webkit-tap-highlight-color:transparent; overflow-x:hidden}
/* the room: a dark floor with a faint +Σ microprint, like the inside of a security envelope */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(241,255,0,.07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Ctext x='2' y='12' font-family='monospace' font-size='9' fill='%23ffffff' fill-opacity='.045'%3E%2B%CE%A3%3C/text%3E%3Ctext x='24' y='24' font-family='monospace' font-size='9' fill='%23ffffff' fill-opacity='.03'%3E%2B%CE%A3%3C/text%3E%3C/svg%3E");}
a{color:var(--yel); text-underline-offset:.2em}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--aqua); outline-offset:3px; border-radius:4px}
[hidden]{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
button{font:inherit; color:inherit}
.skip{position:absolute; left:8px; top:-200px; z-index:99; background:var(--yel); color:var(--void); font:600 15px var(--mono); padding:10px 14px}
.skip:focus{top:8px}

/* ── top bar ── */
.bar{display:flex; align-items:center; gap:var(--s3); padding:max(10px, env(safe-area-inset-top)) var(--gut) 10px; font:600 13px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.bar a{color:var(--bone); text-decoration:none; display:inline-flex; align-items:center; gap:8px; min-height:44px}
.bar a:hover{color:var(--yel)}
.bar .sig{font:900 18px/1 var(--display); letter-spacing:0; color:var(--yel)}
.bar .end{margin-left:auto}

/* ── the card ── */
.card{--tilt:-2deg; container-type:inline-size; position:relative; width:100%; aspect-ratio:1.75; transform:rotate(var(--tilt)); transform-style:preserve-3d}
.card__face{position:absolute; inset:0; border-radius:2.4cqi; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.card__front{background:var(--yel); color:var(--void);
  box-shadow:0 .4cqi 0 var(--yel-deep), 0 1.2cqi 0 #8f9900, 0 3cqi 6cqi rgba(0,0,0,.55), 0 0 18cqi rgba(241,255,0,.12);
  display:grid; grid-template-columns:minmax(0,1fr) 30cqi; grid-template-rows:auto 1fr auto; padding:5.4cqi 6cqi 5cqi; column-gap:4cqi}
/* paper: a fine tooth and a soft sheen, so it reads as stock and not a flat rectangle */
.card__front::before{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .58 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
.card__front::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,0) 70%, rgba(0,0,0,.08) 100%)}
.card__top{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; position:relative; z-index:1}
.card__sig{font:900 7.6cqi/1 var(--display); letter-spacing:-.02em}
.card__serial{font:600 2.7cqi/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; text-align:right}
.card__who{grid-column:1; align-self:center; position:relative; z-index:1; min-width:0}
.card__name{margin:0; font:900 13.2cqi/.86 var(--display); letter-spacing:-.045em; text-transform:none}
.card__org{margin:1.4cqi 0 0; font:800 5.4cqi/1 var(--display); letter-spacing:-.01em}
.card__org i{font-style:normal; font-weight:600; opacity:.6}
.card__what{margin:2.2cqi 0 0; font:400 3.25cqi/1.35 var(--mono); max-width:34ch; text-wrap:balance}
.card__lines{grid-column:1; list-style:none; margin:0; padding:2cqi 0 0; border-top:.45cqi solid var(--void); display:grid; gap:.5cqi; font:600 3.7cqi/1.2 var(--mono); position:relative; z-index:1; justify-self:start; min-width:62%}
.card__swirl{position:absolute; right:-7cqi; bottom:-4cqi; width:50cqi; aspect-ratio:720/441; background:var(--void); opacity:.93; transform:rotate(-9deg);
  -webkit-mask:url(/img/swirl.png) center/contain no-repeat; mask:url(/img/swirl.png) center/contain no-repeat; pointer-events:none}
.card__back{background:#0d0d0f; color:var(--bone); transform:rotateY(180deg); box-shadow:0 3cqi 6cqi rgba(0,0,0,.55), inset 0 0 0 .4cqi #26272c;
  display:grid; grid-template-columns:auto 1fr; gap:5cqi; align-items:center; padding:6cqi}
.card__back::before{content:""; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='18'%3E%3Ctext x='1' y='12' font-family='monospace' font-size='8' fill='%23f1ff00' fill-opacity='.07'%3E%2B%CE%A3%3C/text%3E%3C/svg%3E")}

/* ── buttons: big, flat, loud. orange = the one primary action ── */
.btn{--bg:transparent; --fg:var(--bone); --bd:var(--silver); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; padding:0 22px;
  background:var(--bg); color:var(--fg); border:2px solid var(--bd); border-radius:14px; font:800 clamp(17px, 4.6vw, 20px)/1 var(--display); letter-spacing:.02em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:transform .12s var(--ease-out), background-color .15s, border-color .15s, color .15s; touch-action:manipulation; user-select:none; -webkit-user-select:none}
.btn:hover{--bd:var(--yel); --fg:var(--yel)}
.btn:active{transform:translateY(2px) scale(.985)}
.btn.primary{--bg:var(--orange); --fg:var(--void); --bd:var(--orange); box-shadow:0 5px 0 #a8360c, 0 14px 30px rgba(255,90,31,.25)}
.btn.primary:hover{--bg:var(--orange-hi); --bd:var(--orange-hi); --fg:var(--void)}
.btn.primary:active{box-shadow:0 2px 0 #a8360c; transform:translateY(3px)}
.btn.ink{--bg:var(--void); --fg:var(--yel); --bd:var(--void)}
.btn.ink:hover{--fg:#fff; --bd:var(--void)}
.btn svg{width:26px; height:26px; flex:none}
.btn[disabled]{opacity:.5; cursor:default}

/* ═════════════ public page: /hi/ ═════════════ */
.pub{display:grid; gap:var(--s6) var(--s7); padding:var(--s2) var(--gut) var(--s7); max-width:1180px; margin:0 auto;
  grid-template-columns:minmax(0,1fr); grid-template-areas:"card" "swap" "foot"}
.pub__card{grid-area:card; display:grid; gap:var(--s5); align-content:start}
.pub__stage{padding:var(--s5) clamp(6px, 3vw, 28px) var(--s3); position:relative}
.pub__lede{margin:0; font:600 13px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); display:flex; gap:10px; align-items:center}
.pub__lede::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--yel); box-shadow:0 0 12px var(--yel); animation:led 2.4s steps(2, end) infinite}
@keyframes led{50%{opacity:.35}}
.pub__acts{display:grid; gap:var(--s3); grid-template-columns:1fr 1fr}
.pub__acts .primary{grid-column:1 / -1; min-height:68px; font-size:clamp(20px, 5.6vw, 24px)}
.pub__acts .btn{min-width:0; padding:0 14px}
.pub__acts .sm{font-size:clamp(15px, 4.2vw, 18px)}
.pub__note{margin:0; font:400 14px/1.5 var(--mono); color:var(--dim)}

/* "send me yours": a blank card she hands back to you. silver stock, ruled lines, you fill it in */
.swap{grid-area:swap; container-type:inline-size; position:relative; align-self:start}
.blank{position:relative; background:var(--silver); color:var(--void); border-radius:18px; padding:var(--s5) clamp(18px, 5cqi, 34px) var(--s5);
  box-shadow:0 2px 0 #e8eaee inset, 0 5px 0 #8d9097, 0 24px 50px rgba(0,0,0,.5);
  background-image:linear-gradient(115deg, rgba(255,255,255,.4), rgba(255,255,255,0) 30%), repeating-linear-gradient(0deg, transparent 0 39px, rgba(11,11,12,.06) 39px 40px)}
.blank__corner{position:absolute; top:-14px; right:18px; background:var(--yel); color:var(--void); font:800 13px/1 var(--mono); letter-spacing:.12em; padding:8px 12px; border-radius:6px; transform:rotate(3deg); box-shadow:0 3px 0 #8f9900}
.blank h2{margin:0; font:900 clamp(34px, 11cqi, 52px)/.92 var(--display); letter-spacing:-.035em}
.blank .sub{margin:var(--s2) 0 var(--s5); font:400 15px/1.5 var(--mono); color:#2b2d33; max-width:44ch}
.fields{display:grid; gap:var(--s4) var(--s4); grid-template-columns:1fr}
@container (min-width:520px){ .fields{grid-template-columns:1fr 1fr} .fields .wide{grid-column:1 / -1} }
.f{display:grid; gap:6px}
.f label, .f .lab{font:600 13px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#26282d}
.f label small{font-weight:400; letter-spacing:.02em; text-transform:none; color:#4a4d55}
.f input, .f textarea{width:100%; min-height:52px; padding:12px 14px; font:500 18px/1.3 var(--body); color:var(--void); background:#eef0f3; border:2px solid #6f737b; border-radius:10px; box-shadow:inset 0 2px 0 rgba(0,0,0,.08)}
.f textarea{min-height:84px; resize:vertical}
.f input:focus, .f textarea:focus{outline:none; border-color:var(--void); background:#fff; box-shadow:0 0 0 3px var(--yel)}
.f input::placeholder, .f textarea::placeholder{color:#6a6e76}
.f input[aria-invalid="true"]{border-color:#b3261e; box-shadow:0 0 0 3px rgba(179,38,30,.2)}
.prefix{position:relative}
.prefix span{position:absolute; left:14px; top:50%; transform:translateY(-50%); font:600 18px var(--mono); color:#4a4d55; pointer-events:none}
.prefix input{padding-left:36px}
.consent{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; margin-top:var(--s4); font:400 15px/1.45 var(--body); color:#1d1f23; cursor:pointer}
.consent input{appearance:none; -webkit-appearance:none; width:30px; height:30px; margin:0; border:2px solid var(--void); border-radius:8px; background:#eef0f3; display:grid; place-items:center; cursor:pointer}
.consent input:checked{background:var(--void)}
.consent input:checked::after{content:""; width:14px; height:8px; border:solid var(--yel); border-width:0 0 4px 4px; transform:translate(0,-2px) rotate(-45deg)}
.consent a{color:var(--void); font-weight:700}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.send{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4); align-items:center; margin-top:var(--s5)}
.send .btn{min-width:min(100%, 240px); min-height:60px}
.form-msg{margin:0; font:500 15px/1.4 var(--mono); color:#3a3d44; min-height:1.4em; flex:1 1 200px}
.form-msg.err{color:#8a1c14; font-weight:600}
.form-msg.good{color:#1f5a1c}
/* after sending: the blank card turns into a receipt of what went in the box */
.sent{display:grid; gap:var(--s3); justify-items:start}
.sent h2{font-size:clamp(30px, 9cqi, 46px)}

.pub__foot{grid-area:foot; display:grid; gap:var(--s3); border-top:1px solid var(--rule); padding-top:var(--s5); font:400 14px/1.6 var(--mono); color:var(--dim)}
.pub__foot p{margin:0; max-width:70ch}
.pub__foot nav{display:flex; flex-wrap:wrap; gap:2px 18px}
.pub__foot nav a{color:var(--bone); display:inline-block; padding:10px 0}
.pub__foot nav a:hover{color:var(--yel)}

@media (min-width:900px), (min-width:640px) and (orientation:landscape){
  .pub{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-template-areas:"card swap" "foot foot"; align-items:start; padding-top:var(--s6)}
  .pub__card{position:sticky; top:var(--s5)}
  .pub__stage{padding:var(--s6) var(--s5) var(--s5)}
}

/* ═════════════ her screen: /hi/me/ ═════════════ */
body.me{min-height:100dvh}
.me__wrap{min-height:100dvh; display:grid; grid-template-rows:auto auto 1fr auto; max-width:560px; margin:0 auto; padding-bottom:max(14px, env(safe-area-inset-bottom))}
.me__status{display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--mono); letter-spacing:.12em; color:var(--dim); padding:8px 12px; border:1px solid var(--rule); border-radius:999px; min-height:34px}
.me__status::before{content:""; width:9px; height:9px; border-radius:50%; background:#7bdc6c; box-shadow:0 0 10px #7bdc6c}
.me__status.off::before{background:var(--orange); box-shadow:0 0 10px var(--orange)}
.me__hero{position:relative; padding:var(--s7) calc(var(--gut) + 6px) var(--s4)}
.me__hero .card{--tilt:-1.6deg; cursor:pointer}
/* the possum who lives behind the card: peeks over the top edge, blinks, ducks when tapped */
.peek{position:absolute; left:48%; top:calc(var(--s7) - 118px); width:150px; height:150px; pointer-events:none; z-index:0}
.peek .pz3{width:100%; height:100%}
@keyframes peek{0%,8%{transform:translateY(64px)} 14%,58%{transform:translateY(0)} 64%,100%{transform:translateY(64px)}}
.me__hero .card{z-index:1}
.acts{display:grid; gap:var(--s3); padding:var(--s3) var(--gut) var(--s4); grid-template-columns:1fr 1fr; align-content:end}
.act{--bg:var(--slate); --fg:var(--bone); --bd:#34363d; position:relative; display:grid; grid-template-rows:1fr auto; justify-items:start; align-items:start; gap:10px; min-height:clamp(104px, 15dvh, 132px); padding:14px 14px 13px 16px;
  background:var(--bg); color:var(--fg); border:2px solid var(--bd); border-radius:18px; text-align:left; cursor:pointer; text-decoration:none; overflow:hidden;
  box-shadow:0 4px 0 #050506; transition:transform .12s var(--ease-out), border-color .15s, background-color .15s; touch-action:manipulation; user-select:none; -webkit-user-select:none}
.act:hover{--bd:var(--yel)}
.act:active{transform:translateY(3px); box-shadow:0 1px 0 #050506}
.act b{font:900 clamp(19px, 5.4vw, 23px)/.98 var(--display); letter-spacing:-.005em; text-transform:uppercase}
.act small{font:400 13px/1.3 var(--mono); color:var(--dim); letter-spacing:.02em}
.act .ico{width:40px; height:40px}
.act.primary{--bg:var(--orange); --fg:var(--void); --bd:var(--orange); grid-column:1 / -1; min-height:clamp(84px, 11dvh, 104px); grid-template-columns:auto 1fr auto; grid-template-rows:1fr; align-items:center; gap:16px; box-shadow:0 5px 0 #a8360c}
.act.primary b{font-size:clamp(26px, 7.4vw, 32px)}
.act.primary small{color:#3a1405}
.act.primary .ico{width:52px; height:52px}
.act.primary:hover{--bd:var(--orange-hi); --bg:var(--orange-hi)}
.act.nfc .ico{color:var(--yel)}
/* the shoebox tile */
.act.box{--bg:#2a1d10; --bd:#5d4122; grid-template-columns:1fr auto; background-image:linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%)}
.act.box b{color:#ffe2b0}
.act.box small{color:#d9b98d}
.act.box .count{font:900 34px/1 var(--display); color:var(--yel); grid-row:1; grid-column:2; justify-self:end; min-width:1ch; text-align:right}
.shoebox{grid-column:1 / -1; width:100%; height:44px; position:relative}
.shoebox .lid{position:absolute; left:6%; right:6%; top:6px; height:12px; background:linear-gradient(var(--kraft-hi), var(--kraft)); border-radius:3px; transform-origin:0 100%; transform:rotate(-7deg); box-shadow:0 2px 0 var(--kraft-lo); transition:transform .3s var(--ease-pop)}
.shoebox .tub{position:absolute; left:8%; right:8%; bottom:0; height:26px; background:linear-gradient(var(--kraft), var(--kraft-lo)); border-radius:2px 2px 5px 5px; box-shadow:inset 0 2px 0 rgba(255,255,255,.18)}
.shoebox .tub::after{content:"PEOPLE"; position:absolute; left:50%; top:6px; transform:translateX(-50%); font:600 9px/1 var(--mono); letter-spacing:.2em; color:#3d2610; background:#f4e3c3; padding:3px 6px; border-radius:2px}
.shoebox .cards{position:absolute; left:16%; right:16%; bottom:20px; height:22px; display:flex; justify-content:center; gap:3px}
.shoebox .cards i{width:20%; max-width:28px; background:var(--bone); border-radius:2px 2px 0 0; box-shadow:0 0 0 1px rgba(0,0,0,.25); transform-origin:50% 100%}
.shoebox .cards i:nth-child(odd){transform:rotate(-5deg)} .shoebox .cards i:nth-child(3n){background:var(--yel)} .shoebox .cards i:nth-child(4n){background:var(--aqua)}
.act.box.gulp .lid{transform:rotate(-24deg) translateY(-4px)}
.act.box.got{animation:got .5s var(--ease-pop)}
@keyframes got{30%{transform:scale(1.05) rotate(-1deg)} 60%{transform:scale(.98)}}
.me__why{margin:0; padding:0 var(--gut) var(--s3); font:400 14px/1.45 var(--mono); color:var(--dim)}
.me__why b{color:var(--bone); font-weight:600}
.me__foot{display:flex; flex-wrap:wrap; gap:4px 16px; padding:0 var(--gut); font:400 13px/1 var(--mono); color:var(--gray)}
.me__foot a{color:var(--gray); display:inline-block; padding:12px 0}

/* toast */
.toast{visibility:hidden; position:fixed; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); z-index:80; transform:translate(-50%, 140%); width:min(92vw, 480px); background:var(--bone); color:var(--void); border-radius:14px; padding:14px 16px; font:600 16px/1.35 var(--body); box-shadow:0 18px 40px rgba(0,0,0,.6); transition:transform .35s var(--ease-pop); display:flex; gap:12px; align-items:center}
.toast.on{visibility:visible; transform:translate(-50%, 0)}
.toast b{font:900 15px/1 var(--display); background:var(--yel); padding:6px 8px; border-radius:6px; flex:none}

/* ── the stage: every animation plays here. tap anywhere to skip ── */
.stage{position:fixed; inset:0; z-index:60; display:grid; grid-template-rows:1fr auto auto; justify-items:center; padding:max(18px, env(safe-area-inset-top)) var(--gut) max(18px, env(safe-area-inset-bottom));
  background:rgba(8,8,9,.86); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); opacity:0; transition:opacity .2s}
.stage.on{opacity:1}
.stage__scene{width:min(100%, 440px); align-self:center; position:relative}
.stage__scene svg{width:100%; height:auto; overflow:visible; display:block}
.stage__say{margin:0; text-align:center; font:900 clamp(28px, 8.4vw, 44px)/1 var(--display); letter-spacing:-.02em; text-transform:uppercase; color:var(--yel); max-width:16ch; text-wrap:balance}
.stage__sub{margin:10px 0 18px; text-align:center; font:400 16px/1.45 var(--mono); color:var(--bone); max-width:34ch; min-height:1.45em}
.stage__btns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; width:min(100%, 440px)}
.stage__btns .btn{flex:1 1 140px; min-height:64px}

/* QR view: the card flips over to its black back with a white tile */
.qrv{position:fixed; inset:0; z-index:70; display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:center; padding:max(14px, env(safe-area-inset-top)) var(--gut) max(16px, env(safe-area-inset-bottom)); background:#050506}
.qrv__head{width:100%; display:flex; justify-content:space-between; align-items:center; font:600 13px/1 var(--mono); letter-spacing:.14em; color:var(--dim); text-transform:uppercase}
.qrv__flip{position:relative; width:min(100%, 430px, 62dvh); perspective:1400px}
.qrv__inner{position:relative; width:100%; aspect-ratio:.66; transform-style:preserve-3d}
.qrv__inner > *{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:22px}
.qrv__front{overflow:visible}
.qrv__rot{position:absolute; left:50%; top:50%; width:146%; transform:translate(-50%,-50%) rotate(90deg)}
.qrv__rot .card{--tilt:0deg}
.qrv__back{transform:rotateY(180deg); background:#0d0d0f; box-shadow:inset 0 0 0 2px #26272c, 0 30px 80px rgba(241,255,0,.08); display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:center; padding:22px 20px 24px; overflow:hidden}
.qrv__back::before{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='18'%3E%3Ctext x='1' y='12' font-family='monospace' font-size='8' fill='%23f1ff00' fill-opacity='.07'%3E%2B%CE%A3%3C/text%3E%3C/svg%3E")}
.qrv__top{position:relative; display:flex; gap:10px; align-items:baseline; font:900 clamp(22px, 6.4vw, 30px)/1 var(--display); color:var(--yel); letter-spacing:-.02em}
.qrv__top small{font:600 12px/1 var(--mono); letter-spacing:.14em; color:var(--dim)}
.tile{position:relative; width:100%; background:#fff; border-radius:14px; padding:6%; box-shadow:0 0 0 5px var(--yel), 0 0 50px rgba(255,255,255,.18)}
.tile canvas, .tile img{display:block; width:100%; height:auto; image-rendering:pixelated}
.qrv__url{position:relative; margin:0; text-align:center; font:600 clamp(20px, 6vw, 26px)/1.2 var(--mono); color:var(--bone)}
.qrv__url small{display:block; font:400 14px/1.4 var(--mono); color:var(--dim); margin-top:6px}
.qrv__btns{display:flex; gap:12px; width:min(100%, 430px)}
.qrv__btns .btn{flex:1; min-height:64px}

/* ── the shoebox, opened: people she met ── */
.inbox{position:fixed; inset:0; z-index:65; background:var(--void); overflow:auto; overscroll-behavior:contain; padding-bottom:max(24px, env(safe-area-inset-bottom))}
.inbox__head{position:sticky; top:0; z-index:2; background:linear-gradient(var(--void) 80%, rgba(11,11,12,0)); padding:max(10px, env(safe-area-inset-top)) var(--gut) 14px}
.inbox__row{display:flex; align-items:center; gap:12px; min-height:52px}
.inbox__row h2{margin:0; font:900 clamp(30px, 9vw, 44px)/.95 var(--display); letter-spacing:-.03em; color:#ffe2b0}
.inbox__row .btn{min-height:48px; padding:0 16px; font-size:16px; margin-left:auto}
.inbox__tools{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.inbox__tools .btn{min-height:48px; font-size:15px; padding:0 14px; border-width:2px}
.inbox__msg{margin:8px 0 0; font:400 14px/1.4 var(--mono); color:var(--dim)}
.people{list-style:none; margin:0; padding:6px var(--gut) 0; display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); max-width:1100px; margin-inline:auto}
/* each person is an index card: white stock, a red rule, typewritten details */
.pc{position:relative; background:var(--bone); color:var(--void); border-radius:10px; padding:14px 16px 12px; box-shadow:0 3px 0 #b9b4a8, 0 14px 28px rgba(0,0,0,.4);
  background-image:linear-gradient(transparent 46px, #e0526a 46px, #e0526a 48px, transparent 48px), repeating-linear-gradient(transparent 0 27px, rgba(80,120,190,.18) 27px 28px); background-position:0 0, 0 48px}
.pc.tag{background-color:#eef9fb}
.pc.pending{outline:2px dashed var(--orange); outline-offset:3px}
.pc h3{margin:0; font:900 24px/1.05 var(--display); letter-spacing:-.02em; overflow-wrap:anywhere; padding-right:84px; min-height:30px}
.pc .via{position:absolute; top:14px; right:12px; font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; background:var(--void); color:var(--yel); padding:6px 7px; border-radius:5px}
.pc.tag .via{background:#0d4b57; color:#c8f6ff}
.pc dl{margin:14px 0 0; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font:400 15px/1.45 var(--mono)}
.pc dt{color:#5b5e66; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding-top:2px}
.pc dd{margin:0; overflow-wrap:anywhere}
.pc dd a{color:var(--void); font-weight:600; text-decoration-color:var(--orange); text-decoration-thickness:2px}
.pc .met{font-family:var(--body); font-size:16px}
.pc .row{display:flex; gap:10px; margin-top:12px; align-items:center}
.pc .row .btn{min-height:46px; font-size:14px; padding:0 14px; --fg:var(--void); --bd:#3a3d44}
.pc .row .btn:hover{--fg:var(--void); --bd:var(--orange)}
.pc .row .del{margin-left:auto}
.pc .row .del:hover{--bd:#b3261e; --fg:#b3261e}
.empty{display:grid; justify-items:center; gap:12px; text-align:center; padding:var(--s7) var(--gut); color:var(--dim); font:400 16px/1.5 var(--mono)}
.empty svg{width:min(60vw, 220px)}
.empty b{font:900 28px/1 var(--display); color:var(--bone)}

/* gated login */
body.gate{display:grid; place-items:center; min-height:100svh; padding:var(--gut)}
.gateBox{width:min(100%, 440px); display:grid; gap:var(--s4)}
.gateBox .kicker{margin:0; font:600 13px/1 var(--mono); letter-spacing:.14em; color:var(--yel)}
.gateBox h1{margin:0; font:900 clamp(32px, 9vw, 44px)/.95 var(--display); letter-spacing:-.03em}
.gateBox form{display:grid; gap:10px; background:var(--silver); color:var(--void); padding:20px; border-radius:16px}
.gateBox label{font:600 13px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase}
.gateBox input{min-height:56px; font:500 20px var(--body); padding:0 14px; border:2px solid #6f737b; border-radius:10px; background:#eef0f3; color:var(--void)}
.gateBox input:focus{outline:none; border-color:var(--void); box-shadow:0 0 0 3px var(--yel)}
.gateBox .btn.primary{box-shadow:0 5px 0 #a8360c}
.gateArt{height:70px; position:relative; overflow:hidden; margin:0 0 calc(-1 * var(--s4) - 2px)}
.gateArt svg{position:absolute; right:28px; top:6px; width:96px; height:auto}
.gateBox form{position:relative; z-index:1}
.gateBox .msg{margin:0; min-height:1.4em; font:600 15px/1.4 var(--mono); color:#8a1c14}
.gateBox .aside{margin:0; font:400 15px/1.5 var(--mono); color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .peek svg{animation:none; transform:translateY(0)}
}
@media (prefers-contrast:more){
  .act small, .me__why, .pub__note, .pub__foot{color:var(--bone)}
  .act{--bd:var(--silver)}
}
.sentArt{width:min(100%, 300px); margin:4px 0 6px}
.sentArt svg{display:block; width:100%; height:auto; overflow:visible}
.act .lbl{display:grid; gap:5px}
.act.primary .go{justify-self:end}
.act.box{grid-template-columns:1fr auto; grid-template-rows:auto 1fr; row-gap:6px}
.act.box .lbl{grid-column:1; grid-row:1}
.shoebox{display:block; grid-row:2; align-self:end}
.blank .btn{--fg:var(--void); --bd:var(--void)}
.blank .btn:hover{--fg:var(--void); --bd:var(--orange)}
.blank .btn.ink{--bg:var(--void); --fg:var(--yel); --bd:var(--void)}
.acts.few .act:not(.primary){min-height:clamp(140px, 22dvh, 200px)}
/* phones on their side: card left, everything else right */
@media (orientation:landscape) and (max-height:560px){
  .me__wrap{max-width:1000px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr auto auto; grid-template-areas:"bar bar" "hero acts" "why acts" "foot foot"; column-gap:8px}
  .me__wrap > .bar{grid-area:bar} .me__hero{grid-area:hero; align-self:center} .acts{grid-area:acts; align-content:center} .me__why{grid-area:why} .me__foot{grid-area:foot}
  .act{min-height:84px} .acts.few .act:not(.primary){min-height:110px} .act.primary{min-height:72px}
  .pub__card{position:static}
}

/* the treehouse possum: a 24-frame sprite sheet, swishing its tail */
.pz3{width:100%; height:100%; overflow:hidden; position:relative; image-rendering:pixelated}
.pz3 img{display:block; height:100%; width:auto; max-width:none; image-rendering:pixelated; animation:pzswish 1.6s steps(24) infinite; filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
@keyframes pzswish{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){ .pz3 img{animation:none} }