/* ==========================================================================
   16 — STUDY RESPOND
   ========================================================================== */

.respond-page {
  position: relative;
  width: var(--page-width);
  height: var(--page-height);
  overflow: hidden;
  padding:
    0.46in
    0.50in
    0.72in
    0.80in;
  background: var(--paper);
}


/* =========================================================
   HEADER
   ========================================================= */

.respond-header {
  margin-bottom: 0.18in;
}

.respond-ribbon {
  display: inline-flex;
  align-items: stretch;
  margin-bottom: 0.13in;
  font-family: var(--font-sans);
  text-transform: uppercase;
}

.respond-ribbon__phase {
  display: flex;
  align-items: center;
  min-height: 0.34in;
  padding: 0 0.18in;
  background: var(--charcoal);
  color: white;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.respond-ribbon__step {
  display: grid;
  place-items: center;
  width: 0.40in;
  min-height: 0.34in;
  background: var(--charcoal-dark);
  color: white;
  font-size: 12pt;
  font-weight: 700;
}

.respond-header__eyebrow {
  margin: 0 0 0.04in;
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.respond-header__title {
  max-width: 6.6in;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 23.5pt;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.02;
}

.respond-header__subtitle {
  max-width: 6.4in;
  margin: 0.08in 0 0;
  color: var(--charcoal);
  font-family: var(--font-serif);
  font-size: 11.5pt;
  font-weight: 600;
  line-height: 1.2;
}

.respond-header__introduction {
  max-width: 6.45in;
  margin: 0.08in 0 0;
  color: var(--ink-soft);
  font-size: 10.2pt;
  line-height: 1.27;
}


/* =========================================================
   CORE PRINCIPLE
   ========================================================= */

.respond-principle {
  display: grid;
  grid-template-columns: 1.0in minmax(0, 1fr);
  margin-bottom: 0.18in;
  border: 1px solid var(--charcoal);
  background: var(--panel-neutral);
}

.respond-principle__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.10in;
  background: var(--charcoal);
  color: white;
  font-family: var(--font-sans);
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.respond-principle__content {
  padding: 0.12in 0.14in;
}

.respond-principle__content h2 {
  margin: 0 0 0.04in;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 13.3pt;
  font-weight: 600;
  line-height: 1.08;
}

.respond-principle__content p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 9.7pt;
  line-height: 1.24;
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.respond-section {
  margin-bottom: 0.15in;
}

.respond-section__header {
  display: grid;
  grid-template-columns: 0.34in minmax(0, 1fr);
  gap: 0.08in;
  align-items: start;
  margin-bottom: 0.08in;
}

.respond-section__number {
  width: 0.29in;
  height: 0.29in;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal);
  color: white;
  font-family: var(--font-sans);
  font-size: 8.5pt;
  font-weight: 700;
}

.respond-section__eyebrow {
  margin: 0 0 0.02in;
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.respond-section__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 12.7pt;
  font-weight: 600;
  line-height: 1.08;
}


/* =========================================================
   FOUR RESPONSE CARDS
   ========================================================= */

.response-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.10in;
}

.response-card {
  padding: 0.10in 0.11in;
  border: 1px solid var(--rule-light);
  background: var(--paper);
}

.response-card:nth-child(2),
.response-card:nth-child(3) {
  background: var(--panel-neutral);
}

.response-card__header {
  display: grid;
  grid-template-columns: 0.30in minmax(0, 1fr);
  gap: 0.08in;
  align-items: start;
  margin-bottom: 0.055in;
}

.response-card__letter {
  width: 0.27in;
  height: 0.27in;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal);
  color: white;
  font-family: var(--font-sans);
  font-size: 8pt;
  font-weight: 700;
}

.response-card__eyebrow {
  margin: 0 0 0.015in;
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 7.2pt;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.response-card h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 10.7pt;
  font-weight: 600;
  line-height: 1.08;
}

.response-card__prompt {
  margin: 0 0 0.05in;
  color: var(--ink-soft);
  font-size: 8.8pt;
  line-height: 1.2;
}

.response-card__writing {
  padding: 0 0.03in;
}

.writing-rule {
  height: 0.18in;
  border-bottom: 1px solid var(--rule-light);
}


/* =========================================================
   HEART-LEVEL RESPONSE
   ========================================================= */

.heart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.08in;
  margin-bottom: 0.07in;
}

.heart-prompt {
  padding: 0.08in 0.09in;
  border: 1px solid var(--rule-light);
  background: var(--panel-neutral);
}

.heart-prompt h3 {
  margin: 0 0 0.025in;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 9.5pt;
  font-weight: 600;
  line-height: 1.08;
}

.heart-prompt p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 8.3pt;
  line-height: 1.17;
}

.writing-box {
  padding: 0.02in 0.08in;
  border: 1px solid var(--rule-light);
  background: var(--paper);
}


/* =========================================================
   CONCRETE APPLICATION
   ========================================================= */

.application-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.08in;
}

.application-field {
  border: 1px solid var(--rule-light);
  background: var(--paper);
}

.application-field__label {
  display: block;
  padding: 0.055in 0.07in;
  background: var(--panel-neutral);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.application-field__writing {
  padding: 0.025in 0.07in 0.04in;
}


/* =========================================================
   PRAYER PANEL
   ========================================================= */

.respond-prayer {
  display: grid;
  grid-template-columns: 1.65in minmax(0, 1fr);
  gap: 0.16in;
  margin-top: 0.02in;
  padding: 0.12in 0.14in;
  border: 1px solid var(--charcoal);
  background: var(--panel-neutral);
}

.respond-prayer__eyebrow {
  margin: 0 0 0.03in;
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.respond-prayer h2 {
  margin: 0 0 0.04in;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 11.8pt;
  font-weight: 600;
  line-height: 1.08;
}

.respond-prayer__heading p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 8.6pt;
  line-height: 1.18;
}

.respond-prayer__writing {
  padding: 0 0.04in;
}


/* =========================================================
   FINAL CHECK
   ========================================================= */

.respond-diagnostic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.12in;
  align-items: center;
  margin-top: 0.11in;
  padding-top: 0.08in;
  border-top: 1px solid var(--rule);
}

.respond-diagnostic__label {
  margin: 0;
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.respond-diagnostic__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.05in;
}

.respond-diagnostic__items span {
  padding: 0.045in 0.05in;
  border: 1px solid var(--rule-light);
  color: var(--ink-soft);
  font-size: 8.1pt;
  line-height: 1.15;
  text-align: center;
}


/* =========================================================
   FOOTER
   ========================================================= */

.study-footer {
  position: absolute;
  left: 0.80in;
  right: 0.50in;
  bottom: 0.40in;
  padding-top: 0.05in;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* =========================================================
   PRINT
   ========================================================= */

@page {
  size: Letter portrait;
  margin: 0;
}

@media print {
  .respond-page {
    width: 8.5in;
    height: 11in;
    margin: 0;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .respond-principle,
  .response-card,
  .respond-section,
  .respond-prayer,
  .respond-diagnostic {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}