:root{
  --void:#05060A;
  --shadow:#11141F;
  --dusk:#1A1E2C;
  --ink:#E7E5EC;
  --muted:#9C9CB2;
  --line:#2B2F40;
  --accent:#8B93C4;
  --accent-soft:#B9C2E8;
  --max:1120px;
  --measure:680px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--shadow);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 48px;}
@media (max-width:640px){ .wrap{padding:0 24px;} }

.index-mark{
  font-family:'Newsreader', serif;
  font-style:italic;
  font-size:0.85rem;
  color:var(--accent);
}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(5,6,10,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:24px 48px;
  display:flex; justify-content:space-between; align-items:center;
}
@media (max-width:640px){ .nav-inner{padding:18px 24px;} }
.nav-mark{
  font-family:'Newsreader', serif;
  font-style:italic;
  font-weight:500;
  font-size:1.15rem;
  color:var(--ink);
  letter-spacing:0.01em;
  text-decoration:none;
}
.nav-links{
  display:flex; gap:34px;
  font-size:0.82rem;
}
.nav-links a{
  text-decoration:none;
  color:var(--ink);
  opacity:0.55;
  transition:opacity 0.25s ease;
}
.nav-links a:hover, .nav-links a.active{opacity:1;}
@media (max-width:720px){ .nav-links{display:none;} }

/* ---------- HERO ---------- */
.hero{
  background:var(--void);
  color:var(--ink);
  padding:140px 48px 130px;
  position:relative;
  overflow:hidden;
}
@media (max-width:640px){ .hero{padding:90px 24px 80px;} }
.hero-spine{
  position:absolute;
  left:16px; top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#4A4E63;
  white-space:nowrap;
  z-index:2;
}
@media (max-width:860px){ .hero-spine{display:none;} }
.hero-inner{
  max-width:760px; margin:0 auto;
  position:relative; z-index:2;
  text-align:center;
}
.hero h1{
  font-family:'Newsreader', serif;
  font-weight:500;
  font-size:clamp(2.8rem, 6.4vw, 5rem);
  line-height:1.06;
  margin:26px 0 28px;
  letter-spacing:-0.01em;
}
.hero h1 em{ font-style:italic; color:var(--accent-soft); }
.hero p.lede{
  max-width:440px;
  margin:0 auto 40px;
  font-size:1.08rem;
  color:var(--muted);
  font-family:'Newsreader', serif;
  font-style:italic;
}
.hero-cta{ display:flex; justify-content:center; gap:34px; }
.link-quiet{
  font-size:0.82rem;
  letter-spacing:0.03em;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid #333850;
  padding-bottom:3px;
  transition:border-color 0.25s ease, color 0.25s ease;
}
.link-quiet:hover{ border-color:var(--accent-soft); color:var(--accent-soft); }

.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%, rgba(231,229,236,0.85), transparent),
    radial-gradient(1px 1px at 18% 68%, rgba(231,229,236,0.55), transparent),
    radial-gradient(1.6px 1.6px at 32% 12%, rgba(231,229,236,0.75), transparent),
    radial-gradient(1px 1px at 46% 80%, rgba(231,229,236,0.5), transparent),
    radial-gradient(1.2px 1.2px at 58% 40%, rgba(231,229,236,0.8), transparent),
    radial-gradient(1.6px 1.6px at 72% 65%, rgba(231,229,236,0.65), transparent),
    radial-gradient(1px 1px at 84% 24%, rgba(231,229,236,0.55), transparent),
    radial-gradient(1.2px 1.2px at 91% 85%, rgba(231,229,236,0.7), transparent),
    radial-gradient(1px 1px at 12% 90%, rgba(231,229,236,0.45), transparent),
    radial-gradient(1.4px 1.4px at 64% 6%, rgba(231,229,236,0.8), transparent),
    radial-gradient(1px 1px at 38% 48%, rgba(231,229,236,0.4), transparent),
    radial-gradient(1px 1px at 96% 50%, rgba(231,229,236,0.5), transparent);
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:1;
}

/* smaller page-banner variant of hero, used on interior pages */
.hero-banner{ padding:110px 48px 90px; text-align:left; }
.hero-banner .hero-inner{ text-align:left; margin:0; max-width:var(--max); }
.hero-banner h1{ margin:18px 0 16px; }
.hero-banner p.lede{ margin:0; text-align:left; }

/* ---------- SECTION SHELL ---------- */
section{padding:120px 48px;}
@media (max-width:640px){ section{padding:80px 24px;} }
.section-alt{background:var(--dusk);}
.section-head{
  margin-bottom:64px;
  max-width:520px;
}
.section-head h2{
  font-family:'Newsreader', serif;
  font-weight:500;
  font-style:italic;
  font-size:2.1rem;
  margin:10px 0 14px;
  color:var(--ink);
}
.section-head p{ font-size:0.98rem; color:var(--muted); margin:0; }

/* ---------- EDITORIAL GALLERY ---------- */
.gallery-feature{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:56px;
  margin-bottom:64px;
}
@media (max-width:860px){ .gallery-feature{grid-template-columns:1fr;} }
.gallery-feature .plate{ aspect-ratio:4/5; }
.gallery-side{ display:flex; flex-direction:column; gap:40px; justify-content:center; }
.gallery-side .plate{ aspect-ratio:16/10; }

.plate{ position:relative; overflow:hidden; background-size:cover; background-position:center; border:1px solid var(--line); }
.plate::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 70% 30%, rgba(255,255,255,0.08), transparent 60%);
}
.pg1{background:linear-gradient(155deg, #2E3A63, #12142A);}
.pg2{background:linear-gradient(155deg, #4A3F63, #1A1526);}
.pg3{background:linear-gradient(155deg, #223447, #0D141C);}
.pg4{background:linear-gradient(155deg, #3B2E52, #17111F);}
.pg5{background:linear-gradient(155deg, #24413F, #0E1A19);}
.pg6{background:linear-gradient(155deg, #362F4A, #14111D);}

.plate-cap{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px;
  font-size:0.86rem;
}
.plate-cap .place{ font-family:'Newsreader', serif; font-style:italic; color:var(--ink); }
.plate-cap .idx{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--accent); letter-spacing:0.04em; }

.gallery-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}
@media (max-width:700px){ .gallery-row{grid-template-columns:1fr; gap:48px;} }
.gallery-row .plate{ aspect-ratio:4/3; }

/* ---------- JOURNAL, EDITORIAL ---------- */
.journal-feature{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:center;
  margin-bottom:70px;
  padding-bottom:70px;
  border-bottom:1px solid var(--line);
}
@media (max-width:860px){ .journal-feature{grid-template-columns:1fr;} }
.journal-feature .plate{ aspect-ratio:1/1; }
.journal-feature-text .index-mark{ display:block; margin-bottom:14px; }
.journal-feature-text h3{
  font-family:'Newsreader', serif;
  font-weight:500;
  font-size:1.9rem;
  line-height:1.2;
  margin:0 0 16px;
  color:var(--ink);
}
.journal-feature-text p{
  font-size:1rem;
  color:var(--muted);
  margin:0 0 20px;
}
.journal-feature-text p::first-letter{
  font-family:'Newsreader', serif;
  font-size:2.6rem;
  float:left;
  line-height:0.8;
  padding:4px 8px 0 0;
  color:var(--accent);
}

.journal-list{}
.j-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
}
.j-row:first-child{ padding-top:0; }
.j-row h4{
  font-family:'Newsreader', serif;
  font-weight:500;
  font-style:italic;
  font-size:1.15rem;
  margin:0;
  flex:1;
}
.j-date{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.74rem;
  color:var(--accent);
  white-space:nowrap;
}
@media (max-width:560px){ .j-row{flex-direction:column; gap:4px;} }

/* ---------- CLIENT GALLERY, QUIET ---------- */
.client-section{ background:var(--void); color:var(--ink); }
.client-section .section-head p{ color:var(--muted); }
.private-panel{
  max-width:560px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:36px 0;
  display:flex;
  align-items:flex-start;
  gap:22px;
}
.private-panel .lock-icon{ width:22px; height:22px; flex-shrink:0; margin-top:4px; }
.private-panel h4{
  font-family:'Newsreader', serif;
  font-weight:500;
  font-style:italic;
  font-size:1.2rem;
  margin:0 0 8px;
  color:var(--ink);
}
.private-panel p{ margin:0 0 16px; font-size:0.92rem; color:var(--muted); max-width:420px; }

/* ---------- ARTICLE ---------- */
.article{ max-width:var(--measure); margin:0 auto; padding:120px 48px 80px; }
@media (max-width:640px){ .article{padding:80px 24px 60px;} }
.article .index-mark{ display:block; margin-bottom:20px; }
.article h1{
  font-family:'Newsreader', serif;
  font-weight:500;
  font-size:clamp(2.1rem, 4.4vw, 3rem);
  line-height:1.12;
  margin:0 0 20px;
  color:var(--ink);
}
.article .meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.76rem;
  color:var(--accent);
  margin-bottom:52px;
}
.article p{ font-size:1.08rem; color:var(--muted); margin:0 0 24px; }
.article p:first-of-type::first-letter{
  font-family:'Newsreader', serif;
  font-size:3.4rem;
  float:left;
  line-height:0.78;
  padding:6px 10px 0 0;
  color:var(--accent);
}
.article figure{ margin:52px 0; }
.article .plate{ aspect-ratio:3/2; }
.article figcaption{
  font-family:'Newsreader', serif;
  font-style:italic;
  font-size:0.88rem;
  color:var(--muted);
  margin-top:12px;
}

/* ---------- FOOTER ---------- */
footer{
  padding:70px 48px 56px;
  background:var(--void);
  color:var(--muted);
  text-align:center;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
}
.footer-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  font-size:0.82rem;
  position:relative; z-index:2;
}
.footer-mark{
  font-family:'Newsreader', serif;
  font-style:italic;
  color:var(--ink);
  font-size:1.05rem;
  margin-bottom:6px;
}

.reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }