/* Shared page frame. Text remains readable; illustrations scale with their frame. */
:root {
  --portal-width: 80%;
  --portal-space: clamp(32px, 3.5vw, 72px);
  --portal-gap: clamp(24px, 2.5vw, 48px);
}
.nav, main, body > footer {
  width: var(--portal-width);
  max-width: none;
  margin-inline: auto;
}
.nav { padding-inline: 0; height: clamp(88px, 7.5vw, 128px); }
.hero, .section, .page-head, .case-layout, .reading-top,
.reading-grid, .rag-workspace, .about-grid { padding-inline: 0; }
.hero { padding-top: var(--portal-space); }
.hero-grid { gap: var(--portal-gap); padding-bottom: var(--portal-space); }
.hero h1 { font-size: clamp(42px, 4.3vw, 84px); }
.hero-copy { max-width: clamp(320px, 25vw, 460px); }
.section { padding-block: var(--portal-space); }
.section-title h2 { font-size: clamp(26px, 2vw, 36px); }
.feature, .feature-art { min-height: clamp(340px, 28vw, 560px); }
.feature-art, .feature-copy { padding: clamp(28px, 3vw, 60px); }
.feature-copy > p { max-width: 40ch; }
.feature h3 { font-size: clamp(30px, 2.6vw, 48px); }
.project-grid { gap: var(--portal-gap); margin-top: var(--portal-gap); }
.project-visual { height: clamp(240px, 22vw, 440px); }
.method-section, .cta { margin-inline: 0; }
.method-section { gap: var(--portal-gap); padding-block: var(--portal-space); }
.cta h2 { font-size: clamp(28px, 2.5vw, 44px); }
.page-head { padding-block: var(--portal-space); }
.page-head h1 { font-size: clamp(36px, 3.6vw, 68px); }
.page-head .lead { max-width: 62ch; font-size: 16px; }
.case-hero { margin-inline: 0; height: clamp(280px, 25vw, 500px); }
.project-hero-content {
  margin: 0 0 var(--portal-space);
  padding: clamp(20px, 2.5vw, 48px);
}
.case-layout { gap: var(--portal-gap); padding-block: var(--portal-space); }
.case-body { min-width: 0; max-width: 960px; }
.reading-grid {
  gap: var(--portal-gap);
  grid-template-columns: minmax(140px, 180px) minmax(0, 860px) minmax(300px, 360px);
  justify-content: center;
}
.reading-grid .document, .rag-workspace .document { min-width: 0; }
.rag-workspace { gap: var(--portal-gap); }
.rag-workspace > .document { width: 100%; max-width: 960px; }
.markdown-body { min-width: 0; }
.markdown-body p, .markdown-body li { font-size: 16px !important; }
.case-meta p, .feature-copy > p, .project-info p,
.method-list p, .about-grid p { font-size: 16px; }

/* Document lists use available space without decorative filler. */
.library-document-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.library-document-card {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 26px 54px 26px 26px;
}
.library-document-card h3 { overflow-wrap: anywhere; }
.library-document-card p { font-size: 16px; overflow-wrap: anywhere; }
.library-document-card > .library-card-arrow {
  position: absolute;
  top: 26px;
  right: 26px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
@media (min-width: 1200px) {
  .library-document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1001px) {
  .hero-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .reading-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .rag-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 760px) {
  :root { --portal-width: calc(100% - 40px); --portal-space: 32px; --portal-gap: 24px; }
  .nav { height: auto; min-height: 82px; }
  .nav nav { flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; }
  .nav .brand { flex-shrink: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(36px, 8vw, 52px); letter-spacing: -2px; }
  .hero-copy { max-width: 100%; justify-self: start; }
  .hero-baseline { flex-wrap: wrap; gap: 8px; }
  .expertise { flex-wrap: wrap; }
  .section-head { flex-wrap: wrap; gap: 18px; }
  .filters { flex-wrap: wrap; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature-art { min-height: 280px; }
  .feature-copy { padding: 24px; }
  .project-grid, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .project-visual { height: clamp(240px, 65vw, 360px); }
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .case-layout, .reading-grid, .rag-workspace { display: block; }
  .case-directory, .reading-directory { display: none; }
  .page-head h1 { font-size: 36px; }
  .cta h2 { font-size: 28px; }
  .cta a { max-width: 100%; }
  body > footer { flex-wrap: wrap; gap: 16px; }
}