/* Phone and tablet layouts retain the artwork and natural document flow. */
@media (max-width: 999px) {
  .site-header, .editorial-page .site-header {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    height: 64px;
    padding: 10px 14px;
    gap: 16px;
    border: 1px solid rgba(220, 214, 255, .22);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(125, 108, 175, .16), rgba(33, 34, 52, .12)), rgba(12, 15, 25, .72);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 26px rgba(0, 0, 0, .15);
  }
  .site-header .brand { gap: 8px; font-size: 23px; font-weight: 500; line-height: 1; letter-spacing: -.8px; min-height: 44px; }
  .site-header .brand img { width: 29px; height: 29px; flex-shrink: 0; }
  .site-header .mobile-nav summary { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 82px; min-height: 44px; padding: 10px; font-size: 13px; line-height: 1; border-radius: 10px; background: rgba(240, 243, 245, .05); list-style: none; }
  .site-header .mobile-nav summary::-webkit-details-marker { display: none; }
  .menu-icon { position: relative; width: 17px; height: 12px; display: block; }
  .menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; width: 17px; height: 1px; background: currentColor; transition: transform .18s ease; }
  .menu-icon::before { top: 3px; }
  .menu-icon::after { top: 9px; }
  .mobile-nav[open] .menu-icon::before { transform: translateY(3px) rotate(45deg); }
  .mobile-nav[open] .menu-icon::after { transform: translateY(-3px) rotate(-45deg); }
  .site-header .mobile-nav nav {
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 14px;
    gap: 4px 12px;
    border: 1px solid rgba(220, 214, 255, .24);
    border-radius: 16px;
    background: linear-gradient(130deg, rgba(39, 36, 57, .97), rgba(16, 18, 29, .96));
    max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header .mobile-nav a { min-height: 48px; padding: 10px 12px; font-size: 14px; border-radius: 8px; }
  .site-header .mobile-nav a[aria-current="page"] { background: rgba(193, 169, 255, .1); }
  .site-header .mobile-nav a:last-child { color: #ff9b7e; }
  .hero-copy, .article-header, .blog-index .journal { padding-top: calc(118px + env(safe-area-inset-top, 0px)); }
  .hero h1, .article-header h1, .journal-heading h1 { text-wrap: balance; }
  .hero h1 { letter-spacing: -.018em; }
  .workflow-heading h2, .journal-heading h2, .candidate-story h2, .connected h2 { text-wrap: balance; }
  .motion-enabled .sequence-canvas { display: block; }
}

@media (max-width: 600px) {
  :root { --gutter: 24px; --header: 80px; }
  .hero h1 { font-size: clamp(43px, 12.9vw, 68px); line-height: 1.09; }
  .hero-copy { padding-bottom: 16px; }
  .hero-art { height: clamp(280px, 84vw, 420px); margin-top: -16px; }
  .hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#10121b, transparent 20%); pointer-events: none; }
  .hero h1 span { color: #d7c7ff; }
  .hero .actions { gap: 16px; }
  .hero .button { min-height: 56px; }
  .hero .text-link { min-height: 48px; }
  .problem h2, .aperture h2, .workflow-heading h2, .candidate-story h2, .review h2, .connected h2, .buyer-questions h2, .journal-heading h2, .journal-heading h1, .finale h2 {
    font-size: clamp(40px, 11.8vw, 62px);
    line-height: 1.1;
    letter-spacing: -.015em;
  }
  .problem { min-height: 0; }
  .problem-copy { padding-bottom: 320px; }
  .problem-art { height: 320px; }
  .aperture-stage { min-height: 0; }
  .aperture-copy { padding-bottom: 370px; }
  .motion-enabled .sequence-canvas { height: 370px; top: auto; bottom: 0; object-fit: cover; object-position: right center; }
  .aperture-bottom { bottom: 20px; align-items: flex-end; }
  .aperture-bottom > span:first-child { max-width: 180px; line-height: 1.5; }
  .aperture-bottom #motion-toggle { font-size: 10px; white-space: nowrap; }
  .workflow-role { font-size: 18px; line-height: 1.45; }
  .workflow-role small { font-size: 11px; }
  .step-links { gap: 26px; }
  .sheet { padding: 24px 20px; }
  .sheet h3 { font-size: clamp(29px, 8vw, 38px); }
  .candidate-story > .step-label { font-size: 10px; letter-spacing: .04em; }
  .candidate-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; }
  .candidate-steps button { align-items: flex-start; gap: 10px; padding: 16px 0; }
  .candidate-steps button > span { min-width: 15px; font-size: 11px; padding-top: 2px; }
  .candidate-steps button strong { font-size: 13px; }
  .candidate-steps button small { font-size: 11px; }
  .candidate-image-wrap { height: clamp(275px, 80vw, 390px); }
  .candidate-info { padding: 26px 22px; }
  .candidate-sheet-top { flex-wrap: wrap; gap: 5px 16px; }
  .candidate-sheet-top > span:last-child { font-size: 10px; }
  .candidate-sheet-bottom a { width: fit-content; max-width: 100%; }
  .connected-lede { font-size: 21px; line-height: 1.5; }
  .question-list summary { gap: 16px; font-size: 16px; }
  .question-list summary > span { flex-shrink: 0; }
  .journal-story h3 { font-size: 30px; line-height: 1.18; }
  .journal-side .journal-story { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; }
  .journal-side h3 { font-size: 24px; line-height: 1.2; }
  .journal-story p { font-size: 15px; }
  .journal-side p { font-size: 14px; }
  .journal-more strong { font-size: 17px; }
  .article-header h1 { font-size: clamp(36px, 10.8vw, 58px); line-height: 1.14; letter-spacing: -.015em; overflow-wrap: anywhere; }
  .article-header > p { font-size: 17px; line-height: 1.65; }
  .article-header > .text-link { margin-bottom: 28px; }
  .article-body { overflow-wrap: anywhere; }
  .article-body ul, .article-body ol { padding-left: 22px; }
  .article-body h2 { font-size: 29px; line-height: 1.2; }
  .footer-top nav > a, .footer-top nav > button { min-height: 44px; font-size: 13px; }
  .footer-top nav h2 { font-size: 13px; }
  .footer-base, .footer-brand > .text-link { font-size: 12px; }
  .footer-base > a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-icon::before, .menu-icon::after { transition: none; }
}