/* NEIGHT homepage + gallery restored
   Copper and charcoal palette for approved stacked N8 identity. Existing gallery structure preserved.
*/

:root {
  --bg: #f1efeb;
  --paper: #f6f3ed;
  --panel: #e5e0d9;
  --ink: #24272a;
  --muted: #555a5d;
  --quiet: #7d7a76;
  --line: rgba(36, 39, 42, 0.15);
  --gold: #aa6747; /* legacy variable, now copper */
  --yellow: #cf9c7e; /* legacy variable, now pale copper */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

.site-header {
  min-height: 96px;
  padding: 20px clamp(24px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(252, 251, 248, 0.94);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.brand { display: inline-flex; align-items: center; }

.brand-logo {
  width: clamp(190px, 22vw, 315px);
  height: auto;
  display: block;
}

.nav {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  font-weight: 900;
  font-size: 15px;
}

.nav a { color: var(--muted); }
.nav a:hover { color: var(--gold); }

.landing {
  min-height: 660px;
  display: flex;
  align-items: center;
  padding: clamp(70px, 10vw, 135px) clamp(24px, 5vw, 72px);
  background:
    radial-gradient(circle at 78% 18%, rgba(170, 103, 71, 0.12), transparent 31%),
    linear-gradient(180deg, var(--paper), var(--bg));
}

.landing-inner { max-width: 950px; }

.eyebrow {
  margin: 0 0 22px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.05em;
  line-height: 1;
  font-weight: 900;
}

h1 { font-size: clamp(54px, 8vw, 104px); }

.lede {
  max-width: 760px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.36;
  letter-spacing: -0.025em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 900;
}

.button.primary { background: var(--ink); color: var(--paper); }

.button.secondary {
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.35);
}

.intro-section, .gallery-section {
  padding: clamp(78px, 10vw, 125px) clamp(24px, 5vw, 72px);
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-inner {
  max-width: 980px;
  margin: 0 auto;
}

.intro-section h2,
.gallery-section h2,
.page-hero h1 {
  font-size: clamp(38px, 5.5vw, 72px);
}

.intro-section p,
.content-block p,
.gallery-intro {
  color: var(--muted);
  font-size: clamp(21px, 2.5vw, 29px);
  line-height: 1.45;
}

.gallery-intro {
  max-width: 850px;
}

code {
  background: rgba(36, 39, 42, 0.07);
  padding: 2px 7px;
  border-radius: 6px;
}

.cards,
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.card,
.portfolio-tile {
  background: var(--paper);
  padding: clamp(32px, 5vw, 56px);
  min-height: 280px;
}

.card h3,
.portfolio-tile h2 {
  font-size: clamp(27px, 3vw, 42px);
}

.card p,
.portfolio-tile p {
  color: var(--muted);
  margin-top: 18px;
}

.portfolio-tile span {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.gallery-grid {
  max-width: 1120px;
  margin: 46px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.gallery-item {
  margin: 0;
}

.image-box {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(170, 103, 71, 0.16), rgba(255, 255, 255, 0.25)),
    var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--quiet);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gallery-item figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
}

.page { min-height: 70vh; }

.page-hero {
  padding: clamp(80px, 10vw, 130px) clamp(24px, 5vw, 72px) clamp(45px, 6vw, 78px);
  background:
    radial-gradient(circle at 85% 10%, rgba(170, 103, 71, 0.10), transparent 32%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}

.content-block {
  max-width: 980px;
  padding: clamp(60px, 8vw, 100px) clamp(24px, 5vw, 72px);
}

.contact-card a {
  color: #96583b;
  font-weight: 900;
  border-bottom: 2px solid rgba(170, 103, 71, 0.35);
}

.site-footer {
  padding: 34px clamp(24px, 5vw, 64px);
  color: var(--quiet);
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 15px;
}

@media (max-width: 850px) {
  .site-header {
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;
  }

  .brand-logo { width: 220px; }

  .nav {
    width: 100%;
    justify-content: space-between;
  }

  .landing { min-height: 560px; }

  .cards,
  .portfolio-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* Brand refinements: warm copper accent, charcoal primary, no bright yellow. */
.button.primary:hover { background: #3a3d40; }
.button.secondary:hover { border-color: var(--gold); color: var(--gold); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Homepage survey call to action: primary next step for visitors. */
.survey-cta {
  min-height: 64px;
  padding: 0 36px;
  background: var(--gold) !important;
  color: #fff !important;
  font-size: 18px;
  box-shadow: 0 7px 22px rgba(90, 48, 30, 0.17);
  gap: 12px;
}
.survey-cta:hover { background: #90543a !important; }
@media (max-width: 600px) {
  .hero-actions .survey-cta { width: 100%; }
}

/* Listening project invitation */
.listening-invite {max-width:760px; margin:24px 0 18px; padding:16px 20px; border-left:3px solid var(--gold); background:rgba(170,103,71,.07); color:var(--ink); font-size:17px; line-height:1.6;}
.listening-invite strong {color:var(--gold);}

/* 2026 Research visual refresh */
.landing{min-height:640px;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:clamp(28px,5vw,90px);align-items:center;padding-inline:max(clamp(24px,5vw,72px),calc((100vw - 1330px)/2));}
.landing-inner{max-width:740px;min-width:0;}
.hero-photo-area{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;max-width:560px;width:100%;}
.hero-photo-card{margin:0;overflow:hidden;border-radius:10px;border:1px solid rgba(36,39,42,.12);background:#ddd7cf;box-shadow:0 16px 34px rgba(36,39,42,.10);}
.hero-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center;aspect-ratio:4 / 5;}
.photo-one{transform:translateY(-10px);}
.photo-two{margin-top:78px;}
.photo-two .hero-photo{aspect-ratio:4 / 4.8;object-position:center top;}
@media(max-width:980px){.landing{grid-template-columns:1fr}.hero-photo-area{max-width:650px}.photo-one{transform:none}.photo-two{margin-top:18px}.hero-photo{aspect-ratio:4/4.2}}
@media(max-width:580px){.hero-photo-area{grid-template-columns:1fr 1fr;gap:10px}.photo-two{margin-top:20px}.hero-photo{aspect-ratio:4/5}}

/* Story landscape-photo composition */
.landing { grid-template-columns:minmax(0,1fr) minmax(340px,.92fr);gap:clamp(26px,4vw,65px) }
.landing-inner {max-width:650px}
.landing h1 {font-size:clamp(70px,8vw,112px)}
.hero-photo-area {display:flex;flex-direction:column;gap:18px;max-width:620px;align-self:center}
.hero-photo-card {display:block;margin:0;border-radius:9px;overflow:hidden;box-shadow:0 12px 28px rgba(36,39,42,.12);border:1px solid var(--line);background:#e5e0d9}
.hero-photo-card .hero-photo {display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.hero-photo-area .photo-one {width:100%;transform:none}
.hero-photo-area .photo-two {width:78%;margin:0 0 0 auto}
.dmos-project {margin-top:32px;display:inline-flex;align-items:center;gap:24px;border-top:1px solid var(--line);padding:24px 12px 12px 0;max-width:570px}
.dmos-project img {width:130px;height:auto;object-fit:contain;background:white;padding:6px;border-radius:5px}
.dmos-project span {display:flex;flex-direction:column;gap:6px}
.dmos-project strong {font-size:19px;color:var(--ink)}
.dmos-project small {font-size:15px;color:#96583b}
@media(max-width:1040px){.landing{grid-template-columns:1fr}.hero-photo-area{max-width:750px}}
@media(max-width:600px){.hero-photo-area .photo-two{width:85%}.dmos-project{gap:14px}.dmos-project img{width:100px}}

/* V6 final homepage refinements */
.listening-invite h2 { color:var(--gold); font-weight:900; font-size:clamp(22px,2vw,27px); line-height:1.25; letter-spacing:-.025em; margin:0 0 10px; }
.listening-invite p { margin:0; }
.dmos-project img {background:transparent; padding:0;}

/* V7: enforce contained two-column hero and photo sizes */
.landing {
  width: 100%;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 3vw, 52px);
}
.landing-inner, .hero-photo-area { min-width: 0; width: 100%; max-width: 100%; }
.hero-photo-area { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.hero-photo-area .hero-photo-card { display:block; width:100%; max-width:100%; min-width:0; flex:0 0 auto; }
.hero-photo-area .photo-two { width:78%; max-width:78%; margin-left:auto; }
.hero-photo-area .hero-photo { display:block; width:100%; max-width:100%; height:auto; object-fit:contain; aspect-ratio:auto; }
@media (max-width: 1040px) {
 .landing {grid-template-columns:minmax(0,1fr);}
 .hero-photo-area {max-width:680px; margin:0 auto;}
}
@media (max-width:600px) { .hero-photo-area .photo-two { width:85%;max-width:85%; } }