/* Architecture composition only; fonts, colors, buttons and focus remain public-layout owned. */
.architecture-shell { --architecture-unit:min(1vw,.5625dvh); width:min(94%,1500px); min-height:100dvh; margin-inline:auto; padding:16px 0; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.architecture-shell .architecture-brand { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:8px; }
.architecture-shell .eyebrow { margin:0; font-size:13px; }
.architecture-shell .architecture-logo { width:112px; height:34px; object-fit:contain; }
.architecture-shell .architecture-introduction { text-align:left; }
.architecture-shell h1 { font-size:32px; line-height:1.12; margin-bottom:8px; text-wrap:balance; }
.architecture-shell h2 { font-size:22px; line-height:1.2; margin-bottom:8px; text-wrap:balance; }
.architecture-shell p { font-size:16px; line-height:1.4; }
.architecture-shell p + p { margin-top:6px; }
.architecture-shell .architecture-lead { font-size:19px; line-height:1.35; margin-bottom:6px; }
.architecture-shell .architecture-parts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:32px; }
.architecture-shell .architecture-part { min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.architecture-shell .architecture-diagram { display:block; width:min(100%,calc(42dvh * 941 / 926)); height:auto; border-radius:12px; }
.architecture-shell .architecture-part-copy { width:100%; }
.architecture-shell .architecture-conclusion { padding:10px 16px; border-radius:16px; background:var(--color-surface); }
.architecture-shell .architecture-conclusion h2 { font-size:21px; }
.architecture-shell .architecture-conclusion p { display:inline; }
.architecture-shell .architecture-conclusion p + p::before { content:" "; }
.architecture-shell .architecture-research-note { color:var(--color-muted); }
.architecture-shell .architecture-navigation { display:flex; justify-content:center; }
.architecture-shell .architecture-back { gap:.55em; margin:0; min-height:48px; padding:12px 24px; font-size:16px; }
/* Portrait receives a width-and-height budget rather than full-width diagrams. */
@media (max-aspect-ratio:1/1) and (min-width:700px) {
  .architecture-shell { width:min(90%,1500px); gap:calc(1.25 * var(--architecture-unit)); padding-block:calc(2 * var(--architecture-unit)); }
  .architecture-shell h1 { font-size:calc(3.1 * var(--architecture-unit)); }
  .architecture-shell h2 { font-size:calc(2.25 * var(--architecture-unit)); }
  .architecture-shell p { font-size:clamp(18px,calc(1.8 * var(--architecture-unit)),32px); line-height:1.4; }
  .architecture-shell .architecture-lead { font-size:calc(2.15 * var(--architecture-unit)); }
  .architecture-shell .eyebrow { font-size:calc(1.3 * var(--architecture-unit)); }
  .architecture-shell .architecture-logo { width:calc(12 * var(--architecture-unit)); height:calc(3.8 * var(--architecture-unit)); }
  .architecture-shell .architecture-parts { grid-template-columns:minmax(0,1fr); gap:calc(1.5 * var(--architecture-unit)); }
  .architecture-shell .architecture-part { gap:calc(1 * var(--architecture-unit)); }
  .architecture-shell .architecture-diagram { width:min(100%,calc(27dvh * 941 / 926)); }
  .architecture-shell .architecture-conclusion { padding:calc(1.3 * var(--architecture-unit)) calc(2 * var(--architecture-unit)); }
  .architecture-shell .architecture-conclusion h2 { font-size:calc(2.1 * var(--architecture-unit)); }
  .architecture-shell .architecture-back { min-height:max(48px,calc(5 * var(--architecture-unit))); font-size:calc(1.6 * var(--architecture-unit)); }
}
/* Small viewports scroll naturally; never clip content or reduce text below readable defaults. */
@media (max-width:699px), (max-height:699px) {
  .architecture-shell { width:auto; margin:0; padding:24px 20px; gap:28px; justify-content:flex-start; }
  .architecture-shell h1 { font-size:30px; }
  .architecture-shell h2 { font-size:23px; }
  .architecture-shell p { font-size:18px; line-height:1.5; }
  .architecture-shell .architecture-lead { font-size:21px; }
  .architecture-shell .architecture-parts { grid-template-columns:minmax(0,1fr); gap:28px; }
  .architecture-shell .architecture-diagram { width:100%; }
  .architecture-shell .architecture-conclusion p { display:block; }
  .architecture-shell .architecture-conclusion p + p::before { content:none; }
}