/* ====== Base / Theme ====== */
:root{
  --bg:#FFFAF0; 
  --fg:#1F2421; 
  --muted:#6b7280;

  --accent:#5E3140; 
  --accent-2:#15e6b8;

  --panel:#F5E6DA; 
  --line:#222;

  /* chip palettes per section */
  --chip-pulse:#6E2E52; /* deep plum */
  --chip-hub:#27476B;   /* navy */
  --chip-map:#2C7A7B;   /* deep teal */
}

*{ box-sizing:border-box }
html,body{ margin:0; height:100% }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); 
  color:var(--fg); 
  line-height:1.55;
}
img{ max-width:100%; height:auto; display:block }

/* ====== Hero ====== */
.hero{
  min-height:44vh; 
  display:grid; 
  place-items:center;
  padding:80px 20px 8px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,194,255,.12), transparent 60%),
    radial-gradient(900px 500px at 90% -20%, rgba(21,230,184,.10), transparent 60%);
  text-align:center;
}
.hero h1{ font-size:clamp(32px,5vw,56px); margin:0 0 10px; line-height:1.1 }
.hero p{ max-width:820px; margin:0 auto 24px; color:var(--muted) }

/* ====== Sections / Containers ====== */
.section{ padding:40px 20px }
#modules.section{ padding-top:8px }
.container{ max-width:1100px; margin:0 auto }

/* ====== Cards (Modules) ====== */
.cards{
  display:grid; 
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.card{
  display:flex; flex-direction:column;
  background:var(--panel); 
  border:1px solid var(--line);
  border-radius:16px; 
  padding:18px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-3px) }
.card h3{ margin:6px 0 10px; font-size:18px }
.card p{ margin:0 0 10px }
.card .more{
  margin-top:auto; 
  font-size:13px; 
  font-weight:600;
  color:var(--accent); 
  text-decoration:none;
}
.card .more:hover{ text-decoration:underline }

/* ====== Shared UI bits ====== */
.lead{ color:var(--muted); margin:-2px 0 14px }
.small{ font-size:12px; color:var(--muted) }
.detail{ margin-top:16px }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px }
.chip{
  display:inline-block; 
  padding:6px 12px; 
  border-radius:999px;
  background:#fff; 
  border:1px solid var(--line);
}

/* Legacy 2-col layout (used in Hub gallery/table) */
.grid-2{
  display:grid; gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr } }

/* Generic gallery */
.gallery{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.gallery a{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel) }

/* Tables */
.table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:10px; overflow:hidden }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left }
.table th{ background:#fff9f2; font-weight:700 }

/* ====== Footer ====== */
footer{ border-top:1px solid var(--line); color:var(--muted); text-align:center; padding:24px }

/* ====== Section blocks that share styles (Map / Pulse / Hub) ====== */
#pulse .detail, #map .detail, #hub .detail{
  background:rgba(255,255,255,.45);
  border:1px solid rgba(31,36,33,.06);
  border-radius:20px;
  padding:18px;
}
#pulse .stack, #map .stack, #hub .stack{
  display:grid; gap:18px;
}
@media (min-width:960px){
  #pulse .stack, #map .stack, #hub .stack{
    grid-template-columns:1.1fr 1fr; 
    align-items:stretch;
  }
}

/* ====== Shared feature cards ====== */
.feature-card, .pulse-card{
  background:#fffdf9;
  border:1px solid rgba(31,36,33,.10);
  border-radius:16px;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
  padding:22px;
  display:flex; flex-direction:column; 
  min-height:100%;
}
.feature-card h3, .pulse-card h3{
  margin:0 0 10px; 
  font-size:18px; 
  letter-spacing:-0.01em;
}
.feature-copy, .pulse-copy{ 
  font-size:16px; 
  line-height:1.8; 
  max-width:60ch;
}

/* Preview frames */
#pulse .preview, #hub .preview{
  border:1px solid rgba(31,36,33,.10); 
  border-radius:12px; 
  overflow:hidden; 
  background:#fff;
}
.ratio{ position:relative; width:100%; aspect-ratio:16/9 }
.ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* Links under preview */
#pulse .small a, #hub .small a{
  text-decoration:none; 
  border-bottom:1px solid rgba(116,66,83,.35);
}
#pulse .small a:hover, #hub .small a:hover{ border-bottom-color:var(--accent) }

/* ====== Shots (thumbnails grid) ====== */
.shot-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.shot{
  position:relative;
  aspect-ratio:16/10;
  border:1px solid rgba(31,36,33,.10);
  border-radius:12px; 
  overflow:hidden; 
  background:#fff;
  transition:transform .12s ease, box-shadow .12s ease;
}
@media (min-width:1100px){ .shot{ aspect-ratio:16/9 } }
.shot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.shot:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.06) }

/* ====== Eyebrow label + spacing tweaks ====== */
.eyebrow{
  display:inline-block;
  margin-bottom:2px;
  text-transform:uppercase; 
  letter-spacing:.08em;
  font-size:12px; 
  color:var(--muted); 
  font-weight:600;
}
.feature-card .eyebrow + h3{ margin-top:2px; margin-bottom:8px }
.feature-card .eyebrow + .feature-copy{ margin-top:4px }
.feature-card h3 + .feature-copy{ margin-top:6px }

/* ====== Filled chips by section (unified) ====== */
#pulse { --chip-bg: var(--chip-pulse); }
#hub   { --chip-bg: var(--chip-hub); }
#map   { --chip-bg: var(--chip-map); }

#pulse .chip, #hub .chip, #map .chip{
  background: var(--chip-bg);
  color:#fff;
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: none;
  cursor: default;
}
/* Keep detail pane stable on hover */
#pulse .detail:hover, #hub .detail:hover, #map .detail:hover{
  background: rgba(255,255,255,.45);
}

/* ====== Lightbox ====== */
/* hidden by default; shown only when .lb-open is added */
#lightbox{
  position:fixed; inset:0; 
  opacity:0; 
  pointer-events:none; 
  transition:opacity .2s ease;
  z-index:9999;
}
#lightbox .lb-backdrop{
  position:absolute; inset:0; 
  background:rgba(0,0,0,.6);
  opacity:0; 
  transition:opacity .2s ease;
}
#lightbox .lb-figure{
  position:absolute; inset:0; 
  display:grid; place-items:center;
  pointer-events:none;
}
#lightbox .lb-img{
  max-width:min(92vw,1200px); 
  max-height:88vh;
  background:#fff; 
  border-radius:12px; 
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  transform-origin:center;
  /* initial transform (from CSS variables) */
  transform: translate(var(--tx,0),var(--ty,0)) scale(var(--scale,.98));
  opacity:0;
  transition: transform .25s ease, opacity .2s ease;
}

/* lightbox buttons */
#lightbox .lb-btn{
  position:absolute; 
  top:50%; 
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.45); 
  color:#fff; 
  font-size:26px; 
  line-height:1;
  padding:10px 14px; 
  border-radius:10px; 
  cursor:pointer;
  /* hidden by default */
  opacity:0; 
  pointer-events:none;
}
#lightbox .lb-prev{ left:16px }
#lightbox .lb-next{ right:16px }
#lightbox .lb-close{ top:16px; right:16px; transform:none; font-size:24px }

/* open state */
#lightbox.lb-open{ opacity:1; pointer-events:auto }
#lightbox.lb-open .lb-backdrop{ opacity:1 }
#lightbox.lb-open .lb-img{ transform:translate(0,0) scale(1); opacity:1 }
#lightbox.lb-open .lb-btn{ opacity:1; pointer-events:auto }

/* touch tweaks */
@media (max-width:640px){
  #lightbox .lb-btn{ font-size:22px; padding:8px 12px }
}

/* ===================== Responsive tweaks ===================== */

/* === Small phones (<= 400–480px) === */
@media (max-width: 480px){
  .hero{ padding:56px 16px 6px; }
  .hero h1{ font-size:clamp(26px, 7vw, 34px); }
  .hero p{ max-width: 90ch; font-size: 14px; }

  .section{ padding:28px 16px; }
  .container{ max-width: 100%; }

  .cards{ gap:12px; grid-template-columns: 1fr; }
  .card{ padding:14px; border-radius:12px; }
  .card h3{ font-size:16px }
  .card .more{ font-size:12px }

  .chips{ gap:6px; }
  .chip{ padding:6px 10px; font-size:12px; }

  .shot-grid{ grid-template-columns:1fr; }
  .shot{ aspect-ratio: 4 / 3; }

  /* iframes more square on narrow screens */
  .ratio{ aspect-ratio: 4 / 3; }

  footer{ padding:18px; font-size:12px }
}

/* === Tablets (481–900px) — refine gutters & grid === */
@media (min-width: 481px) and (max-width: 900px){
  .section{ padding:36px 20px; }
  .cards{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shot-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* === Desktops wide (>= 1280px) — breathe more === */
@media (min-width: 1280px){
  .container{ max-width: 1200px; }
  .cards{ gap:18px; grid-template-columns: repeat(3,minmax(280px,1fr)); }
  .hero h1{ font-size:clamp(40px, 4.6vw, 60px); }
}

/* === Very wide (>= 1600px) — larger container & hero === */
@media (min-width: 1600px){
  .container{ max-width: 1320px; }
  .hero{ min-height: 48vh; }
  .hero h1{ font-size:clamp(44px, 4vw, 64px); }
  .hero p{ font-size: 18px; }
  .cards{ gap:20px; }
}

/* === Ultra-wide (>= 1920px) — avoid “stretchy” look === */
@media (min-width: 1920px){
  .container{ max-width: 1440px; }
  .section{ padding:56px 24px; }
}

/* === Lightbox touch targets grow on small devices === */
@media (max-width: 640px){
  #lightbox .lb-btn{ font-size:24px; padding:10px 14px; }
}

/* === Motion safety for users who prefer less animation === */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}