/* sections.css — section-specific layout only; type/CTA/rhythm live in base.css */

/* ---- SIGNAL: manifesto band, asymmetric 2fr/1fr ---- */
#signal { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gutter); align-items: end; }
#signal h2 { max-width: 24ch; font-weight: var(--w-light); }
.signal-copy { display: grid; gap: 1.25rem; color: var(--text-2); max-width: 34ch; }

/* ---- KEYCHAR: full-bleed crossfade band ---- */
#keychar { padding: 0; max-width: none; }
.keychar-stage { position: relative; overflow: hidden; min-height: 85vh; min-height: 85svh; }
.keychar-media { position: absolute; inset: -8% 0; }
.keychar-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.6s ease, transform 9s ease;
  will-change: opacity, transform;
}
.keychar-img.is-active { opacity: 1; transform: scale(1); }
.keychar-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(15deg, rgba(12, 26, 38, 0.86) 0%, rgba(12, 26, 38, 0.6) 40%, rgba(12, 26, 38, 0.12) 75%);
}
.keychar-copy {
  position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter);
  bottom: clamp(2rem, 8vh, 5rem); max-width: 34rem; color: var(--pale);
}
.keychar-copy p { color: var(--steel); margin-top: 0.75rem; }

/* ---- SYSTEM: asymmetric bento ---- */
#system .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); margin-top: clamp(2rem, 5vh, 3.5rem); }
.bento .cell {
  grid-column: span 4; margin: 0;
  border: var(--hairline); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.bento .cell-wide { grid-column: span 7; }
.bento .cell-img { padding: 0; overflow: hidden; min-height: 280px; }
.bento figure.cell-img:first-of-type { grid-column: span 5; }
.bento .cell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento .cell h3 { margin-bottom: 0.75rem; }
.bento .cell p { color: var(--text-2); }

/* ---- SECTORS: horizontal track (GSAP pan desktop, stack mobile) ---- */
#sectors { overflow: hidden; }
.sector-track { display: flex; gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 5vh, 3.5rem); width: max-content; }
.sector-card {
  flex: 0 0 auto; width: min(60vw, 780px); display: block;
  border: var(--hairline); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit;
}
.sector-card img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease-out); will-change: transform;
}
.sector-card:hover img, .sector-card:focus-visible img { transform: scale(1.04); }
.sector-card h3 { margin: 1.5rem 1.75rem 0; width: fit-content; }
.sector-card h3::after {
  content: ""; display: block; height: 1px; margin-top: 0.35rem; background: var(--sky);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out);
}
.sector-card:hover h3::after, .sector-card:focus-visible h3::after { transform: scaleX(1); }
.sector-card p { margin: 0.5rem 1.75rem 1.75rem; color: var(--text-2); }

/* ---- PROOF: hairline columns, no cards ---- */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: clamp(2rem, 5vh, 3.5rem); }
.proof-grid article { border-top: var(--hairline); padding-top: 1.5rem; }
.proof-grid h3 { margin-bottom: 0.75rem; }
.proof-grid p { color: var(--text-2); }
.proof-grid a { color: var(--sky); overflow-wrap: anywhere; display: inline-block; margin-top: 0.75rem; }

/* ---- BOOK: full-bleed closing band ---- */
#book {
  position: relative; overflow: hidden; padding: 0; max-width: none;
  min-height: 90vh; min-height: 90svh;
  display: flex; align-items: center;
}
.book-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#book::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(12, 26, 38, 0.92) 0%, rgba(12, 26, 38, 0.78) 45%, rgba(12, 26, 38, 0.3) 100%);
}
.book-inner { position: relative; z-index: 1; padding: var(--space-section) var(--gutter); max-width: 42rem; margin-left: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); }
.book-inner p { color: var(--steel); margin: 1.25rem 0 2rem; }

/* ---- Mobile collapse (<768px) ---- */
@media (max-width: 767px) {
  #signal { display: block; }
  .signal-copy { margin-top: 2rem; max-width: none; }
  .keychar-stage { min-height: 70vh; min-height: 70svh; }
  #system .bento { display: flex; flex-direction: column; }
  .bento .cell-img { min-height: 220px; }
  .sector-track { flex-direction: column; width: 100%; }
  .sector-card { width: 100%; }
  .proof-grid { grid-template-columns: 1fr; }
  #book { min-height: 80vh; min-height: 80svh; }
  .book-inner { margin-left: 0; }
}

/* ---- Reduced motion: everything static ---- */
@media (prefers-reduced-motion: reduce) {
  .keychar-img, .sector-card img, .sector-card h3::after { transition: none; }
  .keychar-img { transform: none; }
  .keychar-img.is-active { transform: none; }
  .sector-card:hover img { transform: none; }
}