/* ==========================================================================
   NOCTVRNA — site-wide stylesheet
   Sections: Tokens / Nav / Footer / Home / Projects / Project detail /
   About / Responsive
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500&display=swap');

:root{
  --bg: #070707;
  --text-primary: #f2f2f0;
  --text-secondary: #a8a8a4;
  --text-tertiary: #6b6b68;
  --border: #1a1a1a;
  --border-strong: #333;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --gap: 28px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }

/* ============ NAV — shared across every page ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 30px 44px;
  transition: background 0.35s ease, color 0.25s ease;
}
.nav.on-dark{ color:#f2f2f0; }
.nav.on-light{ color:#0a0a0a; }
.nav.solid{ background: rgba(7,7,7,0.92); color:#f2f2f0; }

.nav-logo{
  height:40px; width:161px; display:block; flex-shrink:0;
  margin-left:-14px;
}
.nav-logo svg{ display:block; width:100%; height:100%; fill:currentColor; }

.nav-logo-slot{
  height:40px; width:161px;
  flex-shrink:0;
  margin-left:-14px;
  visibility:hidden;
}

.nav-links{ display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a{
  font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:0.14em; text-transform:uppercase; color:currentColor;
  opacity:0.72; transition:opacity 0.4s ease;
}
.nav-links a.active{ opacity:1; }
.nav-links a:hover{ opacity:1; }
.nav-links .nav-cart{ display:flex; align-items:center; gap:6px; }
.cart-count{
  font-family:var(--sans); font-size:9px;
  border:1px solid currentColor; border-radius:50%;
  width:14px; height:14px; display:flex; align-items:center; justify-content:center;
}
body.intro-active .nav-links{ opacity:0; }
.nav-links.in{ opacity:1; transition:opacity 0.9s ease; }

/* ============ FOOTER — shared across every page ============ */
footer{
  max-width:1600px; margin:0 auto;
  padding: 60px 44px 50px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:0.08em; color:var(--text-tertiary);
}

/* ============ HOME / INSOMNIA ============ */
body.intro-active{ overflow:hidden; height:100vh; }

.hero{
  position:relative; height:100vh; width:100%;
  background:#101010;
  background-image: radial-gradient(ellipse at 50% 30%, #1c1c1c 0%, #0a0a0a 60%);
  overflow:hidden;
}
.hero img.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.55) 100%);
}
.hero-caption{
  position:absolute; left:48px; bottom:40px; z-index:15;
  font-size:11px; letter-spacing:0.08em; color:var(--text-secondary);
  opacity:0; transform:translateY(8px);
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.hero-caption.in{ opacity:1; transform:translateY(0); }
.hero-caption .t{ color:var(--text-primary); font-size:13px; display:block; margin-bottom:4px; }
.scroll-cue{
  position:absolute; right:48px; bottom:40px; z-index:15;
  font-size:10px; letter-spacing:0.14em; color:var(--text-secondary);
  display:flex; align-items:center; gap:8px;
  opacity:0; transition:opacity 0.9s ease;
}
.scroll-cue.in{ opacity:1; }
.scroll-cue::after{ content:""; width:1px; height:28px; background:var(--text-secondary); }

.below{
  max-width:1080px; margin:0 auto; padding: 90px 48px 100px;
  opacity:0; transform:translateY(14px);
  transition:opacity 1s ease, transform 1s ease;
}
.below.in{ opacity:1; transform:translateY(0); }
.section-label{ font-size:11px; letter-spacing:0.14em; color:var(--text-tertiary); margin-bottom:26px; }
.featured{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.fcard .ph{ aspect-ratio:3/4; background:#111; border:0.5px solid var(--border); overflow:hidden; }
.fcard .ft{ font-size:14px; margin-top:12px; font-family:var(--serif); font-style:italic; font-weight:300; }
.fcard .fm{ font-size:11px; color:var(--text-tertiary); margin-top:2px; }
.view-all{ margin-top:46px; display:flex; justify-content:center; }
.btn{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  border:0.5px solid rgba(255,255,255,0.3);
  padding:12px 26px; color:var(--text-primary); cursor:pointer; background:transparent;
  transition:border-color 0.25s ease;
}
.btn:hover{ border-color:#fff; }

.logo-anchor{ position:fixed; left:0; top:0; z-index:300; cursor:pointer; }
.intro-skip{
  position:fixed; right:26px; bottom:24px; z-index:310;
  font-family:var(--sans); font-size:10px; letter-spacing:0.12em;
  color:rgba(242,242,240,0.4); cursor:pointer;
  transition:opacity 0.4s ease;
}
.intro-skip:hover{ color:rgba(242,242,240,0.8); }
.intro-skip.hidden{ opacity:0; pointer-events:none; }

/* ============ PROJECTS ARCHIVE ============ */
.page-header{
  max-width:1600px; margin:0 auto; padding: 168px 44px 30px;
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:16px;
}
.page-header h1{
  font-family:var(--sans); font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--text-secondary); font-weight:500;
}
.page-header .note{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:16px; color:var(--text-tertiary); }

.toolbar{
  max-width:1600px; margin:0 auto; padding: 0 44px;
  display:flex; justify-content:flex-end; align-items:center; gap:22px;
  font-size:10.5px; letter-spacing:0.1em; color:var(--text-tertiary);
}
.toolbar span{ cursor:pointer; display:flex; align-items:center; gap:6px; }
.toolbar span:hover{ color:var(--text-secondary); }
.toolbar svg{ width:12px; height:12px; opacity:0.75; }
.search-line{ display:flex; align-items:center; gap:8px; }
.search{
  width:110px; border:none; background:transparent; color:var(--text-primary);
  font-family:var(--sans); font-size:11px; letter-spacing:0.03em;
  transition:width 0.2s ease;
}
.search::placeholder{ color:var(--text-tertiary); }
.search:focus{ outline:none; width:190px; }

.filter-panel{ display:none; gap:30px; flex-wrap:wrap; max-width:1600px; margin:0 auto; padding: 20px 44px 0; }
.filter-panel.open{ display:flex; }
.fgroup{ display:flex; align-items:center; gap:10px; font-size:11px; flex-wrap:wrap; }
.fgroup b{ font-family:var(--sans); font-weight:500; letter-spacing:0.14em; font-size:9.5px; color:var(--text-tertiary); text-transform:uppercase; }
.fchip{ cursor:pointer; padding:3px 1px; color:var(--text-secondary); border-bottom:1px solid transparent; }
.fchip.on{ color:var(--text-primary); border-bottom-color:var(--text-primary); }

.divider{ max-width:1600px; margin:26px auto 40px; padding:0 44px; }
.divider::after{ content:""; display:block; height:1px; background:var(--border); }

.grid-wrap{ max-width:1600px; margin:0 auto; padding:0 44px 130px; }
.masonry{ columns: 3 340px; column-gap: var(--gap); }
.item{ break-inside:avoid; margin-bottom: var(--gap); cursor:pointer; }
.item .ph-frame{ width:100%; overflow:hidden; background:#111; }
.item .ph-frame img{ transition: transform 0.7s cubic-bezier(.2,.7,.3,1); }
.item:hover .ph-frame img{ transform: scale(1.035); }
.item-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; }
.item-title{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:17px; }
.item-tag{ font-family:var(--sans); font-size:10.5px; letter-spacing:0.04em; color:var(--text-tertiary); white-space:nowrap; padding-left:16px; }
.item-exhibition{ font-family:var(--sans); font-size:10px; letter-spacing:0.06em; color:var(--text-tertiary); margin-top:5px; display:flex; align-items:center; gap:6px; }
.item-exhibition::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--text-tertiary); display:inline-block; }

/* ============ PROJECT DETAIL ============ */
.project-header{ max-width:1000px; margin:0 auto; padding: 180px 44px 90px; }
.breadcrumb{ font-family:var(--sans); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:26px; }
.breadcrumb a{ color:var(--text-secondary); }
.breadcrumb a:hover{ color:var(--text-primary); }
.project-header h1{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:48px; line-height:1.15; margin-bottom:22px; }
.project-meta{ display:flex; gap:22px; flex-wrap:wrap; font-family:var(--sans); font-size:11px; letter-spacing:0.08em; color:var(--text-tertiary); margin-bottom:30px; }
.project-meta span{ text-transform:uppercase; }
.project-desc{ font-family:var(--serif); font-weight:300; font-size:18px; line-height:1.65; color:var(--text-secondary); max-width:640px; }
.project-desc p:not(:last-child){ margin-bottom:1.3em; }

.gallery{ max-width:1600px; margin:0 auto; padding: 0 44px 40px; }
.g-row{ margin-bottom: 64px; }
.g-full img{ width:100%; display:block; }
.g-pair{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.g-caption{ font-family:var(--sans); font-size:10.5px; letter-spacing:0.06em; color:var(--text-tertiary); margin-top:14px; }

.prints-prompt{
  max-width:1000px; margin: 60px auto 0; padding: 44px 44px 0;
  border-top: 1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.prints-prompt .pp-text{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:17px; color:var(--text-secondary); }
.pp-btn{
  font-family:var(--sans); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  border:1px solid rgba(242,242,240,0.3); padding:13px 26px; white-space:nowrap;
  transition:border-color 0.25s ease;
}
.pp-btn:hover{ border-color:#fff; }

.project-nav{ max-width:1600px; margin:100px auto 0; padding: 50px 44px; border-top:1px solid var(--border); display:grid; grid-template-columns: 1fr 1fr; }
.pn-link{ display:flex; flex-direction:column; gap:8px; cursor:pointer; }
.pn-link.next{ text-align:right; align-items:flex-end; }
.pn-label{ font-family:var(--sans); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-tertiary); }
.pn-title{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:24px; transition:opacity 0.3s ease; }
.pn-link:hover .pn-title{ opacity:0.7; }

/* ============ ABOUT ============ */
.about-wrap{ max-width:640px; margin:0 auto; padding: 168px 48px 100px; }
.about-wrap .page-label{ font-family:var(--sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-tertiary); font-weight:500; margin-bottom:22px; }
.about-wrap .title{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(30px, 4vw, 44px); margin: 0 0 34px; }
.bio p{ font-family:var(--serif); font-weight:300; font-size:17px; line-height:1.8; color:var(--text-secondary); margin:0 0 24px; }
.bio p:first-of-type::first-letter{ font-size:46px; float:left; line-height:0.8; padding-right:10px; padding-top:6px; color:var(--text-primary); font-style:normal; }

.info{ margin-top:50px; padding-top:26px; border-top:1px solid var(--border); }
.info-row{ display:flex; justify-content:space-between; gap:20px; font-size:13px; padding:12px 0; border-bottom:1px solid var(--border); }
.info-row .role{ color:var(--text-tertiary); }
.info-row .value{ color:var(--text-secondary); }
.info-row a{ border-bottom:1px solid transparent; transition:all 0.4s ease; }
.info-row a:hover{ color:var(--text-primary); border-bottom-color:var(--text-primary); }

.exhibitions{ margin-top:56px; padding-top:26px; border-top:1px solid var(--border); }
.ex-row{ display:flex; align-items:flex-start; gap:0; padding:14px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.ex-row:hover .ex-title{ opacity:0.7; }
.ex-date{ width:78px; flex-shrink:0; display:flex; flex-direction:column; gap:2px; }
.ex-yr{ font-family:var(--sans); font-size:13px; color:var(--text-secondary); }
.ex-month{ font-family:var(--sans); font-size:10.5px; color:var(--text-tertiary); }
.ex-main{ flex:1; }
.ex-title{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:16px; transition:opacity 0.3s ease; }
.ex-venue{ font-family:var(--sans); font-size:11.5px; color:var(--text-tertiary); margin-top:3px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .masonry{ columns: 2 220px; }
  .page-header{ padding-top:130px; }
  .featured{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .g-pair{ grid-template-columns:1fr; }
  .project-header{ padding-top:130px; }
  .project-header h1{ font-size:32px; }
  .project-nav{ grid-template-columns:1fr; gap:36px; }
  .pn-link.next{ text-align:left; align-items:flex-start; }
}

@media (max-width: 640px){
  .nav{ flex-direction:column; align-items:flex-start; gap:16px; padding:22px 24px; }
  .nav-logo, .nav-logo-slot{ height:34px; width:137px; margin-left:-12px; }
  .nav-links{ gap:20px; }
  .nav-links a{ font-size:10px; }
  .page-header{ padding-top:150px; }
  .project-header{ padding-top:150px; }
  .about-wrap{ padding: 150px 24px 90px; }
}