/*
  Væringjar II — canonical layout contract
  2026-09-04
  This file owns only geometry, containment and readable type thresholds.
  It is loaded last on every rendered page.
*/
:root {
  --content: 1120px;
  --site-content: 1120px;
  --site-gutter: 24px;
  --body-copy: 15px;
  --meta-copy: 13px;
  --code-copy: 13px;
  --formula-copy: 16px;
}

* { box-sizing: border-box; }
html, body { width:100%; max-width:100%; margin:0; }
body { overflow-x:hidden; font-size:16px; }

/* ------------------------------------------------------------------
   ONE FRAME
   Every visible content block uses exactly the same left/right lines.
   ------------------------------------------------------------------ */
.site-page .container,
.site-page .nav,
.exp02-page .container,
.exp02-page .nav,
.exp03-page .container,
.exp03-page .nav,
.exp01-page .container,
.exp01-page .nav,
.exp01-page .wrap {
  width: min(calc(100% - (2 * var(--site-gutter))), var(--site-content));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.site-footer::before {
  width: min(calc(100% - (2 * var(--site-gutter))), var(--site-content));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
}

/* Decorative labels use the same frame; never the viewport edge. */
.site-page .site-header::after,
.exp02-page .site-header::after,
.exp03-page .site-header::after,
.exp01-page .site-header::after {
  right: max(var(--site-gutter), calc((100vw - var(--site-content)) / 2));
}
.site-page .hero::after,
.exp02-page .hero::after,
.exp03-page .hero::after,
.exp01-page .hero::after {
  left: max(var(--site-gutter), calc((100vw - var(--site-content)) / 2));
}

/* Full-width backgrounds may span the viewport; their content may not. */
.site-page main > section,
.exp01-page main > section,
.exp02-page main > section,
.exp03-page main > section,
.site-page .signal-strip,
.site-page .research-library-list,
.site-page .research-library-head {
  max-width:100%;
  overflow-x:clip;
}

/* ------------------------------------------------------------------
   CONTAINMENT
   No child is allowed to make a grid/flex track wider than the frame.
   ------------------------------------------------------------------ */
.site-page main *,
.exp01-page main *,
.exp02-page main *,
.exp03-page main * {
  min-width:0;
}

img, video, canvas, svg, iframe { max-width:100%; height:auto; }
figure { max-width:100%; margin-left:0; margin-right:0; }

p, li, dd, dt, figcaption, td, th {
  overflow-wrap:break-word;
  word-break:normal;
}
a, code { overflow-wrap:anywhere; }

pre {
  width:100%;
  max-width:100%;
  overflow:auto;
  white-space:pre;
}

/* Tables stay inside the frame. Wide engineering tables scroll locally. */
.tech-table-wrap,
.exp02-matrix-scroll,
.exp03-matrix-scroll,
.lecture-article {
  width:100%;
  max-width:100%;
  min-width:0;
}
.tech-table-wrap,
.exp02-matrix-scroll,
.exp03-matrix-scroll,
.lecture-article table {
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
.lecture-article table { display:block; }

/* ------------------------------------------------------------------
   READABLE TYPE
   8–11 px interface text is removed from the desktop templates.
   ------------------------------------------------------------------ */
.site-page :is(.small,.eyebrow,.breadcrumb,.status,.stage-status,.source-line,.phase-badge span,.phase-badge b,
  .profile-kicker,.profile-title,.profile-lines span,.profile-lines b,.impl-chain,.compact-phase span,.compact-phase p,
  .math-contract small,.math-contract span,.substage-title>span,.substage-title small,.verify-item b,.verify-item span,
  .hw-block small,.hw-block b,.hw-block span,.research-library-id,.research-library-side,.research-filter,
  .research-result-count,.roadmap-legend,.roadmap-note,.roadmap-step small,.roadmap-step>span,.teaching-pill,
  .teaching-panel .meta-row,.teaching-panel .meta-row span:first-child,.course-index,.course-action,.course-entry small,
  .course-entry a,.material-slot strong,.material-slot span,.lecture-toc b,.lecture-toc a,.lecture-nav a,.publication-note,
  .collab-role,.collab-lead-card .meta,.collab-status .tag,.collab-audience .num,.collab-audience .tail,
  .collab-step>span,.collab-note,label,.notice,.site-footer,.footer-links) {
  font-size:var(--meta-copy) !important;
  line-height:1.5;
}

.site-page .nav-links,
.exp02-page .nav-links,
.exp03-page .nav-links,
.exp01-page .nav-links,
.site-page .brand-copy,
.exp02-page .brand-copy,
.exp03-page .brand-copy,
.exp01-page .brand-copy {
  font-size:13px;
}
.site-page .brand-copy small,
.exp02-page .brand-copy small,
.exp03-page .brand-copy small,
.exp01-page .brand-copy small {
  font-size:12px;
}

.site-page :is(p,li,td,th),
.exp02-page :is(p,li,td,th),
.exp03-page :is(p,li,td,th),
.exp01-page :is(p,li,td,th) {
  font-size:var(--body-copy);
}

.site-page :is(code,pre),
.exp01-page :is(code,pre),
.exp02-page :is(code,pre),
.exp03-page :is(code,pre) {
  font-size:var(--code-copy);
}

/* Supporting copy in cards is smaller than body, but still readable. */
.site-page :is(.card p,.feature p,.diagram-note,.research-library-main p,.course-card p,.course-entry p,
  .collab-heading p,.collab-lead-card p,.collab-status p,.collab-audience p,.collab-input-copy p,.collab-step p,.collab-cta p) {
  font-size:14px !important;
  line-height:1.58;
}

/* Lecture notes are reading material, not UI chrome. */
.site-page .lecture-article :is(p,li) { font-size:16px !important; line-height:1.72; }
.site-page .lecture-article :is(th,td) { font-size:14px !important; line-height:1.5; }
.site-page .lecture-article :is(pre,code) { font-size:13px !important; }
.site-page .lecture-article blockquote p { font-size:14px !important; }

/* EXP supporting text. */
.exp01-page :is(.label,.figure figcaption,.code-head,footer,.equation .eqno) { font-size:13px !important; }
.exp01-page :is(.equation-note,.metric small,.timeline-item small) { font-size:14px !important; }
.exp01-page table { font-size:14px !important; }

.exp02-page :is(.exp02-crumb,.exp02-kicker,.exp02-warning,.exp02-control,.exp02-legend,.exp02-noscript,
 .exp02-meta-row span,.exp02-meta-row b,.exp02-section-head p,.exp02-model-chain span,.exp02-formula p,
 .exp02-resource small,.exp02-panel-head b,.exp02-panel-head span,.trace-step small,.trace-step span,
 .exp02-score-table,.exp02-score-table th,.path-kpi small,.uml-card header,.exp02-takeaway p),
.exp03-page :is(.exp03-crumb,.exp03-kicker,.exp03-warning,.exp03-control,.exp03-legend,.exp03-noscript,
 .exp03-meta-row span,.exp03-meta-row b,.exp03-section-head p,.exp03-model-chain span,.exp03-formula p,
 .exp03-resource small,.exp03-panel-head b,.exp03-panel-head span,.trace-step small,.trace-step span,
 .exp03-score-table,.exp03-score-table th,.path-kpi small,.uml-card header,.exp03-takeaway p,.exp03-page summary,
 .exp03-figure figcaption,.exp03-compare-card small,.exp03-compare-card p,.exp03-config-table,.exp03-config-table th,
 .exp03-config-table td small,.exp03-data-note,.exp03-general-table,.exp03-general-table th,.exp03-publication) {
  font-size:13px !important;
  line-height:1.5;
}

/* ------------------------------------------------------------------
   MATHEMATICS
   Equations stay inside their panel. Long expressions scroll locally.
   ------------------------------------------------------------------ */
.site-page :is(.equation,.formula,.math-formal),
.exp01-page .equation,
.exp02-page :is(.formula,.exp02-equation-big),
.exp03-page :is(.formula,.exp03-equation-big) {
  max-width:100%;
  min-width:0;
  font-size:var(--formula-copy) !important;
  line-height:1.55;
}

.site-page :is(.math-formal,.equation-panel),
.exp01-page .equation,
.exp02-page .exp02-formula .formula,
.exp03-page .exp03-formula .formula {
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
}

mjx-container,
mjx-container[display="true"] { max-width:100% !important; }
mjx-container[display="true"] { overflow-x:auto; overflow-y:hidden; padding-bottom:3px; }
mjx-container svg { max-width:none; }

/* ------------------------------------------------------------------
   STABLE GRIDS
   Dense 4–7-column layouts were the main source of visual drift once
   readable type was restored. Keep desktop compositions deliberate.
   ------------------------------------------------------------------ */
.site-page :is(.hero-grid,.split,.arch-preview,.research-grid,.partner-grid,.teaching-intro,.lecture-shell,
  .collab-leads,.collab-input,.dual-hierarchy,.survivability-grid),
.exp02-page :is(.exp02-hero-grid,.exp02-section-head,.exp02-two,.exp02-matrix-grid,.exp02-uml-grid),
.exp03-page :is(.exp03-hero-grid,.exp03-section-head,.exp03-two,.exp03-matrix-grid,.exp03-uml-grid,.exp03-diagram-grid,.exp03-compare) {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.site-page .hero-grid { grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:48px; }
.site-page .arch-preview { grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:40px; }
.site-page .split { gap:40px; }
.site-page .teaching-intro { grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:32px; }
.site-page .lecture-shell { grid-template-columns:minmax(0,1fr) 270px; gap:40px; }
.site-page .collab-input { grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr); gap:32px; }

.site-page .cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.site-page .signal-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.site-page .math-contract-grid,
.site-page .hw-map,
.site-page .paper-limit,
.site-page .collab-audience { grid-template-columns:repeat(3,minmax(0,1fr)); }

.site-page .verification-grid,
.site-page .evidence-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

/* A six-column research lineage was too narrow for readable text. */
.site-page .research-lineage { grid-template-columns:repeat(3,minmax(0,1fr)); }
.site-page .lineage-step:nth-child(3n) { border-right:0; }
.site-page .lineage-step:nth-child(n+4) { border-top:1px solid var(--line); }

/* Roadmap wraps in the frame instead of becoming a horizontal page. */
.site-page .roadmap-track {
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  overflow:visible !important;
  gap:10px;
}

/* Action columns wrap naturally instead of forcing width. */
.site-page :is(.cta,.collab-cta,.course-card,.stage-head),
.exp02-page .exp02-takeaway,
.exp03-page .exp03-takeaway { min-width:0; max-width:100%; }
.site-page .course-card { grid-template-columns:96px minmax(0,1fr) auto; }
.site-page :is(.status,.stage-status,.course-action) { white-space:normal; }

/* EXP-01 dense content. */
.exp01-page .grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.exp01-page .grid3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.exp01-page .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.exp01-page .timeline { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* EXP-02 / EXP-03 dense content. */
.exp02-page .exp02-three,
.exp03-page .exp03-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.exp02-page .exp02-resources,
.exp03-page .exp03-resources,
.exp02-page .exp02-path-summary,
.exp03-page .exp03-path-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.exp02-page .exp02-trace,
.exp03-page .exp03-trace { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

/* Header: readable navigation, and collapse before it becomes cramped. */
.site-page .nav,
.exp02-page .nav,
.exp03-page .nav,
.exp01-page .nav { gap:22px; min-height:72px; }
.site-page .nav-links,
.exp02-page .nav-links,
.exp03-page .nav-links,
.exp01-page .nav-links { gap:15px; }

/* Local navigation used by experiment 01. */
.exp01-page .experiment-subnav {
  border-bottom:1px solid var(--line);
  background:rgba(4,6,5,.86);
}
.exp01-page .experiment-subnav .container {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding-block:11px;
}
.exp01-page .experiment-subnav a {
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
}
.exp01-page .experiment-subnav a:hover { color:var(--green); }

@media (max-width: 1120px) {
  .site-page .nav-links,
  .exp02-page .nav-links,
  .exp03-page .nav-links,
  .exp01-page .nav-links {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:72px;
    padding:20px var(--site-gutter);
    background:#030604;
    border-bottom:1px solid var(--line-strong);
    flex-direction:column;
    align-items:flex-start;
  }
  .site-page .nav-links.open,
  .exp02-page .nav-links.open,
  .exp03-page .nav-links.open,
  .exp01-page .nav-links.open { display:flex; }
  .site-page .nav-toggle,
  .exp02-page .nav-toggle,
  .exp03-page .nav-toggle,
  .exp01-page .nav-toggle { display:block; }
}

@media (max-width: 920px) {
  .site-page :is(.hero-grid,.split,.arch-preview,.research-grid,.partner-grid,.teaching-intro,.lecture-shell,
    .collab-leads,.collab-input,.dual-hierarchy,.survivability-grid),
  .exp01-page :is(.grid2,.grid3,.grid4),
  .exp02-page :is(.exp02-hero-grid,.exp02-section-head,.exp02-two,.exp02-three,.exp02-matrix-grid,.exp02-uml-grid),
  .exp03-page :is(.exp03-hero-grid,.exp03-section-head,.exp03-two,.exp03-three,.exp03-matrix-grid,.exp03-uml-grid,.exp03-diagram-grid,.exp03-compare) {
    grid-template-columns:1fr;
  }

  .site-page :is(.cards,.math-contract-grid,.hw-map,.paper-limit,.collab-audience),
  .site-page :is(.verification-grid,.evidence-grid),
  .exp02-page :is(.exp02-resources,.exp02-path-summary),
  .exp03-page :is(.exp03-resources,.exp03-path-summary) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .site-page .research-lineage { grid-template-columns:1fr; }
  .site-page .lineage-step { min-height:auto; border-right:0; border-bottom:1px solid var(--line); border-top:0 !important; }
  .site-page .lineage-step:last-child { border-bottom:0; }
  .site-page .lineage-step::after { display:none; }

  .site-page .lecture-toc { position:static; border-left:0; border-top:1px solid var(--line); padding:18px 0 0; }
  .site-page .collab-input-copy { position:static; }
}

@media (max-width: 680px) {
  :root { --site-gutter:18px; --body-copy:15px; --meta-copy:13px; --formula-copy:15px; }
  .site-page section,
  .exp01-page section,
  .exp02-page section,
  .exp03-page section { padding-top:58px; padding-bottom:58px; }

  .site-page :is(.cards,.signal-grid,.math-contract-grid,.verification-grid,.hw-map,.evidence-grid,.paper-limit,.collab-audience,.material-grid),
  .exp02-page :is(.exp02-resources,.exp02-path-summary),
  .exp03-page :is(.exp03-resources,.exp03-path-summary) { grid-template-columns:1fr; }

  .site-page .course-card { grid-template-columns:1fr; gap:10px; }
  .site-page .course-action { grid-column:auto; width:max-content; max-width:100%; }
  .site-page .cta,
  .site-page .collab-cta,
  .exp02-page .exp02-takeaway,
  .exp03-page .exp03-takeaway { grid-template-columns:1fr; gap:20px; }

  .exp01-page .equation { padding:18px; }
  .exp01-page .equation .eqno { position:static; transform:none; display:block; text-align:right; margin-top:8px; }

  .site-page h1,
  .exp01-page h1,
  .exp02-page h1,
  .exp03-page h1 { font-size:clamp(32px,10vw,46px); }
}

/* Standalone mobile landing is intentionally narrower, but still readable. */
.mobile-page { overflow-x:hidden; font-size:16px; }
.mobile-page .wrap { width:min(calc(100% - 36px),620px); margin-inline:auto; }
.mobile-page :is(.brand small,.eyebrow,.status,.btn,.n,.step b,.step span,.card small,.card p,.desktop-note strong,.desktop-note p,.tiny,.footer) {
  font-size:13px !important;
  line-height:1.5;
}

/* ------------------------------------------------------------------
   TABLES / LONG TOKENS
   The previous templates allowed table intrinsic width to escape a grid.
   On desktop tables now fit the content frame and wrap technical text.
   ------------------------------------------------------------------ */
.site-page .tech-table,
.site-page .compact-table,
.exp01-page table,
.exp03-page .exp03-config-table,
.exp03-page .exp03-general-table {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:fixed;
}
.site-page :is(.tech-table,.compact-table) :is(th,td),
.exp01-page table :is(th,td),
.exp03-page :is(.exp03-config-table,.exp03-general-table) :is(th,td) {
  overflow-wrap:anywhere;
  word-break:normal;
}

/* A technical table should get the full reading width, not half a split. */
.site-page .split:has(.tech-table-wrap) {
  grid-template-columns:1fr;
  gap:26px;
}

/* Inline identifiers in lecture prose may break; code blocks preserve formatting. */
.site-page .lecture-article code {
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.site-page .lecture-article pre code {
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
}

/* SVG labels are part of the content and must remain readable. */
.exp02-page .graph-node .node-label,
.exp03-page .graph-node .node-label,
.exp02-page .graph-transient text,
.exp03-page .graph-transient text,
.exp02-page .uml-text,
.exp03-page .uml-text,
.exp03-page .exp03-graph-node .node-label,
.exp03-page .exp03-svg-hot { font-size:12px !important; }
.exp02-page .graph-node .node-value,
.exp03-page .graph-node .node-value,
.exp02-page .uml-small,
.exp03-page .uml-small,
.exp03-page .exp03-svg-note { font-size:11px !important; }

/* EXP-01 has an 8-column measurement table. Give it a compact but contained mode. */
.exp01-page table:not(.compact-table) th,
.exp01-page table:not(.compact-table) td {
  font-size:12px !important;
  padding:8px 5px;
  text-align:center;
}
.exp01-page table:not(.compact-table) th:first-child,
.exp01-page table:not(.compact-table) td:first-child { text-align:left; }

@media (max-width:680px) {
  /* Dense scientific tables remain inside a local scroller on narrow screens. */
  .site-page .tech-table-wrap,
  .exp01-page .figure,
  .exp03-page .exp03-panel-body,
  .site-page .lecture-article { overflow-x:auto; }

  .exp01-page table:not(.compact-table) {
    min-width:680px !important;
    table-layout:auto;
  }
  .exp03-page .exp03-config-table,
  .exp03-page .exp03-general-table {
    min-width:620px !important;
    table-layout:auto;
  }
}

.exp01-page .timeline-item small {
  display:block;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.exp01-page .table-scroll {
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
@media (max-width:680px) {
  .exp01-page .table-scroll table:not(.compact-table) {
    min-width:680px !important;
    table-layout:auto;
  }
  .exp03-page :is(.exp03-config-table,.exp03-general-table) {
    display:block;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto;
  }
}

/* Final frame/nav tuning after visual audit at 1440/1180/1024/850. */
:root { --content:1200px; --site-content:1200px; }
.site-page .nav-links,
.exp01-page .nav-links,
.exp02-page .nav-links,
.exp03-page .nav-links {
  font-size:12.5px;
  gap:12px;
  white-space:nowrap;
  flex-wrap:nowrap;
}
.site-page .nav-links a,
.exp01-page .nav-links a,
.exp02-page .nav-links a,
.exp03-page .nav-links a { flex:0 0 auto; }

/* Mathematical contract cards need width more than count. */
.site-page .math-contract-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.site-page :is(.math-contract,.verify-item) .formula {
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap !important;
  overscroll-behavior-inline:contain;
  padding-bottom:3px;
}

@media (max-width:1260px) {
  .site-page .nav-links,
  .exp02-page .nav-links,
  .exp03-page .nav-links,
  .exp01-page .nav-links { display:none; }
  .site-page .nav-links.open,
  .exp02-page .nav-links.open,
  .exp03-page .nav-links.open,
  .exp01-page .nav-links.open { display:flex; }
  .site-page .nav-toggle,
  .exp02-page .nav-toggle,
  .exp03-page .nav-toggle,
  .exp01-page .nav-toggle { display:block; }
}
@media (max-width:680px) {
  .site-page .math-contract-grid { grid-template-columns:1fr; }
}

/* Metadata label columns were too narrow once type was made readable. */
.site-page .profile-lines div {
  grid-template-columns:122px minmax(0,1fr) !important;
  gap:14px;
}
.site-page .teaching-panel .meta-row {
  grid-template-columns:120px minmax(0,1fr) !important;
}
.exp02-page .exp02-meta-row,
.exp03-page .exp03-meta-row {
  grid-template-columns:120px minmax(0,1fr);
}

/* No graph label below the readable utility scale. */
.exp02-page .graph-node .node-value,
.exp03-page .graph-node .node-value,
.exp02-page .uml-small,
.exp03-page .uml-small,
.exp03-page .exp03-svg-note { font-size:12px !important; }

@media (max-width:520px) {
  .site-page .profile-lines div,
  .site-page .teaching-panel .meta-row,
  .exp02-page .exp02-meta-row,
  .exp03-page .exp03-meta-row {
    grid-template-columns:1fr !important;
    gap:5px;
  }
}

/* Headings may wrap, but never establish a wider intrinsic track. */
.site-page :is(h1,h2,h3,h4),
.exp01-page :is(h1,h2,h3,h4),
.exp02-page :is(h1,h2,h3,h4),
.exp03-page :is(h1,h2,h3,h4) {
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Math inside table cells is locally contained as well. */
.site-page :is(th,td) mjx-container,
.exp01-page :is(th,td) mjx-container,
.exp02-page :is(th,td) mjx-container,
.exp03-page :is(th,td) mjx-container {
  max-width:100% !important;
  overflow-x:auto;
  overflow-y:hidden;
}

/* Compact metric/result rows must wrap within their card. */
.exp01-page .result,
.exp01-page .formal-sequence,
.exp01-page .kpi-line { max-width:100%; min-width:0; }
.exp01-page .kpi-line span {
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}