/* ─────────────────────────────────────────────────────────
   ATRX — Mobile responsive layer
   Layered on top of base.css + pages.css
   Breakpoints:  ≤1020 tablet · ≤760 phone · ≤420 narrow
   ───────────────────────────────────────────────────────── */

/* Hard guard: never let any element create a horizontal scrollbar */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
.svg-block svg, .pillar-art svg, .architecture-art svg, .hero-art svg,
.intel-art svg, .partnership-art svg, .research-art svg { max-width:100%; height:auto; display:block; }

/* Tables and wide blocks scroll *internally*, not the whole page */
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scroll-x > *{ min-width: 640px; }

/* ─────────── ≤ 1020px : tablet ─────────── */
@media (max-width: 1020px){

  /* Reveal hamburger; main nav is now in drawer */
  .nav-toggle{ display:inline-flex; }

  .masthead .bar{
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 12px var(--gutter);
  }
  .mh-right{ gap: 8px; }
  .mh-right .btn.primary .arr{ margin-left:6px; }

  /* Theme toggle keeps icon only at tablet */
  #theme-toggle{ padding: 8px 10px; }
  #theme-toggle .mono{ display:none; }
  #theme-toggle::before{
    content:"☾";
    font-size:14px;
    color:var(--ink);
  }
  [data-theme="dark"] #theme-toggle::before{ content:"☀"; }

  /* Reduce hero font scale */
  :root{ --step-6: 56px; --step-5: 42px; --step-4: 32px; }
}

/* ─────────── ≤ 760px : phone ─────────── */
@media (max-width: 760px){

  :root{
    --step-7: 56px;
    --step-6: 40px;
    --step-5: 32px;
    --step-4: 26px;
    --step-3: 22px;
    --step-2: 19px;
    --gutter: 20px;
    --rhythm: calc(22px * var(--dens));
  }
  html{ font-size: 16px; line-height: 1.55; }

  /* Wordmark — keep logo, hide subtitle */
  .masthead .wordmark{ font-size: 18px; gap: 8px; }
  .masthead .wordmark .mk{ font-size: 17px; letter-spacing:0.08em; }
  .wordmark .mark{ height: 30px; }
  .wordmark .sub{ display:none !important; }

  /* Masthead trim — keep brand + hamburger only */
  .mh-right .btn.primary{
    padding: 8px 10px;
    font-size: 12px;
  }
  .mh-right .btn.primary .label{ display:none; }
  .mh-right .btn.primary .arr{ margin:0; }

  /* Masthead bar gets tight */
  .masthead .bar{ padding: 10px 16px; gap: 10px; }

  /* Section padding */
  .section{ padding: calc(var(--rhythm) * 1.8) 0; }

  /* Lead text more readable */
  p.lead{ font-size: 18px; line-height: 1.5; }

  /* Hero */
  .hero-split{ grid-template-columns: 1fr !important; gap: 28px !important; }
  .hero-art{ order:-1; }
  .hero h1{ font-size: 38px; line-height: 1.05; }

  /* Verified row → 2 columns max on phone */
  .verified .row{ grid-template-columns: repeat(2, 1fr) !important; gap: 0; }
  .verified .cell{
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    padding: 14px 12px;
  }
  .verified .cell:nth-child(2n){ border-right:0; }
  .verified .cell:nth-last-child(-n+2){ border-bottom:0; }

  /* Stats grid */
  .stats{ grid-template-columns: 1fr 1fr; }
  .stat{
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    padding: 18px 14px;
  }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-last-child(-n+2){ border-bottom:0; }
  .stat .v{ font-size: 26px; }

  /* All multi-column grids → single column */
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Asset matrix, pillars, tiers */
  .assets, .pillars, .tiers{ grid-template-columns: 1fr !important; }
  .assets .col, .pillars .p, .tiers .t{
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    min-height: auto !important;
    padding: 22px 18px;
  }
  .assets .col:last-child, .pillars .p:last-child, .tiers .t:last-child{ border-bottom:0; }

  /* Reading head, sec head, kv, form-row → stack */
  .reading-head, .sec-head{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .reading-head h1{ font-size: 36px; max-width: 18ch; }
  .reading-head h1, .sec-head h2{ max-width: 100%; }

  .kv{ grid-template-columns: 1fr !important; gap: 4px 0; padding: 12px 0; }
  .kv dt{ font-size: 10.5px; padding-top: 0; }
  .kv dd{ font-size: 15px; }

  .form-row{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 0;
  }
  .form-row label{ padding-top: 0; font-size: 10.5px; }
  .form-row input, .form-row textarea, .form-row select{
    font-size: 16px;  /* prevent iOS zoom-on-focus */
    padding: 8px 0;
  }

  /* Founder */
  .founder-hd{ grid-template-columns: 1fr !important; gap: 22px !important; }
  .founder-hd .photo{ max-width: 240px; }

  /* Documentation list */
  .doc-list{ grid-template-columns: 1fr !important; }
  .doc-list a.doc{
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 18px 16px;
  }
  .doc-list a.doc > .arr{ display:none; }
  .doc-list a.doc:nth-child(odd){ border-right:0; }

  /* Equity curve / wide diagrams — let them shrink, but keep readable on phone */
  .equity-frame, .architecture-frame{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .equity-frame svg, .architecture-frame svg{ min-width: 0; }

  /* Performance table */
  .perf-table{ font-size: 13px; }
  .perf-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .perf-table-wrap table{ min-width: 540px; }
  .ab-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .ab-table-wrap table.ab-table{ min-width: 540px; font-size: 13.5px; }

  /* Footer */
  footer.foot{ padding: 30px var(--gutter); margin-top: 40px; }
  footer.foot .wrap{ grid-template-columns: 1fr 1fr !important; gap: 28px 16px; }
  footer.foot .wrap > div:first-child{ grid-column: 1 / -1; }
  footer.foot .legal{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
  }

  /* Buttons enlarge for touch */
  .btn{ padding: 10px 14px; min-height: 40px; }

  /* Callouts */
  .callout{ padding: 16px 18px; font-size: 18px; }

  /* Tweaks panel — bottom drawer, not floating box */
  .tweaks{
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
  }
  .tweaks .group{ padding: 12px; }
  .tweaks .seg button{ padding: 10px 4px; font-size: 12px; min-height: 40px; }
}

/* ─────────── ≤ 420px : narrow phone ─────────── */
@media (max-width: 420px){

  :root{
    --step-6: 34px;
    --step-5: 28px;
    --gutter: 16px;
  }

  .hero h1, .reading-head h1{ font-size: 32px; }
  .stat .v{ font-size: 22px; }
  .stat .l{ font-size: 10px; }

  /* Verified row → 1 column on very narrow */
  .verified .row{ grid-template-columns: 1fr !important; }
  .verified .cell{ border-right:0; }
  .verified .cell:nth-child(2n){ border-right:0; }
  .verified .cell:nth-last-child(-n+2){ border-bottom:1px solid var(--hairline); }
  .verified .cell:last-child{ border-bottom:0; }

  .stats{ grid-template-columns: 1fr; }
  .stat{ border-right:0 !important; }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-last-child(-n+2){ border-bottom:1px solid var(--hairline); }
  .stat:last-child{ border-bottom:0 !important; }

  /* Footer single column */
  footer.foot .wrap{ grid-template-columns: 1fr !important; }

  /* Wordmark — letters only */
  .masthead .wordmark .mk{ font-size: 16px; }

  /* Masthead "Request Access" → arrow only */
  .mh-right .btn.primary{
    padding: 8px 9px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}

/* ─────────── Hamburger button + drawer ─────────── */
.nav-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  color: var(--ink);
}
.nav-toggle .bars{
  display: inline-block;
  width: 18px;
  height: 12px;
  position: relative;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars span{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle .bars::before{ top: 0; }
.nav-toggle .bars span{ top: 50%; transform: translateY(-50%); }
.nav-toggle .bars::after{ top: 100%; transform: translateY(-100%); }

body.nav-open .nav-toggle .bars::before{ top: 50%; transform: translateY(-50%) rotate(45deg); }
body.nav-open .nav-toggle .bars::after{ top: 50%; transform: translateY(-50%) rotate(-45deg); }
body.nav-open .nav-toggle .bars span{ opacity: 0; }

/* Drawer overlay */
.nav-drawer{
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ground);
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  visibility: hidden;
}
body.nav-open .nav-drawer{
  transform: translateX(0);
  visibility: visible;
}
.nav-drawer .drawer-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
  min-height: 64px;
}
.nav-drawer .drawer-head .wordmark{ font-size: 18px; }
.nav-drawer .close-btn{
  width: 40px; height: 40px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.nav-drawer nav{
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  gap: 0;
}
.nav-drawer nav a{
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.nav-drawer nav a::after{
  content: "→";
  font-family: var(--sans);
  font-size: 18px;
  color: var(--mute);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .15s ease, transform .15s ease;
}
.nav-drawer nav a:hover::after, .nav-drawer nav a:focus::after{
  opacity: 1; transform: translateX(0);
}
.nav-drawer nav a:last-child{ border-bottom: 0; }
.nav-drawer .drawer-foot{
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-drawer .drawer-foot .btn{ justify-content: center; text-align: center; padding: 14px 18px; }
.nav-drawer .drawer-foot .meta{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Lock body scroll when drawer is open */
body.nav-open{ overflow: hidden; }

/* Hide drawer entirely on desktop */
@media (min-width: 1021px){
  .nav-drawer{ display: none; }
  .nav-toggle{ display: none !important; }
}