@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Space+Mono:wght@400;700&family=Archivo:wght@400;500;800;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:#141313; color:#f2ede1;
  font-family:'Archivo',sans-serif;
  line-height:1.55;
}
a{color:inherit;}
.mono{font-family:'Space Mono',monospace;}
.accent{color:#c9622a;}

/* ---- nav ---- */
nav{
  position:sticky; top:0; z-index:50; height:84px;
  background:#141313;
  border-bottom:2px solid #c9622a;
}
.nav-inner{
  height:100%; max-width:1400px; margin:0 auto; padding:0 6vw;
  display:flex; justify-content:space-between; align-items:center;
}
.brand{ font-family:'Lobster',cursive; font-size:1.7rem; color:#f2ede1; text-decoration:none; }
.nav-links{ display:flex; gap:28px; list-style:none; }
.nav-links a{ font-family:'Space Mono',monospace; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;}
.nav-links a:hover{ border-color:#c9622a; }
.nav-links .soon, .nav-dropdown .soon{
  opacity:0.45; cursor:default; pointer-events:none; position:relative;
}
.nav-links .soon .tag, .nav-dropdown .soon .tag{
  font-size:0.55rem; letter-spacing:0.05em; color:#c9622a; margin-left:6px;
  border:1px solid #c9622a; padding:1px 5px; vertical-align:middle;
}

/* ---- mobile nav ---- */
.nav-toggle{
  display:none; background:none; border:1px solid #f2ede1; color:#f2ede1;
  width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:#f2ede1; }
.nav-dropdown{
  display:none; position:absolute; top:84px; left:0; right:0; z-index:49;
  background:#141313; border-bottom:1px solid #2a2823;
  flex-direction:column; padding:10px 6vw 20px;
}
.nav-dropdown.open{ display:flex; }
.nav-dropdown a, .nav-dropdown span.soon{
  font-family:'Space Mono',monospace; font-size:0.9rem; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none; color:#f2ede1; padding:14px 0; border-bottom:1px solid #2a2823;
}
.nav-dropdown a:last-child, .nav-dropdown span.soon:last-child{ border-bottom:none; }

@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-inner{ padding:0 5vw; }
}

/* ---- home hero (full height, index.html only) ---- */
.hero{ position:relative; height:calc(100vh - 84px); overflow:hidden; padding:0; margin:0; max-width:none; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.72) 35%, rgba(10,9,8,0.35) 65%, rgba(10,9,8,0.15) 100%);
}
.hero-content{
  position:relative; z-index:1; max-width:1400px; margin:0 auto;
  height:100%; display:flex; align-items:center; padding:0 6vw;
}
.cinema-text .eyebrow{ font-family:'Space Mono',monospace; font-size:0.85rem; letter-spacing:0.12em; color:#c9622a; margin-bottom:16px;}
.cinema-text h1{ font-weight:900; font-size:clamp(2.6rem,6.5vw,5.6rem); line-height:0.94; letter-spacing:-0.01em;}
.cinema-text .role-wrap{
  display:inline-block; position:relative; margin-top:18px;
}
.cinema-text .role-wrap::before{
  content:''; position:absolute; z-index:0;
  top:-8px; bottom:-8px; left:-24px; right:-14px;
  background:rgba(10,9,8,0.72);
  clip-path:polygon(0 0, 100% 0, 94% 100%, 0% 100%);
}
.cinema-text .role{ position:relative; z-index:1; font-family:'Space Mono',monospace; font-size:0.82rem; letter-spacing:0.08em; color:#f2ede1; display:block; }
.cinema-cta{ display:flex; align-items:center; gap:16px; margin-top:36px; font-family:'Space Mono',monospace; font-size:0.8rem; letter-spacing:0.1em; text-decoration:none; color:#f2ede1; width:fit-content; cursor:pointer; }
.cinema-cta .line{ width:60px; height:1px; background:#f2ede1; transition:width .2s ease;}
.cinema-cta:hover .line{ width:80px; background:#c9622a; }
.cinema-cta:hover span{ color:#c9622a; }

/* ---- page banner (subpages: Gallery, Postales, etc.) ---- */
.page-banner {
  position: relative;
  height: 260px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.page-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.75));
}
.page-banner-title {
  position: relative;
  z-index: 1;
  color: #f2ede1;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;              /* matches homepage hero h1 */
  letter-spacing: -0.01em;       /* matches homepage hero h1 */
  line-height: 0.94;
  margin: 0;
}
@media (max-width: 700px) {
  .page-banner { height: 160px; }
}

/* ---- sections ---- */
.section{ max-width:1400px; margin:0 auto; padding:80px 6vw; }
.section-head{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid #2a2823; padding-top:14px; margin-bottom:44px; flex-wrap:wrap; gap:10px;}
.section-head h2{ font-weight:800; font-size:1.7rem; }
.section-head .mono{ font-size:0.78rem; color:#a8a49a; }

/* ---- gallery grid ---- */
.plain-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:48px; max-width:880px; margin:0 auto; }
@media (max-width:600px){ .plain-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto;} }
.plain-photo{
  aspect-ratio:4/5; border:1px solid #2a2823; position:relative; overflow:hidden; cursor:pointer;
  background:repeating-linear-gradient(135deg,#252320 0 3px,#181613 3px 7px);
  transition:border-color .2s ease;
}
.plain-photo:hover{ border-color:#c9622a; }
.plain-photo img{ width:100%; height:100%; object-fit:cover; display:block;}
.plain-photo span{ position:absolute; bottom:10px; left:10px; font-family:'Space Mono',monospace; font-size:0.65rem; background:rgba(20,19,19,0.85); padding:2px 6px; color:#a8a49a;}

/* ---- stacked photo sets (grouped photos in the grid) ---- */
.photo-set{ aspect-ratio:4/5; position:relative; cursor:pointer; }
.photo-set .stack-layer{
  position:absolute; inset:0; border:1px solid #2a2823; overflow:hidden; background:#181613;
  transition:transform .2s ease;
}
.photo-set .stack-layer img{ width:100%; height:100%; object-fit:cover; display:block;}
.photo-set .stack-layer.l2{ transform:translate(16px,-16px) rotate(4deg); z-index:1; }
.photo-set .stack-layer.l1{ z-index:2; }
.photo-set:hover .stack-layer.l2{ transform:translate(22px,-22px) rotate(6deg); }
.photo-set .set-badge{
  position:absolute; bottom:10px; left:10px; z-index:3;
  font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.03em;
  background:rgba(20,19,19,0.85); color:#f2ede1; padding:4px 9px; display:flex; align-items:center; gap:6px;
}
.photo-set .set-badge svg{ width:12px; height:12px; }

/* ---- small "part of a set" folder badge, used on flat gallery tiles ---- */
.folder-badge{
  position:absolute; bottom:10px; left:10px; z-index:3;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:rgba(20,19,19,0.85); color:#c9622a;
}
.folder-badge svg{ width:14px; height:14px; }

/* ---- lightbox modal ---- */
.lightbox-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(10,10,10,0.92); padding:8vh 6vw;
  overflow-y:auto;
}
.lightbox-overlay.open{ display:block; }
.lightbox-inner{ max-width:1100px; margin:0 auto; }
.lightbox-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
.lightbox-head h3{ font-weight:800; font-size:1.4rem; color:#f2ede1;}
.lightbox-close{
  font-family:'Space Mono',monospace; font-size:0.85rem; color:#f2ede1; background:none;
  border:1px solid #f2ede1; padding:8px 16px; cursor:pointer;
}
.lightbox-close:hover{ border-color:#c9622a; color:#c9622a; }
.lightbox-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:700px){ .lightbox-grid{ grid-template-columns:1fr; } }
.lightbox-grid img{ width:100%; display:block; border:1px solid #2a2823; }
.lightbox-grid.single{ display:block; }
.lightbox-grid.single img{ width:auto; max-width:100%; height:auto; max-height:82vh; margin:0 auto; display:block; border:none; }

/* ---- postales ---- */
.postcard-grid{ display:flex; flex-direction:column; gap:44px; }
.postal-entry{ display:grid; gap:6px; }
.postal-entry.frames-2{ grid-template-columns:1fr 1fr; }
.postal-entry.frames-1{ grid-template-columns:1fr; }
@media (max-width:700px){ .postal-entry.frames-2{ grid-template-columns:1fr; } }
.postal-frame{ aspect-ratio:16/9; background:#0c0b0b; position:relative; overflow:hidden; cursor:pointer;}
.postal-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.postal-caption{ display:flex; justify-content:space-between; padding:12px 2px 0; font-family:'Space Mono',monospace; font-size:0.75rem; color:#a8a49a;}
.postal-caption .no{ color:#c9622a; }

/* ---- stories ---- */
.story{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:start; padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid #2a2823;}
.story:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0;}
.story:nth-child(even){ grid-template-columns:1.15fr 0.85fr; }
.story:nth-child(even) .story-photo{ order:2; }
.story:nth-child(even) .story-text{ order:1; }
@media (max-width:800px){ .story,.story:nth-child(even){grid-template-columns:1fr;} .story:nth-child(even) .story-photo,.story:nth-child(even) .story-text{order:initial;} }
.story-photo{ aspect-ratio:4/3; border:1px solid #2a2823; position:relative; overflow:hidden; cursor:pointer; background:repeating-linear-gradient(135deg,#252320 0 3px,#181613 3px 7px);}
.story-photo img{ width:100%; height:100%; object-fit:cover;}
.story-photo span{ position:absolute; bottom:12px; left:12px; font-family:'Space Mono',monospace; font-size:0.68rem; background:rgba(20,19,19,0.85); padding:3px 8px; color:#a8a49a;}
.story-meta{ font-family:'Space Mono',monospace; font-size:0.75rem; color:#c9622a; letter-spacing:0.03em; margin-bottom:10px;}
.story-text h3{ font-size:1.5rem; font-weight:800; margin-bottom:14px;}
.story-text p{ color:#c9c2ad; max-width:56ch; margin-bottom:12px;}

/* ---- about ---- */
.about{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}
@media (max-width:800px){ .about{grid-template-columns:1fr;} }
.about-photo{ aspect-ratio:4/5; background:repeating-linear-gradient(135deg,#252320 0 3px,#181613 3px 7px); border:1px solid #2a2823; position:relative; overflow:hidden; cursor:pointer;}
.about-photo img{ width:100%; height:100%; object-fit:cover;}
.about-photo::after{ content:'add portrait: mou-portrait.jpg'; position:absolute; bottom:14px; left:14px; font-family:'Space Mono',monospace; font-size:0.68rem; background:rgba(20,19,19,0.85); padding:3px 8px; color:#a8a49a;}
.about-text p{ margin-bottom:18px; max-width:56ch; font-size:1.05rem; color:#c9c2ad;}
.about-text p:first-child{ font-size:1.2rem; color:#f2ede1;}
.about-list{ margin-top:28px; border-top:1px solid #2a2823; padding-top:20px; font-family:'Space Mono',monospace; font-size:0.85rem; color:#a8a49a; display:flex; flex-direction:column; gap:8px;}

/* ---- contact ---- */
.contact-wrap{ background:#0c0b0b; }
.contact-wrap .section-head{ border-top:1px solid #2a2823; }
.postcard-back{ display:grid; grid-template-columns:1.3fr 1px 0.9fr; border:1px solid #2a2823; }
@media (max-width:760px){ .postcard-back{grid-template-columns:1fr;} .postcard-back .divider{display:none;} }
.postcard-back .divider{ background:#2a2823; }
.message-side{ padding:32px; }
.message-side .lines{ display:flex; flex-direction:column; gap:22px; margin-top:20px;}
.message-side .lines div{ border-bottom:1px solid #2a2823; height:1px;}
.stamp-side{ padding:32px; display:flex; flex-direction:column; justify-content:space-between;}
.stamp-box{ align-self:flex-end; width:74px; height:90px; border:2px solid #f2ede1; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:0.6rem; text-align:center; padding:8px;}
.contact-links{ display:flex; flex-direction:column; gap:14px; margin-top:auto;}
.contact-links a{ font-family:'Space Mono',monospace; font-size:0.95rem; text-decoration:none; border-bottom:1px solid #f2ede1; width:fit-content; padding-bottom:2px;}

/* ---- gallery carousel lightbox ---- */
.carousel-overlay{
  display:none; position:fixed; inset:0; z-index:1100;
  background:rgba(10,10,10,0.97);
  overflow-y:auto;
}
.carousel-overlay.open{ display:block; }
.carousel-top{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 40px;
}
.carousel-counter{ font-family:'Space Mono',monospace; font-size:0.85rem; color:#a8a49a; letter-spacing:0.05em; }
.carousel-top-right{ display:flex; gap:14px; align-items:center; }
.carousel-btn{
  font-family:'Space Mono',monospace; font-size:0.78rem; color:#f2ede1; letter-spacing:0.05em;
  border:1px solid #f2ede1; padding:8px 16px; display:flex; align-items:center; gap:8px; cursor:pointer;
  background:none;
}
.carousel-btn:hover{ border-color:#c9622a; color:#c9622a; }
.carousel-btn svg{ width:14px; height:14px; }

.carousel-side{
  position:absolute; top:50%; transform:translateY(-50%);
  width:340px; height:600px; opacity:0.28; filter:brightness(0.6) saturate(0.8);
  object-fit:cover; transition:opacity .2s ease; cursor:pointer;
}
.carousel-side.left{ left:-40px; }
.carousel-side.right{ right:-40px; }
.carousel-fade-left{ position:absolute; top:0; bottom:0; left:0; width:420px; background:linear-gradient(90deg, #0a0a0a 20%, transparent 100%); z-index:2; pointer-events:none; }
.carousel-fade-right{ position:absolute; top:0; bottom:0; right:0; width:420px; background:linear-gradient(270deg, #0a0a0a 20%, transparent 100%); z-index:2; pointer-events:none; }

.carousel-center-wrap{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:5; box-shadow:0 30px 80px rgba(0,0,0,0.6);
  height:min(78vh, 1125px); width:auto; aspect-ratio:4/5; max-width:88vw;
}
.carousel-center-wrap img{ display:block; width:100%; height:100%; object-fit:cover; border:1px solid #2a2823; }

.carousel-caption{
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%); z-index:6;
  text-align:center; font-family:'Space Mono',monospace; font-size:0.8rem; color:#a8a49a; letter-spacing:0.04em;
}

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:8;
  width:52px; height:52px; border:1px solid #f2ede1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(10,9,8,0.5);
}
.carousel-arrow:hover{ border-color:#c9622a; }
.carousel-arrow.prev{ left:40px; }
.carousel-arrow.next{ right:40px; }
.carousel-arrow svg{ width:20px; height:20px; stroke:#f2ede1; }
.carousel-arrow:hover svg{ stroke:#c9622a; }

@media (max-width:900px){
  .carousel-side{ display:none; }
  .carousel-fade-left, .carousel-fade-right{ display:none; }
}
@media (max-width:700px){
  .carousel-top{ padding:18px 20px; }
  .carousel-btn span.btn-label{ display:none; }
  .carousel-arrow{ width:42px; height:42px; }
  .carousel-arrow.prev{ left:14px; }
  .carousel-arrow.next{ right:14px; }
  .carousel-center-wrap{ height:min(64vh, 900px); max-width:88vw; }
  .carousel-caption{ bottom:30px; font-size:0.7rem; }
}

/* ---- "click to view full" affordance, shown on hover over any clickable photo ---- */
.expand-hint{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.8);
  width:44px; height:44px; border-radius:50%;
  background:rgba(10,9,8,0.6); border:1px solid rgba(242,237,225,0.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
  z-index:4; pointer-events:none;
}
.expand-hint svg{ width:18px; height:18px; stroke:#f2ede1; }
.plain-photo:hover .expand-hint,
.postal-frame:hover .expand-hint{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---- hero scroll cue ---- */
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:#f2ede1; cursor:pointer;
}
.scroll-cue .label{ font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.12em; color:#f2ede1; text-transform:uppercase; }
.scroll-cue .chevron{ animation:scrollCueBounce 1.8s infinite; }
.scroll-cue:hover .label{ color:#c9622a; }
@keyframes scrollCueBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ---- homepage highlight reel (inline, not a modal) ---- */
.home-reel{ position:relative; padding:60px 0 70px; background:#141313; border-top:1px solid #2a2823; overflow:hidden; }
.home-reel-head{ max-width:1400px; margin:0 auto 34px; padding:0 6vw; display:flex; justify-content:space-between; align-items:baseline; }
.home-reel-head h2{ font-weight:800; font-size:1.4rem; }
.home-reel-head .counter{ font-family:'Space Mono',monospace; font-size:0.8rem; color:#a8a49a; }

.home-reel-stage{ position:relative; height:min(78vh, 720px); max-width:1400px; margin:0 auto; }
.home-reel-side{
  position:absolute; top:50%; transform:translateY(-50%);
  height:82%; width:auto; aspect-ratio:4/5;
  opacity:0.28; filter:brightness(0.6) saturate(0.8);
  object-fit:cover; cursor:pointer; transition:opacity .2s ease;
}
.home-reel-side:hover{ opacity:0.45; }
.home-reel-side.left{ left:2%; }
.home-reel-side.right{ right:2%; }
.home-reel-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:100%; width:auto; aspect-ratio:4/5;
  border:1px solid #2a2823; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  z-index:3; cursor:pointer; object-fit:cover; display:block;
}
.home-reel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border:1px solid #f2ede1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(10,9,8,0.5); cursor:pointer;
}
.home-reel-arrow:hover{ border-color:#c9622a; }
.home-reel-arrow:hover svg{ stroke:#c9622a; }
.home-reel-arrow.prev{ left:1%; }
.home-reel-arrow.next{ right:1%; }
.home-reel-arrow svg{ width:18px; height:18px; stroke:#f2ede1; }
.home-reel-view-full{
  text-align:center; margin-top:36px; font-family:'Space Mono',monospace; font-size:0.82rem;
  letter-spacing:0.08em; color:#f2ede1; text-decoration:none; display:block;
}
.home-reel-view-full span{ border-bottom:1px solid #f2ede1; padding-bottom:2px; transition:border-color .2s ease, color .2s ease; }
.home-reel-view-full:hover span{ border-color:#c9622a; color:#c9622a; }

@media (max-width:900px){
  .home-reel-side{ display:none; }
  .home-reel-arrow.prev{ left:4%; }
  .home-reel-arrow.next{ right:4%; }
}
@media (max-width:600px){
  .home-reel-stage{ height:min(62vh, 520px); }
}

footer{ padding:26px 6vw 40px; font-family:'Space Mono',monospace; font-size:0.7rem; color:#6b6656; background:#0c0b0b; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}