/* Presentation only. Explicit opt-in sections keep the header, closing footer,
   screen walkthroughs, rationale blocks, and product design system untouched. */
.strata-editorial {
  --strata-accent: #007C91;
  --strata-tint: #E6F5F7;
  --strata-ink: #172B4D;
  --strata-secondary: #52637A;
  --strata-border: #DCE3ED;
  color: var(--strata-ink);
}
.content > .strata-editorial {
  padding-block: clamp(40px, 5vw, 68px);
  border-color: var(--strata-border);
}
.strata-editorial > h2 {
  color: var(--strata-ink);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  letter-spacing: -.025em;
  margin-bottom: 32px;
}

/* Layered, quiet hero; preserve the original grid and image proportions. */
#strata-hero {
  background: #F4F8FA;
  color: #172B4D;
  border-bottom: 1px solid #DCE3ED;
  padding-block: clamp(32px, 4.5vw, 64px);
}
#strata-hero h1 { color: #172B4D; }
#strata-hero .subtitle { color: #007C91; }
#strata-hero dl { border-left: 2px solid #007C91; padding-left: 20px; }
#strata-hero dl div { border-color: #DCE3ED; }
#strata-hero dt { color: #007C91; }
#strata-hero dd { color: #52637A; }
#strata-hero figure { position: relative; isolation: isolate; }
#strata-hero figure::before,
#strata-hero figure::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid #BFDDE2;
  border-radius: 8px;
  pointer-events: none;
}
#strata-hero figure::before { inset: 6% 5% 3% 9%; background: #E6F5F7; }
#strata-hero figure::after { inset: 2% 9% 7% 5%; }

/* Editorial columns: the local risk is the point of emphasis. */
#strata-overview > .grid { gap: 0; }
#strata-overview article {
  padding: 8px 28px 12px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--strata-border);
  border-radius: 0;
}
#strata-overview article:first-child { padding-left: 0; border-left: 0; }
#strata-overview article:nth-child(2) { background: var(--strata-tint); border-color: #BFDDE2; }
#strata-overview h3 { color: var(--strata-accent); margin-top: 14px; }

#strata-challenge > .grid { grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
#strata-challenge h3 { color: var(--strata-accent); }
#strata-challenge .grid > div > h3:first-child { margin-top: 0; }
#strata-challenge aside { background: #F5F9FA; border-left: 3px solid var(--strata-accent); border-radius: 0 8px 8px 0; padding: 28px; }
#strata-challenge aside h3 { font-size: 1.1rem; letter-spacing: 0; }

/* A person in context, followed by the scope of the illustrative scenario. */
#strata-discovery > .grid { grid-template-columns: .7fr 1.6fr; gap: clamp(28px, 4vw, 56px); }
#strata-discovery article { padding: 0; border: 0; border-radius: 0; background: transparent; }
#strata-discovery article:first-child { padding-right: 28px; border-right: 1px solid var(--strata-border); }
#strata-discovery h3 { color: var(--strata-accent); margin-top: 0; }
#strata-discovery article:nth-child(2) p { font-size: 1.2rem; line-height: 1.7; }
#strata-discovery strong { color: var(--strata-accent); font-weight: 700; }
#strata-discovery aside { margin-top: 32px; padding: 20px 24px; border: 1px solid var(--strata-border); border-radius: 8px; background: #F5F9FA; }
#strata-discovery aside p { color: var(--strata-secondary); }

/* Three connected decisions; the intended next step stays a separate note. */
#strata-solution > .lead { color: var(--strata-secondary); }
#strata-solution > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
#strata-solution article { position: relative; background: none; border: 0; border-radius: 0; padding: 28px 28px 16px 0; }
#strata-solution article:nth-child(-n+3)::before { content: ""; position: absolute; top: 8px; left: 0; width: 100%; border-top: 1px solid #BFDDE2; }
#strata-solution article:nth-child(-n+3)::after { content: ""; position: absolute; top: 4px; left: 0; width: 9px; height: 9px; background: var(--strata-accent); border-radius: 50%; }
#strata-solution article:nth-child(3)::before { width: 36px; }
#strata-solution h3 { color: var(--strata-accent); margin-top: 8px; }
#strata-solution article:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 200px 1fr; gap: 24px; margin-top: 20px; padding: 24px; background: #F5F9FA; border-left: 3px solid #BFDDE2; }
#strata-solution article:last-child h3 { color: var(--strata-secondary); margin: 5px 0 0; }
#strata-solution article:last-child p { color: var(--strata-secondary); }

#strata-approach > .grid { gap: 28px 48px; }
#strata-approach article { border: 0; border-top: 1px solid var(--strata-border); border-radius: 0; padding: 20px 0 0; background: transparent; }
#strata-approach article h3 { margin: 0 0 14px; padding-left: 14px; border-left: 3px solid var(--strata-accent); color: var(--strata-accent); }
#strata-approach blockquote { margin-top: 36px; padding: 28px 32px; border-radius: 8px; border-left: 3px solid var(--strata-accent); background: var(--strata-tint); color: var(--strata-ink); }
#strata-approach blockquote h3 { color: var(--strata-accent); }
#strata-approach blockquote p { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 500; }

/* Containment hierarchy, with neutral navigation and an active workspace. */
#information-architecture > p { max-width: 85ch; }
#information-architecture .ia-chart { padding: 0; border: 0; border-radius: 0; background: transparent; }
#information-architecture .ia-brand { width: fit-content; min-width: 160px; background: var(--strata-accent); color: white; border-color: var(--strata-accent); text-align: center; }
#information-architecture .ia-branches { margin-left: 28px; padding-left: 28px; border-color: #BFDDE2; }
#information-architecture .ia-branches > li::before { left: -28px; width: 28px; border-color: #BFDDE2; }
#information-architecture .ia-branches > li:first-child { padding: 20px 24px; border: 1px solid var(--strata-border); border-radius: 8px; background: #F5F8FA; }
#information-architecture .ia-branches > li:first-child > h3 { border: 0; padding: 0; background: none; color: var(--strata-secondary); }
#information-architecture .ia-navigation { display: grid; grid-template-columns: .7fr 1.6fr; gap: 28px; padding: 0; }
#information-architecture .ia-navigation li:first-child { color: var(--strata-accent); }
#information-architecture .ia-navigation li + li { margin: 0; color: var(--strata-secondary); }
#information-architecture .ia-branches > li:last-child > h3 { background: var(--strata-tint); border-color: #BFDDE2; color: var(--strata-accent); }
#information-architecture .ia-views { gap: 20px; border-color: #BFDDE2; }
#information-architecture .ia-views > li { border-radius: 8px; border-color: var(--strata-border); padding: 22px; }
#information-architecture .ia-views > li::before { border-color: #BFDDE2; }
#information-architecture .ia-views h4 { color: var(--strata-ink); margin-bottom: 20px; }
#information-architecture .ia-views ul li { color: var(--strata-secondary); }
#information-architecture .ia-views ul li::marker { color: var(--strata-accent); }
#information-architecture .ia-note { margin-top: 32px; padding-left: 20px; border-left: 3px solid #BFDDE2; }

.content > #screen-journey { padding: clamp(28px, 4vw, 48px); margin-block: 32px; border: 1px solid #DCE3ED; border-radius: 8px; background: #F0F8F9; }
#screen-journey > p { max-width: 78ch; }
#screen-journey > .lead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: none; margin-block: 28px; color: var(--strata-accent); font-size: 1rem; }
#screen-journey > .lead span { padding-block: 8px; border-bottom: 1px solid #BFDDE2; font-weight: 650; }
#screen-journey > p:last-child { color: var(--strata-secondary); margin-bottom: 0; }

#strata-validation { display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 64px; align-items: start; }
#strata-validation > h2 { grid-column: 1 / -1; }
#strata-validation > .lead { grid-column: 1; color: var(--strata-ink); }
#strata-validation > .concept-validation-note { grid-column: 1; padding: 20px; background: var(--strata-tint); border-left: 3px solid var(--strata-accent); border-radius: 0 8px 8px 0; color: var(--strata-ink); }
#strata-validation > ul { grid-column: 2; grid-row: 2 / 4; margin: 0; padding-left: 22px; }
#strata-validation > ul li { margin: 0; padding: 0 0 16px 8px; color: var(--strata-secondary); }
#strata-validation > ul li::marker { color: var(--strata-accent); }

.content > #strata-prototype { margin-block: 28px; padding: clamp(32px, 5vw, 64px); border: 1px solid #BFDDE2; border-radius: 8px; background: #E6F5F7; }
#strata-prototype > h2 { color: #172B4D; font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
#strata-prototype .button { min-width: 190px; background: #007C91; border-color: #007C91; color: white; border-radius: 6px; }
#strata-prototype .button:hover { background: #006577; border-color: #006577; }
#strata-prototype .button:focus-visible { outline: 2px solid #007C91; outline-offset: 4px; }
#strata-prototype .prototype-links { gap: 16px; }
#strata-prototype .prototype-note { color: #52637A; }
#strata-reflection > p { max-width: 74ch; }
#strata-reflection > .lead { color: #172B4D; }
#strata-reflection > h2 { padding-top: 24px; border-top: 1px solid #DCE3ED; }

@media (max-width: 900px) {
  #strata-overview > .grid { grid-template-columns: 1fr; }
  #strata-overview article, #strata-overview article:first-child { padding: 20px; border-left: 0; border-top: 1px solid #DCE3ED; }
  #information-architecture .ia-navigation { grid-template-columns: 1fr; gap: 12px; }
  #information-architecture .ia-views { padding-left: 20px; }
  #strata-validation { column-gap: 32px; }
}
@media (max-width: 700px) {
  #strata-challenge > .grid, #strata-discovery > .grid, #strata-approach > .grid { grid-template-columns: 1fr; }
  #strata-discovery article:first-child { border-right: 0; border-bottom: 1px solid #DCE3ED; padding: 0 0 24px; }
  #strata-discovery article:nth-child(2) p { font-size: 1.1rem; }
  #strata-solution > .grid { grid-template-columns: 1fr; }
  #strata-solution article:nth-child(-n+3) { margin-left: 4px; padding: 0 0 28px 24px; border-left: 1px solid #BFDDE2; }
  #strata-solution article:nth-child(-n+3)::before { display: none; }
  #strata-solution article:nth-child(-n+3)::after { left: -5px; top: 12px; }
  #strata-solution article:last-child { display: block; padding: 20px; }
  #strata-solution article:last-child h3 { margin-bottom: 12px; }
  #information-architecture .ia-branches { margin-left: 8px; padding-left: 16px; }
  #information-architecture .ia-branches > li::before { left: -16px; width: 16px; }
  #information-architecture .ia-branches > li:first-child, #information-architecture .ia-views > li { padding: 16px; }
  #information-architecture .ia-views { padding-left: 12px; }
  #screen-journey > .lead { flex-direction: column; align-items: flex-start; gap: 4px; }
  #strata-validation { display: block; }
  #strata-validation > ul { margin-top: 28px; }
  #strata-prototype .button { min-width: 0; width: 100%; }
}