/* Mobile-only composition layer.
   Desktop remains owned by styles.css and the desktop runtime typography block.
   Nothing is hidden or removed here: the same content is reflowed for narrow screens. */

@media (max-width: 820px) {
  :root {
    --mobile-section: 48px;
    --mobile-block: 32px;
    --mobile-component: 24px;
    --mobile-text: 16px;
  }

  body {
    font-size: 16px;
  }

  /* Keep phone copy natural. Narrow justified measures create visible rivers. */
  .hero-copy,
  .proof-row p,
  .section-head > p,
  .system-body > p,
  .feature-project p,
  .lab-row > p,
  .oss-entry p,
  .timeline-row > p,
  .depth p,
  .contact p,
  .case-title .lede,
  .case-head > p,
  .record-row p,
  .callout {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: pretty !important;
  }

  .hero h1,
  .section-head h2,
  .contact h2,
  .case-title h1,
  .case-head h2,
  .system-name h3,
  .oss-entry h3,
  .timeline-row h3,
  .lab-row h3,
  .depth h3 {
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-spacing: normal !important;
    white-space: normal !important;
    text-wrap: pretty !important;
  }

  /* Header: shorter and quieter, while preserving every navigation item. */
  .header-inner {
    min-height: 72px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .identity strong {
    font-size: 27px !important;
    line-height: 1.02 !important;
  }

  .identity span {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .menu-toggle {
    min-height: 42px !important;
    padding: 0 14px !important;
    letter-spacing: .06em !important;
  }

  .js .nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 11px 0 !important;
  }

  /* Hero: preserve all content but tighten relationships between related groups. */
  .hero {
    padding-top: 42px !important;
  }

  .hero-grid {
    gap: 30px !important;
  }

  .hero .overline {
    margin-bottom: 15px !important;
  }

  .hero h1 {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 20px !important;
    font-size: clamp(40px, 10vw, 48px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
  }

  .hero-copy {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.64 !important;
  }

  .hero-side {
    margin-top: 0 !important;
  }

  .meta-row {
    padding: 15px 0 17px !important;
  }

  .meta-row dt {
    padding-bottom: 6px !important;
    font-size: 10px !important;
  }

  .meta-row dd {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .meta-row dd strong {
    font-size: 16px !important;
    line-height: 1.36 !important;
  }

  .hero-side .skill-lines {
    gap: 5px !important;
  }

  .hero-side .quick-links {
    justify-content: flex-start !important;
    gap: 10px 22px !important;
    padding-top: 16px !important;
  }

  /* Evidence: same four rows and all copy, reflowed into a compact 2x2 scorecard. */
  .proof-ledger {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 42px !important;
    border-top: 1px solid var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .proof-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 20px 16px 22px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
  }

  .proof-row:nth-child(even) {
    padding-left: 16px !important;
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  .proof-row:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }

  .proof-row .label {
    order: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: .09em !important;
  }

  .proof-row strong {
    order: 1 !important;
    width: 100% !important;
    font-size: clamp(22px, 6.1vw, 28px) !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  .proof-row p {
    order: 2 !important;
    margin: 3px 0 0 !important;
    font-size: 13.5px !important;
    line-height: 1.52 !important;
  }

  .proof-row .source {
    display: block !important;
    order: 3 !important;
    margin-top: auto !important;
    padding-top: 5px !important;
    font-size: 9px !important;
    text-align: left !important;
  }

  /* Consistent section rhythm. */
  .section {
    padding: var(--mobile-section) 0 !important;
  }

  .section-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    row-gap: 0 !important;
    margin-bottom: 32px !important;
  }

  .section-head .section-no {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;
  }

  .section-head h2 {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 17ch !important;
    margin: 0 !important;
    font-size: clamp(30px, 8.1vw, 38px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.036em !important;
    text-wrap: balance !important;
  }

  .section-head > p {
    grid-column: 1 !important;
    margin: 16px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  /* Production systems: editorial case-study blocks with structured evidence. */
  .system-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 30px 0 32px !important;
  }

  .system-index,
  .system-name,
  .system-body,
  .system-evidence {
    grid-column: 1 !important;
  }

  .system-index {
    margin: 0 0 10px !important;
    font-size: 10px !important;
  }

  .system-name .type {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 10px !important;
  }

  .system-name h3 {
    max-width: 18ch !important;
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1.16 !important;
    letter-spacing: -.025em !important;
  }

  .system-body {
    margin-top: 17px !important;
  }

  .system-body > p {
    margin-bottom: 14px !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  .methods {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .system-evidence {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 20px !important;
    border-top: 1px solid var(--line) !important;
  }

  .evidence-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    padding: 14px 12px 14px 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .evidence-line:nth-child(even) {
    padding-left: 12px !important;
    padding-right: 0 !important;
  }

  .evidence-line strong {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  .evidence-line span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .row-link {
    grid-column: 1 / -1 !important;
    margin-top: 14px !important;
    font-size: 12px !important;
  }

  /* Public systems: Vortex stays flagship; every secondary project remains visible as a compact ledger row. */
  .feature-project {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 34px !important;
  }

  .feature-project h3 {
    font-size: clamp(32px, 8.8vw, 40px) !important;
    line-height: 1 !important;
  }

  .feature-project p {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  .tech {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .feature-links {
    gap: 10px 20px !important;
  }

  .benchmark {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-top: 1px solid currentColor !important;
  }

  .benchmark > div {
    min-width: 0 !important;
    padding: 16px 12px 18px 0 !important;
    border-bottom: 1px solid currentColor !important;
  }

  .benchmark > div:nth-child(even) {
    padding-left: 12px !important;
    padding-right: 0 !important;
  }

  .benchmark strong {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1 !important;
  }

  .benchmark span {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .lab-ledger {
    border-top: 1px solid currentColor !important;
  }

  .lab-row {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 7px 12px !important;
    padding: 22px 0 !important;
  }

  .lab-row .status {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    font-size: 10px !important;
  }

  .lab-row h3,
  .lab-row > p,
  .lab-row .stack {
    grid-column: 2 !important;
  }

  .lab-row h3 {
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .lab-row > p {
    margin: 2px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .lab-row .stack {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  /* Open source: technical fix first, repository/status quieter but still fully visible. */
  .oss-entry {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 14px !important;
    padding: 24px 0 !important;
  }

  .oss-entry .repo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: 11px !important;
  }

  .oss-entry .state {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 10px !important;
    text-align: right !important;
  }

  .oss-entry > div {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .oss-entry h3 {
    margin: 3px 0 10px !important;
    max-width: 22ch !important;
    font-size: 20px !important;
    line-height: 1.18 !important;
  }

  .oss-entry p {
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.58 !important;
  }

  .oss-entry .domain {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 5px !important;
    font-size: 10px !important;
  }

  /* Career: same copy, presented as a progression timeline. */
  .timeline {
    position: relative !important;
    border-top: 1px solid var(--line-strong) !important;
  }

  .timeline-row {
    position: relative !important;
    display: block !important;
    margin-left: 7px !important;
    padding: 26px 0 28px 25px !important;
    border-left: 1px solid var(--line) !important;
  }

  .timeline-row::before {
    content: "";
    position: absolute;
    top: 31px;
    left: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink);
  }

  .timeline-row .date {
    display: block !important;
    margin-bottom: 11px !important;
    font-size: 10px !important;
    letter-spacing: .07em !important;
  }

  .timeline-row h3 {
    margin: 0 0 4px !important;
    font-size: 20px !important;
    line-height: 1.18 !important;
  }

  .timeline-row .role {
    display: block !important;
    font-size: 12px !important;
  }

  .timeline-row > p {
    margin: 15px 0 0 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  /* Engineering surface: typographic groups, no pills or dashboard cards. */
  .depth-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    border-top: 1px solid var(--line-strong) !important;
  }

  .depth,
  .depth + .depth {
    min-height: 0 !important;
    padding: 22px 0 24px !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .depth h3 {
    margin: 0 0 10px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .depth p {
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.62 !important;
  }

  /* Contact should conclude the document, not compete with the opening hero. */
  .contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .contact-grid > * {
    grid-column: 1 !important;
  }

  .contact .section-no {
    margin: 0 0 13px !important;
  }

  .contact h2 {
    width: 100% !important;
    max-width: 16ch !important;
    margin: 0 !important;
    font-size: clamp(30px, 8.3vw, 36px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.038em !important;
    text-wrap: balance !important;
  }

  .contact-grid > div:last-child {
    margin-top: 21px !important;
  }

  .contact p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  .contact-links {
    margin-top: 18px !important;
    gap: 10px !important;
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal !important;
  }

  /* Footer: still branded, but clearly below the contact hierarchy. */
  .footer-inner {
    min-height: 86px !important;
  }

  .footer-inner > span {
    font-size: 25px !important;
    font-weight: 760 !important;
    letter-spacing: -.04em !important;
    line-height: 1.1 !important;
  }

  .footer-inner a {
    font-size: 12px !important;
  }

  .methods,
  .tech,
  .lab-row .stack,
  .oss-entry .domain,
  .meta-row dd,
  .skill-lines,
  .evidence-line,
  .contact-links {
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal !important;
  }
}

@media (max-width: 540px) {
  :root {
    --gutter: 18px;
    --mobile-section: 44px;
  }

  .header-inner {
    min-height: 68px !important;
  }

  .identity strong {
    font-size: 25px !important;
  }

  .identity span {
    font-size: 13px !important;
  }

  .hero {
    padding-top: 36px !important;
  }

  .hero h1 {
    font-size: clamp(37px, 10.4vw, 43px) !important;
  }

  .section-head h2,
  .contact h2 {
    font-size: clamp(29px, 8.4vw, 34px) !important;
  }

  .proof-row {
    padding-top: 18px !important;
    padding-bottom: 20px !important;
  }

  .proof-row p {
    font-size: 13px !important;
  }

  .system-name h3,
  .oss-entry h3,
  .timeline-row h3 {
    font-size: 19px !important;
  }

  .feature-project h3 {
    font-size: clamp(31px, 9vw, 37px) !important;
  }

  .footer-inner > span {
    font-size: 23px !important;
  }
}

@media (max-width: 380px) {
  :root {
    --gutter: 16px;
    --mobile-section: 42px;
  }

  .identity strong {
    font-size: 23px !important;
  }

  .identity span {
    font-size: 12px !important;
  }

  .hero h1 {
    font-size: clamp(35px, 10.6vw, 40px) !important;
  }

  .hero-copy,
  .section-head > p,
  .system-body > p,
  .feature-project p,
  .contact p {
    font-size: 14.5px !important;
  }

  .proof-row {
    padding-right: 12px !important;
  }

  .proof-row:nth-child(even) {
    padding-left: 12px !important;
  }

  .proof-row strong {
    font-size: 21px !important;
  }

  .proof-row p {
    font-size: 12.5px !important;
    line-height: 1.48 !important;
  }

  .benchmark strong {
    font-size: 21px !important;
  }

  .system-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lab-row {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap-left: 10px !important;
  }

  .footer-inner > span {
    font-size: 22px !important;
  }
}