:root{
  --black:#0a0a0a;
  --black-soft:#141414;
  --black-card:#181818;
  --white:#f2f0ec;
  --blue:#9fc3d8;
  --blue-dim:#5f7c8a;
  --rust:#b8492f;
  --grey:#7a7a7a;
  --line:rgba(242,240,236,0.12);
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --display:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black); color:var(--white); font-family:var(--display);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.noise{
  position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:9997;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  opacity:0.4;
}
header{
  position:fixed; top:0; left:0; right:0; z-index:500; display:flex; align-items:center;
  justify-content:space-between; padding:22px 44px; background:linear-gradient(to bottom, rgba(10,10,10,0.9), transparent);
}
.wordmark{ font-family:var(--display); font-style:italic; font-weight:800; font-size:22px; letter-spacing:-0.01em; cursor:pointer; }
nav ul{ display:flex; gap:34px; }
nav a{ font-size:13px; text-transform:lowercase; letter-spacing:0.04em; font-weight:600; color:var(--white); position:relative; padding-bottom:4px; transition:color 0.2s; }
nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--blue); transition:width 0.25s ease; }
nav a:hover{ color:var(--blue); }
nav a:hover::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:none; color:var(--white); font-size:22px; z-index:600; }
@media (max-width:760px){
  header{ padding:18px 22px; }
  nav{ position:fixed; top:0; right:0; height:100vh; width:240px; background:var(--black-soft); padding:100px 32px; transform:translateX(100%); transition:transform 0.35s ease; border-left:1px solid var(--line); }
  nav.open{ transform:translateX(0); }
  nav ul{ flex-direction:column; gap:26px; }
  .nav-toggle{ display:block; }
}

main{ min-height:100vh; }
.page{ display:none; }
.page.active{ display:block; animation:fade 0.4s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.container{ max-width:1180px; margin:0 auto; padding:0 44px; }
@media (max-width:760px){ .container{ padding:0 22px; } }
.hero{ position:relative; height:100vh; width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-reel{ position:absolute; inset:0; z-index:0; }
.hero-reel video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(0.3) brightness(0.55);
  opacity:0; transition:opacity 0.8s ease;
}
.hero-reel video.loaded{ opacity:1; }
.hero-reel .fallback-tiles{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); animation:reel-drift 22s linear infinite; filter:grayscale(0.3) brightness(0.55); }
.hero-reel .fallback-tiles div{ aspect-ratio:1/1; background-size:cover; background-position:center; }
@keyframes reel-drift{ 0%{ transform:scale(1.08) translateY(0); } 50%{ transform:scale(1.14) translateY(-2%); } 100%{ transform:scale(1.08) translateY(0); } }
.hero::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.35) 45%, rgba(10,10,10,0.85) 100%); }
.hero-content{ position:relative; z-index:2; padding:0 24px; }
.hero-content h1{ font-family:var(--display); font-style:italic; font-weight:800; font-size:clamp(56px, 11vw, 128px); letter-spacing:-0.02em; line-height:0.95; }
.hero-content .tagline{ font-family:var(--mono); font-size:14px; letter-spacing:0.1em; color:var(--white); opacity:0.85; margin:18px 0 34px; text-transform:lowercase; }
.hero-content .btn{
  opacity:0; transform:translateY(10px);
  animation:btnFadeIn 0.6s ease forwards;
  animation-delay:1.4s;
}
@keyframes btnFadeIn{ to{ opacity:1; transform:translateY(0); } }
.btn{ display:inline-block; padding:14px 30px; border:1px solid var(--white); font-size:13px; letter-spacing:0.08em; text-transform:lowercase; font-weight:600; transition:all 0.25s ease; background:transparent; }
.btn:hover{ background:var(--white); color:var(--black); }
.btn-blue{ border-color:var(--blue); color:var(--blue); }
.btn-blue:hover{ background:var(--blue); color:var(--black); }
.section-head{ padding:150px 0 50px; }
.section-head h2{ font-family:var(--display); font-style:italic; font-weight:800; font-size:clamp(38px,6vw,64px); letter-spacing:-0.01em; }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter-btn{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; padding:8px 16px; border:1px solid var(--line); color:var(--grey); background:transparent; text-transform:lowercase; transition:all 0.2s; }
.filter-btn:hover, .filter-btn.active{ color:var(--black); background:var(--blue); border-color:var(--blue); }

.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding-bottom:120px; }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }
.cell{ position:relative; aspect-ratio:1/1; overflow:hidden; cursor:pointer; background-size:cover; background-position:center; }
.cell::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.92) 100%); opacity:0.5; transition:opacity 0.3s; }
.cell img, .cell .thumb-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(0.55) contrast(1.05); transition:transform 0.5s ease, filter 0.4s ease; }
.thumb-fallback{ display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; font-family:var(--mono); font-size:11px; color:rgba(242,240,236,0.35); }
.cell:hover img, .cell:hover .thumb-fallback{ transform:scale(1.06); filter:grayscale(0) contrast(1); }
.cell:hover::before{ opacity:0.85; }
.cell-caption{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; opacity:0; transform:translateY(8px); transition:all 0.3s ease; }
.cell:hover .cell-caption{ opacity:1; transform:translateY(0); }
.cell-caption .artist-title{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--white); }
.cell-caption .meta{ font-family:var(--mono); font-size:10px; color:var(--blue); margin-top:4px; letter-spacing:0.05em; }

/* ---------- TOUCH DEVICES (phones/tablets) ----------
   On desktop the desaturate-on-hover reveal is the whole effect. On a
   touchscreen there's no hover state to sit in — the "hover" only fires on
   tap, which is the same gesture that navigates away, so the colour and the
   title flash for an instant and are gone.

   Keyed off (hover: none) rather than a screen width, because the real
   condition is "this device can't hover", not "this screen is small" — a
   narrow desktop window still hovers fine and keeps the original treatment.

   Touch gets the finished state directly: full colour, dimmed for contrast,
   title always visible. */
@media (hover: none){
  .cell img, .cell .thumb-fallback{
    filter:brightness(0.62) contrast(1.02);
    transform:none;
  }
  .cell::before{ opacity:0.8; }
  .cell-caption{ opacity:1; transform:none; }

  /* Neutralise the hover rules. Touch browsers keep a "sticky" hover on the
     last-tapped element, so without these the previously tapped tile would
     stay lit up after navigating back to the grid. */
  .cell:hover img, .cell:hover .thumb-fallback{
    filter:brightness(0.62) contrast(1.02);
    transform:none;
  }
  .cell:hover::before{ opacity:0.8; }
}

.project-wrap{ padding:150px 0 120px; max-width:1440px; }
.back-link{
  position:fixed; top:98px; left:44px; z-index:400;
  font-family:var(--mono); font-size:12px; color:var(--grey); display:inline-block;
  letter-spacing:0.04em; background:var(--black); padding:6px 10px; border:1px solid var(--line);
}
.back-link:hover{ color:var(--blue); border-color:var(--blue); }
@media (max-width:760px){ .back-link{ left:22px; top:88px; } }
.project-grid{ display:grid; grid-template-columns:2fr 1fr; gap:50px; align-items:start; }
@media (max-width:860px){ .project-grid{ grid-template-columns:1fr; gap:36px; } }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; background:var(--black-soft); border:1px solid var(--line); overflow:hidden; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.project-gallery{ columns:3 220px; column-gap:8px; }
@media (max-width:700px){ .project-gallery{ columns:2 160px; } }
@media (max-width:460px){ .project-gallery{ columns:1; } }
.gallery-item{ position:relative; break-inside:avoid; margin-bottom:8px; cursor:pointer; background:var(--black-soft); border:1px solid var(--line); overflow:hidden; }
.gallery-item img{ display:block; width:100%; height:auto; filter:grayscale(0.35) contrast(1.03); transition:transform 0.4s ease, filter 0.3s ease; }
.gallery-item:hover img{ transform:scale(1.03); filter:grayscale(0) contrast(1); }

.project-info h1{ font-family:var(--display); font-style:italic; font-weight:800; font-size:clamp(30px,3.6vw,44px); margin-bottom:36px; letter-spacing:-0.01em; }
.info-row{ margin-bottom:26px; }
.info-row .label{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--blue); text-transform:uppercase; margin-bottom:6px; display:block; }
.info-row .value{ font-size:16px; font-weight:600; }
.project-info .btn{ margin-top:10px; }

.about-wrap{ padding:150px 0 120px; }
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:44px; } }
.about-photo{ position:relative; border-top-left-radius:50% 60%; border-top-right-radius:50% 60%; overflow:hidden; aspect-ratio:3/4; background:var(--black-card); }
.about-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.about-copy h2{ font-family:var(--display); font-style:italic; font-weight:800; font-size:clamp(40px,6vw,64px); margin-bottom:30px; }
.about-copy p{ font-size:15.5px; line-height:1.75; color:rgba(242,240,236,0.85); margin-bottom:20px; }
.about-copy p b{ color:var(--blue); font-weight:700; }
.inline-link{ color:var(--blue); border-bottom:1px solid var(--blue-dim); transition:border-color 0.2s; }
.inline-link:hover{ border-color:var(--blue); }
.favorites-line{ display:inline-block; font-size:14px; color:var(--blue); margin:6px 0 30px; border-bottom:1px dotted var(--blue-dim); padding-bottom:3px; }
.favorites-line:hover{ border-color:var(--blue); }
.about-actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

.favorites-wrap{ padding:150px 0 120px; }
.favorites-wrap .section-head{ padding-top:0; }
#favList{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px 30px; }
@media (max-width:760px){ #favList{ grid-template-columns:1fr; } }
.fav-item .fav-video{ position:relative; width:100%; aspect-ratio:16/9; background:var(--black-soft); border:1px solid var(--line); overflow:hidden; margin-bottom:14px; }
.fav-item .fav-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.fav-item .fav-title{ font-size:17px; font-weight:600; }
.fav-item .fav-sub{ font-family:var(--mono); font-size:12px; color:var(--grey); margin-top:4px; }

.contact-wrap{ padding:150px 0 140px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:50px; } }
.contact-email{ font-family:var(--display); font-style:italic; font-weight:700; font-size:clamp(24px,3.4vw,34px); word-break:break-word; border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:26px; display:inline-block; }
.contact-email:hover{ color:var(--blue); }
.social-row{ display:flex; gap:14px; margin-top:16px; }
.social-row a{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.social-row a svg{ width:18px; height:18px; }
.social-row a:hover{ border-color:var(--blue); color:var(--blue); }
.form-field{ margin-bottom:22px; }
.form-field label{ display:block; font-family:var(--mono); font-size:11px; color:var(--blue); margin-bottom:8px; letter-spacing:0.06em; }
.form-field input, .form-field textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--white); font-family:var(--display); font-size:15px; padding:10px 0; outline:none; }
.form-field input:focus, .form-field textarea:focus{ border-color:var(--blue); }
.form-field textarea{ resize:vertical; min-height:80px; }
.contact-note{ font-family:var(--mono); font-size:11px; color:var(--grey); margin-top:24px; }

.blog-wrap{ padding:150px 0 120px; }
.blog-list{ border-top:1px solid var(--line); }
.blog-row{ display:grid; grid-template-columns:110px 1fr auto; gap:24px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); transition:opacity 0.2s; }
.blog-row:hover{ opacity:0.7; }
.blog-row .blog-date{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.blog-row .blog-title{ font-size:19px; font-weight:600; }
.blog-row .blog-teaser{ font-size:13px; color:var(--grey); margin-top:4px; font-weight:400; }
.blog-row .blog-arrow{ font-family:var(--mono); font-size:13px; color:var(--blue); }
@media (max-width:600px){ .blog-row{ grid-template-columns:1fr; gap:6px; } }

.blogpost-wrap{ padding:150px 0 130px; max-width:820px; }
.blogpost-head .label{ font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:0.1em; text-transform:uppercase; display:block; margin-bottom:14px; }
.blogpost-head h1{ font-family:var(--display); font-style:italic; font-weight:800; font-size:clamp(32px,5vw,50px); letter-spacing:-0.01em; margin-bottom:14px; }
.blogpost-head .blogpost-date{ font-family:var(--mono); font-size:12px; color:var(--grey); margin-bottom:44px; display:block; }
.blogpost-body p{ font-size:16px; line-height:1.85; color:rgba(242,240,236,0.85); margin-bottom:22px; }
.blogpost-video{ width:100%; aspect-ratio:16/9; background:var(--black-soft); border:1px solid var(--line); position:relative; overflow:hidden; margin:34px 0; }
.blogpost-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.blogpost-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.bts-heading{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--rust); text-transform:uppercase; margin:54px 0 20px; display:block; }
.bts-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:640px){ .bts-grid{ grid-template-columns:1fr; } }
.bts-item{ aspect-ratio:16/9; background:var(--black-soft); border:1px solid var(--line); position:relative; overflow:hidden; }
.bts-item iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.bts-caption{ font-family:var(--mono); font-size:11px; color:var(--grey); margin-top:8px; }
.blogpost-footer-link{ margin-top:56px; padding-top:30px; border-top:1px solid var(--line); }

footer{ background:#efeeea; color:#111; padding:36px 24px 26px; text-align:center; }
footer .f-word{ font-family:var(--display); font-style:italic; font-weight:800; font-size:46px; margin-bottom:14px; letter-spacing:-0.01em; }
footer .f-email{ font-size:13px; text-decoration:underline; display:inline-block; margin-bottom:16px; }
footer .f-social{ display:flex; justify-content:center; gap:14px; margin-bottom:16px; }
footer .f-social a{ width:36px; height:36px; border-radius:50%; border:1px solid #111; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
footer .f-social a svg{ width:16px; height:16px; }
footer .f-social a:hover{ background:#111; color:#efeeea; }
footer .f-tos{ font-size:11px; text-decoration:underline; color:#555; }

.state-msg{ font-family:var(--mono); font-size:12px; color:var(--grey); padding:20px 0; }

/* ---------- LIGHTBOX (photo gallery viewer) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(10,10,10,0.95); }
.lightbox-img{
  position:relative; max-width:88vw; max-height:82vh; object-fit:contain;
  border:1px solid var(--line);
}
.lightbox-close{
  position:absolute; top:20px; right:24px; z-index:2001;
  background:none; border:none; color:var(--white); font-size:34px; line-height:1;
}
.lightbox-close:hover{ color:var(--blue); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2001;
  background:none; border:none; color:var(--white); font-size:48px; line-height:1;
  padding:10px 16px; opacity:0.7;
}
.lightbox-nav:hover{ opacity:1; color:var(--blue); }
.lightbox-prev{ left:6px; }
.lightbox-next{ right:6px; }
@media (max-width:640px){
  .lightbox-nav{ font-size:34px; padding:8px 10px; }
  .lightbox-close{ top:14px; right:16px; font-size:28px; }
}
.lightbox-count{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2001;
  font-family:var(--mono); font-size:12px; color:var(--grey);
}