/* Chrisna de Bruyn — portfolio. Desktop layout from 900px; phone layout below. */
@font-face{font-family:Renner;src:url(fonts/Renner-Book.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Renner;src:url(fonts/Renner-Medium.woff2) format('woff2');font-weight:500 700;font-style:normal;font-display:swap}

:root{
  --bg:#000;--fg:#fff;--muted:#a6a6a6;--line:#333;--tile:#1a1a1a;
  --display:Renner,Jost,"Futura PT",Futura,Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --frame:8px;--glow:0 20px 48px -18px rgba(255,255,255,.22),0 2px 10px rgba(255,255,255,.06);
  --header:98px;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body)}
a{color:var(--fg);text-decoration:none;-webkit-tap-highlight-color:transparent}
p{margin:0}
ul{margin:0;padding-left:20px}
button{font:inherit;color:inherit}
img{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid #fff;outline-offset:4px}

@keyframes cdbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cdbFade{from{opacity:0}to{opacity:1}}
.in{animation:cdbIn 600ms var(--ease) both}
.fade{transition:opacity 360ms ease,transform 520ms var(--ease)}
.fade.out{opacity:0;transform:translateY(14px)}

.photo{width:100%;height:auto;border:var(--frame) solid #fff;box-shadow:var(--glow);background:var(--tile);object-fit:cover}
.wrap{max-width:1232px;margin:0 auto;width:100%;padding:0 32px}
.cap{font-family:var(--display);font-size:13px;line-height:20px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:30;height:var(--header);background:var(--bg)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.nav{display:flex;gap:30px;font-family:var(--display);font-size:19px;line-height:28px;letter-spacing:1.8px;text-transform:uppercase}
.nav a{color:var(--muted);border-bottom:1px solid transparent;transition:color 200ms ease}
.nav a:hover{color:#fff}
.nav a.on{color:#fff;border-bottom-color:#fff}
.name{font-family:var(--display);font-weight:500;font-size:22px;line-height:22px;letter-spacing:3px;margin-right:-3px;text-transform:uppercase}
.menu-btn{display:none}

/* ---------- work grid ---------- */
.grid{display:flex;gap:48px;align-items:flex-start;padding-top:24px;padding-bottom:80px}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:48px}
.tile{display:block;position:relative;width:100%}
.tile .photo{height:100%}
.tile .ov{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:0 40px;opacity:0;transition:opacity 260ms ease}
.tile:hover .ov,.tile:focus-visible .ov{opacity:1}
.ov .n{font-size:13px;line-height:16px;letter-spacing:2px}
.ov .t{font-family:var(--display);font-weight:600;font-size:32px;line-height:40px}
.ov .v{font-family:var(--display);font-size:14px;line-height:22px;letter-spacing:1.4px;text-transform:uppercase}
.tile .meta{display:none}

/* ---------- two-pane pages ---------- */
.two{display:flex;gap:48px;align-items:flex-start;padding-bottom:80px}
.pane{position:sticky;top:var(--header);flex:1 1 290px;max-width:300px;min-width:260px}
.main{flex:0 1 860px;margin-left:auto;min-width:0;padding-top:16px;display:flex;flex-direction:column;gap:36px}

/* roller (vertical on desktop) */
.roll-pane{height:calc(100vh - var(--header) - 32px);min-height:460px;padding-top:16px;display:flex;flex-direction:column}
.roll-pane .spacer{min-height:44px}
.roll-view{flex-grow:1;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 78%,transparent 100%)}
.track{position:absolute;left:0;right:0;top:20%;display:flex;flex-direction:column;gap:6px;will-change:transform;transition:transform 750ms var(--ease)}
.r{display:block;flex-shrink:0;align-self:flex-start;max-width:100%;font-family:var(--display);font-weight:400;font-size:20px;line-height:28px;letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color 600ms var(--ease),opacity 600ms var(--ease),filter 600ms var(--ease),border-color 600ms var(--ease)}
.r.d0{color:#fff;border-bottom-color:#fff;cursor:default}
.r.d1{color:#b3b3b3;filter:blur(.6px)}
.r.d2{color:#8c8c8c;opacity:.85;filter:blur(1.1px)}
.r.d3{color:#767676;opacity:.65;filter:blur(1.6px)}
.r.d4{color:#767676;opacity:.4;filter:blur(2px)}
.r.d5{color:#767676;opacity:0;filter:blur(2px);pointer-events:none}
.r:not(.d0):not(.d5):hover{color:#fff;opacity:1;filter:none}

.pn{margin-top:40px;border-top:1px solid var(--line);padding-top:28px;display:flex;gap:24px}
.pn a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.pn a.next{text-align:right}
.pn .photo{height:220px}
.pn .tt{font-family:var(--display);font-weight:600;font-size:20px;line-height:26px}
.empty{width:100%;height:400px;border:1px dashed var(--muted);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px}

/* showreel */
.film{display:flex;flex-direction:column;gap:12px;opacity:.55;transition:opacity 600ms ease}
.film.cur{opacity:1}
.ph{width:100%;aspect-ratio:16/9;background:#161616;border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center}
.ph{overflow:hidden;background:#0b0b0b}
.ph .play{all:unset;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ph .play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms ease,filter 400ms ease;filter:brightness(.82)}
.ph .play:hover img,.ph .play:focus-visible img{filter:brightness(.95);transform:scale(1.015)}
.ph .play:focus-visible{outline:1px solid #fff;outline-offset:-4px}
.ph svg{position:relative;width:60px;height:60px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.ph .src{position:absolute;left:16px;bottom:12px;font-size:12px;line-height:18px;color:#e6e6e6;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.ph iframe,.ph video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.film .row{display:flex;justify-content:space-between;gap:16px}
.film .row .tt{font-family:var(--display);font-size:13px;line-height:20px;letter-spacing:1.4px;text-transform:uppercase}
.film h2{display:none}

/* bio + contact details */
.info{padding-top:clamp(40px,16vh,180px);display:flex;flex-direction:column;gap:28px}
.info div{display:flex;flex-direction:column;gap:6px}
.info .cap{color:var(--fg);font-weight:500;font-size:13px;letter-spacing:1.8px}
.info .v{align-self:flex-start;font-family:var(--display);font-weight:400;font-size:16px;line-height:24px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.62)}
.info a.v{transition:color 200ms ease}
.info a.v:hover{color:var(--fg)}
.bio-main{gap:22px;font-size:15px;line-height:24px}
.bio-main h1{margin:12px 0 0;font-family:var(--display);font-weight:600;font-size:32px;line-height:38px;text-transform:uppercase}
.bio-main h2{margin:24px 0 0;font-family:var(--display);font-weight:600;font-size:32px;line-height:38px;text-transform:uppercase}
.bio-main ul{font-size:13px;line-height:26px}
.bio-m{display:none}
.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:40px;margin-top:24px;align-items:start}
.lists .list-col{display:flex;flex-direction:column;gap:22px}
.lists h2{margin:0}
.contact-m{display:none}
.pane-text{margin-top:28px;font-size:14px;line-height:22px;color:var(--muted)}
.pane-text p{margin:0 0 10px}
.bio-main p,.contact-m p{margin:0}

/* phone menu overlay */
.menu{display:none}

/* ================= phone ================= */
@media (max-width:899px){
  :root{--frame:5px;--glow:0 14px 32px -14px rgba(255,255,255,.2),0 2px 8px rgba(255,255,255,.05);--header:64px}
  .wrap{padding:0 20px}
  .nav{display:none}
  .name{font-size:15px;line-height:18px;letter-spacing:2px;margin-right:0}
  .menu-btn{display:flex;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0}
  .menu-btn span{display:block;width:22px;height:1px;background:#fff}

  .menu{display:block;position:fixed;inset:0;z-index:50;background:#000;opacity:0;pointer-events:none;transition:opacity 320ms ease}
  .menu.open{opacity:1;pointer-events:auto}
  .menu .top{height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
  .menu .x{width:44px;height:44px;margin-right:-10px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .menu nav{padding:48px 20px 0;display:flex;flex-direction:column;gap:18px}
  .menu nav a{align-self:flex-start;font-family:var(--display);font-weight:600;font-size:30px;line-height:38px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    padding-bottom:2px;border-bottom:1px solid transparent;opacity:0;transform:translateY(12px);transition:opacity 420ms var(--ease),transform 520ms var(--ease)}
  .menu nav a.on{color:#fff;border-bottom-color:#fff}
  .menu.open nav a{opacity:1;transform:none}
  .menu .foot{position:absolute;left:20px;right:20px;bottom:36px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:20px;color:var(--muted)}

  .grid{display:block;padding-top:8px;padding-bottom:40px}
  .col{display:contents}
  .grid .tile{margin-bottom:36px}
  .tile .ov{display:none}
  .tile .meta{display:flex;align-items:baseline;gap:12px;margin-top:10px}
  .tile .meta .n{font-size:12px;line-height:16px;letter-spacing:1.4px;color:var(--muted)}
  .tile .meta .t{font-family:var(--display);font-size:14px;line-height:20px;letter-spacing:.6px;color:#d9d9d9}

  .two{display:block;padding-bottom:40px}
  .pane{position:sticky;top:var(--header);z-index:15;max-width:none;min-width:0;background:#000;margin:0 -20px;padding:0 0 12px}
  .roll-pane{height:auto;min-height:0;padding-top:0}
  .roll-pane .spacer{display:none}
  .roll-view{height:40px;flex-grow:0;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%)}
  .track{top:4px;left:50%;right:auto;flex-direction:row;align-items:flex-start;gap:22px;white-space:nowrap}
  .r{font-size:17px;line-height:24px;letter-spacing:0;overflow:visible;text-overflow:clip}
  .r.d2{opacity:.7;filter:blur(1.2px)}
  .r.d3,.r.d4,.r.d5{opacity:0;pointer-events:none}
  .main{padding-top:8px;gap:16px}
  .pn{margin-top:20px;padding-top:20px;gap:14px}
  .pn a{gap:8px}
  .pn .photo{height:auto;aspect-ratio:4/5}
  .pn .tt{font-size:13px;line-height:18px;font-weight:400}
  .empty{height:240px;font-size:14px}

  .reel .pane{display:none}
  .reel .main{gap:32px;padding-top:16px}
  .film{opacity:1;gap:10px}
  .film h2{display:block;margin:0;font-family:var(--display);font-weight:500;font-size:15px;line-height:20px;letter-spacing:.5px;text-transform:uppercase}
  .film .row{display:none}
  .ph svg{width:52px;height:52px}
  .ph .src{left:12px;bottom:10px;font-size:11px}

  .bio-two .pane,.contact-two .pane{display:none}
  .bio-m,.contact-m{display:flex}
  .bio-m{flex-direction:column;gap:14px;font-size:13px;line-height:20px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .bio-main{gap:18px}
  .bio-main h1{margin-top:8px;font-size:22px;line-height:28px}
  .bio-main h2{margin-top:16px;font-size:22px;line-height:28px}
  .bio-main ul{line-height:24px}
  .lists{gap:20px;margin-top:16px}
  .lists .list-col{gap:14px}
  .contact-two{padding-top:16px}
  .contact-m{flex-direction:column;gap:20px}
  .contact-m h1{margin:0;font-family:var(--display);font-weight:600;font-size:30px;line-height:34px}
  .contact-m a{font-size:15px;line-height:22px;text-decoration:underline;text-underline-offset:4px}
  .contact-m p{font-size:15px;line-height:22px}
  .cm-info{display:flex;flex-direction:column;gap:14px;font-size:13px;line-height:20px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .contact-two .main{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}
}