:root{
  --bg: #0a0a0c;
  --fg: #ece8e1;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ background:var(--bg); }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  overflow-x:hidden;
}

img{ -webkit-user-drag:none; user-select:none; }

@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
}

/* ---------------- Custom cursor ---------------- */
.cursor-dot{
  position:fixed;
  top:0; left:0;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:200;
  mix-blend-mode:difference;
  transition:width 0.2s ease, height 0.2s ease, opacity 0.3s ease;
  opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .cursor-dot.active{ opacity:1; }
}
.cursor-dot.hover{ width:44px; height:44px; }

/* ---------------- Grain / vignette / blobs ---------------- */
.grain{
  position:fixed;
  inset:-100px;
  z-index:80;
  pointer-events:none;
  opacity:0.09;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><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>");
  background-size:180px 180px;
  animation:grainShift 0.5s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-8%,4%); }
  50%{ transform:translate(6%,-6%); }
  75%{ transform:translate(-4%,-4%); }
  100%{ transform:translate(0,0); }
}

.vignette{
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  background:radial-gradient(120vmax 80vmax at 50% 50%, transparent 55%, rgba(0,0,0,0.78) 100%);
}

.blob{
  position:fixed;
  z-index:0;
  border-radius:50%;
  opacity:0.4;
  filter:blur(80px);
  pointer-events:none;
}
.blob-a{
  top:-10rem; left:-10rem;
  width:60vmax; height:60vmax;
  background:radial-gradient(circle, rgba(140,90,255,0.5), rgba(0,0,0,0) 60%);
}
.blob-b{
  bottom:-10rem; right:-10rem;
  width:55vmax; height:55vmax;
  background:radial-gradient(circle, rgba(255,80,140,0.45), rgba(0,0,0,0) 60%);
}

.progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0%;
  z-index:90;
  background:linear-gradient(to right, #e879f9, #ffffff, #67e8f9);
  transform-origin:left;
}

/* ---------------- HUD ---------------- */
.hud{
  position:fixed;
  left:0; right:0; top:0;
  z-index:85;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.4em;
  color:rgba(255,255,255,0.7);
  mix-blend-mode:difference;
  pointer-events:none;
}
.hud-center{ display:none; }
@media (min-width:768px){
  .hud-center{ display:inline; }
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
}

.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-grid{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  opacity:0.4;
}
.hero-cell{ position:relative; height:100%; overflow:hidden; background:#111; }
.hero-cell img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.4) 50%, #000);
}

.hero-content{
  position:relative;
  z-index:10;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  text-align:center;
}

.hero-label{
  margin-bottom:24px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.5em;
  color:rgba(255,255,255,0.6);
}

.hero-title{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  line-height:0.85;
  letter-spacing:-0.02em;
  font-size:clamp(90px, 18vw, 260px);
  color:#fff;
}
.hero-title span{
  display:inline-block;
  opacity:0;
  transform:translateY(30px);
  animation:letterIn 0.9s cubic-bezier(.16,.84,.32,1) forwards;
  animation-delay:calc(var(--i) * 0.08s);
}
@keyframes letterIn{
  to{ opacity:1; transform:translateY(0); }
}

.hero-tagline{
  margin-top:32px;
  max-width:36em;
  font-weight:300;
  color:rgba(255,255,255,0.6);
  font-size:clamp(14px, 1.6vw, 18px);
  line-height:1.6;
}

.scroll-cue{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.4em;
  color:rgba(255,255,255,0.6);
}
.scroll-cue i{
  display:block;
  width:1px;
  height:32px;
  background:rgba(255,255,255,0.6);
  animation:scrollLine 2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollLine{
  0%,100%{ transform:scaleY(1); opacity:0.6; }
  50%{ transform:scaleY(0.4); opacity:1; }
}

/* ---------------- Ticker ---------------- */
.ticker{
  position:absolute;
  bottom:0; left:0; right:0;
  z-index:10;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.1);
  border-bottom:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:12px 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  font-family:var(--serif);
  font-style:italic;
  color:rgba(255,255,255,0.8);
  font-size:clamp(22px, 3vw, 40px);
  animation:tickerMove 34s linear infinite;
}
.ticker-track span{ padding-right:0.4em; }
.ticker-track i{ font-style:normal; opacity:0.6; padding:0 0.3em; font-size:0.6em; vertical-align:middle; }
@keyframes tickerMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------------- Archive ---------------- */
.archive{
  position:relative;
  z-index:10;
  padding:8rem 24px;
}
@media (min-width:768px){
  .archive{ padding:8rem 4rem; }
}
.archive-inner{ max-width:1600px; margin:0 auto; }

.archive-head{
  margin-bottom:6rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  padding-bottom:2rem;
}
.eyebrow{
  margin-bottom:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.4em;
  color:rgba(255,255,255,0.5);
}
.archive-head h2{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(44px, 7vw, 100px);
  line-height:1;
}
.archive-meta{
  display:none;
  text-align:right;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.3em;
  color:rgba(255,255,255,0.5);
  line-height:1.8;
}
@media (min-width:768px){
  .archive-meta{ display:block; }
}

.grid12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
}
.item{
  grid-column:span 12;
  min-width:0;
  opacity:0;
  transform:translateY(50px);
  transition:opacity 1.1s cubic-bezier(.16,.84,.32,1), transform 1.1s cubic-bezier(.16,.84,.32,1);
}
.item.in-view{ opacity:1; transform:translateY(0); }

@media (min-width:768px){
  .span-7{ grid-column-end:span 7; }
  .span-4{ grid-column-end:span 4; }
  .span-5{ grid-column-end:span 5; }
  .span-6{ grid-column-end:span 6; }
  .span-8{ grid-column-end:span 8; }
  .start-1{ grid-column-start:1; }
  .start-2{ grid-column-start:2; }
  .start-3{ grid-column-start:3; }
  .start-6{ grid-column-start:6; }
  .start-7{ grid-column-start:7; }
  .start-9{ grid-column-start:9; }
  .offset-16{ margin-top:4rem; }
  .offset-24{ margin-top:6rem; }
  .offset-40{ margin-top:10rem; }
}

.frame-inner{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  outline:1px solid rgba(255,255,255,0.05);
  outline-offset:-1px;
  box-shadow:0 50px 100px -30px rgba(0,0,0,0.9);
  cursor:pointer;
}
.frame-inner .photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.4s cubic-bezier(.16,.84,.32,1), filter 0.6s ease;
  filter:saturate(1.04) contrast(1.02);
  background:#111;
}
.item:hover .photo{
  transform:scale(1.06);
  filter:saturate(1.15) contrast(1.05) brightness(1.03);
}
.glare{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  opacity:0;
  transition:opacity 0.7s ease;
  pointer-events:none;
}
.item:hover .glare{ opacity:1; }
.shade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.6), transparent 55%);
  opacity:0.7;
  transition:opacity 0.5s ease;
  pointer-events:none;
}
.item:hover .shade{ opacity:0.3; }
.badge{
  position:absolute;
  left:20px; top:20px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.3em;
  color:rgba(255,255,255,0.9);
  mix-blend-mode:difference;
}

figcaption{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:16px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.3em;
  color:rgba(255,255,255,0.4);
}
figcaption .rule{
  flex:1;
  height:1px;
  background:rgba(255,255,255,0.1);
}

/* ---------------- Closing ---------------- */
.closing{
  position:relative;
  z-index:10;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8rem 24px;
  text-align:center;
}
.closing h3{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(50px, 8vw, 130px);
  line-height:0.9;
}
.closing-note{
  margin-top:3rem;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.4em;
  color:rgba(255,255,255,0.4);
}

/* ---------------- Lightbox ---------------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(4,4,5,0.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }

.lb-img{
  max-width:88vw;
  max-height:88vh;
  object-fit:contain;
  box-shadow:0 60px 140px -20px rgba(0,0,0,0.9);
  opacity:0;
  transform:scale(0.95);
  transition:opacity 0.45s ease, transform 0.45s cubic-bezier(.16,.84,.32,1);
}
.lb-img.show{ opacity:1; transform:scale(1); }

.lb-label{
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.35em;
  color:rgba(255,255,255,0.5);
  font-variant-numeric:tabular-nums;
}

.lb-btn{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.35em;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  padding:12px;
  transition:color 0.3s ease, transform 0.3s ease;
}
.lb-btn:hover{ color:#fff; }
.lb-prev{ left:20px; }
.lb-next{ right:20px; }
.lb-prev:hover{ transform:translateY(-50%) translateX(-4px); }
.lb-next:hover{ transform:translateY(-50%) translateX(4px); }

/* ---------------- Responsive ---------------- */
@media (max-width:767px){
  .hero-title{ font-size:clamp(70px, 24vw, 140px); }
  .ticker-track{ font-size:22px; }
  .archive-head{ flex-direction:column; align-items:flex-start; gap:16px; }
}