@font-face{font-family:"Anton";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/anton-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/caveat-latin-500-normal.woff2) format("woff2")}
/* Layout: black editorial portfolio. Giant condensed red caps cut into
   full-bleed photos; red tag blocks carry credits; one split duotone hero. */
:root{
  --black:#0D0B0A;   /* page */
  --panel:#171311;   /* raised black */
  --red:#BF2241;     /* rose crimson sampled from the shirt lining; bone text on it passes WCAG AA (4.8:1) */
  --red-deep:#6E1228;/* duotone shadow */
  --bone:#EEE5DC;    /* text */
  --muted:#A0948B;   /* secondary text */
  --rule:#2E2724;
  --f-display:"Anton", "Impact", "Arial Narrow", sans-serif;
  --f-body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-hand:"Caveat", "Bradley Hand", cursive;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --max:1240px;
  --hero:url(/img/hero.webp);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--bone);font:400 1rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--black)}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.caps{font:500 .75rem/1.55 var(--f-body);letter-spacing:.09em;text-transform:uppercase}
.muted{color:var(--muted)}
.giant{font-family:var(--f-display);color:var(--bone);text-transform:uppercase;line-height:.88;letter-spacing:-.005em;text-wrap:balance}
.giant .dot,.giant .accent{color:var(--red)}

/* nav */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--black) 86%,transparent);backdrop-filter:blur(8px)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px}
.logo{font-family:var(--f-display);font-size:1.25rem;letter-spacing:.04em;text-decoration:none;text-transform:uppercase}
.logo span{color:var(--red)}
nav ul{display:flex;gap:clamp(12px,2.6vw,32px);list-style:none;margin:0;padding:0}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--bone)}
@media (max-width:560px){nav li.opt{display:none}}

/* hero */
.hero-img{position:relative;aspect-ratio:1800/947;max-width:100%;background:var(--hero) center/cover no-repeat;}
.hero-img .duo{position:absolute;inset:0;clip-path:inset(0 0 0 50%);background:var(--red)}
.hero-img .duo::before{content:"";position:absolute;inset:0;background:var(--hero) center/cover no-repeat;filter:grayscale(1) contrast(1.25) brightness(1.05);mix-blend-mode:multiply}
.hero-img .duo::after{content:"";position:absolute;inset:0;background:var(--red-deep);mix-blend-mode:lighten;opacity:.35}
.hero-img .seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:color-mix(in srgb,var(--bone) 45%,transparent)}
.hero-img .tag{position:absolute;top:16px;left:16px;background:var(--red);color:var(--bone);padding:6px 10px}
.hero-img .tag2{position:absolute;bottom:16px;right:16px;color:var(--bone);text-align:right;background:var(--black);padding:6px 10px;max-width:calc(100% - 32px)}
@media (max-width:700px){.hero-img{aspect-ratio:4/5;background-position:48% center}.hero-img .duo::before{background-position:48% center}}
.hero-text{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px 48px;align-items:start;position:relative}
.hero-text h1{font-size:clamp(3.2rem,9.4vw,8.6rem);margin-top:clamp(-5.5rem,-7vw,-2.2rem)}
.hero-copy{padding-top:clamp(16px,2vw,28px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#cycle{display:inline-block;transition:opacity .35s ease,transform .35s ease}
#cycle.out{opacity:0;transform:translateY(.12em)}
.tagline{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.02;color:var(--bone)}
.tagline span{color:var(--red)}
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(56px,7vw,88px)}
.roles article{border-top:2px solid var(--red);padding-top:14px;display:grid;gap:10px;align-content:start;min-width:0}
.roles h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1}
.roles p{font-size:.92rem;line-height:1.6}
.roles .proof{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.7}
@media (max-width:960px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.roles{grid-template-columns:1fr}}
.hero-copy{display:grid;gap:14px;padding-bottom:10px;max-width:46ch}
.hero-copy p{font-size:.9rem;line-height:1.65;text-transform:uppercase;letter-spacing:.04em}
.hero-copy p.muted{font-size:.8rem}
@media (max-width:820px){.hero-text{grid-template-columns:1fr}}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{display:inline-block;padding:11px 18px;text-decoration:none;font:700 .78rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--red)}
.btn.solid{background:var(--red);color:var(--bone)}
.btn:hover{background:var(--bone);color:var(--black);border-color:var(--bone)}

section{padding-block:clamp(72px,10vw,128px)}
.head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.head h2{font-size:clamp(3.6rem,12vw,9.5rem)}
.head p{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.7;max-width:48ch;padding-bottom:12px}
@media (max-width:820px){.head{grid-template-columns:1fr}}

/* work */
.lead{position:relative;display:block;overflow:hidden;aspect-ratio:1405/600;max-width:100%}
.shot{position:relative;overflow:hidden;background:var(--panel)}
.shot img,.lead img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.shot:hover img,.lead:hover img{transform:scale(1.04)}
.label{position:absolute;background:var(--red);color:var(--bone);padding:12px 14px;display:grid;gap:14px;min-width:min(220px,70%)}
.label .r1{display:flex;justify-content:space-between;gap:16px}
.label b{font-weight:700}
.lead .label{left:0;bottom:0}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.trio .shot{aspect-ratio:4/5}
.trio .shot:nth-child(1) .label{left:0;bottom:0;right:0}
.trio .shot:nth-child(2) .label{left:0;right:0;bottom:0}
.trio .shot:nth-child(3) .label{right:0;bottom:0;left:0}
@media (max-width:760px){.trio{grid-template-columns:1fr}.trio .shot{aspect-ratio:4/3}.lead{aspect-ratio:4/3}}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(56px,7vw,88px) 0 20px;align-items:center}
.pill{font:500 .75rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;padding:10px 16px;border-radius:999px;border:1px solid var(--red);background:transparent;color:var(--bone);cursor:pointer}
.pill[aria-pressed="true"]{background:var(--red)}
.index{border-top:2px solid var(--red)}
.index details{border-bottom:1px solid var(--rule)}
.index summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,13rem) 1.5rem;gap:16px;align-items:center;padding:14px 0}
.index summary::-webkit-details-marker{display:none}
.index .t{font-family:var(--f-display);font-size:clamp(1.3rem,2.6vw,1.9rem);text-transform:uppercase;line-height:1.05;transition:color .2s}
.index summary:hover .t{color:var(--red)}
.index .y,.index .r{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.index .pm{color:var(--red);font-size:1.3rem;transition:transform .2s;text-align:right}
.index details[open] .pm{transform:rotate(45deg)}
.creds{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;margin:0 0 20px 0;font-size:.85rem;max-width:720px}
.creds dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding-top:3px}
.creds dd{margin:0}
@media (max-width:640px){.index summary{grid-template-columns:minmax(0,1fr) 1.5rem}.index .r{display:none}.creds{margin-left:0}}

/* awards marquee */
.marquee{background:var(--panel);color:var(--bone);border-block:1px solid var(--rule);overflow:hidden;padding-block:18px;white-space:nowrap}
.marquee .track{display:inline-flex;gap:0;animation:slide 48s linear infinite}
.marquee span{font-family:var(--f-display);font-size:clamp(1.6rem,3.4vw,2.6rem);text-transform:uppercase;padding-right:1.1em}
.marquee span::after{content:"✦";color:var(--red);margin-left:1.1em;font-size:.55em;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee .track{animation:none;flex-wrap:wrap;white-space:normal}.marquee{white-space:normal}}
.clients{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:16px 48px}
.clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--f-display);font-size:clamp(1.3rem,2.5vw,2rem);text-transform:uppercase;line-height:1.2;color:var(--bone)}

@media (max-width:760px){.clients{grid-template-columns:1fr}}

/* impact */
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.cell{grid-column:span 4;background:var(--panel);padding:clamp(20px,2.6vw,30px);display:grid;gap:14px;align-content:start;min-width:0}
.cell.w8{grid-column:span 8}
.cell.w6{grid-column:span 6}
.cell.w12{grid-column:span 12}
.subhead{grid-column:span 12;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-top:clamp(32px,5vw,56px);padding-top:14px;border-top:1px solid var(--rule)}
.subhead h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1}
.cell.accent-top{border-top:3px solid var(--red)}
.cell.red .caps{color:color-mix(in srgb,var(--bone) 80%,transparent)}
.cell h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2rem,4vw,3.4rem);line-height:.92}
.cell p{font-size:.95rem;line-height:1.6;max-width:58ch}
.cell .lnk{font:700 .75rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;justify-self:start}
.cell .lnk::after{content:" ↗"}
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.nums div{border-top:1px solid var(--rule);padding-top:10px}
.nums b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1;color:var(--red)}
.nums span{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.chap{list-style:none;margin:0;padding:0;display:grid;gap:0}
.chap li{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);padding:10px 0;font-size:.92rem}
.chap li span:first-child{color:var(--red);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;padding-top:3px}
@media (max-width:900px){.cell,.cell.w8,.cell.w6,.cell.w12{grid-column:span 12}}

/* studio */
.studio{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.studio .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px 48px;align-items:end}
.studio h2{font-size:clamp(4.2rem,15vw,13rem)}
.studio h2 em{font-style:normal;color:var(--bone)}
@media (max-width:820px){.studio .wrap{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}
.duo-img{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--panel);overflow:hidden}
.duo-img img{display:block;width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(3.4rem,10vw,8rem);margin-left:clamp(-7rem,-9vw,0rem);position:relative}
@media (max-width:860px){.about{grid-template-columns:1fr}.about h2{margin-left:0;margin-top:-.55em}}
.bio{display:grid;gap:16px;margin-top:24px;max-width:60ch}
.bio p{font-size:1rem;line-height:1.7;color:var(--bone)}
.bio p.muted{color:var(--muted)}
.trip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.trip div{border-top:2px solid var(--red);padding-top:10px;display:grid;gap:6px}
.trip b{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:1.4rem;line-height:1}
.trip p{font-size:.85rem;color:var(--muted);line-height:1.55}
@media (max-width:640px){.trip{grid-template-columns:1fr}}

.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:28px;margin-top:clamp(64px,8vw,104px)}
.refs figure{margin:0;display:grid;gap:14px;align-content:start}
.refs blockquote{margin:0;font-size:1.05rem;line-height:1.55}
.refs blockquote::before{content:"“";display:block;font-family:var(--f-display);color:var(--red);font-size:3.2rem;line-height:.6;margin-bottom:6px}
.refs figcaption b{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}

/* contact */
.contact{background:var(--red);color:var(--bone)}
.contact .giant{color:var(--black);font-size:clamp(5rem,20vw,17rem)}
.contact .wrap{display:grid;gap:28px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px}
.cbox{border-top:2px solid var(--black);padding-top:12px;display:grid;gap:8px;min-width:0}
.cbox .v{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.05;overflow-wrap:anywhere;text-decoration:none}
.cbox .v.mail{text-transform:none}
.cbox button{justify-self:start;font:700 .72rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--bone);background:transparent;color:var(--bone);cursor:pointer}
.cbox button:hover{background:var(--bone);color:var(--red)}
.studio-copy{display:grid;gap:14px;padding-bottom:14px}
.studio-copy p{font-size:1.05rem;line-height:1.65;max-width:44ch}
.studio-copy .btn{justify-self:start}
footer .wrap{padding-block:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}

@media (prefers-reduced-motion: no-preference){
  .hero-text h1{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy{animation:up .9s .15s cubic-bezier(.2,.7,.2,1) both}
  @keyframes up{from{transform:translateY(24px)}to{transform:none}}
}


/* added: personal intro, index links, detail view, placeholders */
html{scroll-padding-top:72px}
.tagline .br{display:block;color:var(--muted)}
.hi{font-family:var(--f-hand);font-size:clamp(1.55rem,2.3vw,1.9rem);line-height:1.2;text-transform:none;letter-spacing:0;color:var(--bone)}
.hero-copy p.hi{font-size:clamp(1.55rem,2.3vw,1.9rem);line-height:1.2;text-transform:none;letter-spacing:0}
.index .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,13rem) 4rem 1.5rem;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.index .row:hover .t,.index .row:focus-visible .t{color:var(--red)}
.index .pm{color:var(--red);font-size:1.3rem;text-align:right}
@media (max-width:640px){.index .row{grid-template-columns:minmax(0,1fr) 3rem 1.5rem}.index .r{display:none}}
.cell .lnk.int::after{content:" \2192"}
.detail{padding-bottom:clamp(64px,8vw,104px)}
.detail .top-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:clamp(24px,4vw,40px) clamp(18px,2.5vw,32px);position:relative;z-index:2}
.back{text-decoration:none;color:var(--bone)}
.back:hover{color:var(--red)}
.detail h1{font-size:clamp(3.2rem,10vw,8.4rem)}
.detail h1 .accent{color:var(--red)}
.d-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 48px;margin:clamp(24px,4vw,40px) 0 clamp(32px,5vw,56px)}
.d-grid .sum{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;max-width:52ch}
.d-grid .creds{margin:0;max-width:none}
@media (max-width:820px){.d-grid{grid-template-columns:1fr}}
.d-hero{margin:0;background:var(--panel);display:flex;justify-content:center}
.d-hero video,.d-hero img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain}
.d-hero.tall video,.d-hero.tall img{width:auto;max-width:100%}
.gal{columns:2 320px;column-gap:16px;margin-top:16px}
.gal figure{margin:0 0 16px;break-inside:avoid;background:var(--panel)}
.gal img,.gal video{display:block;width:100%;height:auto}
.film{margin-top:16px}
.todo{border:1px dashed var(--red);padding:16px 18px;margin-top:16px;display:grid;gap:6px}
.todo b{font:700 .72rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.todo p{font-size:.92rem;color:var(--muted)}
.d-next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-top:clamp(48px,6vw,80px);padding-top:20px;border-top:2px solid var(--red)}
.d-next a.nx{text-decoration:none;display:grid;gap:6px}
.d-next a.nx span:last-child{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);line-height:1}
.d-next a.nx:hover span:last-child{color:var(--red)}


.index .row[hidden]{display:none}