/* Loaded only by the supporting article; the homepage keeps its own styles. */
.article-page { --accent: #e6d19a; --article-copy: #bdc3cb; --article-line: #30363e; }
.article-page a:focus-visible, .article-page button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.article-page .skip-link:not(:focus) { clip-path: inset(50%); }
.article-page .utility-nav { flex-wrap: wrap; }
.article-page .utility-nav a { padding-block: 8px; }
.article-page .utility-footer { color: #a4abb4; }
.article-page .utility-footer a { padding-block: 6px; }
.article-main { padding-bottom: clamp(80px, 10vw, 140px); }
.article-prose { width: min(740px, calc(100% - 44px)); margin-inline: auto; }
.article-heading { width: min(1160px, calc(100% - 44px)); padding-top: clamp(72px, 9vw, 128px); padding-bottom: 48px; }
.article-eyebrow, .figure-index { color: var(--accent); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
.article-eyebrow { margin: 0 0 26px; }
.article-heading h1 { margin: 0; font-size: clamp(48px, 6vw, 86px); font-weight: 400; line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
.article-deck { margin: 30px 0 0; color: #d2c7aa; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.5; }
.article-deck em { font-style: normal; }
.article-prose > p:not(.article-eyebrow):not(.article-deck) { margin: 0 0 24px; color: var(--article-copy); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.8; }
.article-prose a { color: var(--accent); text-underline-offset: 5px; }
.article-prose h2 { margin: 0 0 24px; color: #f4f5f7; font-size: clamp(30px, 3.2vw, 42px); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.article-section { margin-top: 64px; scroll-margin-top: 32px; }
.article-toc { padding-block: 26px; margin-top: 40px; border-block: 1px solid var(--article-line); }
.article-toc p { margin: 0 0 12px; color: #f4f5f7; font-size: 13px; }
.article-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.article-toc li { color: #9ea6b1; padding-left: 4px; font-size: 14px; }
.article-toc a { color: #bec5cd; text-decoration-color: #58616d; }
.article-toc a:hover { color: var(--accent); }
.article-figure { width: min(1160px, calc(100% - 44px)); margin: 56px auto 76px; padding-block: 32px 24px; border-block: 1px solid var(--article-line); }
.figure-index { margin: 0 0 12px; }
.article-figure h3 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; font-weight: 400; letter-spacing: -.03em; }
.figure-intro { max-width: 800px; margin: 16px 0 28px; color: #acb4be; font-size: 16px; }
.article-figure figcaption { max-width: 900px; margin-top: 24px; color: #a8b0ba; font-size: 14px; line-height: 1.7; }
.article-figure figcaption p { margin: 0; }
.article-figure figcaption p + p { margin-top: 10px; }
.moment-sequence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; margin: 0; list-style: none; }
.moment { min-width: 0; }
.moment-heading { display: flex; gap: 12px; align-items: baseline; margin-bottom: 18px; }
.moment-number { color: var(--accent); font-size: 12px; }
.moment h4 { margin: 0; font-size: 18px; font-weight: 400; }
.moment-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(160px, auto) minmax(134px, auto) minmax(96px, auto); gap: 10px; padding: 12px; border: 1px solid #424951; border-radius: 4px; background: #e7e8e6; color: #20252b; }
.document { min-width: 0; padding: 12px; border: 1px solid #b0b7bd; background: #f7f8f6; }
.document-title { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; line-height: 1.3; font-weight: 600; }
.document-title span:last-child { min-width: 0; }
.material-key { display: inline-grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; color: #353b42; border: 1px solid #9da5ad; border-radius: 2px; font-size: 13px; font-weight: 600; line-height: 1; }
.document p { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #4a535d; }
.document.primary { grid-column: 1 / -1; border: 2px solid #947124; background: #fcf6e6; padding: 11px; }
.primary-tag { display: block; margin-bottom: 10px; color: #6b4f12; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.document.conversation { grid-column: 1 / -1; }
.moment-note { margin: 16px 0 0; color: #aeb6c0; font-size: 14px; line-height: 1.6; }
.moment-note strong { color: #e1d1a9; font-weight: 400; }
.material-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0; margin: 0 0 28px; list-style: none; }
.material-legend li { display: flex; align-items: center; gap: 8px; color: #c3cad2; font-size: 14px; }
.material-legend .material-key { color: #ddd1b1; border-color: #626975; }
.comparison-list { display: grid; gap: 0; }
.comparison-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding-block: 34px; border-top: 1px solid var(--article-line); align-items: center; }
.comparison-copy h4 { margin: 0 0 12px; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.comparison-copy p { margin: 0; color: #b1bac5; font-size: 15px; line-height: 1.65; }
.comparison-copy .ratio-note { margin-top: 14px; color: #9fa8b4; font-size: 12px; }
/* Preserve text size in all schematics; narrower viewports can pan the drawings. */
.arrangement { min-width: 0; max-width: 100%; overflow-x: auto; padding: 3px 3px 12px; scrollbar-color: #727e89 #171c22; scrollbar-width: thin; }
.arrangement:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.screen { min-width: 0; padding: 8px; border: 4px solid #92999d; border-radius: 5px; background: #dfe2e1; display: grid; gap: 7px; color: #222831; }
.single-screen { width: 440px; aspect-ratio: 16 / 9; grid-template-columns: minmax(0, 1fr) 140px; }
.surface-label { margin: 0 0 8px; color: #aab3be; font-size: 12px; }
.paired-screens { display: grid; grid-template-columns: repeat(2, 440px); gap: 14px; width: 894px; }
.paired-screens .screen { width: 100%; aspect-ratio: 16 / 9; }
.reference-screen { grid-template-columns: minmax(0, 1fr) 140px; grid-template-rows: minmax(0, 1.05fr) minmax(0, .95fr); }
.reference-screen .budget { grid-area: 1 / 1; }
.reference-screen .source { grid-area: 2 / 1; }
.reference-screen .conversation { grid-area: 1 / 2 / 3 / 3; }
.wide-screen { width: 700px; aspect-ratio: 21 / 9; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 140px; }
/* Approximate front elevation from the ratio study, not a product specification. */
.context-screen {
  width: 660px;
  aspect-ratio: 3 / 2;
  /* Equal side columns center the focal region horizontally; only padding remains below. */
  grid-template-columns: 140px minmax(0, 1fr) 140px;
  grid-template-rows: minmax(0, .9fr) minmax(0, 1.3fr);
}
.context-screen .proposal { grid-area: 2 / 2; }
.context-screen .budget { grid-area: 1 / 1 / 2 / 3; }
.context-screen .source { grid-area: 2 / 1; }
.context-screen .conversation { grid-area: 1 / 3 / 3 / 4; }
.screen-document { min-width: 0; min-height: 0; padding: 8px; background: #f7f8f6; border: 1px solid #a8b0b6; display: flex; flex-direction: column; gap: 8px; }
.screen-document.proposal { background: #fcf6e6; border: 2px solid #947124; padding: 7px; }
.screen-document .document-title { flex: none; font-size: 13px; font-weight: 400; }
.screen-document .primary-tag { flex: none; margin: 0; }
.document-view { min-height: 0; overflow: hidden; font-size: 13px; line-height: 1.5; }
.screen-document.source .document-view { mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent); }
.document-view p { margin: 0 0 12px; }
.document-view .document-subhead { margin-bottom: 8px; font-weight: 600; color: #4c5964; }
.budget-lines { margin: 0; font-size: 13px; line-height: 18px; }
.budget-lines > div { display: flex; justify-content: space-between; gap: 8px; }
.budget-lines dt, .budget-lines dd { margin: 0; }
.budget-lines > div:last-child { border-top: 1px solid #c3c9cd; margin-top: 4px; padding-top: 4px; font-weight: 600; }
.context-screen .budget-lines { max-width: 100%; line-height: 24px; }
.context-screen .budget-lines > div { border-bottom: 1px solid #d6dadd; padding-inline: 4px; }
.paper-lines { display: block; width: 82%; height: 22px; margin-top: 12px; background: repeating-linear-gradient(to bottom, #b9c0c3 0 1px, transparent 1px 10px); }
.chat-earlier { flex: none; font-size: 11px; line-height: 14px; color: #52616c; }
.chat-history { min-height: 0; flex: 1; display: flex; align-items: flex-end; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 10px); }
.chat-thread { flex: none; display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
.chat-thread li { padding: 4px 6px; background: #e6ecef; border-radius: 3px; }
.chat-thread li:nth-child(even) { background: #efe9dc; }
.chat-author { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; line-height: 14px; color: #4d5a65; }
.context-screen .chat-earlier { display: none; }
.context-screen .chat-history { mask-image: none; }
.switching-materials { display: flex; flex-wrap: wrap; gap: 8px 14px; width: 440px; margin: 12px 0 0; color: #aeb7c1; font-size: 13px; }
.switching-materials > span:first-child { flex-basis: 100%; }
.switching-materials .switch-document { display: inline-flex; align-items: center; gap: 6px; }
.switching-materials .material-key { color: #c4cbd1; border-style: dashed; border-color: #747e89; }
.mobile-schematic-note { display: none; }
@media (max-width: 1160px) {
  .mobile-schematic-note { display: block; margin: -8px 0 24px; color: #aab3bd; font-size: 13px; line-height: 1.6; }
}
.article-ending { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--article-line); }
.article-ending > p:first-child a { display: inline-block; padding-bottom: 5px; font-size: 23px; }
@media (max-width: 1050px) {
  .moment-sequence { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 36px; }
  .moment-board { grid-template-rows: minmax(148px, auto) minmax(120px, auto) minmax(96px, auto); }
  .comparison-row { grid-template-columns: 1fr; gap: 24px; }
  .comparison-copy { max-width: 640px; }
  .comparison-copy .ratio-note { margin-top: 8px; }
}
@media (max-width: 620px) {
  .article-heading { padding-bottom: 36px; }
  .article-page .skip-link:not(:focus) { clip-path: inset(50%); }
.article-page .utility-nav { font-size: 10px; gap: 12px 20px; }
  .article-page .utility-footer { align-items: flex-start; flex-direction: column; }
  .article-page .utility-footer nav { gap: 12px 20px; }
  .article-figure { width: calc(100% - 32px); }
  .article-prose > p:not(.article-eyebrow):not(.article-deck) { line-height: 1.75; }
  .article-section { margin-top: 48px; }
  .material-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .material-legend li { font-size: 13px; line-height: 1.4; }
}
@media print {
  .article-page { background: #fff; color: #111; }
  .article-page .utility-header, .article-page .utility-footer, .article-toc, .cookie-consent { display: none !important; }
  .article-page p, .article-page h1, .article-page h2, .article-page h3, .article-page h4, .article-page a, .article-page li { color: #111 !important; }
  .article-prose, .article-figure { width: 100%; }
  .moment, .comparison-row { break-inside: avoid; }
}