/* Normal Life Works site v1 */
:root{
  --bg:#f3f0e9; --ink:#141618; --muted:#6c6e6a; --rule:#d8d3c7; --card:#e6e2d8;
  --accent:#8a6a36;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --pad:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule)}
.mark{font-family:var(--display);font-weight:800;font-stretch:112%;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(17px,2.2vw,22px);text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:clamp(14px,2.4vw,32px)}
.nav a{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}

/* filters */
.work{padding:clamp(20px,3vw,36px) var(--pad) 0}
.filters{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 clamp(18px,2.4vw,28px)}
.filters button{appearance:none;border:0;background:none;padding:4px 0;cursor:pointer;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent}
.filters button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.filters button:hover{color:var(--ink)}

/* grid */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,22px) clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(220px,44vw),1fr))}
.grid li[hidden]{display:none}
.card{display:block;text-decoration:none}
.card .ph{aspect-ratio:1;overflow:hidden;background:var(--card)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s ease}
.card:hover img,.card:focus-visible img{transform:scale(1.035)}
.card h2{margin:10px 0 0;font-family:var(--display);font-weight:700;font-stretch:100%;font-size:15px;line-height:1.25;letter-spacing:.04em;text-transform:uppercase}
.card p{margin:2px 0 0;font-style:italic;font-size:14px;color:var(--muted)}
.card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.loadfail{color:var(--muted)}

/* about + contact */
.about,.contact{padding:clamp(56px,8vw,110px) var(--pad) 0}
.label{margin:0 0 24px;padding-top:14px;border-top:2px solid var(--ink);font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cols{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols h3{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:20px;font-stretch:108%;text-transform:uppercase;letter-spacing:.02em}
.cols p{margin:0 0 14px;max-width:46ch}
.email{font-family:var(--display);font-weight:600;font-stretch:104%;font-size:clamp(20px,3.4vw,34px);text-decoration:none;border-bottom:2px solid var(--accent)}
.email:hover{color:var(--accent)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,8vw,110px);padding:22px var(--pad) 28px;
  border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* project view */
.project{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--ink)}
.project::backdrop{background:var(--bg)}
.p-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:12px var(--pad);
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.p-bar button{appearance:none;background:none;border:1px solid var(--rule);color:var(--ink);cursor:pointer;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;height:38px;padding:0 14px}
.p-bar button:hover{border-color:var(--ink)}
.p-nav{font-size:18px!important;letter-spacing:0!important;width:44px;padding:0!important}
.p-close{margin-left:auto}
.p-body{max-width:980px;margin:0 auto;padding:clamp(24px,4vw,48px) var(--pad) 80px}
.p-body h1{margin:0;font-family:var(--display);font-weight:800;font-stretch:110%;font-size:clamp(30px,5.4vw,56px);line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
.p-type{margin:6px 0 0;font-style:italic;color:var(--muted)}
.p-about{margin:26px 0 0;max-width:62ch}
.p-about p{margin:0 0 12px}
.p-vids{display:grid;gap:clamp(18px,3vw,32px);margin-top:28px}
.p-vid{position:relative;aspect-ratio:16/9;background:#000}
.p-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.p-credits{margin-top:30px;padding-top:14px;border-top:1px solid var(--rule);font-size:15px;color:var(--muted)}
.p-credits h2{margin:0 0 6px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.p-credits p{margin:0}
.p-link{display:inline-block;margin-top:22px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--accent)}
body.locked{overflow:hidden}

@media (max-width:560px){
  body{font-size:16px}
  .top{padding-top:14px;padding-bottom:14px}
  .nav{gap:14px}
  .nav a{font-size:12px;letter-spacing:.08em}
  .card h2{font-size:13px}
  .card p{font-size:13px}
}
@media (max-width:560px){
  .nav a[href="#work"]{display:none}
  .mark{font-size:16px;font-stretch:104%}
}
@media (max-width:340px){ .mark{font-size:14px} .nav{gap:10px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .card img{transition:none} }