/* ============================================================
   VINCENT ZHU — PHOTOGRAPHY
   Palette
   --void    #14121A  base background (warm-cool charcoal, not pure black)
   --ink     #1D1A26  raised surfaces / cards
   --amber   #E3A857  warm accent — stage gel / spotlight
   --violet  #7C6CE0  cool accent — aurora / night sky
   --bone    #EDE8DD  primary text (warm off-white)
   --smoke   #948C99  secondary text / labels
   ============================================================ */

:root{
  --void:#14121A;
  --ink:#1D1A26;
  --ink-2:#252030;
  --amber:#E3A857;
  --violet:#8577E8;
  --bone:#EDE8DD;
  --smoke:#948C99;
  --line: rgba(237,232,221,0.10);

  --display: "Big Shoulders Display", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "IBM Plex Mono", monospace;

  --rail-w: 104px;
  --edge: clamp(24px, 5vw, 72px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.mono{ font-family:var(--mono); letter-spacing:0.06em; }

::selection{ background:var(--amber); color:var(--void); }

/* subtle film-grain overlay for atmosphere */
.grain{
  position:fixed; inset:0; z-index:500; pointer-events:none;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================== LEFT RAIL NAV ============================== */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail-w);
  z-index:200; display:flex; flex-direction:column; align-items:center;
  padding:28px 0; border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,18,26,0.85), rgba(20,18,26,0.55));
  backdrop-filter:blur(6px);
}
.rail-mark{
  font-family:var(--display); font-weight:800; font-size:22px;
  color:var(--bone); writing-mode:horizontal-tb;
  width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.rail-nav{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:36px; margin-top:20px;
}
.rail-nav a{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mono); font-size:14px; letter-spacing:0.1em;
  color:var(--smoke); display:flex; align-items:center; gap:11px;
  transition:color .25s ease;
  position:relative;
}
.rail-nav a span{ font-size:11px; color:var(--smoke); opacity:.6; }
.rail-nav a:hover, .rail-nav a.active{ color:var(--bone); }
.rail-nav a.active span{ color:var(--amber); opacity:1; }
.rail-toggle{ display:none; }
.rail-brand{ display:none; }

/* ---- desktop expand toggle ---- */
.rail-expand{
  display:none;
}
@media(min-width:821px){
  .rail-expand{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; margin-bottom:6px; flex-shrink:0;
    background:rgba(237,232,221,0.06); border:1px solid rgba(237,232,221,0.35); border-radius:50%;
    color:var(--bone); cursor:pointer; font-size:18px; line-height:1;
    transition:color .2s ease, border-color .2s ease, background .2s ease, transform .3s ease;
  }
  .rail-expand:hover{ color:var(--amber); border-color:var(--amber); background:rgba(227,168,87,0.1); }
  .rail.expanded .rail-expand{ transform:rotate(180deg); color:var(--amber); border-color:var(--amber); background:rgba(227,168,87,0.1); }

  .rail{ transition:width .35s cubic-bezier(.2,.7,.2,1), background .35s ease; }
  .rail.expanded{
    width:250px; align-items:flex-start; padding:28px 26px;
    background:rgba(20,18,26,0.52); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    box-shadow:20px 0 60px rgba(0,0,0,0.35);
  }
  .rail.expanded .rail-mark{ align-self:flex-start; }
  .rail.expanded .rail-mark{ display:none; }
  .rail.expanded .rail-brand{
    display:block; position:static; transform:none;
    height:auto; width:180px; align-self:center; margin:0 auto 8px; opacity:0.95;
  }
  .rail.expanded .rail-nav{
    align-items:flex-start; justify-content:flex-start; width:100%; gap:20px; margin-top:20px;
  }
  .rail.expanded .rail-nav a{
    writing-mode:horizontal-tb; text-orientation:initial; width:100%;
    font-size:16px; gap:14px;
  }
  .rail.expanded .rail-nav a span{ font-size:11px; }
}

/* ============================== HERO ============================== */
.hero{
  position:relative; min-height:100svh; margin-left:var(--rail-w);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero-img-wrap{ position:absolute; inset:0; }
.hero-img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transform:scale(1.08);
  animation:heroIn 1.6s cubic-bezier(.2,.7,.2,1) forwards;
  filter:saturate(1.05) contrast(1.03);
}
@keyframes heroIn{ to{ transform:scale(1); } }
.hero-vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,18,26,0.35) 0%, rgba(20,18,26,0.15) 35%, rgba(20,18,26,0.55) 72%, var(--void) 100%),
    linear-gradient(90deg, rgba(20,18,26,0.55) 0%, transparent 30%);
}
.hero-content{ position:relative; z-index:2; padding:0 var(--edge) 64px; max-width:900px; }
.eyebrow{ color:var(--amber); font-size:12px; margin:0 0 18px; opacity:0; animation:fadeUp .8s ease .4s forwards; }
.hero-title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(48px, 9vw, 118px); line-height:0.88; letter-spacing:-0.01em;
  margin:0 0 22px; color:var(--bone);
  opacity:0; animation:fadeUp .9s ease .55s forwards;
}
.hero-sub{
  font-size:clamp(14px,1.6vw,17px); color:var(--smoke); max-width:560px; line-height:1.6;
  opacity:0; animation:fadeUp .9s ease .8s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

.hero-meta{
  position:relative; z-index:2; display:flex; gap:10px; align-items:center;
  padding:0 var(--edge) 26px; font-size:11px; color:var(--smoke);
  opacity:0; animation:fadeUp .9s ease 1.05s forwards;
}
.hero-meta span:nth-child(2){ color:var(--violet); }

.scroll-cue{
  position:absolute; right:var(--edge); bottom:30px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--smoke); font-size:10px;
  opacity:0; animation:fadeUp .9s ease 1.2s forwards;
}
.scroll-line{ width:1px; height:44px; background:linear-gradient(var(--amber), transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ============================== WORK SECTIONS ============================== */
.work{
  margin-left:var(--rail-w);
  padding:120px var(--edge) 40px;
  border-top:1px solid var(--line);
}
.work--alt{ background:linear-gradient(180deg, var(--ink) 0%, var(--void) 100%); }

.slate{ max-width:640px; margin-bottom:56px; }
.slate-index{ color:var(--amber); font-size:11px; margin:0 0 14px; }
.section-title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(36px, 5.2vw, 64px); line-height:0.92; margin:0 0 20px; color:var(--bone);
}
.slate-copy{ color:var(--smoke); font-size:15px; line-height:1.7; max-width:52ch; margin:0; }

/* reveal-on-scroll base state */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---- masonry (concert) ---- */
.masonry{
  column-count:2; column-gap:10px;
}
@media(min-width:640px){ .masonry{ column-gap:14px; } }
@media(min-width:1280px){ .masonry{ column-count:3; column-gap:14px; } }
.masonry .g-item{ break-inside:avoid; margin-bottom:10px; }
@media(min-width:640px){ .masonry .g-item{ margin-bottom:14px; } }

/* ---- grid (event) ---- */
.grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
@media(min-width:720px){ .grid{ grid-template-columns:repeat(3,1fr); } }

/* wedding grid — mixed spans for rhythm */


/* landscape grid — first item featured full width */
.grid--landscape{ grid-template-columns:repeat(2,1fr); }
@media(min-width:720px){ .grid--landscape{ grid-template-columns:repeat(3,1fr); } }
.grid--landscape .g-item.featured{ grid-column:1 / -1; }

.g-item{
  position:relative; overflow:hidden; border-radius:2px; cursor:pointer;
  background:var(--ink);
}
.g-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.grid .g-item{ aspect-ratio:4/5; }
.grid--landscape .g-item{ aspect-ratio:3/4; }
.grid--landscape .g-item.featured{ aspect-ratio:16/9; }
.g-item:hover img{ transform:scale(1.06); }
.g-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(20,18,26,0.75) 100%);
  opacity:0; transition:opacity .35s ease;
}
.g-item:hover::after{ opacity:1; }
.g-item .g-cap{
  position:absolute; left:12px; bottom:10px; z-index:2; font-size:10px;
  color:var(--bone); opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.g-item:hover .g-cap{ opacity:1; transform:translateY(0); }

/* ============================== ABOUT ============================== */
.about{
  margin-left:var(--rail-w);
  padding:130px var(--edge);
  display:grid; grid-template-columns:1fr; gap:56px;
  border-top:1px solid var(--line);
  align-items:center;
}
@media(min-width:900px){ .about{ grid-template-columns:1.25fr 1fr; gap:60px; } }
.about-portrait{
  max-width:460px; margin:0 auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
.about-copy{ color:var(--smoke); font-size:15px; line-height:1.75; max-width:56ch; margin:0 0 18px; }
.about-gear{ display:flex; gap:10px; margin-top:26px; font-size:11px; }
.about-gear span{ border:1px solid var(--line); padding:7px 12px; border-radius:2px; color:var(--amber); }

/* ============================== CONTACT ============================== */
.contact{
  position:relative; margin-left:var(--rail-w);
  min-height:70vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-top:1px solid var(--line);
}
.contact-bg{ position:absolute; inset:0; }
.contact-bg img{ width:100%; height:100%; object-fit:cover; opacity:0.28; filter:grayscale(0.3); }
.contact-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(20,18,26,0.4), var(--void) 85%);
}
.contact-content{ position:relative; z-index:2; text-align:center; padding:0 var(--edge); }
.contact-copy{ color:var(--smoke); font-size:15px; margin:0 0 34px; }
.contact-link{
  display:block; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(26px,4.4vw,44px); color:var(--bone); border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease; width:fit-content; margin:0 auto;
}
.contact-link:hover{ color:var(--amber); border-color:var(--amber); }
.contact-link--sub{ font-family:var(--mono); font-size:clamp(16px,2vw,22px); font-weight:400; text-transform:none; color:var(--smoke); margin-top:18px; letter-spacing:0.05em; }
.contact-link--sub:hover{ color:var(--violet); border-color:var(--violet); }

/* ============================== FOOTER ============================== */
.footer{
  margin-left:var(--rail-w);
  display:flex; justify-content:space-between; align-items:center; padding:26px var(--edge);
  font-size:10px; color:var(--smoke); border-top:1px solid var(--line);
}
.footer-brand{ height:18px; width:auto; opacity:0.85; }

/* ============================== LIGHTBOX ============================== */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(14,13,18,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  padding:40px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; border-radius:2px; }
.lightbox-close{
  position:absolute; top:22px; right:28px; background:none; border:none; color:var(--bone);
  font-size:32px; cursor:pointer; line-height:1;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--bone); font-size:44px; cursor:pointer; padding:10px 16px; opacity:.7; transition:opacity .2s;
}
.lightbox-nav:hover{ opacity:1; }
.lightbox-prev{ left:8px; } .lightbox-next{ right:8px; }

/* ============================== RESPONSIVE / MOBILE RAIL ============================== */
@media(max-width:820px){
  :root{ --rail-w:0px; }
  .rail{
    width:100%; height:64px; flex-direction:row; justify-content:space-between;
    align-items:center; padding:0 20px; border-right:none; border-bottom:1px solid var(--line);
    backdrop-filter:none; background:var(--void);
  }
  .rail-nav{
    position:fixed; top:64px; left:0; right:0; bottom:0; flex-direction:column;
    justify-content:flex-start; align-items:flex-start; gap:0; margin:0;
    background:rgba(20,18,26,0.80); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    transform:translateX(100%); transition:transform .35s ease;
    padding:20px var(--edge);
  }
  .rail-nav.open{ transform:translateX(0); }
  .rail-nav a{
    writing-mode:horizontal-tb; font-size:15px; width:100%; padding:16px 0;
    border-bottom:1px solid var(--line); gap:14px;
  }
  .rail-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:250;
  }
  .rail-toggle span{ width:22px; height:1.5px; background:var(--bone); display:block; transition:.3s; }
  .rail-brand{
    display:block; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%); height:20px; width:auto;
    opacity:0.9;
  }
  .hero, .work, .about, .contact, .footer{ margin-left:0; }
  .hero{ padding-top:64px; }
  .scroll-cue{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px;
}