/* S12 — GRMH SPACES (ink venture chapter).
   Warehouse ambience full-bleed behind at 30% under an ink wash; four
   expandable ruled option rows; the closing statement pill. CSS
   defaults keep every rule drawn and every option body open — motion
   mode alone collapses rows and sets hidden states (reduced-motion
   law). */

.s12 {
  position: relative;
  padding-block: 150px;
}

/* ---------- ambience layer ---------- */

.s12-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.s12-slot {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  height: 116%; /* headroom for the slow yPercent drift */
  opacity: .3;
}
.s12-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(18, 22, 26, .94) 0%,
    rgba(18, 22, 26, .6) 40%,
    rgba(18, 22, 26, .74) 72%,
    rgba(18, 22, 26, .95) 100%);
}

.s12-inner { position: relative; }

/* ---------- chapter head ---------- */

.s12-titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.s12-name { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

.s12-h2 {
  margin-top: var(--rhythm-layer);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
}

/* ---------- the four options: expandable ruled rows ---------- */

.s12-options {
  margin-top: var(--rhythm-layer);
  max-width: 820px;
}

.s12-option { position: relative; }

.s12-option-rule {
  position: absolute;
  top: 0;
  left: 0;
}

.s12-option-head { margin: 0; }

.s12-option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding-block: 24px;
  text-align: left;
}

.s12-option-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  line-height: 1.2;
}

/* hairline plus affordance; the vertical stroke retracts when open */
.s12-option-ind {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}
.s12-option-ind::before,
.s12-option-ind::after {
  content: "";
  position: absolute;
  background: var(--gold);
  opacity: .8;
}
.s12-option-ind::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
.s12-option-ind::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transition: transform .45s var(--ease);
}
.s12-option.is-open .s12-option-ind::after { transform: scaleY(0); }

/* open by default (static readability); motion mode collapses via JS */
.s12-option-body { overflow: hidden; }
.s12-option-line {
  max-width: 56ch;
  padding-bottom: 26px;
  font-size: .95rem;
}

/* ---------- closing statement pill ---------- */

.s12-close { margin-top: var(--rhythm-layer); }

.s12-cta {
  border-radius: 999px;
  padding: 18px 36px;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: none;
}

/* static: rows stay open and the affordance has no meaning */
body.is-static .s12-option-ind { display: none; }
body.is-static .s12-option-btn { cursor: default; }

@media (max-width: 899px) {
  .s12 { padding-block: 96px; }
  .s12-option-btn { padding-block: 20px; }
  .s12-cta { padding: 15px 24px; font-size: .85rem; }
}