/* Heath Film and Photo — simple "Other work" pages. Burst Sequence Black/Red tokens, same as the landing page. */
:root{
  color-scheme:dark;
  --night:#09090A; --black:#0D0D0E; --darkroom:#18181B; --graphite:#2B2B2F; --lead:#4F4F54;
  --ash:#8A8A8F; --silver:#B8B8BD; --white:#FFFFFF; --tally:#EC4636;
  --display:'Archivo',system-ui,sans-serif; --label:'IBM Plex Mono',ui-monospace,monospace; --serif:'Instrument Serif',Georgia,serif;
  --gutter:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font:400 17px/1.6 var(--display);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video,iframe{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--tally);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--white);color:var(--black);padding:8px 12px}
.wrap{max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.mono{font:500 12px/1.6 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--tally);margin-right:.7em;vertical-align:.05em}
.disp{font:italic 900 clamp(48px,8vw,120px)/.88 var(--display);font-variation-settings:'wdth' 62;text-transform:uppercase;margin:12px 0 0;text-wrap:balance}
.h2{font:600 15px/1.2 var(--display);font-variation-settings:'wdth' 125;letter-spacing:.08em;text-transform:uppercase;margin:0 0 20px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--tally);color:var(--black);font-weight:700;text-decoration:none}
.btn:hover{background:#F2675A}

.top{position:sticky;top:0;z-index:20;background:rgba(13,13,14,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--graphite)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;flex-wrap:wrap;padding-block:10px}
.brand svg{height:40px;width:auto;display:block}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{text-decoration:none;font:600 14px var(--display);font-variation-settings:'wdth' 112;color:var(--silver);padding:10px 12px;border-radius:999px}
.top nav a:hover{color:var(--white)}
.top nav a[aria-current]{background:var(--white);color:var(--black)}

.head{padding-block:clamp(48px,7vw,96px) clamp(24px,3vw,40px)}
.kicker{margin:0}
.lede{max-width:56ch;color:var(--silver);font-size:19px;margin:20px 0 0}
.note{margin-top:16px;text-transform:none;letter-spacing:.04em}
.note a{color:var(--white);text-decoration-color:var(--tally)}

.films{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;margin-bottom:24px}
.film{margin:0;background:var(--darkroom);border-radius:14px;overflow:hidden}
.film video{width:100%;max-height:80vh;background:#000}
.film iframe{width:100%;aspect-ratio:16/9;border:0}

.grid{columns:3 280px;column-gap:10px}
.ph{display:block;width:100%;margin:0 0 10px;padding:0;border:0;background:var(--darkroom);cursor:zoom-in;break-inside:avoid;border-radius:6px;overflow:hidden}
.ph img{width:100%;height:auto;transition:opacity .2s}
.ph:hover img{opacity:.85}

.group{padding-block:24px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,240px),1fr));gap:10px}
.card{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:8px;text-decoration:none;background:var(--darkroom)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,0,0,1)}
.card:hover img{transform:scale(1.04)}
.card span{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;font:600 15px/1.2 var(--display);font-variation-settings:'wdth' 125;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(transparent,rgba(9,9,10,.9))}

.story,.quotes{padding-block:40px}
.story p{max-width:68ch;color:var(--silver)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pill{border:1.5px solid var(--lead);border-radius:999px;padding:10px 16px;text-decoration:none;font-weight:600}
.pill:hover{border-color:var(--white)}
.quote{margin:0 0 32px;max-width:72ch}
.quote blockquote{margin:0 0 10px;font:italic 400 clamp(20px,2vw,26px)/1.35 var(--serif)}

.about{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(24px,4vw,64px);align-items:start;padding-bottom:64px}
.about-img{width:100%;height:auto;border-radius:10px}
.prose p{color:var(--silver);margin:0 0 18px}
@media (max-width:900px){.about{grid-template-columns:1fr}}

.ways{display:grid;gap:20px;padding-bottom:64px}
.way{border-top:2px solid var(--graphite);padding-top:24px}
.way:first-child{border-color:var(--tally)}
.way p{color:var(--silver);max-width:60ch}
.way .big{font-size:22px;color:var(--white)}
.hb{background:var(--white);color:var(--black);border-radius:14px;padding:clamp(12px,2vw,24px);max-width:900px;min-height:320px}

.ask{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:48px;margin-top:24px;border-top:1px solid var(--graphite)}
.ask p{margin:0;font:italic 400 clamp(22px,2.4vw,32px)/1.25 var(--serif);max-width:40ch}

.foot{border-top:1px solid var(--graphite);padding-block:40px;background:var(--night)}
.foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-row .mono{display:flex;gap:18px;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{color:var(--white)}
.legal{margin-top:20px;color:var(--ash);font-size:11px}

dialog{border:0;padding:0;background:transparent;max-width:min(94vw,1400px);max-height:94vh}
dialog::backdrop{background:rgba(9,9,10,.95)}
dialog img{max-width:100%;max-height:86vh;margin-inline:auto}
dialog form{display:flex;justify-content:center;margin-top:12px}
dialog button{background:none;border:1.5px solid var(--white);color:var(--white);border-radius:999px;min-height:44px;padding:0 20px;font:600 14px var(--display);cursor:pointer}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:640px){.brand svg{height:32px}.top nav a{padding:8px 9px;font-size:13px}.grid{columns:2 140px;column-gap:6px}.ph{margin-bottom:6px}}