/* V3: iPad-first composition. Every colour below is an authoritative AFINARA token. */
:root {
  --v3-beat: calc(100vh - 64px);
  --v3-ink: #2F2925;
  --v3-reading: #5A514A;
  --v3-muted: #665E55;
  --v3-rule: #DCD6CA;
  --v3-support: clamp(1.25rem, 1.55vw, 1.5rem);
}
@supports (height: 100svh) { :root { --v3-beat: calc(100svh - 64px); } }
#opening, #situation, #assessment-invitation, #involvement, #experience-gateway, #principles { scroll-margin-top: 64px; }
.hero-narrative-sentence { font-size: var(--v3-support); max-width: 40rem; }
.hero-narrative-sentence .hero-focus-line { font-size: .8em; }
.recognition-scene { padding-block: 0; min-height: auto; }
.recognition-main-beat { min-height: var(--v3-beat); padding-block: clamp(4rem, 8svh, 7rem); display: flex; flex-direction: column; justify-content: center; }
.recognition-header-wrap { width: 100%; }
.recognition-headline { font-size: clamp(3rem, 5.2vw, 5rem); line-height: 1.12; }
.recognition-diagnostic-bridge { min-height: var(--v3-beat); margin-top: 0; padding-block: clamp(4rem, 9svh, 7.5rem); display: flex; align-items: center; border-top: 0; }
.diagnostic-bridge-editorial { display: block; width: 100%; }
.diagnostic-bridge-title { font-size: clamp(4rem, 7.3vw, 7rem); line-height: 1.08; max-width: 13ch; }
.diagnostic-bridge-col-content { margin-top: 2.5rem; max-width: 42rem; padding-top: 0; }
.diagnostic-bridge-statement { font-size: var(--v3-support); line-height: 1.55; margin-bottom: 1.5rem; }
.diagnostic-bridge-meta { font-size: .9375rem; line-height: 1.6; color: var(--v3-muted); max-width: 53ch; }
.diagnostic-bridge-cta { font-size: 1.25rem; color: var(--v3-ink); }
.diagnostic-bridge-cta:hover { color: var(--v3-reading); }
.s03-involvement-scene { min-height: var(--v3-beat); padding-block: clamp(4rem, 8svh, 7rem); }
.s03-wordmark-anchor { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; letter-spacing: .13em; color: var(--v3-reading); line-height: 1.2; margin-bottom: 1.375rem; }
.s03-statement-display { position: absolute; inset: 0; }
.s03-permanent-model { margin-top: 2rem; max-width: 48rem; }
.s03-responsibility { font: 300 var(--v3-support)/1.55 var(--font-sans); max-width: 43ch; color: var(--v3-reading); }
.s04-gateway-viewport { min-height: var(--v3-beat); display: flex; align-items: center; padding-block: clamp(4rem, 9svh, 7.5rem); }
.gateway-display-editorial { font-size: clamp(3.25rem, 5.9vw, 5.5rem); line-height: 1.13; margin-bottom: 2.5rem; }
.gateway-lead { font-size: var(--v3-support); line-height: 1.6; max-width: 46ch; margin-bottom: 2.75rem; }
.gateway-text-cta { font-size: 1.25rem; }
.gateway-attribution { font-size: .875rem; max-width: 56ch; margin-top: 1.5rem; }
.principles-scene { min-height: var(--v3-beat); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(4rem, 8svh, 7rem); }
.s05-question-section { padding-block: 0; margin-bottom: clamp(2.5rem, 5svh, 4rem); }
.s05-question-heading { font-size: clamp(3.25rem, 5.6vw, 5.25rem); }
.s05-question-lead { font-size: var(--v3-support); font-weight: 300; max-width: 48ch; }
.s05-beliefs-container { padding-bottom: 0; }
.s05-belief-row { padding-block: 1.5rem; }
.s05-belief-statement { font-size: clamp(1.85rem, 2.7vw, 2.6rem); }
.s05-belief-thought { font-size: 1.25rem; line-height: 1.6; }
.dialogue-scene { min-height: var(--v3-beat); padding-block: clamp(4rem, 8svh, 7rem) 3rem; }
.dialogue-grid-container { align-content: center; }
.dialogue-display-heading { font-size: clamp(3rem, 4.7vw, 4.6rem); }
.dialogue-start-action { font-size: 1.5rem; }
.closing-direct-link { font-size: 1.125rem; color: var(--v3-muted); }
/* Both the placeholder and entered question define the same natural grid row. */
.ask-afinara-input-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: .5rem; align-items: end; max-width: 100%; }
.ask-afinara-input-wrapper:focus-within { border-color: var(--v3-ink); }
.ask-afinara-textarea, .ask-afinara-question-mirror {
  grid-area: 1 / 1; font: 300 var(--v3-support)/1.5 var(--font-sans); letter-spacing: normal;
  width: 100%; min-width: 0; padding: .35rem 0; margin: 0; box-sizing: border-box;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.ask-afinara-question-mirror { visibility: hidden; pointer-events: none; }
.ask-afinara-textarea { min-height: 44px; height: 100%; max-height: none; overflow: auto; }
.ask-afinara-textarea::placeholder { color: var(--v3-muted); }
.ask-afinara-submit-btn { position: static; grid-area: 1 / 2; min-height: 44px; width: 44px; padding: 0; margin-bottom: .05rem; }
.ask-processing-note { font: 400 .875rem/1.55 var(--font-sans); color: var(--v3-muted); margin: .85rem 0 0; }
.ask-afinara-user-query, .ask-afinara-answer-text { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .expanded-empathy-lead, .expanded-empathy-sublead, .expanded-q-text, .expanded-partnership-statement { font-size: 1.25rem; }
  .s04-exp-detail-body, .s04-exp-mobile-detail .s04-exp-detail-body { font-size: 1.125rem; line-height: 1.65; }
}
@media (max-width: 767px) {
  :root { --v3-support: 1.125rem; }
  .recognition-headline { font-size: 2.7rem; }
  .recognition-main-beat { padding-block: 4rem; }
  .diagnostic-bridge-title { font-size: 3.25rem; }
  .diagnostic-bridge-col-heading { margin-bottom: 0; }
  .diagnostic-bridge-col-content { margin-top: 2rem; }
  .diagnostic-bridge-cta, .gateway-text-cta { font-size: 1.125rem; }
  .gateway-display-editorial { font-size: 2.7rem; }
  .s05-question-heading, .dialogue-display-heading { font-size: 2.7rem; }
  .s05-belief-statement { font-size: 1.85rem; }
  .s05-belief-thought { font-size: 1.125rem; }
  .s03-wordmark-anchor { font-size: 1.25rem; }
  .s03-permanent-model { margin-top: 1.5rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero-narrative-sentence { font-size: 1.125rem; }
  .hero-narrative-sentence .hero-focus-line { font-size: .9rem; }
  .recognition-main-beat, .recognition-diagnostic-bridge, .s03-involvement-scene, .s04-gateway-viewport, .principles-scene { padding-block: 3rem; }
  .s03-aperture-mask { min-height: 160px; }
}
.ask-afinara-user-query, .ask-afinara-answer-text { font-size: var(--v3-support); line-height: 1.6; }
.ask-afinara-user-query { color: var(--v3-muted); }
.ask-afinara-continuation-chip, .ask-afinara-handover-btn { font-size: 1.125rem; line-height: 1.5; }
.ask-afinara-continuation-chip { height: auto; align-items: baseline; }
.ask-afinara-continuation-chip span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ask-afinara-continuation-chip span:last-child { flex-shrink: 0; }
.ask-afinara-handover-btn:hover { color: var(--v3-reading); }

/* Focus Editorial Monograph Layer & Navigation */
.header-focus-link { display: inline-flex; }
@media (max-width: 767px) {
  .header-secondary-link { display: none; }
  .header-focus-link { display: inline-flex; }
}

.hero-focus-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(254, 253, 251, 0.25);
  transition: border-color var(--duration-base) var(--ease-editorial), opacity var(--duration-base) var(--ease-editorial);
}
.hero-focus-link:hover {
  border-bottom-color: rgba(254, 253, 251, 0.85);
  opacity: 1;
}

.afinara-focus-layer {
  position: fixed;
  top: var(--dialog-top, 0);
  left: 0;
  width: 100%;
  height: var(--dialog-height, 100vh);
  height: var(--dialog-height, 100svh);
  background-color: #FEFDFB;
  color: #2F2925;
  z-index: 10000;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.focus-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(254, 253, 251, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--v3-rule, #DCD6CA);
  z-index: 10;
}

.focus-header-inner {
  max-width: var(--grid-max-width, 1240px);
  margin: 0 auto;
  padding: 1.25rem var(--grid-gutter, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.focus-header-brand-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.focus-header-brand-btn:focus-visible {
  outline: 2px solid var(--v3-ink, #2F2925);
  outline-offset: 3px;
}

.focus-header-wordmark {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.15em;
  font-weight: 400;
  color: var(--v3-ink, #2F2925);
}

.focus-header-sub {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--v3-muted, #665E55);
}

.focus-close-btn {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--v3-ink, #2F2925);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  transition: opacity var(--duration-base) var(--ease-editorial);
}
.focus-close-btn:hover {
  opacity: 0.65;
}
.focus-close-btn:focus-visible {
  outline: 2px solid var(--v3-ink, #2F2925);
  outline-offset: 3px;
}
.focus-action-link:focus-visible {
  outline: 2px solid var(--v3-ink, #2F2925);
  outline-offset: 3px;
}
.afinara-focus-layer [data-dialog-heading]:focus,
.afinara-focus-layer [data-dialog-heading]:focus-visible,
.focus-opening-statement:focus,
.focus-opening-statement:focus-visible {
  outline: none;
}

.focus-content-wrapper {
  width: 100%;
  box-sizing: border-box;
}

.focus-beat {
  min-height: var(--v3-beat, calc(100vh - 64px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3.5rem, 8vh, 6rem);
  box-sizing: border-box;
  border-bottom: 1px solid var(--v3-rule, #DCD6CA);
  position: relative;
}

.focus-beat:last-child {
  border-bottom: none;
  padding-bottom: clamp(5rem, 12vh, 8rem);
}

.focus-beat-inner {
  width: 100%;
  max-width: var(--width-wide, 1240px);
  margin: 0 auto;
  padding-inline: var(--grid-margin, clamp(1.5rem, 4vw, 4rem));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.focus-kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-muted, #665E55);
  margin-bottom: clamp(1rem, 2vh, 1.75rem);
}

.focus-statement {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 4.2rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--v3-ink, #2F2925);
  margin: 0 0 clamp(1.25rem, 2.2vh, 2rem) 0;
  max-width: 24ch;
}

.focus-opening-statement {
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  max-width: 22ch;
}

.focus-supporting {
  font-family: var(--font-sans);
  font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--v3-reading, #5A514A);
  margin: 0 0 clamp(2.25rem, 4vh, 3.25rem) 0;
  max-width: 48ch;
}

.focus-opening-supporting {
  max-width: 44ch;
  font-size: clamp(1.25rem, 1.6vw, 1.4375rem);
  line-height: 1.6;
}

.focus-fragments {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.2vh, 0.85rem);
  margin: 0 0 clamp(2.25rem, 4vh, 3.25rem) 0;
}

.focus-fragment {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.1vw, 2.1rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--v3-ink, #2F2925);
  margin: 0;
}

.focus-boundary {
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--v3-muted, #665E55);
  margin: 0 0 clamp(2rem, 3.5vh, 2.75rem) 0;
  max-width: 48ch;
}

.focus-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 0;
}

.focus-action-link {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.25vw, 1.1875rem);
  font-weight: 400;
  color: var(--v3-ink, #2F2925);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid rgba(47, 41, 37, 0.35);
  transition: border-color var(--duration-base) var(--ease-editorial), opacity var(--duration-base) var(--ease-editorial);
}

.focus-action-link:hover {
  border-bottom-color: var(--v3-ink, #2F2925);
  opacity: 0.75;
}

.focus-action-primary {
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
  font-weight: 500;
  border-bottom-width: 1.5px;
}

/* iPad Adjustments (768px - 1194px) */
@media (min-width: 768px) and (max-width: 1194px) {
  .focus-beat {
    padding-block: clamp(3rem, 6vh, 4.5rem);
  }
  .focus-statement {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
  }
  .focus-supporting {
    font-size: 1.25rem;
    line-height: 1.62;
    max-width: 44ch;
  }
  .focus-fragment {
    font-size: 1.65rem;
  }
  .focus-actions {
    gap: 2rem;
  }
}

/* Mobile Adjustments (<= 767px) */
@media (max-width: 767px) {
  .focus-beat {
    min-height: calc(100svh - 64px);
    padding-block: 3.5rem 4rem;
  }
  .focus-statement {
    font-size: 2.15rem;
    line-height: 1.18;
    max-width: none;
  }
  .focus-opening-statement {
    font-size: 2.3rem;
  }
  .focus-supporting {
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: none;
  }
  .focus-fragment {
    font-size: 1.35rem;
    line-height: 1.35;
  }
  .focus-fragments {
    gap: 0.75rem;
    margin-bottom: 2rem;
  }
  .focus-boundary {
    font-size: 0.9375rem;
    margin-bottom: 2rem;
  }
  .focus-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .focus-action-link {
    font-size: 1.0625rem;
    min-height: 44px;
  }
}
