/* ── "More about me": the back of a camera ──
   The screen is a viewfinder that scrolls through the life photos. Nothing is
   written on the screen; photos fill it (they should be 3:2 landscape).
   Behaviour lives in camera.js. Everything inside .cam is sized in cqw, so
   the camera scales with the card on small screens. */
.popup[data-theme="camera"]{--popup-w:470px;--close-color:#8a5a3b;background:transparent;box-shadow:none}
.popup[data-theme="camera"] .popup-content{padding:12px 8px 8px;overflow:visible}
.popup[data-theme="camera"] .popup-tail{display:none}
.popup[data-theme="camera"] .popup-close{top:-8px;right:-6px;background:#fff8ee;box-shadow:0 2px 8px rgba(90,58,30,.25)}

/* The wrapper is the size container, so .cam's own padding can use cqw. */
.cam-wrap{container-type:inline-size;--cream:#f8ecdc;--plate:#efd9c3;--edge:#e7cfb6;--coral:#e8826f;--brown:#8a5a3b;--pink:#f2a7b4;color:var(--brown)}
.cam{position:relative;padding-top:6.5cqw}

/* Top plate: mode dial, hot shoe, label, shutter */
.cam-top{position:absolute;left:7cqw;right:7cqw;top:1.6cqw;height:6cqw;border-radius:2.4cqw 2.4cqw 0 0;background:var(--plate);box-shadow:inset 0 .5cqw 0 rgba(255,255,255,.6)}
.cam-dial{position:absolute;left:5cqw;top:-2.6cqw;width:11cqw;height:5cqw;border-radius:1.6cqw 1.6cqw .6cqw .6cqw;background:repeating-linear-gradient(90deg,#d9bfa4 0 .6cqw,#ead5bf .6cqw 1.4cqw);box-shadow:inset 0 -.5cqw 0 rgba(90,58,30,.12)}
.cam-dial i{position:absolute;left:50%;top:-1.2cqw;width:1.2cqw;height:1.2cqw;margin-left:-.6cqw;border-radius:50%;background:var(--coral)}
.cam-shoe{position:absolute;left:50%;top:-1.3cqw;width:13cqw;height:1.6cqw;margin-left:-6.5cqw;border-radius:.5cqw;background:#d9bfa4}
.cam-top-label{position:absolute;left:21cqw;top:1.4cqw;font:700 3cqw/1 'Caveat',cursive;letter-spacing:.02em;color:#b98a66}
.cam-shutter{position:absolute;right:13cqw;top:-1.2cqw;z-index:2;width:10cqw;height:5.2cqw;padding:0;border:0;border-radius:5cqw 5cqw 1cqw 1cqw;background:var(--coral);box-shadow:inset 0 -1cqw 0 #cf6a58,inset 0 .6cqw 0 rgba(255,255,255,.35);cursor:pointer;transition:transform .12s ease}
.cam-shutter::after{content:'';position:absolute;inset:-1.5cqw -1.2cqw auto;height:1.4cqw;border-radius:50%;background:#d9bfa4;z-index:-1;top:auto;bottom:-.6cqw}
.cam-shutter:hover{transform:translateY(-.3cqw)}
.cam-shutter:active{transform:translateY(1cqw)}
.cam-shutter:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

/* Strap lugs */
.cam-strap{position:absolute;top:10cqw;width:5cqw;height:8cqw;border:1cqw solid var(--pink);border-radius:3cqw;z-index:0}
.cam-strap.l{left:-2.6cqw;border-right-color:transparent}
.cam-strap.r{right:-2.6cqw;border-left-color:transparent}

/* Body */
.cam-body{position:relative;z-index:1;display:flex;gap:3.4cqw;padding:3.6cqw 3.6cqw 4.2cqw;border-radius:5cqw;background:var(--cream);background-image:linear-gradient(90deg,transparent 1.6cqw,#f0bcaa 1.6cqw 2.1cqw,transparent 2.1cqw);box-shadow:inset 0 -1.4cqw 0 var(--edge),inset 0 .7cqw 0 #fffaf2,0 3.5cqw 7cqw -3cqw rgba(58,36,23,.45),0 1cqw 2cqw rgba(58,36,23,.12)}
.cam-bezel{flex:0 0 66cqw;padding:1.5cqw;border-radius:3cqw;background:#2b2320;box-shadow:inset 0 0 0 .4cqw #3d322d}

/* Screen + scrolling roll */
.cam-screen{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:1.6cqw;background:#141110}
.cam-roll{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:none;transition:transform .15s ease}
.cam-roll::-webkit-scrollbar{display:none}
.cam-roll:focus-visible{box-shadow:inset 0 0 0 .6cqw var(--pink)}
.cam-frame{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;font:inherit;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.cam-bg{position:absolute;inset:-12%;background:radial-gradient(circle at 30% 30%,#6b4c46,#2b2320 70%) center/cover;filter:blur(3cqw) brightness(.65) saturate(1.2)}
.cam-frame[data-kind="i"] .cam-bg{background-size:cover;background-position:center}
.cam-frame img,.cam-frame video{position:relative;display:block;width:100%;height:100%;object-fit:cover}
.cam-playing{position:absolute;right:3cqw;top:9cqw;display:flex;align-items:flex-end;gap:.4cqw;height:2.4cqw}
.cam-playing i{width:.6cqw;background:#fff;border-radius:.3cqw;animation:camEq .9s ease-in-out infinite alternate}
.cam-playing i:nth-child(2){animation-delay:.3s}
.cam-playing i:nth-child(3){animation-delay:.6s}
@keyframes camEq{from{height:30%}to{height:100%}}

/* HUD painted over the picture */
.cam-hud{position:absolute;inset:0;pointer-events:none;font:600 2.3cqw/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;text-shadow:0 0 .6cqw rgba(0,0,0,.6);letter-spacing:.04em}
.cam-hud>*{position:absolute}
.cam-rec{right:2.4cqw;top:2.2cqw;display:flex;align-items:center}
.cam-rec i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#ff4d4d;box-shadow:0 0 1cqw #ff4d4d;animation:camBlink 1.2s steps(1,end) infinite}
.cam-rec b{font-weight:600}
@keyframes camBlink{50%{opacity:0}}
.cam-status{right:2.4cqw;top:2.2cqw;display:flex;align-items:center;gap:1cqw}
.cam-mode{padding:.3cqw .7cqw;border:.25cqw solid #fff;border-radius:.5cqw;font-weight:700}
.cam-batt{position:relative;width:4.4cqw;height:2.2cqw;border:.3cqw solid #fff;border-radius:.5cqw}
.cam-batt::after{content:'';position:absolute;right:-.9cqw;top:.5cqw;width:.4cqw;height:.7cqw;background:#fff;border-radius:0 .2cqw .2cqw 0}
.cam-batt i{position:absolute;inset:.3cqw;right:1.2cqw;background:#9be38f;border-radius:.2cqw}
.cam-grid{inset:0;opacity:.18;background:linear-gradient(90deg,transparent calc(33.33% - .1cqw),#fff calc(33.33% - .1cqw) calc(33.33% + .1cqw),transparent 0,transparent calc(66.66% - .1cqw),#fff calc(66.66% - .1cqw) calc(66.66% + .1cqw),transparent 0),linear-gradient(transparent calc(33.33% - .1cqw),#fff calc(33.33% - .1cqw) calc(33.33% + .1cqw),transparent 0,transparent calc(66.66% - .1cqw),#fff calc(66.66% - .1cqw) calc(66.66% + .1cqw),transparent 0)}
.cam-info{left:2.4cqw;right:12cqw;bottom:2.2cqw;display:flex;flex-direction:column;align-items:flex-start;gap:.8cqw}
.cam-tag{padding:.5cqw 1cqw;border-radius:2cqw;background:rgba(242,167,180,.9);color:#4a2a1c;text-shadow:none;font-size:1.9cqw;text-transform:uppercase}
.cam-title{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 3.1cqw/1.1 Inter,system-ui,sans-serif;letter-spacing:0}

.cam-hint{left:50%;top:50%;padding:1cqw 2cqw;border-radius:3cqw;background:rgba(0,0,0,.45);transform:translate(-50%,70%);font-size:2.4cqw;transition:opacity .4s ease;animation:camNudge 1.6s ease-in-out infinite}
.cam-hint.is-gone{opacity:0;animation:none}
@keyframes camNudge{0%,100%{margin-top:0}50%{margin-top:-1.4cqw}}
.cam-toast{left:50%;top:50%;padding:1.2cqw 2.4cqw;border-radius:3cqw;background:#fffaf1;color:var(--brown);text-shadow:none;font:700 3cqw/1 'Caveat',cursive;letter-spacing:0;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-4deg)}
.cam-toast.is-on{animation:camToast 1.6s var(--spring,ease) both}
@keyframes camToast{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-4deg)}15%,75%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}}
.cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam-screen.is-shot .cam-flash{animation:camFlash .45s ease-out}
.cam-screen.is-shot .cam-roll{animation:camFreeze .3s ease-out}
@keyframes camFlash{0%{opacity:.95}100%{opacity:0}}
@keyframes camFreeze{0%{transform:scale(.96)}100%{transform:scale(1)}}

.cam-title.is-empty{font-style:italic;font-weight:600;opacity:.75}

/* OK: the photo fills the camera */
.cam-zoom{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;gap:2cqw;padding:3cqw;border-radius:5cqw;background:rgba(43,35,32,.94);animation:camZoomIn .3s var(--spring,ease)}
.cam-zoom[hidden]{display:none}
.cam-zoom figure{flex:1;min-height:0;margin:0;display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.cam-zoom-media{flex:1;min-height:0;display:flex;justify-content:center}
.cam-zoom-media img,.cam-zoom-media video{max-width:100%;max-height:100%;object-fit:contain;padding:1.4cqw 1.4cqw 5cqw;background:#fffaf1;border-radius:1cqw;box-shadow:0 2cqw 5cqw rgba(0,0,0,.4);rotate:-1.5deg}
.cam-zoom figcaption{margin:-4.9cqw auto 0;text-align:center;text-wrap:balance;rotate:-1.5deg;font:600 2.7cqw/1.3 Inter,system-ui,sans-serif;color:var(--brown)}
/* A caption too long for the polaroid's white strip sits below the photo
   instead, in cream on the dark backdrop (camera.js measures the fit). */
.cam-zoom figcaption.is-long{margin:0 auto;max-width:92%;rotate:0deg;font-size:2.4cqw;line-height:1.45;color:#f4e6d4}
.cam-zoom:has(figcaption.is-long) .cam-zoom-media img,
.cam-zoom:has(figcaption.is-long) .cam-zoom-media video{padding-bottom:1.4cqw}
.cam-zoom figcaption.is-empty{opacity:.6}
.cam-zoom-nav{display:flex;align-items:center;justify-content:center;gap:2.4cqw;color:#fff8ee;font:600 2.8cqw/1 Inter,system-ui,sans-serif}
.cam-zoom-nav button{padding:1.2cqw 2.4cqw;border:0;border-radius:4cqw;background:rgba(255,248,238,.14);color:#fff8ee;font:inherit;cursor:pointer}
.cam-zoom-nav button:hover{background:rgba(255,248,238,.26)}
.cam-zoom-back{margin-left:2cqw}
@keyframes camZoomIn{from{opacity:0;transform:scale(.94)}}

/* Controls on the right */
.cam-controls{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:.6cqw 0}
.cam-count{display:inline-block;padding:.6cqw 1.2cqw;border-radius:1cqw;background:#2b2320;color:#f6e7d4;font:600 2.4cqw/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;box-shadow:inset 0 0 0 .3cqw #3d322d}
.cam-dpad{position:relative;width:20cqw;aspect-ratio:1;display:grid;grid-template-rows:1fr auto 1fr;place-items:center;border-radius:50%;background:var(--plate);box-shadow:inset 0 -.8cqw 0 #dcc1a6,inset 0 .5cqw 0 #fbefe3,0 .6cqw 1.2cqw rgba(58,36,23,.12)}
.cam-dpad button{width:9cqw;height:5cqw;padding:0;border:0;background:transparent;cursor:pointer;border-radius:2cqw;display:grid;place-items:center;transition:transform .15s ease,background .2s ease}
.cam-dpad button svg{width:3cqw;height:2cqw;fill:none;stroke:var(--brown);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cam-dpad button:hover{background:rgba(138,90,59,.1)}
.cam-dpad button:active{transform:scale(.9)}
.cam-dpad button:disabled{opacity:.3;cursor:default;background:transparent}
/* Until someone uses the d-pad, the ▼ breathes so it reads as the way on. */
.cam-dpad:not(.has-moved) .cam-down:not(:disabled){background:rgba(138,90,59,.14);animation:camDownNudge 1.9s ease-in-out infinite}
.cam-dpad:not(.has-moved) .cam-down:not(:disabled) svg{stroke-width:2.2}
.cam-dpad:not(.has-moved) .cam-down:not(:disabled)::after{content:'';position:absolute;inset:auto auto -.2cqw 50%;translate:-50% 0;width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--brown);opacity:.45;animation:camDownDot 1.9s ease-in-out infinite}
.cam-dpad button{position:relative}
@keyframes camDownNudge{
  0%,58%,100%{transform:translateY(0)}
  70%{transform:translateY(.7cqw)}
  84%{transform:translateY(.2cqw)}
}
@keyframes camDownDot{0%,55%,100%{opacity:.25}72%{opacity:.75}}
@media (prefers-reduced-motion: reduce){
  .cam-dpad:not(.has-moved) .cam-down:not(:disabled),
  .cam-dpad:not(.has-moved) .cam-down:not(:disabled)::after{animation:none}
}
.cam-dpad button:focus-visible,.cam-ok:focus-visible{outline:2px solid var(--brown);outline-offset:1px}
.cam-ok{padding:0;border:0;cursor:pointer;display:grid;place-items:center;width:8.6cqw;aspect-ratio:1;border-radius:50%;background:var(--brown);color:#fff8ee;font:700 2.6cqw/1 Inter,system-ui,sans-serif;text-decoration:none;box-shadow:inset 0 -.6cqw 0 #6e4529;transition:transform .2s var(--spring,ease)}
.cam-ok:hover{transform:scale(1.08)}
.cam-grip{width:17cqw;height:9cqw;border-radius:2cqw;background:radial-gradient(circle,#e3c9ae 0 .45cqw,transparent .55cqw) 0 0/1.8cqw 1.8cqw}

/* Caption + link under the camera */
.cam-foot{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 14px 12px 18px;border-radius:18px;background:#fffaf3;box-shadow:0 10px 30px rgba(58,36,23,.14)}
.cam-foot p{margin:0;font-size:.85rem;line-height:1.5;color:#6b5643}
.cam-foot p b{color:var(--brown)}
.cam-foot{flex-wrap:wrap}
.cam-foot p{flex:1 1 100%}
/* Two lines' worth of room, so the card doesn't jump as the caption
   changes length from photo to photo. */
.popup-content .cam-foot .cam-caption{margin:0;min-height:3.2em;display:grid;align-content:center;font:600 .95rem/1.6 Inter,system-ui,sans-serif;letter-spacing:.005em;color:var(--brown);text-wrap:pretty}
.cam-foot .cam-caption[hidden]{display:none}
.popup-content .cam-foot a.btn{flex:none;padding:10px 16px;font-size:.85rem}
@media (max-width:420px){
  .cam-foot{flex-direction:column;align-items:stretch;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cam-rec i,.cam-playing i{animation:none}
  .cam-screen.is-shot .cam-flash,.cam-screen.is-shot .cam-roll{animation:none}
}