@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-wdth-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:italic;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-italic.woff2) format("woff2-variations"),url(fonts/archivo-latin-wdth-italic.woff2) format("woff2")}
/* Layout: CV language on the web. Letterspaced labels, wide ultra-bold name, thick rules,
   numbered entries, then the work at full width on warm paper. One committed light theme. */
:root{
  --paper:#f3f1ec; --ink:#141412; --muted:#6c6a63; --rule:#141412; --line:#d8d5cc;
  --accent:#e2522a; --night:#0d1015; --on-night:#f3f1ec;
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gutr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5;font-stretch:100%}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
.label{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.muted{color:var(--muted)}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:3px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:14px}
.brand{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:18px;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:6px 22px;flex-wrap:wrap}
.nav a{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.home .top{position:absolute;inset:env(safe-area-inset-top,0px) 0 auto;background:transparent;border-bottom:0;color:var(--on-night)}

/* hero */
.hero{position:relative;min-height:min(86svh,960px);display:flex;align-items:flex-end;background:var(--night);color:var(--on-night);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,16,21,.55) 0%,rgba(13,16,21,0) 30%,rgba(13,16,21,0) 45%,rgba(13,16,21,.85) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-block:120px 40px}
.hero h1{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(52px,11vw,168px);line-height:.86;letter-spacing:-.01em;margin:0}
.hero .bar{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;border-top:3px solid var(--on-night);margin-top:22px;padding-top:12px}
.hero .hook{font-size:clamp(17px,1.6vw,21px);margin:14px 0 0;max-width:40ch}

/* entries */
.entries{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:3px solid var(--rule)}
.entry{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:220px;padding:22px var(--gutr) 26px var(--gut);text-decoration:none;border-right:1px solid var(--line);transition:background .2s}
.entry:last-child{border-right:0}
.entry:hover{background:var(--ink);color:var(--paper)}
.entry h2{font-family:var(--display);font-weight:900;font-stretch:118%;font-size:clamp(30px,3.6vw,54px);line-height:.95;margin:0;text-transform:uppercase}
.entry .go{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media (max-width:760px){.entries{grid-template-columns:1fr}.entry{border-right:0;border-bottom:1px solid var(--line);min-height:150px}}

/* page head */
.phead{padding-block:48px 22px;border-bottom:3px solid var(--rule)}
.phead h1{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(44px,8vw,112px);line-height:.9;margin:10px 0 0;text-transform:uppercase;text-wrap:balance}
.phead p{max-width:60ch;margin:14px 0 0;font-size:18px}
.crumb{text-decoration:none;border-bottom:1px solid currentColor}

/* video pieces */
.pieces{display:grid;gap:0}
.piece{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px 40px;padding-block:34px;border-bottom:1px solid var(--line)}
.piece .meta{display:flex;flex-direction:column;gap:10px;min-width:0}
.piece h2{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(24px,2.6vw,36px);line-height:1.05;margin:0;text-wrap:balance}
.piece .yr{font-variant-numeric:tabular-nums}
.vid{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--night);color:var(--on-night);display:flex;align-items:center;justify-content:center;text-decoration:none;overflow:hidden}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .play{display:flex;align-items:center;gap:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.vid .play i{width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.vid .play i::after{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--paper);margin-left:4px}
.vid.empty{background:transparent;color:var(--muted);border:1px dashed var(--line);font-size:14px;letter-spacing:.06em}
@media (max-width:760px){.piece{grid-template-columns:1fr}}

/* illustration */
.sel{columns:3 300px;column-gap:14px;padding-block:28px}
.sel figure,.grid figure{break-inside:avoid;margin:0 0 14px}
.tile{display:block;width:100%;padding:0;border:0;background:#e8e5dd;cursor:zoom-in}
.tile img{width:100%;height:auto}
figcaption{font-size:13px;color:var(--muted);padding-top:6px}
.subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;border-top:3px solid var(--rule);margin-top:20px}
.sub{display:flex;flex-direction:column;gap:12px;padding:18px 18px 22px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.sub .cov{aspect-ratio:4/3;background:#e8e5dd;overflow:hidden}
.sub .cov img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sub:hover .cov img{transform:scale(1.03)}
.sub h3{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:24px;margin:0;text-transform:uppercase}
.secthead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;padding-top:40px}
.secthead h2{font-family:var(--display);font-weight:900;font-stretch:118%;font-size:clamp(28px,3.6vw,48px);margin:0;text-transform:uppercase}
.group{padding-bottom:20px;border-bottom:1px solid var(--line)}
.group > p{max-width:62ch;margin:8px 0 18px}
.grid{columns:3 280px;column-gap:14px}
.grid.pages{columns:4 220px}

/* cv + contact */
.cv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;padding-block:40px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);text-decoration:none;padding:16px 22px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.btn:hover{background:var(--accent)}
.facts{list-style:none;margin:0;padding:0;border-top:3px solid var(--rule)}
.facts li{padding:14px 0;border-bottom:1px solid var(--line);font-size:19px}
.cv .profile{font-size:19px;max-width:52ch;margin:0}
.contact{padding-block:40px;display:grid;gap:0;border-top:0}
.contact .row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:8px 24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.contact .val{font-family:var(--display);font-weight:800;font-stretch:110%;font-size:clamp(20px,3vw,34px);overflow-wrap:anywhere}
.copy{margin-left:12px;font:600 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;background:none;border:1px solid var(--ink);padding:7px 10px;cursor:pointer;vertical-align:middle}
@media (max-width:760px){.cv{grid-template-columns:1fr}.contact .row{grid-template-columns:1fr}}

/* footer */
.foot{border-top:3px solid var(--rule);margin-top:60px}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:18px 28px;flex-wrap:wrap}
.foot .mark{height:30px;width:auto;mix-blend-mode:multiply}
.foot .n{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:22px}

/* lightbox */
dialog.lb{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:rgba(10,10,10,.94);color:#eee}
dialog.lb::backdrop{background:rgba(10,10,10,.94)}
.lb .stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:56px max(56px,env(safe-area-inset-right,0px)) 72px max(56px,env(safe-area-inset-left,0px))}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb .cap{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom,0px));text-align:center;font-size:13px;letter-spacing:.06em;padding:0 16px}
.lb button{position:absolute;background:none;border:0;color:#eee;font:700 13px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:14px}
.lb .x{top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px))}
.lb .p{left:max(4px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);font-size:30px}
.lb .n{right:max(4px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);font-size:30px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* hero name sits on the dark ground, below the walkers' faces */
.hero h1{font-size:clamp(52px,8.6vw,136px)}
@media (min-width:900px){.hero h1 .br,.hero .br{display:none}}
.hero::after{background:linear-gradient(180deg,rgba(13,16,21,.55) 0%,rgba(13,16,21,0) 22%,rgba(13,16,21,0) 55%,rgba(13,16,21,.9) 100%)}
/* hero: Cheramie stills, slow crossfade with a gentle push in. 5 s per still. */
.hero .slide{opacity:0;animation:fade calc(var(--n)*5s) linear infinite, push calc(var(--n)*5s) linear infinite;animation-delay:calc(var(--k)*5s - 1.4s);object-position:50% 50%}
@keyframes fade{0%{opacity:0}4%{opacity:1}14.3%{opacity:1}18%{opacity:0}100%{opacity:0}}
@keyframes push{0%{transform:scale(1)}18%{transform:scale(1.06)}100%{transform:scale(1.06)}}
.hero .slide:first-of-type{opacity:1}
@media (prefers-reduced-motion:reduce){.hero .slide{animation:none;opacity:0}.hero .slide:first-of-type{opacity:1}}
/* title card: condensed caps, upright line over italic line, hard drop shadow, centred on the still */
.hero{align-items:center}
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 25%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.4) 100%)}
.hero .wrap{padding-block:110px 60px;text-align:center}
.hero h1.title{display:flex;flex-direction:column;align-items:center;gap:0;margin:0;font-family:var(--display);font-weight:900;font-stretch:62%;color:#ecebe6;line-height:.84;letter-spacing:.005em;text-shadow:.045em .045em 0 rgba(10,10,12,.55)}
.hero h1.title span{white-space:nowrap}
.hero h1.title .l1{font-size:clamp(60px,16vw,250px)}
.hero h1.title .l2{font-style:italic;font-size:clamp(26px,7.4vw,116px);letter-spacing:.06em;margin-top:.08em}
.hero .tsub{margin:22px 0 0;color:#ecebe6;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* sizes tuned for the real (wide) Archivo */
.entry h2{font-size:clamp(26px,2.5vw,40px);font-stretch:112%}
.phead h1{font-size:clamp(38px,6.4vw,92px);font-stretch:118%;overflow-wrap:anywhere}
.secthead h2{font-size:clamp(24px,3vw,40px);font-stretch:112%}
.piece h2{font-stretch:105%}
.brand{font-stretch:118%}
.foot .n{font-stretch:118%}
.vid{background-size:cover;background-position:center}
.vid[style*="background-image"]::before{content:"";position:absolute;inset:0;background:rgba(10,12,16,.35)}
.vid .play{position:relative;z-index:1}
.vid.ext{background:#1f2126}
.pieces .piece:first-child{padding-top:10px}
/* Behance links: a compact bar, not an empty screen */
.vid.ext{aspect-ratio:auto;min-height:84px;justify-content:flex-start;padding:0 22px;background:var(--ink)}
.vid.ext:hover{background:var(--accent)}
.vid.ext .play i{width:44px;height:44px}
.vid.ext .play i::after{border-width:8px 0 8px 13px}
.mvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding-bottom:10px}
.mv{margin:0}.mv video{width:100%;aspect-ratio:16/9;background:var(--night);display:block;object-fit:contain}
.vidlocal{width:100%;aspect-ratio:16/9;background:var(--night);display:block}
.drive{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--night)}
.drive iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.grid.even{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.grid.even figure{margin:0}
.grid.even .tile{aspect-ratio:16/9;overflow:hidden}
.grid.even .tile img{width:100%;height:100%;object-fit:cover}