/* Replica of the Kade/Framer layout: 16px gutters, 56px header, 100vh hero bottom-aligned, 2-col 4:3 grid, full-bleed white */
:root{
  --bg:#fafafa; --fg:#050505; --fg-2:#050505; --line:#e6e6e6; --ph:#e9e8e5; --ph-2:#d6d4cf;
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:16px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.ph-empty{width:100%;height:100%;background:var(--ph)}
.adminlink{margin-top:28px;font-size:12px;opacity:.35}
.adminlink a:hover{opacity:1}
.hero-img img,.img img{width:100%;height:100%;object-fit:cover;display:block}
html,body{height:auto}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;font-weight:500;line-height:1.3;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
p,h1,h2,h3{margin:0}
.b{font-weight:700}
.xl{font-size:32px;line-height:1;letter-spacing:-.03em;font-weight:700}
.sm{font-size:16px;line-height:1.3;letter-spacing:-.02em;font-weight:700}
.page{padding-inline:var(--gut);min-height:100vh}

/* Header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gut) 12px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.hdr::before{content:"";position:absolute;inset:0;bottom:-24px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);background:linear-gradient(var(--bg) 20%,transparent);z-index:-1}
.hdr a,.hdr button{pointer-events:auto}
.hdr button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}

/* Menu overlay */
.ov{position:fixed;inset:0;z-index:40;background:rgba(250,250,250,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;display:flex;flex-direction:column;justify-content:center;padding:var(--gut);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.ov.on{opacity:1;pointer-events:auto}
.ov nav{display:flex;flex-direction:column;gap:6px}
.ov .ct{position:absolute;left:var(--gut);bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:7px}
.ov .ct a{font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ov a{transition:opacity .2s}.ov a:hover{opacity:.5}

/* Home hero */
.hero{min-height:100vh;display:flex;align-items:flex-end;padding-bottom:57px;padding-top:80px}
.hero h1{font-size:72px;line-height:.9;letter-spacing:-.03em;font-weight:700;max-width:1124px}
.hero h1 .c{display:inline-block;opacity:0;transform:translateY(12px);filter:blur(6px);animation:ch .5s cubic-bezier(.2,.65,.3,1) forwards}
.hero h1 .w{display:inline-block;white-space:nowrap}
@keyframes ch{to{opacity:1;transform:none;filter:blur(0)}}
@media(max-width:860px){.hero h1{font-size:44px;line-height:.95}.hero{padding-bottom:40px}}

/* Filter */
.filt{display:flex;align-items:center;gap:8px;padding-block:32px 24px;font-weight:700}
.filt .opts{display:flex;gap:8px;flex-wrap:wrap}
.filt button,.filt .clear{background:none;border:0;padding:0;font:inherit;font-weight:700;letter-spacing:-.02em;color:var(--fg);cursor:pointer;opacity:.4;transition:opacity .2s}
.filt button[aria-pressed="true"],.filt .clear{opacity:1}
.filt .clear{margin-left:auto;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.filt .mob{display:none}
@media(max-width:860px){
  .filt{display:grid;grid-template-columns:1fr auto;gap:10px 16px;padding-block:24px}
  .filt .lab{grid-column:1/-1}.filt .dash,.filt .opts{display:none}
  .filt .mob{display:block;position:relative;min-width:0}
  .filt select{appearance:none;-webkit-appearance:none;width:100%;max-width:360px;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 28px 8px 8px;font:inherit;font-weight:700;letter-spacing:-.02em;color:var(--fg);border-radius:0}
  .filt .mob::after{content:"";position:absolute;right:10px;top:12px;width:8px;height:8px;border-right:1.5px solid var(--fg);border-bottom:1.5px solid var(--fg);transform:rotate(45deg);pointer-events:none}
  .filt .clear{margin-left:0;align-self:center}
}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 16px;padding-bottom:160px}
.card{display:block;min-width:0}
.card[hidden]{display:none}
.img{position:relative;width:100%;max-width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--ph)}
.img canvas,.img img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s cubic-bezier(.2,.65,.3,1)}
.card:hover .img canvas{transform:scale(1.02)}
.cap{display:flex;justify-content:space-between;gap:16px;padding-top:11px;font-weight:500}
.cap span{white-space:nowrap}
@media(max-width:860px){.grid{grid-template-columns:1fr;gap:34px 0;padding-bottom:120px}}

/* Footer */
.ft{padding:0 var(--gut) calc(16px + env(safe-area-inset-bottom,0px))}
.ft .ct{display:flex;flex-direction:column;gap:6px;margin-bottom:60px}
.ft .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ft .row .soc{display:flex;gap:16px}
.ft .yr{font-size:40px;line-height:1;letter-spacing:-.03em;font-weight:700}
.ft a:hover{opacity:.5}
@media(max-width:860px){.ft .ct{gap:8px;margin-bottom:40px}.ft .ct a{font-size:24px}.ft .row .soc{gap:14px}.ft .row .soc a{font-size:22px}}

/* Inner pages */
.inner{padding-top:160px}
.rows{border-bottom:1px solid var(--line)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);padding-block:12px}
.row2 .lab{font-weight:700}
.row2 .val{display:flex;flex-direction:column;gap:6px;font-weight:700}
.row2 .val a{display:inline;width:max-content;max-width:100%;border-bottom:1px solid var(--fg);line-height:1.25}
.row2 .val a:hover{opacity:.5}
.photo{margin-top:40px;width:100%;max-width:100%;aspect-ratio:1124/700;background:var(--ph);overflow:hidden;margin-bottom:140px}
.photo canvas{width:100%;height:100%;display:block}
@media(max-width:860px){.inner{padding-top:120px}.row2{grid-template-columns:1fr 1fr}.photo{aspect-ratio:4/3;margin-bottom:100px}}

/* Studio */
.sec{margin-bottom:120px}
.sec h3{font-size:16px;font-weight:700;margin-bottom:16px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.two .img{aspect-ratio:4/3}
.tbl .r{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;border-top:1px solid var(--line);padding-block:14px;font-weight:500}
.tbl .r:last-child{border-bottom:1px solid var(--line)}
.tbl .r .lab{font-weight:700}.tbl .r .end{text-align:right}
.tbl.press .r{grid-template-columns:1fr 1fr auto}
.members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.members .img{aspect-ratio:3/4}
@media(max-width:860px){.sec{margin-bottom:80px}.two{grid-template-columns:1fr}.tbl .r{grid-template-columns:1fr 1fr}.tbl .r .end{grid-column:2;text-align:right}.tbl.press .r{grid-template-columns:1fr auto}.tbl.press .r .mid{grid-column:1/-1}.members{grid-template-columns:1fr}}

/* Project */
.ph{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px}
.ph .desc{font-weight:500;max-width:552px;line-height:1.3}
.ph .meta{margin-top:24px;margin-left:50%}
.ph .meta .r{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-block:12px;font-weight:500}
.ph .meta .r b{font-weight:700}
.hero-img{width:100%;max-width:100%;aspect-ratio:1124/750;background:var(--ph);overflow:hidden;margin-bottom:16px}
.hero-img canvas,.hero-img img{width:100%;height:100%;display:block;object-fit:cover}
.related{margin-top:140px;margin-bottom:140px}
.related h3{font-size:16px;margin-bottom:24px}
.related .r{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);padding-block:14px;font-weight:500}
.related .r:last-child{border-bottom:1px solid var(--line)}
.related .r .end{text-align:right}
@media(max-width:860px){.ph{grid-template-columns:1fr}.ph .meta{margin-left:0}.related{margin-block:80px}}

/* Appear animation */
.ap{opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.2,.65,.3,1),transform .6s cubic-bezier(.2,.65,.3,1)}
.ap.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ap{opacity:1;transform:none;transition:none}.hero h1 .c{animation:none;opacity:1;transform:none;filter:none}}