*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root {
  --ink:      #0e0e0b;
  --charcoal: #181815;
  --warm:     #242420;
  --stone:    #5a574f;
  --mist:     #9a9488;
  --parchment:#e8e2d6;
  --cream:    #f5f0e8;
  --amber:    #c8963c;
  --gold:     #e8b96a;
  --rust:     #7a4a2a;
  --serif:    'EB Garamond', Georgia, serif;
  --sans:     'DM Sans', system-ui, sans-serif;
}

body {
  background: var(--charcoal);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  cursor: none;
  overflow-x: hidden;
}

/* ── CURSOR ── */
#cur {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
  mix-blend-mode: normal;
}
#cur.big { width: 48px; height: 48px; background: rgba(200,150,60,.18); border: 1px solid var(--amber); }
body:hover #cur { opacity: 1; }

/* ── NAV ── */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 3.5rem;
  background: linear-gradient(to bottom, rgba(14,14,11,.85) 0%, transparent 100%);
  backdrop-filter: blur(0px);
}
.nav-brand {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--cream);
  text-decoration: none;
}
.nav-brand span { font-style: italic; color: var(--gold); }
nav ul { list-style: none; display: flex; gap: 2.8rem; }
nav a {
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
  transition: color .25s;
}
nav a:hover { color: var(--gold); }

/* ── HERO ── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Sky gradient */
.hero-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 68% 20%, rgba(120,90,40,.18) 0%, transparent 60%),
    linear-gradient(175deg, #090c07 0%, #12180e 35%, #1a2015 65%, #0e0e0b 100%);
}

/* Stars */
.hero-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 12%, rgba(255,245,220,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 8%, rgba(255,245,220,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 18%, rgba(255,245,220,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 6%, rgba(255,245,220,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 22%, rgba(255,245,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 14%, rgba(255,245,220,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 32%, rgba(255,245,220,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 28%, rgba(255,245,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 35%, rgba(255,245,220,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 22%, rgba(255,245,220,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 45%, rgba(255,245,220,.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 40%, rgba(255,245,220,.3) 0%, transparent 100%);
}

/* Moon */
.hero-moon {
  position: absolute;
  top: 12%; right: 22%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #f0e0b0, #c8a860 60%, #8a6830);
  box-shadow: 0 0 40px 12px rgba(200,150,60,.12), 0 0 90px 30px rgba(200,150,60,.06);
}

/* Landscape SVG */
.hero-landscape {
  position: absolute;
  bottom: 0; left: 0; right: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 3.5rem 5.5rem;
  max-width: 680px;
}
.hero-eyebrow {
  font-size: .65rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero-eyebrow::before { content:''; width:36px; height:1px; background:var(--amber); }
.hero-title {
  font-family: var(--serif);
  font-size: clamp(3.6rem,7vw,7rem);
  font-weight: 400;
  line-height: .95;
  color: var(--cream);
  margin-bottom: 1.6rem;
}
.hero-title em {
  font-style: italic;
  display: block;
  color: rgba(232,226,214,.5);
  font-size: .72em;
}
.hero-sub {
  font-size: .88rem;
  color: var(--stone);
  line-height: 1.85;
  max-width: 380px;
  margin-bottom: 2.6rem;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: .35rem;
  transition: color .25s;
}
.btn-ghost::after { content:'→'; font-size:1.1rem; letter-spacing:0; }
.btn-ghost:hover { color: var(--gold); }

/* scroll line */
.scroll-indicator {
  position: absolute;
  bottom: 2.4rem; right: 3.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.scroll-indicator span {
  font-size: .58rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--stone);
  writing-mode: vertical-rl;
}
.scroll-bar {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, var(--amber), transparent);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.1)} }

/* ── BAND ── */
.band {
  background: var(--cream);
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  min-height: 160px;
}
.band-divider { background: rgba(90,87,79,.18); }
.band-cell {
  padding: 2.8rem 3.5rem;
  display: flex;
  align-items: center;
}
.band-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem,2.2vw,1.6rem);
  line-height: 1.45;
  color: #3a3630;
}
.band-stats {
  display: flex;
  gap: 3.5rem;
}
.stat-n {
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1;
  color: #3a3630;
}
.stat-l {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: .3rem;
}

/* ── GALLERY ── */
#gallery { padding: 5rem 2.5rem 3rem; }
.gallery-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.section-label {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--amber);
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(2rem,4vw,3.2rem);
  font-weight: 400;
  color: var(--cream);
  margin-top: .4rem;
}

/* CSS-art photo grid — true masonry-ish using named areas */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: repeat(11, 68px);
  gap: 5px;
}
.gi { position: relative; overflow: hidden; }
.gi::after {
  content:'';
  position: absolute;
  inset: 0;
  background: rgba(14,14,11,0);
  transition: background .4s;
}
.gi:hover::after { background: rgba(14,14,11,.35); }
.gi-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 1.8rem 1.1rem .85rem;
  background: linear-gradient(to top, rgba(8,10,6,.9) 0%, transparent 100%);
  z-index: 2;
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.gi:hover .gi-caption { transform: translateY(0); }
.gi-name { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--cream); }
.gi-place { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: .2rem; }

/* photo CSS backgrounds */
.ph { width:100%; height:100%; }
.ph-forest  { background: linear-gradient(168deg,#071209 0%,#0e2010 30%,#1a3518 55%,#253d1e 75%,#0e1a0c 100%); }
.ph-glacier { background: linear-gradient(160deg,#c8d8e8 0%,#90b4c8 25%,#4a7a9e 55%,#1a3a58 80%,#0a1828 100%); }
.ph-desert  { background: linear-gradient(155deg,#f0d8a8 0%,#d8a860 25%,#b07840 55%,#784820 80%,#301808 100%); }
.ph-night   { background: radial-gradient(ellipse at 50% 30%,#0a1028 0%,#050812 60%,#020408 100%); }
.ph-fog     { background: linear-gradient(170deg,#c8c0b0 0%,#a09088 30%,#786858 60%,#483830 85%,#201810 100%); }
.ph-aurora  { background: linear-gradient(160deg,#040c0a 0%,#0a2018 25%,#123028 50%,#183a30 70%,#0a2018 100%); }
.ph-canyon  { background: linear-gradient(165deg,#f0c890 0%,#c89050 30%,#906030 60%,#603820 85%,#301808 100%); }
.ph-coast   { background: linear-gradient(170deg,#e8e0d0 0%,#b8b0a0 30%,#808078 60%,#484840 85%,#181818 100%); }
.ph-meadow  { background: linear-gradient(165deg,#d0e0b0 0%,#90b870 25%,#508040 55%,#285020 80%,#102010 100%); }
.ph-tundra  { background: linear-gradient(162deg,#d8e8f0 0%,#a0b8c8 30%,#607888 60%,#304050 85%,#101820 100%); }

/* star overlay for night shot */
.ph-night::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 15%,rgba(255,252,240,.85) 0%,transparent 100%),
    radial-gradient(1px 1px at 50% 9%,rgba(255,252,240,.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 22%,rgba(255,252,240,.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 65% 38%,rgba(255,252,240,.55) 0%,transparent 100%),
    radial-gradient(1px 1px at 10% 40%,rgba(255,252,240,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 88% 12%,rgba(255,252,240,.65) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 30%,rgba(255,252,240,.4) 0%,transparent 100%);
}
/* aurora glow */
.ph-aurora::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 90% 40% at 50% 35%,rgba(30,180,120,.22) 0%,transparent 60%),
    radial-gradient(ellipse 60% 25% at 30% 45%,rgba(100,80,180,.15) 0%,transparent 55%);
}

/* grid placements */
.gi-a { grid-column:1/6;   grid-row:1/7; }
.gi-b { grid-column:6/9;   grid-row:1/4; }
.gi-c { grid-column:9/13;  grid-row:1/5; }
.gi-d { grid-column:6/10;  grid-row:4/8; }
.gi-e { grid-column:10/13; grid-row:5/9; }
.gi-f { grid-column:1/5;   grid-row:7/12; }
.gi-g { grid-column:5/8;   grid-row:7/12; }
.gi-h { grid-column:8/13;  grid-row:8/12; }
.gi-i { grid-column:6/10;  grid-row:1/4;  display:none; } /* hidden — handled by gi-b */
.gi-j { grid-column:1/6;   grid-row:7/12; display:none; }

/* ── SERIES ── */
#series {
  background: var(--cream);
  color: var(--ink);
  padding: 5rem 2.5rem;
}
#series .section-label { color: #7a6a50; }
#series .section-title { color: #1a1a14; }
.series-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3px;
  margin-top: 2.5rem;
}
.ser-card {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
}
.ser-photo {
  width:100%; height:100%;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.ser-card:hover .ser-photo { transform: scale(1.05); }
.ser-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,6,.88) 0%, rgba(8,10,6,.18) 45%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.6rem;
}
.ser-num { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.ser-title { font-family: var(--serif); font-size: 1.9rem; color: var(--cream); line-height: 1.15; margin-bottom: .4rem; }
.ser-count { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,226,214,.45); }
.sc-a { background: linear-gradient(162deg,#07120a 0%,#122018 30%,#1e3424 60%,#122018 100%); }
.sc-b { background: linear-gradient(155deg,#101828 0%,#1a2a3a 30%,#253848 60%,#101828 100%); }
.sc-c { background: linear-gradient(160deg,#180808 0%,#281410 30%,#3a201a 60%,#281410 100%); }

/* ── ABOUT ── */
#about {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.about-visual {
  min-height: 580px;
  background: linear-gradient(168deg,#090e08 0%,#121a10 40%,#0a1208 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-visual::before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 80% 70% at 40% 60%,rgba(40,60,30,.6) 0%,transparent 70%);
}
/* portrait placeholder — figure silhouette with camera */
.portrait {
  position: relative;
  z-index:1;
  width: 240px;
  height: 340px;
}
.portrait::before {
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(200,150,60,.25);
  transform: translate(10px,10px);
}
.portrait-fill {
  width:100%; height:100%;
  background: linear-gradient(170deg,#1a2818 0%,#243620 55%,#1a2818 100%);
  position:relative;
  overflow:hidden;
}
/* silhouette figure */
.portrait-fill::after {
  content:'';
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:130px; height:290px;
  background: #0d1a0c;
  clip-path: polygon(38% 0%,62% 0%,72% 18%,78% 100%,22% 100%,28% 18%);
}
.portrait-fill::before {
  content:'';
  position:absolute;
  top:42px; left:50%;
  transform:translateX(-50%);
  width:64px; height:64px;
  background:#0d1a0c;
  border-radius:50%;
}
.about-text {
  padding: 5rem 4rem;
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-eyebrow {
  font-size:.65rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.4rem;
  display:flex; align-items:center; gap:1rem;
}
.about-eyebrow::before { content:''; width:34px; height:1px; background:var(--amber); }
.about-heading {
  font-family:var(--serif);
  font-size: clamp(1.9rem,3vw,2.8rem);
  font-weight:400;
  line-height:1.25;
  color:var(--cream);
  margin-bottom:1.4rem;
}
.about-heading em { font-style:italic; color:var(--mist); }
.about-body { font-size:.88rem; color:var(--stone); line-height:1.9; margin-bottom:1rem; }
.clients { margin-top:1.8rem; }
.clients-label { font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--stone); margin-bottom:.9rem; }
.clients-tags { display:flex; flex-wrap:wrap; gap:.6rem; }
.tag {
  border:1px solid rgba(154,148,136,.28);
  padding:.28rem .8rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:.85rem;
  color:var(--mist);
}

/* ── CONTACT ── */
#contact {
  background: #0f120d;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 600px;
}
.contact-left {
  padding: 5.5rem 3.5rem;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-heading {
  font-family:var(--serif);
  font-size: clamp(2.8rem,5vw,5rem);
  font-weight:400;
  line-height:1.05;
  color:var(--cream);
  margin-bottom:1.5rem;
}
.contact-heading em { font-style:italic; color:var(--gold); }
.contact-desc { font-size:.88rem; color:var(--stone); line-height:1.85; margin-bottom:3rem; max-width:340px; }
.contact-items { display:flex; flex-direction:column; gap:0; }
.ci {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.07);
  padding:1.1rem 0;
}
.ci:last-child { border-bottom:1px solid rgba(255,255,255,.07); }
.ci-label { font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--stone); }
.ci-val { font-family:var(--serif); font-style:italic; font-size:.98rem; color:var(--cream); }
.contact-right {
  padding: 5.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form { display:flex; flex-direction:column; gap:1.8rem; }
.fg { display:flex; flex-direction:column; gap:.5rem; }
.fg label { font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(232,226,214,.35); }
.fg input,.fg textarea,.fg select {
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:.65rem 0;
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:.9rem;
  outline:none;
  transition:border-color .25s;
  width:100%;
}
.fg input:focus,.fg textarea:focus,.fg select:focus { border-bottom-color:var(--amber); }
.fg input::placeholder,.fg textarea::placeholder { color:rgba(232,226,214,.2); }
.fg textarea { resize:vertical; min-height:90px; }
.fg select { appearance:none; cursor:none; }
.fg select option { background:#1a1a14; }
.btn-submit {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  background:var(--amber);
  color:var(--ink);
  border:none;
  padding:.85rem 1.8rem;
  font-family:var(--sans);
  font-weight:400;
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  cursor:none;
  transition:background .25s;
  margin-top:.3rem;
}
.btn-submit::after { content:'→'; font-size:1rem; letter-spacing:0; }
.btn-submit:hover { background:var(--gold); }

/* ── FOOTER ── */
footer {
  background:var(--ink);
  border-top:1px solid rgba(255,255,255,.05);
  padding:1.8rem 3.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer-brand { font-family:var(--serif); font-style:italic; font-size:.95rem; color:rgba(232,226,214,.3); }
.footer-copy { font-size:.62rem; letter-spacing:.14em; color:rgba(232,226,214,.2); }
footer ul { list-style:none; display:flex; gap:1.8rem; }
footer ul a { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(232,226,214,.22); text-decoration:none; transition:color .25s; }
footer ul a:hover { color:var(--amber); }

/* grain overlay */
body::after {
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:999;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* fade-in on scroll */
.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }