/* VJSnapp - photography first, words second. */
:root{
  --ink:#0b0b0c; --ink-2:#141416; --line:#232327;
  --paper:#f6f5f3; --muted:#8a8a92; --accent:#ff5a1f;
  --gutter:clamp(18px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);
  font:400 16px/1.5 "Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* type: one bold family, used large */
.display{
  font-weight:800;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(2.6rem,9vw,8.5rem);text-transform:uppercase;
}
.eyebrow{
  font-size:clamp(.66rem,1.1vw,.78rem);letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}

/* header */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:20px var(--gutter);
}
/* A scrim instead of blend modes: difference vanishes over a bright photo,
   and the top of a hero image is exactly where it tends to be brightest. */
header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,8,9,.72),rgba(8,8,9,0));
}
header > *{position:relative}
.mark{font-weight:800;letter-spacing:.14em;font-size:clamp(1.15rem,2vw,1.6rem)}
nav{display:flex;gap:clamp(16px,2.4vw,34px);font-size:.78rem;
    letter-spacing:.16em;text-transform:uppercase;font-weight:600}
nav a{opacity:.72;transition:opacity .2s}
nav a:hover{opacity:1}

/* hero */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.05)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,9,.8) 0%,rgba(8,8,9,.15) 42%,rgba(8,8,9,0) 70%);
}
.hero .cap{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,8vh,96px);z-index:2;
}
.hero .display{max-width:16ch}
.hero .sub{margin-top:18px;max-width:38ch;color:#d8d7d3;font-size:clamp(.95rem,1.5vw,1.12rem)}
.hero .actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.scroll{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(40px,8vh,96px);
        writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.22em;
        text-transform:uppercase;color:var(--muted)}

/* category tiles - photographs, one word each */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:2px}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);filter:brightness(.68)}
.tile:hover img{transform:scale(1.045)}
.tile .label{position:absolute;left:24px;right:24px;bottom:22px;display:flex;
             align-items:baseline;justify-content:space-between;gap:12px}
.tile .word{font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
            font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1}
.tile .n{font-size:.72rem;letter-spacing:.18em;color:#cfcec9}
/* No stock photography here. A tile under "Weddings" showing someone else's
   wedding reads as our work whatever the caption says, and the site's whole
   claim is that the pictures are ours. So these are designed rather than
   filled: a lens iris, drawn, so the empty state still looks intentional. */
.tile.empty{display:flex;align-items:flex-end;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, #23232a 0%, #15151a 45%, #0d0d10 100%)}
.tile.empty::before{
  content:"";position:absolute;top:50%;left:50%;width:38%;aspect-ratio:1;
  transform:translate(-50%,-60%);border-radius:50%;
  border:1px solid rgba(246,245,243,.07);
  box-shadow:0 0 0 1px rgba(246,245,243,.03) inset,
             0 0 0 16px rgba(246,245,243,.018),
             0 0 0 17px rgba(246,245,243,.032);
}
.tile.empty::after{
  content:"";position:absolute;top:50%;left:50%;width:38%;aspect-ratio:1;
  transform:translate(-50%,-60%) rotate(18deg);
  background:
    conic-gradient(from 0deg,
      rgba(246,245,243,.032) 0 12deg, transparent 12deg 60deg,
      rgba(246,245,243,.032) 60deg 72deg, transparent 72deg 120deg,
      rgba(246,245,243,.032) 120deg 132deg, transparent 132deg 180deg,
      rgba(246,245,243,.032) 180deg 192deg, transparent 192deg 240deg,
      rgba(246,245,243,.032) 240deg 252deg, transparent 252deg 300deg,
      rgba(246,245,243,.032) 300deg 312deg, transparent 312deg 360deg);
  border-radius:50%;
}
.tile.empty .label{position:relative;z-index:2;padding:24px;width:100%}
.tile.empty:hover::before{border-color:rgba(255,90,31,.34)}

/* sections */
section{padding:clamp(64px,10vh,140px) 0}
.wrap{padding-inline:var(--gutter)}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;
      margin-bottom:clamp(26px,4vw,52px);flex-wrap:wrap}
.head h2{font-weight:800;letter-spacing:-.03em;text-transform:uppercase;
         font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:.95}

/* featured event strip */
.feature{position:relative;height:min(78svh,720px);overflow:hidden}
.feature img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.feature .cap{position:absolute;left:var(--gutter);bottom:clamp(34px,6vh,64px);right:var(--gutter)}
.feature h3{font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
            font-size:clamp(1.8rem,5.5vw,4.4rem);line-height:.95;max-width:18ch}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
     border:1px solid rgba(246,245,243,.45);padding:13px 22px;border-radius:999px;
     font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
     transition:background .2s,color .2s,border-color .2s}
.cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.cta.solid:hover{background:#ff7038;border-color:#ff7038;color:#fff}

/* gallery grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:2px}
.grid a{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:#0e0e10}
.grid img{width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .6s;opacity:1}
.grid a:hover img{transform:scale(1.03)}
.grid img[data-fade]{opacity:0}
.grid img[data-fade].on{opacity:1}
.grid a:hover img{filter:brightness(1.08)}

/* panel blocks on an event page */
.panel{margin-bottom:clamp(48px,8vh,110px)}
.panel .bar{display:flex;align-items:baseline;justify-content:space-between;
            gap:20px;border-top:1px solid var(--line);padding-top:18px;
            margin-bottom:14px;flex-wrap:wrap}
.panel h3{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
          font-size:clamp(1.05rem,2.2vw,1.8rem);line-height:1.05;max-width:none}
.panel .when{font-size:.74rem;letter-spacing:.18em;color:var(--muted);white-space:nowrap}
.panel .who{font-size:.85rem;color:var(--muted);max-width:70ch;margin-top:4px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(7,7,8,.97);
    display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb img{max-width:94vw;max-height:88svh;object-fit:contain}
.lb .x,.lb .prev,.lb .next{position:absolute;background:none;border:0;color:var(--paper);
  cursor:pointer;font-size:1.6rem;padding:16px;opacity:.7;transition:opacity .2s}
.lb .x:hover,.lb .prev:hover,.lb .next:hover{opacity:1}
.lb .x{top:8px;right:14px}
.lb .prev{left:6px;top:50%;transform:translateY(-50%)}
.lb .next{right:6px;top:50%;transform:translateY(-50%)}
.lb .meta{position:absolute;left:0;right:0;bottom:16px;text-align:center;
          font-size:.72rem;letter-spacing:.14em;color:var(--muted)}

footer{border-top:1px solid var(--line);padding:clamp(40px,7vh,80px) var(--gutter) 40px}
.fmark{font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
       font-size:clamp(2.2rem,7vw,5rem);line-height:.9;margin-bottom:clamp(26px,4vw,44px)}
.fgrid{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.fgrid a{display:block;color:var(--muted);padding:3px 0;font-size:.9rem}
.fgrid a:hover{color:var(--paper)}
.fcol h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
         color:#5e5e66;margin-bottom:10px;font-weight:600}
.social{display:flex;gap:10px;margin-top:4px}
.social a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  padding:9px 15px;border-radius:999px;font-size:.82rem;color:var(--muted);
  transition:color .2s,border-color .2s}
.social a:hover{color:var(--paper);border-color:var(--paper)}
.social svg{width:16px;height:16px;fill:currentColor}
.legal{margin-top:38px;font-size:.76rem;color:#5e5e66;display:flex;
       justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal a{color:#8a8a92;border-bottom:1px solid #35353d}
.legal a:hover{color:var(--paper);border-bottom-color:var(--paper)}

.fcol .pending{display:block;color:#5e5e66;padding:3px 0;font-size:.9rem}
.tile .label .n.soon{color:var(--accent);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600}

/* .feature stays: it is how a second event will be introduced once there is
   more than one worth featuring. */

@media (max-width:760px){
  header{padding:14px 16px}
  .mark{font-size:1.05rem;letter-spacing:.1em}
  nav{gap:13px;font-size:.62rem;letter-spacing:.09em}

  /* The forced line break is tuned for a wide screen; on a phone it pushes
     the second line past the edge. Let the text wrap where it wants to. */
  .hero .display br.wide{display:none}
  .hero .display{font-size:clamp(2.05rem,9.2vw,3.1rem);max-width:none}
  .hero .sub{font-size:.92rem;max-width:32ch}
  .hero .cap{bottom:clamp(28px,6vh,60px)}
  .hero .actions{margin-top:20px}
  .scroll{display:none}
  .hero img{object-position:58% center}

  .grid{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr))}
  .tile{aspect-ratio:3/4}
  .display.oneline{white-space:normal;font-size:clamp(2rem,10vw,3.2rem)}

  .feature{height:min(64svh,520px)}
  .feature h3{font-size:clamp(1.6rem,8vw,2.6rem)}
  .feature .sub{font-size:.9rem}
  .cta{padding:11px 18px;font-size:.7rem}
  .head{gap:12px}
  .panel .bar{gap:6px}
  .panel .when{font-size:.68rem}
  .fmark{font-size:clamp(2rem,13vw,3.2rem)}
  .fgrid{gap:26px}
}

/* Very narrow phones: drop the nav labels rather than let them collide with
   the wordmark. The page is one scroll, so nothing becomes unreachable. */
@media (max-width:400px){
  nav{display:none}
  .mark{font-size:1.15rem}
}