@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic.woff2) format('woff2')}

@keyframes fade{from{opacity:0}to{opacity:1}}

html{scroll-behavior:smooth}
body{line-height:1.5;-webkit-text-size-adjust:100%;margin:0;min-height:100vh;overflow-x:hidden;color:#3b2a1a;font-family:'Newsreader',Georgia,serif;font-size:19px;background-color:#e9dfc9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-attachment:fixed}
a{color:#8a4b1f}a:hover{color:#4a2a10}
::selection{background:rgba(240,200,90,.55)}
:focus-visible{outline:2px solid #8a4b1f;outline-offset:3px}
.login :focus-visible,.lightbox :focus-visible{outline-color:#fff}
p,dd,figcaption{text-wrap:pretty}
h2,h3,.prompt{text-wrap:balance}

/* nav + page widths */
nav,main{margin:0 auto;box-sizing:border-box;max-width:var(--w)}
.home{--w:1000px}.photos{--w:1000px}.about{--w:720px}.family{--w:1680px}
nav{position:relative;z-index:20;display:flex;gap:28px;padding:30px 5vw 0;align-items:center}
nav a{padding:6px 0}
nav a,nav a:hover{color:#3b2a1a;text-decoration:none;text-underline-offset:6px;text-decoration-thickness:1.5px;opacity:.65}
nav a:hover,nav a[aria-current]{opacity:1;text-decoration:underline}
nav .paw,nav .paw:hover{margin-left:auto;color:#8a4b1f;opacity:.25;display:inline-flex;align-items:center;text-decoration:none}
nav .paw:hover{opacity:.5}

main{position:relative;z-index:1;padding:50px 5vw 140px;animation:fade .8s ease-out}
h2{font:500 32px/1.2 'Newsreader',serif;margin:0 0 30px}

/* home */
.home main{padding:30px 5vw 80px;min-height:calc(100vh - 90px);display:flex;flex-direction:column;justify-content:center;gap:90px;animation:none}
.home section{width:100%}
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px 64px;align-items:end;animation:fade 1.2s ease-out both}
.polaroid{position:relative;background:#fffdf6;padding:14px 14px 70px;box-shadow:2px 3px 0 rgba(60,40,15,.12),6px 12px 18px rgba(60,40,15,.22);transform:rotate(-2.2deg);justify-self:center;width:100%;max-width:440px;box-sizing:border-box}
.polaroid::before{content:'';position:absolute;top:-16px;left:50%;margin-left:-55px;width:110px;height:32px;background:rgba(240,200,90,.6);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
.polaroid::after{content:'';position:absolute;left:22px;right:22px;bottom:26px;border-bottom:1.5px dashed rgba(90,70,45,.35)}
.name{padding-bottom:6px}
h1{margin:0 0 14px;display:flex;flex-wrap:nowrap;width:fit-content;font:500 clamp(90px,15vw,180px)/.95 'Newsreader',serif;letter-spacing:-.03em;padding:0 10px 0 0}
h1 span{display:inline-block;cursor:default;transition:transform .3s cubic-bezier(.3,2.2,.5,1)}
h1 span:hover{transform:translateY(-16px) rotate(-6deg)}
.dates{font:italic 400 26px 'Newsreader',serif;color:#6e665d;margin-bottom:30px}

/* photo cards: per-card --r --mt --sx, per-tape --tc --tw --tl --tr --tt */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:30px 24px;align-items:start}
.card{display:block;width:100%;box-sizing:border-box;border:0;font:inherit;cursor:pointer;position:relative;background:#fffdf6;padding:10px 10px 38px;box-shadow:1px 2px 0 rgba(60,40,15,.14),var(--sx) 7px 9px rgba(60,40,15,.2);transform:rotate(var(--r));margin-top:var(--mt);transition:transform .35s cubic-bezier(.3,1.8,.5,1),box-shadow .35s}
.card:hover{transform:rotate(0deg) translateY(-6px);box-shadow:2px 3px 0 rgba(60,40,15,.14),4px 16px 16px rgba(60,40,15,.26);z-index:3}
.card::after{content:'';position:absolute;left:16px;right:16px;bottom:12px;border-bottom:1.5px dashed rgba(90,70,45,.3)}
.tape{position:absolute;top:var(--tt);left:var(--tl);width:var(--tw);height:20px;background:var(--tc);transform:rotate(var(--tr))}
.mini{text-decoration:none;padding:8px 8px 30px;box-shadow:1px 2px 0 rgba(60,40,15,.14),var(--sx) 6px 8px rgba(60,40,15,.2);transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
.mini:hover{transform:rotate(0deg) translateY(-5px);box-shadow:1px 2px 0 rgba(60,40,15,.14),var(--sx) 6px 8px rgba(60,40,15,.2);z-index:auto}
.mini::after{left:12px;right:12px;bottom:10px}
.mini .tape{height:18px}
.caption{position:absolute;left:16px;right:16px;bottom:14px;font:italic 400 18px/1 'Newsreader',serif;color:#5a3a1c;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* centred on the square photo area: (card height - bottom/top padding difference) / 2 */
.play{position:absolute;left:50%;top:calc(50% - 14px);transform:translate(-50%,-50%);display:flex;color:#fffdf6;filter:drop-shadow(0 1px 4px rgba(40,28,14,.55))}
.private{position:absolute;top:16px;right:16px;background:#fffdf6;padding:0 6px;font:italic 400 14px/1.4 'Newsreader',serif;color:#6e665d}
img.ph{display:block;width:100%;object-fit:cover}
.ph{aspect-ratio:1;background:repeating-linear-gradient(45deg,#efe2c3,#efe2c3 11px,#e8d9b6 11px,#e8d9b6 22px);display:flex;align-items:center;justify-content:center;font:11px monospace;color:#8a7650}

/* lightbox */
dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:20px;box-sizing:border-box;background:rgba(40,28,14,.88);cursor:zoom-out;outline:none}
dialog[open]{display:flex;align-items:center;justify-content:center;animation:fade .25s ease-out}
dialog::backdrop{background:transparent}
dialog .ph{max-width:min(560px,90vw);width:min(560px,90vw);background:repeating-linear-gradient(45deg,#efe2c3,#efe2c3 14px,#e8d9b6 14px,#e8d9b6 28px);font-size:13px}
.lightbox [hidden]{display:none}
.lightbox figure{margin:0;outline:none;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox img,.lightbox video{display:block;max-width:min(1400px,90vw);max-height:84vh;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lightbox video{background:#000;cursor:auto}
.lightbox figcaption{font:italic 400 22px/1.3 'Newsreader',serif;color:#efe2c3;text-align:center}
.lightbox .date{font-size:17px;opacity:.7;margin-left:8px}
.lightbox .prev,.lightbox .next{position:fixed;top:50%;transform:translateY(-50%);background:none;border:0;padding:14px;color:#efe2c3;opacity:.7;cursor:pointer;display:inline-flex}
.lightbox .prev{left:1.5vw}.lightbox .next{right:1.5vw}
.lightbox .prev:hover,.lightbox .next:hover{opacity:1}

/* bone */
.bone{position:relative;display:flex;justify-content:center;align-items:center;gap:10px}
.bone button{background:none;border:0;padding:0;cursor:pointer;color:#8a4b1f;opacity:.7;display:inline-flex;transition:transform .25s cubic-bezier(.3,2,.5,1),opacity .2s}
.bone button:hover{opacity:1;transform:rotate(-12deg)}
.bone button:active{transform:scale(.9)}
.count{font:italic 400 18px 'Newsreader',serif;color:#6e665d}

/* about */
.about h2{margin-bottom:22px}
.about p{margin:0 0 18px;line-height:1.65;max-width:560px}
dl{margin:34px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;font-size:17px;line-height:1.5;max-width:560px}
dt{color:#7a6a58}
dd{margin:0}
.loved{display:flex;flex-wrap:wrap;gap:4px 14px}
.loved span{display:inline-block;font:italic 400 24px/1.3 'Newsreader',serif;color:#5a3a1c}

/* family */
.family main{animation:none}
.family h3{font:500 22px/1.2 'Newsreader',serif;margin:0 0 14px}
.family section{margin-bottom:50px}
.panel{background:#fffdf6;padding:24px 26px;box-shadow:2px 3px 0 rgba(60,40,15,.12),6px 12px 18px rgba(60,40,15,.22);display:grid;gap:14px}
.panel form{display:grid;gap:14px}
:is(.family,.login) label{display:grid;gap:4px;font-size:17px;color:#7a6a58}
:is(.family,.login) label.check{display:flex;align-items:center;gap:8px;color:#3b2a1a}
:is(.family,.login) input,:is(.family,.login) textarea,.family select{font:inherit;font-size:17px;color:#3b2a1a;background:#fffdf6;border:1px solid #7a6a58;border-radius:0;padding:8px 10px}
:is(.family,.login) input[type=checkbox]{accent-color:#8a4b1f;width:18px;height:18px;margin:0}
:is(.family,.login) input[type=file]{border:0;padding:0}
:is(.family,.login) button{font:inherit;font-size:17px;background:#8a4b1f;color:#fffdf6;border:0;border-radius:0;padding:9px 18px;cursor:pointer;justify-self:start}
:is(.family,.login) button:hover{background:#4a2a10}
:is(.family,.login) button:disabled{opacity:.6;cursor:wait}
:is(.family,.login) button.link{background:none;color:#8a4b1f;padding:0;text-decoration:underline;text-underline-offset:4px}
:is(.family,.login) button.link:hover{color:#4a2a10}
.note{margin:0;font-style:italic;color:#7a6a58}
.note:empty{display:none}
.memory{background:#fffdf6;padding:16px 20px;margin-top:18px;box-shadow:1px 2px 0 rgba(60,40,15,.14),3px 7px 9px rgba(60,40,15,.2)}
.memory p{margin:0 0 10px;line-height:1.6;white-space:pre-wrap}
.memory footer{display:flex;align-items:baseline;gap:14px;font-size:15px;color:#7a6a58}
.memory footer form{margin-left:auto}
.memory footer button.link{font-size:15px}


/* sign-in: just the box, over a looping sky video (public/sky.mp4) */
.login{background:#8fb3cf url(/sky.jpg) 18% 30%/cover fixed}
.sky{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:18% 30%;z-index:-1} /* keeps the sun in frame on phones */
.login input{background:rgba(255,255,255,.28);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:11px 20px;text-align:center;color:#24323f;box-shadow:0 4px 18px rgba(20,40,70,.18);transition:background .2s,box-shadow .2s}
.login input:focus{outline:0;background:rgba(255,255,255,.5);box-shadow:0 4px 22px rgba(20,40,70,.28)}
.login button{width:42px;height:42px;padding:0;border-radius:50%;justify-self:center;font-size:22px;line-height:1;color:#fff;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.55);opacity:.7;transition:opacity .2s,background .2s}
.login button:is(:hover,:focus-visible){background:rgba(255,255,255,.4);opacity:1;outline:0}
.login .note{margin:0;text-align:center;color:#fff;text-shadow:0 1px 4px rgba(20,40,70,.6)}
.login .note:empty{display:none}
.login main{min-height:100vh;display:grid;place-items:center;padding:20px;max-width:none;animation:fade .8s ease-out}
.panel[hidden]{display:none}
.login .panel{background:none;box-shadow:none;padding:0;width:100%;max-width:300px;box-sizing:border-box;animation:fade 1.2s ease-out}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.mini,.bone button{transition:none}
  .sky{display:none}
  main,.hero,dialog[open]{animation:none}
  h1 span:hover{transform:none}
}


/* family: the same paper and handwriting, under the sign-in's sky */
.family{position:relative}
.skyband{position:absolute;top:0;left:0;right:0;height:640px;z-index:0;background:#8fb3cf url(/sky.jpg) 18% 30%/cover;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.family nav a:not(.paw){color:#fff;text-shadow:0 1px 4px rgba(20,40,70,.5)}
.family nav .paw{color:#fff}
.family main{padding-top:30px}
.family-hero{margin-bottom:80px}
.family-hero .polaroid{max-width:380px}
.family-hero img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
.family-hero .name{color:#fff;text-shadow:0 2px 10px rgba(20,40,70,.55)}
.family-hero h1{color:#fff}
.family .hello{margin:0 0 6px;font-size:17px}
.family-hero .hello .link{font-size:17px;color:#fff}
.family-hero .dates{color:#fff}
.family .days{margin:0;font:italic 400 30px 'Newsreader',serif}
.today{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:30px 60px;align-items:center;margin-bottom:60px}
.family .prompt{margin:0;font:italic 400 32px/1.3 'Newsreader',serif}
.onthisday{list-style:none;margin:0 0 22px;padding:0 0 0 14px;border-left:2px solid #8a4b1f;display:grid;gap:8px;font-size:17px}
.years{position:sticky;top:0;z-index:10;display:flex;gap:6px 22px;overflow-x:auto;padding:14px 0;margin-bottom:34px;background:linear-gradient(#e9dfc9 70%,transparent);font:italic 400 22px 'Newsreader',serif}
.years a{white-space:nowrap;text-decoration:none;opacity:.8}
.years a:hover{opacity:1;text-decoration:underline}
.years small{margin-left:4px;font:13px 'Newsreader',serif;opacity:.7}
.pager{display:flex;justify-content:center;align-items:baseline;gap:28px;margin-top:40px;font:italic 400 22px 'Newsreader',serif}
.pager span{font-size:17px;color:#6e665d}
.photos .year{margin-bottom:60px}
.photos .year h3{margin:0 0 26px;font:500 clamp(40px,6vw,64px)/1 'Newsreader',serif;letter-spacing:-.02em}
.family .year{margin-bottom:70px;scroll-margin-top:60px}
.family .year h4{margin:0 0 26px;font:500 clamp(60px,9vw,110px)/.9 'Newsreader',serif;letter-spacing:-.03em}
.family .year h4 span{margin-left:14px;letter-spacing:0;font:italic 400 26px 'Newsreader',serif;color:#6e665d}
.wall{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-auto-flow:dense;gap:48px 38px}
.wall .note{position:relative;box-sizing:border-box;margin:var(--mt) 0 0;transform:rotate(var(--r));background:#f7e7a8}
.wall .note:nth-child(3n+1){background:#fbf3df}
.wall .note:nth-child(4n+2){background:#d9e6d6}
.wall .note p{font-family:'Newsreader',serif;font-style:italic;font-size:21px;line-height:1.35}
.family .letter{background:#fffdf6;font-style:italic;padding:22px 26px}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px 70px;align-items:start;margin-bottom:60px}
.duo section{margin-bottom:0}
.quirks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:14px 18px}
.quirks li{display:flex;align-items:baseline;gap:8px;padding:10px 16px;font:italic 400 24px/1.3 'Newsreader',serif;color:#3b2a1a;background:#f7e7a8;box-shadow:1px 2px 0 rgba(60,40,15,.14),3px 7px 9px rgba(60,40,15,.2);transform:rotate(-1.5deg)}
.quirks li:nth-child(even){background:#d9e6d6;transform:rotate(1.8deg)}
.quirks li:nth-child(3n){background:#fbf3df;transform:rotate(-.6deg)}
.quirks small{font:400 15px 'Newsreader',serif;color:#7a6a58}
.quirks form{display:inline}
.quirks button.link{font-size:14px}
.family form.inline{display:flex;gap:10px}
.family form.inline input{flex:1}
.family summary{cursor:pointer;font:500 22px/1.2 'Newsreader',serif;margin-bottom:16px}

/* chapters: each thing he loved has its colour (--c) and mark */
.years a{color:var(--c,#3b2a1a);display:inline-flex;align-items:center;gap:6px;opacity:.9}
.years a svg{flex:none}
.years .spacer{margin-left:auto}
.years a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.years .spacer ~ a{color:#6e665d;font-size:18px}
.family .year{padding:0 0 30px}
.family .year h4{display:flex;align-items:center;gap:.18em;color:var(--c,#3b2a1a);font-size:clamp(54px,8vw,96px);padding-bottom:14px;border-bottom:1.5px dashed rgba(90,70,45,.3)}
.family .year h4 svg{flex:none;width:.8em;height:.8em;transform:rotate(-8deg)}
.family .year h4 span{color:#6e665d}
.family select{padding:8px 10px;cursor:pointer}

/* touch screens have no hover: don't leave a card lifted after a tap */
@media (hover:none){
  .card:hover,.mini:hover{transform:rotate(var(--r));box-shadow:1px 2px 0 rgba(60,40,15,.14),var(--sx) 7px 9px rgba(60,40,15,.2)}
  h1 span:hover,.bone button:hover{transform:none}
}

/* family: forms are paper, not UI. Ruled sheets taped down, ink-line fields, handwritten labels */
.family .panel{position:relative;gap:18px;padding:30px 30px 26px}
.family .panel label{font:italic 400 21px/1 'Newsreader',serif;color:#5a3a1c;gap:6px}
.family .panel label.check{font:400 17px 'Newsreader',serif;color:#3b2a1a}
.family input:not([type=checkbox],[type=file]),.family textarea,.family select{background:transparent;border:0;border-bottom:1.5px dashed rgba(90,70,45,.45);padding:6px 2px;font-size:19px}
.family input:not([type=checkbox],[type=file]):focus,.family textarea:focus,.family select:focus{border-bottom-color:#8a4b1f;outline:0}
.family textarea{border:0;padding:0 2px;line-height:32px;resize:vertical;background:repeating-linear-gradient(transparent 0 31px,rgba(90,70,45,.24) 31px 32px) local}
.family button:not(.link){background:none;color:#8a4b1f;border:1.5px solid #8a4b1f;padding:6px 20px 7px;font:italic 400 22px/1.2 'Newsreader',serif;transition:background .2s,color .2s}
.family button:not(.link):hover{background:#8a4b1f;color:#fffdf6}
.today .panel,#letters>.panel{transform:rotate(.7deg)}
#letters>.panel{transform:rotate(-.5deg)}
.today .panel::before,#letters>.panel::before{content:'';position:absolute;top:-14px;left:50%;margin-left:-45px;width:90px;height:28px;background:rgba(240,200,90,.6);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.family .duo h3{font:italic 400 32px/1.1 'Newsreader',serif;color:#5a3a1c}
.family .letter{background:repeating-linear-gradient(transparent 0 29px,rgba(90,70,45,.14) 29px 30px),#fffdf6;border-left:2px solid rgba(200,90,80,.35);padding:16px 22px 14px 26px}
.family .letter p{line-height:30px;margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.family button:not(.link){transition:none}}

/* family: the personal bits */
.family .tally{margin:8px 0 0;font:italic 400 22px 'Newsreader',serif;color:#fff;opacity:.9;text-shadow:0 1px 6px rgba(20,40,70,.5)}
.family .birthday{margin:0 0 60px;text-align:center;font:italic 400 34px/1.2 'Newsreader',serif;color:#8a4b1f;text-wrap:balance}
.family .keepsake{max-width:640px;margin:0 auto 90px;padding:30px 34px 22px;position:relative;background:#f7e7a8;box-shadow:1px 2px 0 rgba(60,40,15,.14),4px 10px 14px rgba(60,40,15,.22);transform:rotate(-1deg)}
.family .keepsake::before{content:'';position:absolute;top:-13px;left:50%;margin-left:-40px;width:80px;height:26px;background:rgba(225,215,190,.75);transform:rotate(4deg);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.family .keepsake p{margin:0 0 12px;font:italic 400 28px/1.35 'Newsreader',serif;color:#3b2a1a;white-space:pre-wrap}
.family .keepsake footer{font-size:15px;color:#7a6a58;text-align:right}
.family .voices{text-align:center;margin:30px 0 60px}
.family .voices p{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 30px;font-family:'Newsreader',serif;font-style:italic;color:#5a3a1c}
.family .voices span:nth-child(even){color:#8a4b1f;transform:rotate(-2deg)}
.family .voices span:nth-child(odd){transform:rotate(1.5deg)}
.family .goodbye{margin:80px 0 0;text-align:center;font:italic 400 30px 'Newsreader',serif;color:#6e665d}
.birthday-mark{margin-right:.4em;color:#8a4b1f;opacity:.6;animation:fade 1.6s ease-out .6s both}
@media (prefers-reduced-motion:reduce){.birthday-mark{animation:none}}

/* family: photos lead. The first of each chapter is the big one; notes sit small beside them */
@media (min-width:760px){
  .wall button.card:first-of-type{grid-column:span 2;grid-row:span 2;padding:16px 16px 60px}
  .wall button.card:first-of-type::after{left:24px;right:24px;bottom:22px}
  .wall button.card:first-of-type .caption{left:24px;right:24px;bottom:26px;font-size:26px}
  .wall button.card:first-of-type .tape{height:26px}
}

/* family: the file picker wears the same ink-line button */
.family input[type=file]{font-size:17px;color:#6e665d}
.family input[type=file]::file-selector-button{margin-right:14px;padding:6px 20px 7px;background:none;color:#8a4b1f;border:1.5px solid #8a4b1f;font:italic 400 22px/1.2 'Newsreader',serif;cursor:pointer;transition:background .2s,color .2s}
.family input[type=file]::file-selector-button:hover{background:#8a4b1f;color:#fffdf6}
#manage{margin-bottom:60px}

/* family: adding photos is the page's main job, so it's a big taped sheet to drop things on */
.manage-title{margin:0 0 20px;font:italic 400 40px/1.1 'Newsreader',serif;color:#5a3a1c}
#upload{display:grid;gap:20px}
.dropzone{position:relative;display:grid;justify-items:center;gap:10px;padding:48px 24px 40px;text-align:center;cursor:pointer;background:#fffdf6;border:2px dashed rgba(90,70,45,.45);box-shadow:2px 3px 0 rgba(60,40,15,.1),6px 12px 18px rgba(60,40,15,.18);transform:rotate(-.3deg);transition:background .2s,border-color .2s}
.dropzone::before{content:'';position:absolute;top:-14px;left:50%;margin-left:-55px;width:110px;height:28px;background:rgba(240,200,90,.6);transform:rotate(-2deg);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.dropzone:hover,.dropzone.drag-over{background:#fbf3df;border-color:#8a4b1f}
.dropzone:focus-within{outline:2px solid #8a4b1f;outline-offset:4px}
.family .dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dz-title{font:italic 400 34px/1.1 'Newsreader',serif;color:#3b2a1a}
.dz-note{font-size:16px;color:#7a6a58}
.dz-btn{margin-top:6px;padding:6px 22px 7px;border:1.5px solid #8a4b1f;color:#8a4b1f;font:italic 400 22px/1.2 'Newsreader',serif;transition:background .2s,color .2s}
.dropzone:hover .dz-btn,.dropzone.drag-over .dz-btn{background:#8a4b1f;color:#fffdf6}
#queue{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.slip{display:grid;grid-template-columns:96px 1fr auto;gap:8px 18px;align-items:start;padding:14px 18px;background:#fffdf6;box-shadow:1px 2px 0 rgba(60,40,15,.14),3px 7px 9px rgba(60,40,15,.2)}
.slip:nth-child(odd){transform:rotate(-.3deg)}.slip:nth-child(even){transform:rotate(.4deg)}
.pv{display:block;width:96px;height:96px;overflow:hidden;background:repeating-linear-gradient(45deg,#efe2c3,#efe2c3 9px,#e8d9b6 9px,#e8d9b6 18px)}
.pv img{display:block;width:100%;height:100%;object-fit:cover}
.slip .fields{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.slip .q-cap{flex:1 1 260px}
.slip .q-note{grid-column:2/-1}
#upload progress{width:100%;height:8px;accent-color:#8a4b1f}
#manage h3{margin-top:44px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:30px 24px;align-items:start}
.tile{position:relative;padding:10px 10px 12px;background:#fffdf6;box-shadow:1px 2px 0 rgba(60,40,15,.14),3px 7px 9px rgba(60,40,15,.2)}
.tile img,.tile .blank{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:repeating-linear-gradient(45deg,#efe2c3,#efe2c3 9px,#e8d9b6 9px,#e8d9b6 18px)}
.tile .private{top:16px;right:16px}
.tile .cap{margin:10px 2px 8px;font:italic 400 19px/1.2 'Newsreader',serif;color:#5a3a1c;overflow-wrap:anywhere}
.tile .acts{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tile details{flex:1;display:grid;gap:10px}
.tile summary{margin:0;font:400 16px 'Newsreader',serif;color:#8a4b1f;text-decoration:underline;text-underline-offset:4px;cursor:pointer;list-style:none}
.tile summary::-webkit-details-marker{display:none}
.tile .tag{font:italic 400 16px 'Newsreader',serif;color:#6e665d}
.tile button.link{font-size:16px}
@media (max-width:560px){
  .slip{grid-template-columns:72px 1fr}
  .pv{width:72px;height:72px}
  .slip .q-remove{grid-column:2;justify-self:start}
}

/* phones: two-up polaroids, tighter rhythm, no fixed-background jank, bigger tap targets */
@media (hover:none){body{background-attachment:scroll}}
.login main{min-height:100dvh}
@media (max-width:600px){
  body{font-size:18px}
  main{padding-top:36px;padding-bottom:90px}
  .home main{gap:56px;padding-bottom:50px}
  .hero{gap:28px}
  .grid,.tiles,.wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .card{padding:8px 8px 32px}
  .card::after{left:12px;right:12px;bottom:10px}
  .caption{font-size:16px;left:12px;right:12px;bottom:11px}
  .play svg{width:34px;height:34px}
  .lightbox .prev,.lightbox .next{padding:10px}
  .lightbox figcaption{font-size:19px}

  /* family */
  .family .wall .note{grid-column:1/-1}
  .family .wall button.card:first-of-type{grid-column:1/-1}
  .family .year h4{flex-wrap:wrap;font-size:44px}
  .home main{min-height:calc(100dvh - 90px)}
  .family .prompt{font-size:26px}
  .family .birthday{font-size:28px}
  .family .keepsake{margin-bottom:60px;padding:26px 22px 18px}
  .family .keepsake p{font-size:24px}
  .family .panel{padding:26px 20px 22px}
  .family-hero{margin-bottom:56px}
  .today{gap:34px;margin-bottom:44px}
  .duo{gap:40px}
  .manage-title{font-size:34px}
  .dropzone{padding:38px 16px 30px}
  .dz-title{font-size:28px}
  .dz-note{font-size:15px}
  .family .voices p{gap:4px 20px}
  .family .goodbye{margin-top:56px}
  .family form.inline{flex-wrap:wrap}
}
@media (hover:none){
  .family button.link{padding:10px 6px}
  .tile summary{padding:10px 0}
  nav a{padding:10px 0}
  nav .paw{opacity:.55;padding:6px}
}

/* phones, looser: room around the cards, calmer tilt */
@media (max-width:600px){
  body{font-size:19px}
  nav,main{padding-left:24px;padding-right:24px}
  nav{gap:24px}
  main{padding-top:44px;padding-bottom:110px}
  .home main{gap:72px}
  .grid,.tiles,.wall{gap:44px 26px}
  .card{padding:9px 9px 36px;transform:rotate(calc(var(--r) * .55))}
  .card:hover{transform:rotate(calc(var(--r) * .55))}
  .card::after{bottom:12px}
  .caption{bottom:13px}
  .family .wall .note{transform:rotate(calc(var(--r) * .5))}
  .family .year{margin-bottom:90px}
  .family .year h4{margin-bottom:34px}
  .family section{margin-bottom:64px}
  .years{padding:16px 0;margin-bottom:44px;gap:6px 26px}
  .family .panel{padding:30px 22px 26px;gap:22px}
  .family .keepsake{padding:30px 26px 22px}
  .family .keepsake p{line-height:1.45}
  .slip{padding:16px;gap:12px 16px}
  .tile{padding:10px 10px 14px}
  .dropzone{padding:44px 20px 36px}
  .today{gap:44px;margin-bottom:64px}
  .family-hero{margin-bottom:70px}
  .duo{gap:56px}
}


/* plain pass: photos are just photos, no tape or tilt, one serif throughout */
body{background-image:none}
.polaroid,.card,.mini,.tile,.slip,.panel,.keepsake,.dropzone,.quirks li,.wall .note,.voices span,h1 span{transform:none!important} /* beats the per-card --r and every nth-child tilt */
.polaroid,.card,.mini,.tile{background:none;padding:0;box-shadow:none;margin-top:0}
.polaroid::before,.polaroid::after,.card::after,.tape,.dropzone::before,.keepsake::before,.today .panel::before,#letters>.panel::before{display:none}
.polaroid{max-width:420px}
.card{text-align:left;transition:opacity .2s}
.card:hover,.mini:hover{opacity:.85;box-shadow:none}
.caption,.wall button.card:first-of-type .caption{position:static;display:block;margin-top:8px;font:italic 400 16px/1.3 'Newsreader',serif;white-space:normal;text-align:left;color:#6e665d}
.wall button.card:first-of-type{padding:0}
.private{top:8px;right:8px;font-size:13px}
.tile .private{top:8px;right:18px}
.tile{padding:0 0 4px}
.panel,.slip,.dropzone,.quirks li,.wall .note,.wall .note:nth-child(n),.keepsake,.family .letter{background:#fffdf6;box-shadow:0 1px 3px rgba(60,40,15,.18)}
.family .keepsake p,.family .birthday,.family .goodbye,.manage-title,.dz-title,.family .days,.dates{font-size:22px}
.family .days,.family .birthday,.family .goodbye{font-size:20px}
.family .panel label,.family button:not(.link),.dz-btn,.family input[type=file]::file-selector-button{font:400 17px/1.2 'Newsreader',serif}
.family .duo h3{font:500 22px/1.2 'Newsreader',serif}
.wall .note p,.quirks li,.loved span{font-size:19px}
.family .year h4 span{font-size:20px}
.years{font-size:18px}
@media (max-width:600px){.family .keepsake p{font-size:20px}.manage-title,.dz-title{font-size:22px}}