@font-face{font-family:'Gilda Display';src:url('/fonts/gildadisplay-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Pinyon Script';src:url('/fonts/pinyonscript-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --linen:#D9DCE0;
  --card:#B5C7DA;
  --card-back:#A9BDD2;
  --card-deep:#9DB2C9;
  --mist:#DCE6F0;
  --ink:#223C57;
  --ink-2:#2E4B69;
  --white:#FFFFFF;
  --claret:#7E2433;
  --night:#15130f;
  --roman:'Gilda Display','Iowan Old Style',Georgia,serif;
  --script:'Pinyon Script','Gilda Display',cursive;
  --serif:'Spectral','Iowan Old Style',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --lift:0 2px 4px rgba(34,60,87,.12),0 14px 34px rgba(34,60,87,.20);
  --print:0 1px 2px rgba(34,60,87,.16),0 6px 16px rgba(34,60,87,.14);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .24 0 0 0 0 .34 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--linen)}
body{min-height:100dvh;background:var(--linen);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
::selection{background:var(--ink);color:var(--white)}
input{caret-color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
.vf :focus-visible,.viewer :focus-visible{outline-color:var(--white)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.defs{position:absolute;width:0;height:0}

/* ---------- the camera body (camera + join screens) ---------- */

.stage{min-height:100dvh;display:grid;place-items:center;padding:calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b))}
.body{position:relative;width:min(100%,440px);height:calc(100dvh - 20px - var(--safe-t) - var(--safe-b));max-height:900px;min-height:560px;
  border-radius:30px;background:var(--card) var(--grain);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),var(--lift);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:14px 22px 18px;gap:12px}

.top{display:flex;align-items:center;justify-content:space-between;height:44px}

/* flash window: a fresnel lens that lights up when the flash is armed */
.flash{position:relative;width:118px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:repeating-linear-gradient(90deg,#eef3f8 0 5px,#d6e1ec 5px 8px);border:1px solid rgba(34,60,87,.3);
  box-shadow:inset 0 0 0 2px var(--white),0 2px 4px rgba(34,60,87,.12);transition:background .3s var(--ease)}
.flash svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.flash .word{font-family:var(--roman);font-size:14px;letter-spacing:.04em;color:var(--ink);background:var(--white);padding:1px 6px;border-radius:6px;white-space:nowrap}
.flash.na svg{opacity:.55}
.flash .slash{stroke:var(--ink);transition:opacity .2s}
.flash[aria-pressed="true"]{background:radial-gradient(ellipse at 50% 55%,#fffdf6 0 40%,#f3ead2 100%)}
.flash[aria-pressed="true"] svg{fill:var(--ink)}
.flash[aria-pressed="true"] .slash{opacity:0}

/* exposure counter: a reel of numbers that rolls down one frame per shot */
.counter{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px 0 8px;border-radius:21px;background:var(--ink);color:var(--white)}
.counter .window{position:relative;width:96px;height:42px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 70%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 70%,transparent 100%)}
.counter .reel{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;transition:transform .62s var(--ease);will-change:transform}
.counter .reel span{flex:0 0 32px;text-align:center;font-family:var(--roman);font-size:15px;line-height:1;opacity:.38;
  transform:scale(1);transition:transform .62s var(--ease),opacity .62s var(--ease);font-variant-numeric:lining-nums tabular-nums}
.counter .reel span.on{opacity:1;transform:scale(1.75)}
.counter small{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.counter.empty{background:var(--claret)}

/* viewfinder */
.vf-slot{min-height:0;display:grid;place-items:center}
.vf{position:relative;height:100%;max-width:100%;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--night);
  box-shadow:inset 0 0 0 3px var(--white);isolation:isolate}
.vf::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 3px var(--white),inset 0 0 0 4px rgba(34,60,87,.35);pointer-events:none;z-index:4}
.vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.vf video.mirror{transform:scaleX(-1)}
.vf .rule{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.55);border-radius:12px;z-index:3;pointer-events:none}
.vf .msg{position:absolute;inset:0;z-index:2;display:grid;place-content:center;gap:14px;padding:28px;text-align:center;color:var(--white)}
.vf .msg h2{font-family:var(--roman);font-weight:400;font-size:22px;line-height:1.25;letter-spacing:.02em}
.vf .msg p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);max-width:30ch;margin-inline:auto}
.vf .msg .btn{justify-self:center}
.vf .flashout{position:absolute;inset:0;background:var(--white);opacity:0;z-index:5;pointer-events:none}
/* thumbwheel: a knurled wheel sitting in a slot cut into the body's edge */
.thumbwheel{position:absolute;right:0;top:92px;width:18px;height:128px;border-radius:9px 0 0 9px;pointer-events:none;
  background:var(--card-deep);box-shadow:inset 2px 0 3px rgba(34,60,87,.28)}
.thumbwheel i{position:absolute;left:3px;top:6px;bottom:6px;width:12px;border-radius:6px;
  background:repeating-linear-gradient(0deg,#1b3047 0 2px,#3b5978 2px 5px);box-shadow:0 1px 2px rgba(34,60,87,.3)}

.toast{position:absolute;left:50%;top:24px;z-index:6;transform:translate(-50%,-8px);opacity:0;pointer-events:none;
  width:max-content;max-width:calc(100% - 40px);padding:9px 16px;border-radius:18px;background:rgba(21,19,15,.78);color:var(--white);
  font-size:14px;line-height:1.35;text-align:center;transition:opacity .25s,transform .35s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* the label: the invitation's double-rule panel wrapped round the body */
.label{position:relative;border-radius:14px;padding:14px 18px 13px;text-align:center;
  box-shadow:inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--white),inset 0 0 0 10px var(--card),inset 0 0 0 11px var(--white)}
.label .mono{width:34px;height:34px;display:block;margin:2px auto 0;stroke:var(--white)}
.label .names{font-family:var(--script);font-size:clamp(30px,8.6vw,38px);line-height:1.05;color:var(--white);margin-top:-2px}
.label .date{font-family:var(--roman);font-size:13px;letter-spacing:.28em;color:var(--ink);margin-top:5px}
.label .status{font-style:italic;font-size:14px;line-height:1.3;color:var(--ink);margin-top:3px;min-height:1.3em}
.label .status.warn{color:var(--claret);font-style:normal;font-weight:500}
.sprig{position:absolute;width:44px;height:44px;top:9px;fill:none;stroke:var(--white);stroke-width:1.1;stroke-linecap:round;opacity:.95;pointer-events:none}
.sprig.l{left:12px}
.sprig.r{right:12px;transform:scaleX(-1)}

/* controls */
.controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4px}
.side{justify-self:center;display:grid;justify-items:center;gap:6px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.side .disc{position:relative;width:62px;height:62px;border-radius:50%;background:var(--mist);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(34,60,87,.18),0 1px 2px rgba(34,60,87,.12);transition:transform .15s var(--ease),background .2s}
.side:active .disc{transform:scale(.94);background:var(--white)}
.side svg{width:27px;height:27px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.side .badge{position:absolute;right:-3px;top:-3px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--ink);color:var(--white);
  font-family:var(--serif);font-size:13px;line-height:24px;letter-spacing:0;font-variant-numeric:tabular-nums}
.shutter{width:112px;height:112px;border-radius:50%;background:var(--white);display:grid;place-items:center;
  box-shadow:0 3px 6px rgba(34,60,87,.16),0 12px 24px rgba(34,60,87,.22),inset 0 0 0 2px rgba(34,60,87,.22)}
.shutter i{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#2c4a69 0,var(--ink) 62%,#18293c 100%);
  box-shadow:inset 0 -5px 10px rgba(0,0,0,.3);transition:transform .12s var(--ease)}
.shutter:active i,.shutter.press i{transform:scale(.9)}
.shutter:disabled{box-shadow:0 2px 4px rgba(34,60,87,.12),inset 0 0 0 2px rgba(34,60,87,.18)}
.shutter:disabled i{background:var(--card-deep);box-shadow:none}

.flying-print{position:fixed;z-index:50;background:var(--white);border-radius:3px;box-shadow:var(--print);pointer-events:none}

/* join panel sits where the viewfinder lives */
.invite{height:100%;max-height:100%;overflow:auto;border-radius:20px;background:var(--mist);padding:22px 20px 20px;display:flex;flex-direction:column;justify-content:center;gap:14px;
  border:1px solid rgba(34,60,87,.12)}
.invite .mono{width:52px;height:52px;stroke:var(--ink);flex:none;margin-bottom:-2px}
.invite h1{font-family:var(--roman);font-weight:400;font-size:clamp(25px,7vw,30px);line-height:1.15;letter-spacing:.01em;color:var(--ink);text-wrap:balance}
.invite p{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:36ch}
.invite form{display:grid;gap:10px;margin-top:8px}
.invite label{font-size:14px;color:var(--ink)}
.field{width:100%;height:54px;border-radius:12px;border:1px solid rgba(34,60,87,.45);background:var(--white);padding:0 16px;
  font:500 18px/1 var(--serif);color:var(--ink)}
.field::placeholder{color:#62778e;font-weight:400}
.field:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(34,60,87,.18)}
.form-error{font-size:15px;color:var(--claret)}
.form-error:empty{display:none}
.hint{font-size:15px;line-height:1.4;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:27px;background:var(--ink);color:var(--white);
  font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.01em;box-shadow:0 2px 4px rgba(34,60,87,.18);transition:transform .15s var(--ease),background .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{background:var(--card-deep);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.btn.light{background:var(--white);color:var(--ink)}
.linkish{font-size:15px;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- prints (the album) ---------- */

.prints{min-height:100dvh;background:var(--linen) var(--grain)}
.prints-bar{position:sticky;top:0;z-index:10;background:var(--card);padding:calc(10px + var(--safe-t)) 14px 10px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;box-shadow:0 1px 0 rgba(255,255,255,.5),0 6px 16px rgba(34,60,87,.12)}
.prints-bar h1{font-family:var(--roman);font-weight:400;font-size:21px;letter-spacing:.06em;color:var(--ink)}
.back{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 8px;border-radius:22px;background:var(--mist);font-size:15px;color:var(--ink)}
.back svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prints-bar .mine{justify-self:end;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}

.wallet{max-width:980px;margin:0 auto;padding:22px 16px calc(40px + var(--safe-b))}
.lede{text-align:center;padding:10px 6px 22px}
.lede .mono{width:44px;height:44px;stroke:var(--ink);display:block;margin:0 auto 8px}
.lede h2{font-family:var(--roman);font-weight:400;font-size:clamp(30px,8vw,40px);line-height:1.1;color:var(--ink)}
.lede .when{font-size:16px;color:var(--ink-2);margin-top:6px}
.lede .count{font-family:var(--roman);font-size:clamp(34px,10vw,48px);line-height:1.1;color:var(--ink);margin-top:14px;font-variant-numeric:lining-nums tabular-nums}
.lede .sum{font-size:16px;color:var(--ink-2);margin-top:8px;max-width:34ch;margin-inline:auto}

.people{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;margin:0 -16px 6px;padding-inline:16px;scrollbar-width:none}
.people::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:40px;padding:0 15px;border-radius:20px;background:var(--white);color:var(--ink);font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(34,60,87,.2);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);box-shadow:none}
.chip .n{opacity:.7;margin-left:6px;font-variant-numeric:tabular-nums}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 14px}
.print{position:relative;display:block;width:100%;text-align:left;background:var(--white);padding:7px 7px 0;border-radius:3px;box-shadow:var(--print);
  transition:transform .25s var(--ease),box-shadow .25s}
.print:nth-child(3n+1){transform:rotate(-.6deg)}
.print:nth-child(3n+2){transform:rotate(.5deg)}
.print:hover{transform:translateY(-2px) rotate(0)}
.print .ph{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--mist) center/cover no-repeat;border-radius:1px}
.print .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.print .ph img.in{opacity:1}
.print .by{display:block;padding:7px 2px 9px;font-style:italic;font-size:14.5px;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.print .ph .bl{position:absolute;inset:0;display:grid;place-items:center;background:var(--card) var(--grain)}
.print .ph .bl svg{width:42%;height:auto;stroke:var(--white);opacity:.55;margin-bottom:38%}
.print.dev{cursor:default}
.print.dev .tag{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);padding:6px 12px;border-radius:14px;background:rgba(255,255,255,.88);
  font-family:var(--roman);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.empty-roll{text-align:center;color:var(--ink-2);padding:40px 16px;font-style:italic}
.more{display:block;margin:26px auto 0}

/* viewer */
.viewer{position:fixed;inset:0;z-index:40;background:#0f1115;color:var(--white);display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:calc(8px + var(--safe-t)) 10px calc(12px + var(--safe-b))}
.viewer .vbar{display:flex;justify-content:space-between;align-items:center;height:48px}
.viewer .who{font-size:16px}
.viewer .who span{opacity:.7;margin-left:8px;font-size:14px}
.viewer .stagebox{position:relative;display:grid;place-items:center;min-height:0;touch-action:pan-y}
.viewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:2px;background:#222 center/cover no-repeat}
.viewer .vbtn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:23px;background:rgba(15,17,21,.62);border:1px solid rgba(255,255,255,.28);color:var(--white);font-size:16px}
.viewer .vbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.viewer .vfoot{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding-top:10px}
.viewer .nav{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:rgba(15,17,21,.62);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center}
.viewer .nav.prev{left:4px}.viewer .nav.next{right:4px}
.viewer .nav svg{width:24px;height:24px;fill:none;stroke:var(--white);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* plain notice screens */
.notice{min-height:100dvh;display:grid;place-items:center;padding:24px}
.notice .card{width:min(100%,420px);border-radius:24px;background:var(--card) var(--grain);padding:34px 26px 30px;text-align:center;box-shadow:var(--lift)}
.notice .mono{width:52px;height:52px;stroke:var(--white);display:block;margin:0 auto 6px}
.notice .names{font-family:var(--script);font-size:40px;line-height:1.1;color:var(--white)}
.notice h1{font-family:var(--roman);font-weight:400;font-size:24px;line-height:1.25;margin:16px 0 8px;color:var(--ink)}
.notice p{font-size:16px;color:var(--ink);max-width:32ch;margin:0 auto 18px}

@media (min-width:700px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px 20px}
}
@media (max-height:700px){
  .body{padding:10px 20px 12px;gap:8px}
  .label{padding:16px 16px 13px}
  .label .mono{width:22px;height:22px;margin-top:0}
  .label .names{font-size:28px}
  .label .status{font-size:13.5px}
  .shutter{width:96px;height:96px}.shutter i{width:72px;height:72px}
  .side .disc{width:54px;height:54px}
  .invite{padding:16px 16px 14px;gap:9px}
  .invite .mono{display:none}
  .invite h1{font-size:23px}
  .invite p{font-size:15px;line-height:1.42}
  .field,.btn{height:50px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}