/* ==========================================================================
   Zane media.
   Black on white, hairline rules, Special Gothic. Motion is small and quick:
   a custom cursor, a staggered reveal on load, a fade between pages, and
   hover states that draw rather than pop.
   ========================================================================== */

:root{
  --ink:#000;
  --paper:#fff;
  --rule:rgba(0,0,0,.18);
  --font-display:"Special Gothic Expanded One",Helvetica,Arial,sans-serif;
  --font-body:"Special Gothic",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,4vw,56px);
  --dur:280ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --peek:clamp(16px,4vw,64px);   /* sliver of the next card */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:opacity var(--dur) ease-out;
}
body.leaving{opacity:0}
main{flex:1;display:flex;flex-direction:column}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{display:block}

/* ---------- custom cursor ------------------------------------------------ */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;
  mix-blend-mode:difference;
  opacity:0;transition:opacity 200ms ease-out,width 220ms var(--ease),height 220ms var(--ease),border-color 220ms;
  will-change:transform;
}
.cursor{width:8px;height:8px;background:#fff;transform:translate(-50%,-50%)}
.cursor-ring{width:36px;height:36px;border:1px solid #fff;transform:translate(-50%,-50%)}
html.cursor-on .cursor,html.cursor-on .cursor-ring{opacity:1}
html.cursor-hover .cursor{width:0;height:0}
html.cursor-hover .cursor-ring{width:64px;height:64px;background:rgba(255,255,255,.12)}
html.cursor-grab .cursor{width:0;height:0}
html.cursor-grab .cursor-ring{width:88px;height:88px;border-width:2px}
html.cursor-down .cursor-ring{width:24px;height:24px}

/* ---------- reveal on load ----------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);animation:reveal 700ms var(--ease) forwards;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
@keyframes reveal{to{opacity:1;transform:none}}

/* ---------- top bar ------------------------------------------------------ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px var(--gutter);
}
.brand{font-family:var(--font-display);font-weight:400;font-size:15px;letter-spacing:-.01em;text-decoration:none}
.brand .dot{display:inline-block;transition:transform 360ms var(--ease)}
.brand:hover .dot{transform:translateY(-.35em) scale(1.35)}
.nav{display:flex;gap:clamp(18px,3vw,34px)}
.nav a{text-decoration:none;font-size:15px}

/* underline that draws in from the left */
.line{position:relative;text-decoration:none}
.line::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform 320ms var(--ease);
}
.line:hover::after,.line[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* ==========================================================================
   HOME
   ========================================================================== */
.hero{
  flex:1;display:grid;place-content:center;text-align:center;
  padding:clamp(32px,6vh,80px) var(--gutter);
}
.hero-name{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(44px,10.5vw,150px);line-height:1;
  letter-spacing:-.02em;white-space:nowrap;
}
/* Extruded 3D title: the h1 keeps the real text as the front face, the JS
   stacks depth layers behind it. The whole block tilts with the mouse; each
   layer is offset along the tilt direction (--ox/--oy, set by the JS from the
   current angles) and shaded dark→light so the solid reads as a block. Doing
   the extrusion as projected 2D offsets instead of translateZ keeps it
   identical in every browser — preserve-3d text is flaky in WebKit. */
.hero-name.is-3d{
  position:relative;display:inline-block;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  --depth:.34em;                      /* total extrusion */
  --ox:0;--oy:0;                      /* unit direction of the extrusion */
}
.hero-name.is-3d .face{position:relative;display:block}
.hero-name.is-3d .layer{
  position:absolute;inset:0;display:block;pointer-events:none;user-select:none;
  /* --k runs 0→1 from just behind the face to the back; lit from the front */
  color:hsl(0 0% calc(12% + var(--k) * 60%));
  transform:translate(calc(var(--k) * var(--depth) * var(--ox)),calc(var(--k) * var(--depth) * var(--oy)));
}
.hero-tag{
  margin-top:clamp(10px,1.6vh,18px);
  font-size:clamp(14px,1.7vw,22px);
}

.contact{border-top:1px solid var(--ink);padding:clamp(28px,6vh,56px) var(--gutter) clamp(36px,7vh,72px);text-align:center}
.contact h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(26px,4.4vw,54px);letter-spacing:-.02em;line-height:1.1;
}
.contact ul{list-style:none;display:flex;justify-content:center;gap:clamp(22px,5vw,64px);flex-wrap:wrap;margin-top:clamp(18px,3vh,32px)}
.contact a{display:inline-block;padding-bottom:4px;font-size:clamp(14px,1.6vw,18px)}
.contact a::after{bottom:0}

/* ==========================================================================
   PORTFOLIO — the loop
   ========================================================================== */
.stage{
  position:relative;overflow:hidden;touch-action:pan-y;
  cursor:grab;user-select:none;-webkit-user-select:none;
}
.stage:active{cursor:grabbing}
.track{display:flex;transition:transform var(--dur) ease-out;will-change:transform}
.track.no-anim{transition:none}
.spread{
  flex:0 0 calc(100% - var(--peek));
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(20px,4vw,56px);
  padding:clamp(20px,4vw,56px) var(--gutter);
  align-items:center;min-height:60vh;
}
/* The frame shrink-wraps the media at its own aspect ratio — nothing is
   cropped into a rectangle. Click an image to see it full-scale. */
.media{justify-self:center;max-width:100%;overflow:hidden}
.media img,.media video{
  display:block;max-width:100%;max-height:60vh;width:auto;height:auto;
  transform:scale(1.04);transition:transform 900ms var(--ease);
}
.media img{cursor:zoom-in}
.media a.out{display:block}
.media a.out img{cursor:pointer}
/* YouTube slide: thumbnail button, then a 16:9 player in its place */
.media.embed{width:100%}
.media.embed .yt{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer}
.media.embed .yt img{width:100%;height:auto;cursor:pointer}
.media.embed .yt-play{
  position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid #fff;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;
  transition:background 200ms,color 200ms;
}
.media.embed .yt:hover .yt-play{background:#fff;color:#000}
.media.embed .yt-play svg{width:24px;height:24px;fill:currentColor}
.media.embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.spread.is-active .media img,.spread.is-active .media video{transform:none}
.media.film{position:relative;background:#000;width:100%}
.media.film video{display:block;width:100%;height:auto;transform:none;cursor:pointer}
.media.film.is-full{display:grid;place-items:center}
.media.film.is-full video{width:100%;height:100%;max-height:none;aspect-ratio:auto}
.film-ui{
  position:absolute;left:14px;bottom:14px;display:flex;gap:10px;
  opacity:0;transition:opacity 240ms ease-out;
}
.media.film:hover .film-ui,.media.film:focus-within .film-ui,.media.film:not(.playing) .film-ui{opacity:1}
.film-ui button{
  width:44px;height:44px;border-radius:50%;border:1px solid #fff;background:rgba(0,0,0,.55);
  color:#fff;display:grid;place-items:center;transition:background 200ms;
}
.film-ui button:hover{background:#fff;color:#000}
.film-ui svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.film-ui .film-play svg{stroke:none}
.film-ui .film-full svg{fill:none}
.film-ui .i-pause{display:none}
.media.film.playing .i-play{display:none}
.media.film.playing .i-pause{display:block}

/* ---------- lightbox ---------- */
.lightbox[hidden]{display:none}
.lightbox{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  padding:clamp(16px,3vw,40px);background:rgba(255,255,255,.96);
  cursor:zoom-out;opacity:0;transition:opacity 240ms ease-out;
}
.lightbox.open{opacity:1}
.lightbox img{
  display:block;max-width:100%;max-height:calc(100vh - clamp(32px,6vw,80px));width:auto;height:auto;

  transform:scale(.97);transition:transform 360ms var(--ease);
}
.lightbox.open img{transform:none}
.lightbox-close{
  position:absolute;top:14px;right:var(--gutter);
  background:none;border:0;font:inherit;font-size:15px;color:var(--ink);padding:6px 0;
}
body.lightbox-on{overflow:hidden}
.copy h2,.copy p{opacity:.35;transform:translateY(10px);transition:opacity 480ms ease-out,transform 620ms var(--ease)}
.copy p{transition-delay:70ms}
.spread.is-active .copy h2,.spread.is-active .copy p{opacity:1;transform:none}
.copy h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,2.6vw,36px);line-height:1.1;
  letter-spacing:-.025em;text-wrap:balance;
}
.copy p{margin-top:14px;max-width:44ch}

.arrows{display:flex;gap:18px;padding:18px var(--gutter) clamp(40px,8vh,90px)}
.arrows button{
  position:relative;overflow:hidden;
  background:none;border:1px solid var(--ink);border-radius:50%;
  width:46px;height:46px;color:var(--ink);
  transition:background 260ms var(--ease),color 260ms var(--ease);
}
.arrows button svg{width:20px;height:20px;margin:auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 360ms var(--ease)}
.arrows button:hover{background:var(--ink);color:var(--paper)}
.arrows #next:hover svg{transform:translateX(4px)}
.arrows #prev:hover svg{transform:translateX(-4px)}
.arrows button:active svg{transform:scale(.85)}

/* ==========================================================================
   ABOUT — portrait left, bio right
   ========================================================================== */
.about{
  flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,6vw,96px);align-items:center;align-content:center;
  padding:clamp(32px,6vh,80px) var(--gutter) clamp(48px,9vh,110px);
  max-width:1320px;width:100%;margin:0 auto;
}
.portrait{
  overflow:hidden;
  aspect-ratio:3/4;max-height:72vh;justify-self:end;width:100%;
}
.portrait img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);transform:scale(1.03);
  transition:filter 420ms ease-out,transform 900ms var(--ease);
}
.portrait:hover img{filter:none;transform:none}
.bio{max-width:58ch}
.bio h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,2.6vw,38px);line-height:1.25;letter-spacing:-.015em;
  text-wrap:balance;
}
.bio h1 .line::after{bottom:-2px;height:2px;transform:scaleX(1);transform-origin:left}
.bio h1 .line:hover::after{transform:scaleX(0);transform-origin:right}
.bio p{
  margin-top:clamp(18px,2.6vh,30px);color:rgba(0,0,0,.66);
  font-size:clamp(15px,1.25vw,18px);line-height:1.65;
}
.bio h1 + p{margin-top:clamp(26px,4vh,44px)}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:860px){
  .spread{grid-template-columns:1fr;min-height:0;align-items:start;gap:22px}
  .copy p{margin-top:10px}
  .media img,.media video{max-height:44vh}
  .about{grid-template-columns:1fr;align-content:start;gap:28px}
  .portrait{justify-self:start;max-width:320px;max-height:none}
}
@media (max-width:560px){
  .hero-name{white-space:normal}
  .contact ul{gap:14px 22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .copy h2,.copy p,.media img,.media video{opacity:1;transform:none}
}