@font-face { font-family:"Akkurat"; src:url("assets/Akkurat-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
:root { --ink:#000; --paper:#fff; --line:rgba(0,0,0,.55); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Akkurat",Arial,sans-serif; font-size:11px; letter-spacing:0; }
button,a { color:inherit; font:inherit; } button { cursor:pointer; }
.site-header { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:minmax(150px,1.4fr) minmax(160px,1fr) minmax(240px,2fr) 80px; align-items:start; padding:14px 17px 13px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter:blur(12px); }
.name { grid-column:1; font-size:15px; font-weight:700; text-decoration:none; letter-spacing:0; }.role { position:absolute; top:14px; left:36.8%; margin:0; line-height:1.05; } nav { grid-column:3; display:flex; gap:18px; justify-self:center; }.nav-link { padding:0; border:0; background:transparent; text-decoration:none; opacity:.45; }.nav-link:hover,.nav-link.active { opacity:1; text-decoration:underline; text-underline-offset:3px; }.counter { grid-column:4; text-align:right; }
.projects { padding:0; }.project { padding:0 0 18px; border-bottom:1px solid var(--line); }.project-image { display:block; width:100%; height:min(70vh,790px); overflow:hidden; padding:0; border:0; background:#d4d4d0; }.project-image img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.12); transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s; }.project:nth-child(3n+2) .project-image img { object-position:center 25%; }.project[data-project="ecal-poster"] .project-image { padding:clamp(8px,1vw,18px) clamp(80px,11vw,200px) 0; background:#000; filter:grayscale(100%) contrast(1.12) invert(0); transition:filter .4s cubic-bezier(.37,0,.63,1); }.project[data-project="ecal-poster"] .project-image:hover { filter:grayscale(100%) contrast(1.12) invert(1); }.project[data-project="ecal-poster"] .project-image img { object-fit:cover; object-position:center -45px; filter:none; transition:transform .4s cubic-bezier(.37,0,.63,1); }.project-image:hover img { transform:scale(1.025); filter:grayscale(100%) contrast(1.12) invert(1); }.featured .project-image { height:calc(100vh - 58px); }
.project[data-project="esoterica-typeface"] .project-image { background:#000; filter:grayscale(100%) contrast(1.12) invert(0); transition:filter .4s; }.project[data-project="esoterica-typeface"] .project-image:hover { filter:grayscale(100%) contrast(1.12) invert(1); }.project[data-project="esoterica-typeface"] .project-image img { object-fit:contain; filter:none; transform:scale(1.08); transition:none; }.project[data-project="esoterica-typeface"] .project-image:hover img { transform:scale(1.08); filter:none; }
.project[data-project="nex-1"] .project-image { background:#000; }.nex-video-strip { position:relative; display:block; width:100%; height:100%; overflow:hidden; transition:transform .7s cubic-bezier(.2,.7,.2,1); }.nex-video-source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.nex-video-canvas { display:block; width:100%; height:100%; filter:grayscale(100%) contrast(1.12) invert(0); transition:filter .4s; will-change:filter; }.project[data-project="nex-1"] .project-image:hover .nex-video-canvas { filter:grayscale(100%) contrast(1.12) invert(1); }.project[data-project="nex-1"] .project-image:hover .nex-video-strip { transform:scale(1.015); }
.project[data-project="plenty-night"] .project-image { background:#000; }.project[data-project="plenty-night"] .project-image img { object-fit:cover; object-position:center 35%; transform:none; }.project[data-project="plenty-night"] .project-image:hover img { transform:scale(1.025); }
.project[data-project="blood-on-the-crown"] .project-image img { object-position:center 45%; }
.project-meta { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:8px; align-items:baseline; padding:7px 17px 0; text-transform:uppercase; }.project-meta h2 { margin:0; font-size:18px; line-height:1; font-weight:700; letter-spacing:0; }.project-meta span:last-child { text-align:right; }
.panel { min-height:calc(100vh - 58px); padding:18px 17px; }.eyebrow { margin:0 0 36px; opacity:.55; }#overview-list { padding:0; margin:0; list-style:none; counter-reset:projects; }#overview-list li { display:grid; grid-template-columns:42px 1fr auto; padding:7px 0; border-bottom:1px solid var(--line); text-transform:uppercase; cursor:pointer; }#overview-list li::before { counter-increment:projects; content:counter(projects,decimal-leading-zero); }#overview-list li:hover { background:var(--ink); color:var(--paper); }.info-copy { max-width:650px; font-size:clamp(23px,4vw,51px); line-height:.98; letter-spacing:0; }.info-copy p { margin:0 0 1em; }.info-copy a { text-decoration:none; border:0; }
.project-dialog { width:100vw; max-width:none; height:100vh; margin:0; padding:0; border:0; color:var(--paper); background:#000; }.project-dialog::backdrop { background:#000; }.dialog-image { position:relative; height:75vh; padding:16px 16px 0; overflow:hidden; }.dialog-image img,.dialog-image video { display:block; width:100%; height:100%; object-fit:contain; }.dialog-image img.is-logo-negative { transform:scale(1.3); }.dialog-image img:not([src=""]),.dialog-image video:not([hidden]) { cursor:pointer; }.dialog-image img[hidden],.dialog-image video[hidden] { display:none; }.carousel-control { position:absolute; z-index:1; top:50%; width:44px; height:44px; padding:0; border:0; color:var(--paper); background:transparent; font-size:22px; transform:translateY(-50%); }.carousel-control.previous { left:16px; }.carousel-control.next { right:16px; }.carousel-counter { position:absolute; right:18px; bottom:7px; padding:3px 5px; color:var(--paper); background:#000; }.dialog-meta { display:grid; grid-template-columns:1fr 3fr 2fr; gap:16px; padding:14px 17px; border-top:1px solid rgba(241,240,234,.35); }.dialog-meta .eyebrow { margin:0; }.dialog-meta h2,.dialog-meta p { margin:0; }.dialog-meta h2 { font-size:clamp(23px,4vw,48px); font-weight:700; letter-spacing:0; line-height:.9; }.description { opacity:.66; }.close { position:absolute; z-index:2; top:7px; right:14px; padding:3px 5px; border:0; color:var(--paper); background:transparent; font-size:11px; line-height:1; }
@media (max-width:700px) { .site-header { grid-template-columns:1fr 1fr; gap:9px 0; }.name { grid-column:1; grid-row:1; }.role { position:static; grid-column:2; grid-row:1; text-align:right; }.site-header nav { grid-column:1; grid-row:2; justify-self:start; }.counter { grid-column:2; grid-row:2; }.projects { padding:0; }.project { padding:0 0 13px; }.project-image { height:55vh; }.project[data-project="ecal-poster"] .project-image { padding:8px 28px 0; }.featured .project-image { height:72vh; }.project-meta { grid-template-columns:28px 1fr; padding:7px 9px 0; }.project-meta span:last-child { grid-column:2; text-align:left; opacity:.58; }.dialog-image { height:64vh; padding:42px 9px 0; }.carousel-control.previous { left:9px; }.carousel-control.next { right:9px; }.carousel-counter { right:11px; }.dialog-meta { grid-template-columns:1fr; gap:8px; padding:12px 10px; }.dialog-meta .eyebrow { display:none; } }