:root{
  --bg:#f1eee5; --ink:#191510; --ink-2:#5a5142; --muted:#8d8268;
  --line:#e0dac9; --accent:#c63d2b; --edge:#a8702a;
  --pol:#fff; --pol-edge:#efece2; --pol-shadow:0 8px 26px rgba(40,30,12,.18),0 2px 6px rgba(40,30,12,.12);
  --grain:.045;
}
body.dark{
  --bg:#141109; --ink:#f0e9d9; --ink-2:#b6a98f; --muted:#7e7259;
  --line:#2b2317; --accent:#e8543f; --edge:#e3a23f;
  --pol:#f7f4ec; --pol-edge:#e8e3d6; --pol-shadow:0 14px 36px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --grain:.08;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Jost',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background .45s,color .45s;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
@media(max-width:600px){.wrap{padding:0 18px;}}

.mono{font-family:'IBM Plex Mono',monospace;}

/* header */
header.mast{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.mast-row{display:flex;align-items:center;justify-content:space-between;padding:15px 0;gap:14px;}
.wordmark{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.01em;font-size:20px;color:var(--ink);text-decoration:none;}
nav.links{display:flex;gap:22px;}
nav.links a{font-weight:500;color:var(--ink-2);text-decoration:none;font-size:13px;transition:color .2s;}
nav.links a:hover{color:var(--ink);}
.moodbtn{font-family:'IBM Plex Mono',monospace;cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink-2);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:999px;transition:.2s;}
.moodbtn:hover{border-color:var(--accent);color:var(--ink);}
@media(max-width:600px){nav.links{display:none;}}

/* intro */
.intro{padding:62px 0 26px;}
.intro h1{font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(34px,6.5vw,82px);line-height:.95;letter-spacing:-.02em;margin:0;}
.scrawl{font-family:'Caveat',cursive;font-weight:600;color:var(--accent);font-size:clamp(24px,3.4vw,40px);transform:rotate(-3deg);display:inline-block;margin-top:6px;}
.intro .sub{margin-top:18px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
@media(max-width:600px){.intro{padding:38px 0 20px;}}

/* filters */
.filters{position:sticky;top:54px;z-index:40;display:flex;gap:8px;align-items:center;padding:14px 0;overflow-x:auto;scrollbar-width:none;background:linear-gradient(color-mix(in srgb,var(--bg) 92%,transparent) 65%,transparent);}
.filters::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;font-family:'Jost',sans-serif;font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:.18s;}
.chip:hover{color:var(--ink);border-color:var(--muted);}
.chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.count{flex:0 0 auto;margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-left:14px;}
.empty{font-family:'IBM Plex Mono',monospace;color:var(--muted);text-align:center;padding:40px 0;}

/* feed — polaroids */
.feed{column-count:3;column-gap:30px;padding:20px 0 30px;}
@media(max-width:920px){.feed{column-count:2;}}
@media(max-width:560px){.feed{column-count:1;column-gap:0;}}
.pol{break-inside:avoid;margin:0 auto 34px;max-width:340px;background:var(--pol);padding:12px 12px 0;
  box-shadow:var(--pol-shadow);border:1px solid var(--pol-edge);cursor:pointer;position:relative;
  opacity:0;transform:translateY(16px) rotate(var(--rot,0deg));
  transition:opacity .5s,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}
.pol.in{opacity:1;transform:translateY(0) rotate(var(--rot,0deg));}
.pol:hover{transform:translateY(-5px) rotate(0deg);box-shadow:0 20px 46px rgba(20,14,4,.30);z-index:5;}
.pol:nth-child(3n+1){--rot:-1.6deg;}.pol:nth-child(3n+2){--rot:1.2deg;}.pol:nth-child(3n+3){--rot:-.6deg;}
.pol .pic{position:relative;overflow:hidden;background:#ddd;}
.pol .pic img,.pol .pic video{width:100%;height:auto;display:block;}
.pol .pic img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s;}
.pol:hover .pic img{transform:scale(1.04);}
.pol.bw .pic img{filter:grayscale(1) contrast(1.05);}
.pol.bw:hover .pic img{filter:grayscale(0);}
.pol .strip{padding:14px 6px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:62px;}
.pol .strip .cap{font-family:'Caveat',cursive;font-weight:600;font-size:23px;line-height:.95;color:#23201a;}
.pol .strip .data{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#9a8f78;text-align:right;white-space:nowrap;}

.arrow{position:absolute;bottom:-6px;right:14px;z-index:6;font-family:'Caveat',cursive;font-weight:700;color:var(--accent);font-size:20px;transform:rotate(6deg);}
.badge{position:absolute;bottom:8px;right:8px;z-index:3;background:rgba(0,0,0,.62);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.05em;padding:3px 7px;border-radius:2px;}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;transition:opacity .3s;}
.play span{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.play span::after{content:"";border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;}
.pol.playing .play{opacity:0;}

.poster{aspect-ratio:1/1;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;}
.poster .pt{font-weight:900;font-style:italic;text-transform:uppercase;font-size:30px;line-height:.92;letter-spacing:-.01em;}

/* about + footer */
.about{border-top:1px solid var(--line);margin-top:24px;padding:64px 0 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;}
@media(max-width:680px){.about{grid-template-columns:1fr;gap:26px;padding:44px 0 24px;}}
.about h2{font-weight:900;font-style:italic;text-transform:uppercase;font-size:30px;margin:0 0 16px;letter-spacing:-.01em;}
.about p{font-weight:400;font-size:17px;line-height:1.6;max-width:50ch;margin:0 0 14px;}
.hand-note{font-family:'Caveat',cursive;font-size:22px;color:var(--accent);}
.placeholder{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.08em;}
.about .label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.contact a{display:block;color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line);transition:.18s;}
.contact a:hover{padding-left:8px;color:var(--accent);}
footer.foot{border-top:1px solid var(--line);padding:20px 0 60px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,8,5,.92);display:flex;align-items:center;justify-content:center;}
.lightbox[hidden]{display:none;}   /* a class display value otherwise overrides the hidden attribute */
.lb-stage{max-width:92vw;max-height:82vh;}
.lb-stage img,.lb-stage video{max-width:92vw;max-height:82vh;display:block;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.lb-cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-family:'Caveat',cursive;font-size:24px;color:#f3ecdb;}
.lb-close{position:absolute;top:16px;right:18px;background:none;border:none;color:#f3ecdb;font-size:24px;cursor:pointer;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#f3ecdb;font-size:48px;cursor:pointer;padding:0 18px;opacity:.7;}
.lb-nav:hover{opacity:1;}.lb-prev{left:6px;}.lb-next{right:6px;}
@media(max-width:600px){.lb-nav{font-size:34px;padding:0 8px;}}

@media(prefers-reduced-motion:reduce){
  .pol{transition:none;opacity:1;transform:rotate(var(--rot,0deg));}
  .pol:hover .pic img{transform:none;}
  html{scroll-behavior:auto;}
}