/* ============================================================
   Mobile layer - loaded LAST so it wins on equal specificity.
   Concerns: touch ergonomics, safe areas, no horizontal overflow,
   and text that stays readable at arm's length.
   ============================================================ */

/* ---------- 1. Safe areas (notch, home indicator) ---------- */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }
  .drawer {
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  .read-bar { bottom: env(safe-area-inset-bottom); }
  .footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

/* ---------- 2. Header ---------- */
@media (max-width: 860px) {
  /* 44px is the smallest reliable touch target */
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .nav .wrap { gap: 10px; }
  .nav-actions { gap: 6px; }
  .brand { gap: 9px; font-size: .97rem; }
  .brand-mark { width: 26px; }
  .brand-sub { font-size: .58rem; letter-spacing: .13em; }

  /* Drawer: scrollable, contained, generous targets */
  .drawer {
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .drawer a.d-link {
    padding: 19px 2px; min-height: 62px; align-items: center;
    font-size: clamp(1.45rem, 6.6vw, 1.9rem);
  }
  .drawer a.d-link span { font-size: .7rem; }
  .drawer-foot { padding-top: 30px; gap: 18px; }
  .drawer-foot .btn { padding: 16px 24px; font-size: 1rem; }
}

/* ---------- 3. Rhythm ---------- */
@media (max-width: 640px) {
  .section { padding-block: 54px; }
  .section-tight { padding-block: 40px; }
  .section-head { margin-bottom: 28px; gap: 13px; }
  .page-head { padding-top: calc(var(--nav-h) + 44px); padding-bottom: 34px; }
  .h-xl { font-size: clamp(2rem, 9vw, 2.6rem); }
  .h-lg { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .h-md { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  .lede { font-size: 1rem; line-height: 1.7; }
}

/* ---------- 4. Legibility floors ---------- */
@media (max-width: 760px) {
  .eyebrow { font-size: .74rem; }
  .chip { font-size: .74rem; padding: 7px 13px; }
  .post-meta { font-size: .73rem; }
  .post-tags span { font-size: .7rem; padding: 4px 10px; }
  .post p { font-size: .9rem; }
  .hero-role { font-size: 1rem; }
  .fig small { font-size: .68rem; letter-spacing: .09em; }
  .col-tag, .sel-item em, .split .tag { font-size: .68rem; }
  .footer-bottom { font-size: .78rem; }
  .readlist small { font-size: .72rem; }
  .tech p { font-size: .84rem; }
}

/* ---------- 5. Forms: 16px stops iOS zooming on focus ---------- */
@media (max-width: 860px) {
  .field input, .field textarea, .field select,
  .search-field input, .sub-form input { font-size: 16px; }
  .field input, .field select { padding: 14px 16px; }
  .field textarea { min-height: 150px; }
  .search-field input { padding-block: 14px; }
  /* Flipping to column turns flex-basis into a height - reset it or the
     email field grows into a 220px blob. */
  .sub-form { flex-direction: column; align-items: stretch; gap: 12px; }
  .sub-form input, .sub-form .btn { flex: 0 0 auto; width: 100%; }
  .sub-form input { padding: 15px 20px; }
  .btn-sm { padding: 12px 20px; font-size: .88rem; }
}
/* reCAPTCHA renders at a fixed 304px - scale it rather than let it overflow */
@media (max-width: 400px) {
  #captchaField { height: 70px; overflow: hidden; }
  #captchaField .g-recaptcha { transform: scale(.88); transform-origin: 0 0; }
}

/* ---------- 6. Full-bleed the things that scroll sideways ---------- */
@media (max-width: 700px) {
  .code, .table-wrap {
    margin-inline: calc(var(--pad) * -1);
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .code pre { padding-inline: var(--pad); }
  .prose table { font-size: .86rem; }
  .prose thead th, .prose tbody td { padding: 12px 14px; }
  .article-hero {
    border-radius: 0; border-left: 0; border-right: 0;
    margin-inline: calc(var(--pad) * -1);
  }

  /* Horizontal chip rails: let the last item clear the edge */
  .filter-bar, .blog-tabs {
    padding-right: var(--pad); scroll-padding-inline: var(--pad);
    overscroll-behavior-x: contain;
  }
  .filter-bar::-webkit-scrollbar, .blog-tabs::-webkit-scrollbar { height: 0; }
  .f-chip { padding: 10px 16px; font-size: .76rem; }
}

/* ---------- 7. Component fixes ---------- */
@media (max-width: 640px) {
  /* Two-up numerals read better than a tall single stack */
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .fig b { font-size: clamp(1.9rem, 11vw, 2.5rem); }

  /* A clipped outline wordmark just looks broken */
  .footer-word { display: none; }

  /* Footer links need real touch height */
  .footer-links { gap: 2px; }
  .footer-links a { padding: 9px 0; font-size: .95rem; }
  .footer h4 { margin-bottom: 10px; }
  .footer-grid { gap: 32px; }
  .socials { gap: 12px; }

  /* Stacked strip items: rules go on top, not on the side */
  .strip > a, .strip > div {
    flex: 1 1 100%; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-block: 20px;
  }
  .strip > *:first-child { border-top: 0; padding-top: 4px; }

  /* Ledger + index rows */
  .led { padding-block: 22px; gap: 10px 14px; }
  .idx { padding-block: 22px; grid-template-columns: minmax(0, 1fr) auto; }
  .idx h3 { font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .idx:hover h3 { transform: none; }
  .idx-arrow { width: 36px; height: 36px; }
  .idx p { font-size: .92rem; }

  /* Contact channel cards */
  .contact-card { padding: 18px; gap: 14px; }
  .contact-card:hover { transform: none; }

  /* Timeline */
  .timeline { padding-left: 28px; }
  .tl-item::before { left: -28px; width: 15px; height: 15px; }
  .tl-item { padding-bottom: 32px; }

  /* Article */
  .article-title { font-size: clamp(1.65rem, 7.6vw, 2.2rem); }
  .prose { font-size: 1rem; }
  .prose h2 { font-size: clamp(1.3rem, 6vw, 1.6rem); }
  .article-tags a { padding: 8px 13px; font-size: .74rem; }
  .pager a { padding: 18px; }

  /* FAQ */
  .faq-q { padding: 20px 2px; font-size: .98rem; gap: 14px; }

  /* Cheaper blur on long card lists */
  .post-thumb::after { filter: blur(18px) saturate(1.3); }
}

/* ---------- 8. Hero ---------- */
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--nav-h) + 34px); padding-bottom: 44px; }
  .hero-badge { margin-bottom: 20px; font-size: .72rem; }
  .hero-actions { gap: 10px; margin-top: 28px; }
  .panel-body { padding: 16px; }
  .panel-step { padding: 10px 0; }
  .panel-step b { min-width: 74px; font-size: .82rem; }
  .panel-step span { font-size: .76rem; }
}

/* ---------- 9. Tool selector becomes an accordion ----------
   Tapping a name on a phone reveals its detail in place. The open row and its
   panel share one continuous accent rail and one tinted block, so the answer
   is visibly attached to the question that opened it. */
@media (max-width: 940px) {
  .selector.is-live .sel-detail { display: none; }

  /* Row: number spans both lines, name over role, chevron right */
  .sel-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center; row-gap: 2px;
    padding: 15px 34px 15px 0;
    border-left: 2px solid transparent;
    transition: border-color .3s var(--ease), background .3s var(--ease),
                padding-left .35s var(--ease-out);
  }
  .sel-item::before { display: none; }       /* replaced by a continuous border */
  .sel-item .n { grid-row: 1 / 3; align-self: center; }
  .sel-item b { grid-column: 2; grid-row: 1; line-height: 1.25; }
  .sel-item em {
    grid-column: 2; grid-row: 2;
    opacity: 1; transform: none; color: var(--text-mute);
  }
  .sel-item::after {
    content: ""; position: absolute; right: 6px; top: 50%;
    width: 8px; height: 8px; border-right: 2px solid var(--text-mute);
    border-bottom: 2px solid var(--text-mute);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .35s var(--ease), border-color .3s var(--ease);
  }

  /* Open state - row and panel read as one block */
  .sel-item[aria-selected="true"] {
    padding-left: 16px;
    border-left-color: var(--accent);
    border-bottom-color: transparent;
    background: linear-gradient(90deg, var(--accent-soft), transparent 62%);
  }
  .sel-item[aria-selected="true"] .n,
  .sel-item[aria-selected="true"] em { color: var(--accent-text); }
  .sel-item[aria-selected="true"]::after {
    transform: translateY(-20%) rotate(-135deg); border-color: var(--accent-text);
  }

  .sel-list .sel-pane { display: none; }
  .sel-list .sel-pane.on {
    display: block;
    padding: 4px 16px 22px;
    border-left: 2px solid var(--accent);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, var(--accent-soft), transparent 62%);
  }

  /* The row above already gives the name and the role - do not repeat them */
  .sel-list .sel-pane h3,
  .sel-list .sel-pane .p-role { display: none; }

  .sel-list .sel-pane p { font-size: .93rem; line-height: 1.7; max-width: none; }
  .sel-list .sel-pane ul { gap: 9px; margin-top: 16px; }
  .sel-list .sel-pane li { padding-left: 20px; font-size: .89rem; line-height: 1.6; }
  .sel-list .sel-pane li::before { left: 0; top: .55em; width: 6px; height: 6px; }
  .sel-list .sel-pane .p-foot {
    margin-top: 18px; padding-top: 14px; font-size: .73rem;
    line-height: 1.65; opacity: .85;
  }
}

/* ---------- 10. Kill hover-only affordances on touch ---------- */
@media (hover: none) {
  .card:hover, .post:hover, .pager a:hover,
  .contact-card:hover, .btn:hover { transform: none; }
  .post:hover .post-thumb img { filter: none; }
  .led:hover { background: none; }
  .idx:hover::before { opacity: 0; }
  .idx:hover .idx-arrow { transform: none; background: none; color: var(--text-mute); border-color: var(--line); }
  .btn::after { display: none; }
}

/* ---------- 11. Landscape phones ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 24px) 40px; }
  .drawer { padding-top: calc(var(--nav-h) + 12px); }
  .drawer a.d-link { padding: 12px 2px; min-height: 0; font-size: 1.2rem; }
}

/* ---------- 12. Touch-device cleanups ---------- */
@media (hover: none) {
  /* "/" to focus is a keyboard hint; there is no keyboard here */
  .kbd { display: none; }
  .search-field input { padding-right: 18px; }
}

@media (max-width: 640px) {
  /* Full-width buttons are easier to hit than centred pills */
  .cta-band .btn,
  .spotlight .btn,
  .subscribe .btn,
  .console-empty .btn { width: 100%; }
  .cta-band .flex, .spotlight .flex { flex-direction: column; align-items: stretch; }
  .spotlight { padding: 26px 22px; }
  .spotlight .models { gap: 7px; }
  .cta-band { padding: 32px 22px; }

  /* Blog toolbar stacks cleanly */
  .blog-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .blog-toolbar .search-field { flex: 0 0 auto; max-width: none; }
  .console-count { text-align: left; }
  .console-top { padding: 14px; gap: 10px; }
  .console-top .search-field { flex: 1 1 100%; }

  .subscribe { padding: 30px 22px; }
  .subscribe .lede { margin-inline: 0; }

  /* Reading list rows */
  .readlist a { padding: 16px 18px; gap: 12px; }
  .readlist b { font-size: .95rem; }
}

/* ---------- 13. Last few sub-11px labels + small tap targets ---------- */
@media (max-width: 760px) {
  .code-top span { font-size: .7rem; }
  .copy-btn { font-size: .72rem; padding: 9px 14px; }   /* was a 26px-tall target */
  .pager a small { font-size: .72rem; }
  .post-thumb .cat-tag { font-size: .7rem; padding: 6px 12px; }
  .crumbs { font-size: .76rem; }
  .tl-year { font-size: .78rem; }
}

/* ============================================================
   14. Sections that needed a real mobile layout, not just stacking
   ============================================================ */

/* ---- Home: "How the work moves" ----
   .focus-row is declared in pages.css, which loads after main.css, so its
   breakpoint has to live here or the two-column grid survives to 320px. */
@media (max-width: 1024px) {
  .focus-row {
    grid-template-columns: 1fr;
    gap: clamp(26px, 5vw, 44px);
    align-items: start;
  }
}

@media (max-width: 700px) {
  /* Accelerated / Deliberate: hairline rows instead of a boxed grid */
  .split { gap: 0; background: transparent; border: 0; border-radius: 0; }
  .split > div {
    padding: 20px 0; background: transparent;
    border-top: 1px solid var(--line);
  }
  .split > div:hover { background: transparent; }
  .split .tag { margin-bottom: 9px; }
  .split h3 { font-size: 1.04rem; }
  .split p { font-size: .9rem; }

  /* The pipeline sheds its card: a panel inside a padded page inside a padded
     card was spending 60px of a 375px screen on nothing but insets. */
  .focus-row > .card {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    border-top: 1px solid var(--line);
    padding: 26px 0 0;
  }
  .focus-row > .card:hover { transform: none; box-shadow: none; }
  .focus-row > .card::before { display: none; }

  .pipeline { padding-left: 26px; margin-top: 20px; }
  .pipeline::before { left: 9px; }
  .pipeline::after { left: 6px; width: 7px; height: 7px; }
  .pl-step { padding-bottom: 21px; }
  .pl-step::before { left: -24px; top: 4px; width: 11px; height: 11px; }
  .pl-step b { font-size: .97rem; margin-bottom: 3px; }
  .pl-step span { font-size: .86rem; line-height: 1.62; }
}

/* ---- Home: "The leverage" ----
   Name over role, so long entries like "Copilot & Cursor" cannot collide
   with their label. The role is always visible, not only when selected. */
@media (max-width: 940px) {
  .sel-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center; row-gap: 2px;
    padding: 15px 34px 15px 0;
  }
  .sel-item .n { grid-row: 1 / 3; align-self: center; }
  .sel-item b { grid-column: 2; grid-row: 1; line-height: 1.25; }
  .sel-item em {
    grid-column: 2; grid-row: 2;
    opacity: 1; transform: none; color: var(--text-mute);
  }
  .sel-item[aria-selected="true"] { padding-left: 14px; }
  .sel-item[aria-selected="true"] em { color: var(--accent-text); }
}

/* ---- About: "The long version" ---- */
@media (max-width: 1024px) {
  .focus-row > .prose { font-size: 1rem; }
  .focus-row > .prose > * + * { margin-top: 1.1em; }
}

/* ---- Stack: "Underneath the tools" ---- */
@media (max-width: 700px) {
  .focus-row > .creed { gap: 22px; }
  .focus-row .btn { width: 100%; }
}

/* ============================================================
   15. Footer - rebuilt for a phone
   ============================================================ */
@media (max-width: 620px) {
  .footer { padding-block: 44px 22px; }
  .footer-grid { gap: 0; }

  /* Brand block sits above a rule, links below it */
  .footer-grid > *:first-child {
    grid-column: 1 / -1;
    padding-bottom: 26px; margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
  }
  .footer-grid > *:first-child .lede {
    font-size: .92rem; line-height: 1.65; margin-top: 14px; max-width: none;
  }
  .footer-grid > *:first-child .socials { margin-top: 20px; }

  .footer h4 { margin-bottom: 6px; }
  .footer-links a { overflow-wrap: anywhere; }

  .footer-bottom {
    margin-top: 28px; padding-top: 20px;
    flex-direction: column; align-items: flex-start; gap: 6px;
    line-height: 1.6;
  }
}

/* Two link columns as soon as there is room for them */
@media (min-width: 400px) and (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .footer-links a { font-size: .9rem; padding: 8px 0; }
  .footer-grid > *:nth-child(3) p { font-size: .72rem; margin-top: 18px !important; }
}

/* Below that, one column with rules between the groups */
@media (max-width: 399px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > *:nth-child(3) {
    padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line);
  }
}

/* ============================================================
   16. Domain experience — tiles + dossiers
   ============================================================ */
@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles > *:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .tiles > *:nth-child(n + 3) { border-top: 1px solid var(--line); }

  /* Rail sits above the body once there is no room beside it */
  .dossier { grid-template-columns: 1fr; gap: 14px; }
  .dsr-index { position: static; font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .dsr-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .tiles > * {
    border-left: 0 !important; padding-left: 0 !important;
    border-top: 1px solid var(--line); padding-block: 22px;
  }
  .tiles > *:first-child { border-top: 0; padding-top: 4px; }

  .dossier { padding-block: 34px; }
  .dossier h2 { font-size: clamp(1.45rem, 7vw, 1.9rem); margin: 12px 0 12px; }
  .dsr-lead { font-size: 1rem; }
  .dsr-meta { font-size: .72rem; gap: 7px 10px; }
  .dsr-live { margin-left: 0; }
  .dsr-narrative p { font-size: .94rem; }
  .dsr-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
  .dsr-signals > div { padding: 12px 14px; }
  .dsr-signals b { font-size: .88rem; }
  .dsr-scope li { font-size: .88rem; padding-block: 10px; }
  .dsr-tags span { font-size: .72rem; padding: 7px 12px; }

  /* Long stagger chains feel broken when you are already scrolled past them */
  .dsr-scope li, .dsr-tags span { transition-delay: calc(var(--i) * 22ms + .1s); }
}