/* Original layout restored. Targeted overflow and spacing safeguards. */
main, .hero-text, .build, .build-body, .role > * { min-width: 0; }
.hero-grid { min-height: 0; }
.hero h1 { font-size: clamp(56px, 6.3vw, 88px); line-height: 1.04; }
@media (max-width: 1040px) {
  .hero-grid { padding-top: 24px; padding-bottom: 28px; }
  .hero .summary { max-width: none; }
  .globe { max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(38px, 11.5vw, 64px); white-space: normal; }
  .hero .summary { font-size: 17px; line-height: 1.65; }
  .sec { padding-top: 56px; }
  .contact { margin-top: 56px; }
  .contact .wrap { padding-top: 44px; padding-bottom: 40px; }
  .why { gap: 28px; }
}
@media (min-width: 761px) and (max-width: 1040px) and (pointer: coarse) {
  body { font-size: 22px; }
  .brand { font-size: 22px; }
  .hero .summary, .contact p { font-size: 24px; line-height: 1.6; }
  .status, .facts dt, .facts dd, .ledger span, .role .when, .fine { font-size: 20px; }
  .btn, .btn-sm, .mode, .docs a, .tab { font-size: 19px; }
  .role h3 { font-size: 25px; }
  .role p, .why li, .sec-head p, .lab-row p, .doc p, .phase p { font-size: 22px; line-height: 1.6; }
  .why h3 { font-size: 24px; }
  .sec { padding-top: 56px; }
  .why { margin-top: 40px; padding-top: 32px; gap: 28px; }
  .contact { margin-top: 48px; }
  .hero .lede { max-width: none; }
  .hero h1 { margin-top: 18px; }
  .globe { height: 450px; margin-top: 0; }
  .role { grid-template-columns: 1fr; gap: 8px; padding-left: 28px; }
  .roles::before { left: 4px; }
  .role::before { left: 0; }
  .role .when { text-align: left; padding: 0; }
}

/* Readable text and aligned contact actions, without reordering the hero. */
.hero .ctas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero .ctas .btn { min-width: 0; padding: 12px 10px; min-height: 48px; }
.js .hero-text > * { animation: none; }
.role h3 span, .sec-head p { color: var(--ink-2); }
.globe { isolation: isolate; }
.globe::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 8% -3% 12%; border-radius: 50%;
  background: radial-gradient(ellipse, var(--accent-soft), transparent 68%); }
.globe-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 18px; }
@media (max-width: 760px) {
  .hero .ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
  .hero .ctas .btn { font-size: 16px; }
  .sec-head p, .role p, .why li, .lab-row p, .doc p, .phase p,
  .strengths dd, .principles li, .steps p { font-size: 16.5px; line-height: 1.65; }
  .sec-head h2 { font-size: clamp(36px, 9vw, 54px); line-height: 1.1; }
  .facts { gap: 12px 22px; margin-top: 22px; }
  .facts div:first-child { flex-basis: 100%; }
  .facts dd { font-size: 15.5px; }
  .globe { height: min(88vw, 410px); }
  .globe figcaption { font-size: 13.5px; line-height: 1.5; text-align: center; }
  .why { margin-top: 40px; padding-top: 30px; }
  .mail { overflow-wrap: anywhere; word-break: normal; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn { transition: background .18s ease, border-color .18s ease, transform .18s ease; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .shot { box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .shot { transition: none !important; transform: none !important; }
}

/* Use the compact layout across the full range where mobile navigation is active.
   Some phone browsers report a 980px layout viewport. */
@media (max-width: 1040px) {
  .hero .ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero .ctas .btn { min-height: 52px; }
  .ledger ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger li { border-left: 0 !important; border-top: 1px solid var(--line);
    padding: 20px 16px 20px 0 !important; }
  .ledger li:nth-child(even) { border-left: 1px solid var(--line) !important;
    padding-left: 20px !important; padding-right: 0 !important; }
  .ledger li:nth-child(-n+2) { border-top: 0; }
  .ledger li:last-child { grid-column: 1 / -1; border-left: 0 !important; }
  .builds, .steps, .doclist, .plan { grid-template-columns: 1fr; }
  .lab-row, .deep summary { grid-template-columns: 1fr; }
  .lab-row .acts { justify-content: flex-start; }
  .sec-head h2 { font-size: clamp(36px, 6.4vw, 54px); line-height: 1.12; }
  .globe { height: clamp(270px, 72vw, 360px); }
  .globe figcaption { text-align: center; max-width: none; line-height: 1.5; }
}
@media (min-width: 761px) and (max-width: 1040px) and (pointer: coarse) {
  body { font-size: 22px; }
  .hero .summary, .contact p { font-size: 24px; line-height: 1.6; }
  .hero .ctas .btn { min-height: 64px; font-size: 23px; }
  .role p, .why li, .sec-head p, .lab-row p, .doc p, .phase p,
  .strengths dd, .principles li, .steps p { font-size: 22px; line-height: 1.65; }
  .ledger span { font-size: 21px; }
  .ledger b { font-size: 48px; }
  .globe figcaption { font-size: 18px; }
  .globe-label span { font-size: 17px; }
  .globe-label small { display: none; }
  .mode .lbl { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: none; }
  .facts div:first-child { grid-column: 1 / -1; }
  .facts dt { font-size: 20px; }
  .facts dd { font-size: 22px; }
  .role { grid-template-columns: 1fr; gap: 8px; padding-left: 28px; }
  .roles::before { left: 4px; }
  .role::before { left: 0; }
  .role .when { text-align: left; padding: 0; }
  .phase + .phase { border-left: 0; border-top: 1px solid var(--line); }
}

/* The "Docs:" label sits level with its links. */
.docs { align-items: center; }

/* Build screenshots in the spare space: the Msafara card's right column and each lab row.
   Sized to sit inside space that was already empty, so rows and cards keep their layout. */
.build.wide .aside-shot { margin: 18px auto 0; max-width: 300px; }
.lab-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lab-id > div { min-width: 0; }
.lab-thumb { flex: 0 0 80px; display: block; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-3); box-shadow: var(--shadow); }
.lab-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@media (min-width: 1041px) and (max-width: 1180px) {
  .build.wide .aside-shot { max-width: 268px; }
  .lab-id { gap: 12px; }
  .lab-thumb { flex-basis: 60px; }
}
@media (max-width: 1040px) {
  .build.wide .aside-shot { max-width: 420px; margin-top: 22px; }
}
@media (max-width: 760px) {
  .lab-thumb { flex-basis: 72px; }
}