/* ============================================================
   Rebirth of Gaea — hand-coded rebuild demo
   Design values lifted from the live Semplice site:
   bg #141414 / #000 / #e2e2e2, Quicksand 600, hover zoom 1.66
   over 0.666s, meta overlay rgba(0,0,0,.5), links #3a9ed8
   ============================================================ */

:root {
  --bg-dark: #141414;
  --bg-darker: #1e1e1e;
  --bg-black: #000;
  --bg-light: #e2e2e2;
  --bg-lighter: #c9c9c9;
  --txt: #c9c9c9;
  --txt-dim: #8a8a8a;
  --link: #3a9ed8;
  --title: #fff;
  --cat: #f4f4f4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 18px; scroll-behavior: smooth; }
body {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  background: var(--bg-dark);
  color: var(--txt);
  line-height: 1.75;
}
img, video { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
h1, h2 { font-weight: 600; line-height: 1.25; }

/* ---------- demo badge ---------- */
.demo-badge {
  position: fixed; bottom: 14px; left: 14px; z-index: 99;
  background: #3a9ed8; color: #fff; font-size: .61rem; letter-spacing: .08em;
  padding: .35rem .7rem; border-radius: 3px; text-transform: uppercase;
}
.demo-badge span { cursor: pointer; margin-left: .6rem; opacity: .7; }

/* ---------- header ---------- */
/* header — white Semplice navbar, synced with site.css (2026-08-24) */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  height: 48px; padding: 0 25px;
  background: rgba(245,245,245,.64);
}
header.scrolled { background: rgba(245,245,245,.64); }
header .logo {
  color: #000; font-size: 15px; line-height: 15px; letter-spacing: 3.3px;
  text-transform: uppercase;
}
header nav a {
  color: #000; font-size: 18px; letter-spacing: .5px; margin-left: 25px;
  transition: color .25s;
}
header nav a:hover { color: #888; }
header nav a.active { color: #000; }

/* ---------- cover ---------- */
.cover { position: relative; height: 100vh; overflow: hidden; background: #111; }
.cover-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cover-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  text-shadow: 3px 3px 9px rgba(0,0,0,.33);
}
/* live-exact title treatment (Semplice .custom_3x3nr5teh, 2026-09-25):
   Quicksand 600 but SMALL + wide-tracked uppercase — not display-size */
.cover-text h1 { color: #c9c9c9; font-size: 1.889rem; letter-spacing: .644rem; text-transform: uppercase; font-weight: 600; }
.cover-text h1 .of { font-weight: 600; font-style: normal; letter-spacing: inherit; }
.cover-dates { color: #c9c9c9; font-size: 1rem; letter-spacing: .178rem; margin-top: .8rem; }
.scroll-hint {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 2rem; opacity: .7; animation: bob 2s infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,10px); } }

/* ---------- sections ---------- */
.sec { padding: 5rem 2.2rem; }
.sec.dark    { background: var(--bg-dark); }
.sec.darker  { background: var(--bg-darker); }
.sec.black   { background: var(--bg-black); }
.sec.light   { background: var(--bg-light); color: #333; }
.sec.lighter { background: var(--bg-lighter); color: #2a2a2a; }
.sec p + p { margin-top: 1.1rem; }

.hero-image-sec { padding-top: 8.9rem; text-align: center; }
.hero-img { margin: 0 auto; max-width: 1100px; width: 100%; }
.shadowed { box-shadow: .5rem 1.17rem 3.67rem .61rem rgba(0,0,0,1); }
.shadowed-soft { box-shadow: 0 0 7.9rem 0 rgba(35,43,33,.2); }
.logo-treatment { margin: 6rem auto 2rem; max-width: 520px; }

.intro { text-align: center; padding-bottom: 9rem; }
.intro p { max-width: 720px; margin-left: auto; margin-right: auto; }
.lede { font-size: 1.35rem; color: #e2e2e2; line-height: 1.5; }
.sec.light .lede, .sec.lighter .lede { color: #222; }
.intro p:not(.lede) { margin-top: 1.4rem; color: var(--txt-dim); }

.cols { display: flex; gap: 3.5rem; max-width: 1200px; margin: 0 auto; align-items: flex-start; }
.cols > * { flex: 1; min-width: 0; }
.col-text h1 { font-size: 2rem; margin-bottom: 1.4rem; letter-spacing: .05em; }
.intention { padding: 4.9rem 2.2rem; }
.intention .col-text p { color: #4a4a4a; }
.intention .col-text p strong { color: #222; }

.kicker {
  text-transform: uppercase; letter-spacing: .3em; font-size: .8rem;
  color: #5b5b5b; margin-bottom: 1.3rem;
}
.sec.dark .kicker, .sec.darker .kicker, .sec.black .kicker { color: #9b9b9b; }

.seed .sketch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.6rem 0;
}
.seed .bts-pair { display: flex; gap: .7rem; margin: 1.6rem 0; }
.seed .bts-pair img { width: calc(50% - .35rem); }

.statement { text-align: center; padding: 6.4rem 2.2rem; }
.statement h1 { font-size: 1.9rem; color: #e2e2e2; max-width: 900px; margin: 0 auto; }

/* ---------- vignette hover grid ---------- */
.vignettes { padding: 3.4rem 2.2rem 9rem; }
.vg-grid { display: flex; gap: 1.4rem; max-width: 1400px; margin: 0 auto; }
.vg-col { flex: 1; display: flex; flex-direction: column; gap: 2.2rem; min-width: 0; }
.vg-item { display: block; }
.vg-media { position: relative; overflow: hidden; background: #000; }
.vg-media img { width: 100%; transition: opacity .45s ease; }
.vg-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .45s ease;
}
.vg-item:hover .vg-media video, .vg-media.playing video { opacity: 1; }
.vg-item:hover .vg-media img, .vg-media.playing img { opacity: 0; }
.vg-caption { margin-top: .55rem; line-height: 1.45; }
.vg-title { display: block; color: #cfcfcf; font-size: .83rem; letter-spacing: .04em; }
.vg-cat { display: block; color: #6a6a6a; font-size: .7rem; }

/* ---------- bg-image sections ---------- */
.bg-image {
  background-image: var(--bg); background-size: cover; background-position: center;
  background-attachment: fixed; padding: 9rem 2.2rem;
}
.bg-image .panel {
  max-width: 680px; margin: 0 auto; background: rgba(13,13,13,.82);
  padding: 3rem 3.2rem; color: #cfcfcf;
}
.credit { color: #8a8a8a; font-size: .8rem; margin-top: 1.4rem; }
.embed { position: relative; padding-top: 56.25%; margin-top: 1.8rem; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.nft { text-align: center; padding: 11rem 2.2rem; }
.nft h2 { color: #fff; font-size: 1.7rem; text-shadow: 2px 2px 8px rgba(0,0,0,.6); }

.videos-2col .cols { gap: 2.5rem; }
.videos-2col .caption { margin-top: 1rem; font-size: .85rem; color: #9b9b9b; }
.sec.lighter .caption { color: #444; }

.star .col-text p { font-size: .95rem; }
.star .cols { align-items: center; }

.pushing { text-align: center; padding-top: 9rem; }
.pushing .wide { max-width: 1100px; margin: 0 auto 4rem; }
.narrow { max-width: 720px; margin: 0 auto; text-align: left; }

.journey { padding: 7rem 2.2rem; }

/* ---------- project panel (signature hover grid) ---------- */
.project-panel { padding: 6rem 2.2rem 4rem; }
.panel-label {
  color: #b7b7b7; font-size: 1rem; text-align: center; letter-spacing: .1em;
  margin-bottom: 3rem; white-space: nowrap; overflow: hidden;
}
.pp-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  max-width: 1400px; margin: 0 auto;
}
.pp-thumb { display: block; }
.pp-media {
  position: relative; overflow: hidden; aspect-ratio: 1; background: #000;
}
.pp-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .666s ease;
}
.pp-thumb:hover .pp-media img { transform: scale(1.66); }
.pp-meta {
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .4s ease; padding: .9rem;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.pp-thumb:hover .pp-meta { opacity: 1; }
.pp-meta .title { color: var(--title); font-size: 1.05rem; line-height: 1.3; }
.pp-meta .category { color: var(--cat); font-size: .68rem; font-weight: 400; margin-top: .3rem; }
.pp-thumb .pp-media { transition: box-shadow .8s ease; }
.pp-thumb:hover .pp-media { box-shadow: .44rem .72rem 2.11rem .39rem rgba(0,0,0,1); }

/* ---------- footer ---------- */
footer {
  background: #020202; text-align: center; padding: 4rem 2rem 3rem;
  color: #7a7a7a; font-size: .8rem;
}
footer p + p { margin-top: .5rem; }
footer .copyright { margin-top: 2rem; color: #4a4a4a; font-size: .7rem; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .cols { flex-direction: column; }
  .vg-grid { flex-wrap: wrap; }
  .vg-col { flex: 1 1 40%; }
  .pp-grid { grid-template-columns: repeat(3, 1fr); }
  .cover-text h1 { font-size: 1.2rem; letter-spacing: .4rem; }
  .bg-image { background-attachment: scroll; }
}
@media (max-width: 560px) {
  .vg-col { flex: 1 1 100%; }
  .pp-grid { grid-template-columns: repeat(2, 1fr); }
  header nav a { margin-left: .8rem; font-size: 12px; }
  header .logo { font-size: 11px; letter-spacing: 2px; }
}