:root { --paper:#f1eee5; --ink:#1c1b18; --red:#d94b32; --line:rgba(28,27,24,.28); }
* { box-sizing:border-box; } html { background:var(--paper); -webkit-tap-highlight-color:transparent; }
body { margin:0; color:var(--ink); font-family:'DM Mono',monospace; background:var(--paper); min-height:100vh; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:pan-y; overscroll-behavior:none; }
.grain { pointer-events:none; position:fixed; inset:0; z-index:20; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.masthead { padding:clamp(1rem,3vw,3rem) clamp(1.3rem,5vw,5.5rem) 2rem; display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--line); position:relative; }
.masthead:after { content:''; background:radial-gradient(circle at center,#9EB87A,#3D4A28) center/cover no-repeat; width:clamp(20px,3vw,44px); height:clamp(20px,3vw,44px); border-radius:50%; position:absolute; left:75%; top:100%; transform:translateY(-50%); }
.eyebrow, footer { font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.eyebrow { margin:0; grid-column:1/-1; } .copy { font-size:calc(1em + 3px); } .pulse-link { color:#1877F2; text-decoration:none; display:inline-block; animation:heartBeat 1.7s ease-in-out infinite; vertical-align:middle; margin-left:.25em; } .pulse-link svg { display:block; width:1.3em; height:1.3em; }
@keyframes heartBeat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.35)} 30%{transform:scale(1)} 45%{transform:scale(1.25)} 60%{transform:scale(1)} }
h1 { font:700 clamp(4rem,8vw,8.5rem)/.9 'Playfair Display',serif; letter-spacing:-.08em; margin:clamp(3rem,9vw,8.5rem) 0 0; } h1 em { font-weight:500; }
.laurel { display:inline; height:1.2em; vertical-align:middle; margin-left:0.2em; opacity:.75; }
.credit { margin:-1.8rem 0 0; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
@media (min-width:601px) { .laurel { height:calc(2.2em - 30px); margin-top:-0.3em; } h1 { line-height:.65; } .eyebrow { font-size:14px; } .credit { font-size:14px; } }
.header-side { align-self:end; padding-bottom:.3rem; padding-top:1.19rem; text-align:left; font-size:11px; line-height:1.3; display:flex; gap:0; align-items:start; justify-content:space-between; }
.header-side a { flex-shrink:0; }
.header-text-group { padding-right:1.5rem; }
.logo-img { margin-left:-34px !important; }
.logo-link img { transition:opacity .3s; }
.logo-link:hover img, .logo-link:focus-visible img { opacity:.75; }
.logo-link { outline:none; }
.logo-link:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
@keyframes logoHint { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.header-side .eyebrow { line-height:1.7; }
.header-side a { color:inherit; text-decoration:none; font-size:30px; line-height:.7; transition:transform .3s,opacity .3s; cursor:pointer; animation:tapPulse 2s ease-in-out infinite; margin-top:6px; position:relative; }.header-side a:hover { transform:rotate(180deg) scale(1.15); }
.header-side a::before,.header-side a::after { content:''; position:absolute; width:46px; height:46px; top:50%; left:50%; margin:-23px 0 0 -23px; border:2px solid var(--red); border-radius:50%; animation:ringPulse 2s ease-out infinite; box-sizing:border-box; }
.header-side a::after { animation-delay:.7s; }
main { padding:clamp(1.5rem,4vw,4rem) clamp(1.3rem,5vw,5.5rem); overflow:hidden; }.gallery { columns:3; column-gap:clamp(4px,.7vw,10px); }
.card { width:100%; display:inline-block; break-inside:avoid; position:relative; margin:0 0 clamp(4px,.7vw,10px); cursor:zoom-in; opacity:0; overflow:hidden; background:#ddd8ca; animation:rise .75s cubic-bezier(.2,.8,.2,1) forwards; }.card.shape-1 { aspect-ratio:1/1.26; }.card.shape-2 { aspect-ratio:1/1.58; }.card.shape-3 { aspect-ratio:1.14/1; }.card.shape-4 { aspect-ratio:1/1.04; }.card.shape-5 { aspect-ratio:1/1.42; }.card.shape-6 { aspect-ratio:1.22/1; }.card.shape-7 { aspect-ratio:1/1.18; }.card.shape-8 { aspect-ratio:1.08/1; }
.card img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.82) contrast(1.04); transition:filter .55s,transform .7s cubic-bezier(.2,.75,.2,1); }.card:after { content:attr(data-index); font-size:9px; position:absolute; left:8px; top:8px; color:var(--paper); background:var(--ink); padding:4px 5px; opacity:0; transition:opacity .2s; }.card:hover { z-index:2; }.card:hover img { filter:saturate(1.1) contrast(1); transform:scale(1.06); }.card:hover:after { opacity:1; }
.like-button { position:absolute; z-index:5; display:flex; gap:8px; align-items:center; padding:18px 18px; color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.3); border-radius:999px; font:500 14px/1 'DM Mono',monospace; cursor:pointer; transition:background .2s,border-color .2s,transform .15s; pointer-events:auto; }.like-button span { font-size:20px; color:#fff; transition:transform .25s,color .25s; display:inline-block; transform:scaleX(1.2) scaleY(1.1); }.like-button b { font:inherit; min-width:1.2em; text-align:center; }.like-button:hover { background:rgba(255,255,255,.25); }.like-button:active { transform:scale(.93); }.like-button.liked { background:rgba(233,88,85,.25); border-color:rgba(233,88,85,.5); }.like-button.liked span { color:#e95855; animation:likePop .35s cubic-bezier(.17,.89,.32,1.28); }.like-button.like-error { animation:likeShake .4s; }
@keyframes likePop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1.15)} }
@keyframes tapPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes ringPulse { 0%{transform:scale(.8);opacity:.7;border-color:var(--red)} 100%{transform:scale(1.6);opacity:0;border-color:transparent} }
@keyframes likeShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-4px)} 40%,80%{transform:translateX(4px)} }
.empty-state { text-align:center; padding:10vw 0; font:500 1.6rem/1.15 'Playfair Display',serif; }.empty-state p { margin:1rem 0 .3rem; }.empty-state span { font:10px/1.7 'DM Mono',monospace; }.empty-state code,.empty-mark { color:var(--red); }.empty-mark { font-size:3rem; }
.lightbox { position:fixed; z-index:30; inset:0; display:none; place-items:center; overflow:hidden; background:#262522; }.lightbox.open { display:grid; }.lightbox img { width:100vw; height:100dvh; max-width:none; max-height:none; object-fit:contain; touch-action:none; }.lightbox .close { position:absolute; z-index:5; right:1rem; top:1rem; width:46px; height:46px; color:var(--paper); background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.22); border-radius:50%; cursor:pointer; font:2.5rem/.8 serif; }.lightbox p { position:absolute; z-index:5; bottom:1.2rem; left:1.2rem; color:var(--paper); margin:0; padding:.5rem .75rem; background:rgba(0,0,0,.55); font-size:11px; letter-spacing:.1em; }.lightbox #lightbox-like { right:1.2rem; bottom:1.2rem; }
.nav-arrow { position:absolute; z-index:5; top:50%; transform:translateY(-50%); width:48px; height:48px; color:var(--paper); background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.22); border-radius:50%; cursor:pointer; font:2.4rem/.85 serif; opacity:0; transition:opacity .25s,background .2s; pointer-events:none; }
.lightbox:hover .nav-arrow { opacity:1; pointer-events:auto; }
.nav-arrow:hover { background:rgba(0,0,0,.6); }
.nav-prev { left:1rem; }
.nav-next { right:1rem; }
footer { padding:1.2rem clamp(1.3rem,5vw,5.5rem); display:flex; justify-content:space-between; border-top:1px solid var(--line); } footer a { color:inherit; text-decoration:underline; text-underline-offset:2px; } @keyframes rise { from{opacity:0;transform:rotate(-180deg) scale(.2)} to{opacity:1;transform:rotate(0) scale(1)} }
@media (pointer:coarse) { .nav-arrow { opacity:.7; pointer-events:auto; } .lightbox:hover .nav-arrow { opacity:.7; } }
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:40; background:var(--ink); color:var(--paper); font-size:8px; letter-spacing:.06em; padding:.6rem 1rem; display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; line-height:1.4; text-align:center; } .cookie-banner button { background:var(--red); color:#fff; border:0; padding:.3rem .7rem; cursor:pointer; font:inherit; letter-spacing:.1em; flex-shrink:0; }
@media (max-width:600px) { .masthead { min-height:360px; }.masthead:after { left:auto; right:20%; transform:translateX(30px) translateY(-50%); }.logo-img { margin-left:-8px !important; transform:scale(1.25); transform-origin:top left; }.logo-link { animation:logoHint 2.4s ease-in-out infinite; }.gallery { columns:2 145px; column-gap:4px; }.card { margin-bottom:0; } .footer-pc { display:none; } footer { font-size:8px; justify-content:flex-start; gap:1rem; } footer span:last-child { margin-left:auto; } .credit { margin:-12px 0 0; } }
@media (min-width:601px) { .gallery { columns:4; column-gap:6px; } .card { margin-bottom:1px; } .footer-pc { display:none; } }