/* Mobile composition. Desktop identity and layout remain in the existing stylesheets. */
@media (max-width: 1024px) {
  #nav .preview-tools {
    position:static;inset:auto;display:grid;grid-template-columns:1fr 1fr;
    width:100%;max-width:none;margin:12px 0 0;padding:14px 0 0;
    border:0;border-top:1px solid var(--line);background:none;box-shadow:none;backdrop-filter:none;
  }
  #nav .preview-tools button {justify-content:space-between;min-height:48px;padding:10px 12px;font-size:12px;color:#B6C7D2}
  #nav .preview-tools button:first-child {padding-left:0}
  #nav .preview-tools button+button {border-left:1px solid var(--line)}
  .site-header nav {background:rgba(8,14,19,.98);padding-bottom:20px}
}

@media (max-width: 760px) {
  html {scroll-padding-top:88px}
  .site-header,.site-header.is-scrolled {
    min-height:calc(72px + env(safe-area-inset-top));height:auto;
    padding:calc(10px + env(safe-area-inset-top)) max(24px,var(--safe-right)) 10px max(24px,var(--safe-left));gap:16px;
  }
  .wordmark img {width:200px}
  .menu-toggle {font-size:13px;gap:16px;min-height:44px;padding:8px 0 8px 8px}
  .site-header nav {padding-inline:max(24px,var(--safe-left)) max(24px,var(--safe-right));max-height:calc(100dvh - 80px - env(safe-area-inset-top) - var(--safe-bottom))}
  .hero {display:flex;flex-direction:column;min-height:0;height:auto;padding-bottom:24px;max-height:none}
  .hero-copy {order:1;width:100%;padding:calc(104px + env(safe-area-inset-top)) max(24px,var(--safe-right)) 0 max(24px,var(--safe-left))}
  .hero .eyebrow {font-size:9px;letter-spacing:.13em;line-height:1.6;gap:10px;max-width:none}
  .hero .short-rule {width:18px}
  .hero h1 {font-size:clamp(27px,8.25vw,45px);line-height:1.11;letter-spacing:-.035em;margin:20px 0 18px;overflow-wrap:anywhere}
  .hero h1>span {display:inline}
  .hero-intro {font-size:16px;line-height:1.55;max-width:30em;margin:0 0 24px;color:#BFCED9}
  .hero .button.primary {display:flex;width:100%;min-height:52px;padding:14px 18px;background:var(--blue);color:#06121B;border-color:var(--blue);font-size:13px}
  .hero .button.primary:hover {background:#C7EDFF}
  .hero-signature {position:relative;order:2;inset:auto;width:clamp(224px,66vw,310px);align-self:center;flex-shrink:0;margin:8px 0 0;opacity:1}
  .hero-signature>.orbital-art {width:100%;height:auto}
  .hero-signature::before {content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(ellipse,rgba(8,10,13,.72) 0%,rgba(8,10,13,.46) 35%,transparent 69%);pointer-events:none}
  .signature-coordinate,.hero-coordinate {display:none}
  .hero-image {background-position:62% calc(100% + 130px);opacity:.8}
  .hero-shade {background:linear-gradient(180deg,#080A0D 0%,rgba(8,10,13,.93) 40%,rgba(8,10,13,.22) 70%,#080A0D 100%)}
  .hero-bottom {position:relative;order:3;inset:auto;margin:2px max(24px,var(--safe-right)) 0 max(24px,var(--safe-left));padding:12px 0 0;gap:0}
  .hero-bottom p {display:none}
  .scroll-cue {width:100%;justify-content:space-between;font-size:9px;letter-spacing:.16em;min-height:40px;color:#9FB5C4}
  .scroll-cue>span:last-child {font-size:18px}

  /* Give each section a deliberate reading rhythm and put controls near their result. */
  .section-wrap {padding:64px max(24px,var(--safe-right)) 64px max(24px,var(--safe-left))}
  .section-heading {margin-bottom:32px}
  .section-heading h2,.case-top h2,.observatory-heading h2 {font-size:clamp(29px,8.1vw,38px);line-height:1.16;letter-spacing:-.045em;text-wrap:balance}
  .section-heading>p:last-child {font-size:15px;line-height:1.7}
  .gravity-sticky {display:flex;flex-direction:column;align-items:stretch;padding:64px max(24px,var(--safe-right)) 54px max(24px,var(--safe-left));gap:24px}
  .gravity-copy {order:0;scroll-margin-top:88px}
  .gravity-copy h2 {font-size:clamp(29px,8vw,38px);line-height:1.16;text-wrap:balance}
  .gravity-copy>p:last-child {font-size:15px;line-height:1.7}
  .chapter-number {margin:20px 0 14px}
  .chapter-tabs {order:1;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;width:100%}
  .chapter-tabs button {font-size:12px;line-height:1.4;min-height:68px;padding:12px 0 10px}
  .chapter-tabs button span {font-size:10px;margin-bottom:5px}
  .orbit-visual {order:2;width:min(100%,290px);align-self:center;margin-top:0}
  .asset-node text {display:none}
  .engine-card,.engine-card+.engine-card {padding:26px 0 22px}
  .engine-card h3 {font-size:26px;margin:17px 0 12px}
  .engine-card>p {font-size:15px;line-height:1.65;min-height:0}
  .engine-card ul {font-size:12px;line-height:1.9;margin:15px 0 20px}
  .engine-card button {min-height:48px;font-size:13px;padding:14px 0 0}
  .engine-note {line-height:1.7;margin-top:20px}
  .asset-tabs {border:0;gap:8px}
  .asset-tabs button,.asset-tabs button:first-child {border:1px solid var(--line);padding:12px 10px;font-size:12px;min-height:48px}
  .asset-tabs button:nth-child(odd),.asset-tabs button:nth-child(-n+2) {border:1px solid var(--line)}
  .asset-tabs button[aria-selected="true"] {border-color:#8BC6E6;background:#132632;box-shadow:none}
  .flywheel-panel {padding-top:28px;gap:28px}
  .asset-details {order:0;padding-top:0}
  .asset-details h3 {font-size:28px;line-height:1.2;margin:14px 0 18px;text-wrap:balance}
  .system-list {margin:20px 0 24px}
  .system-list li {font-size:13px;line-height:1.65}
  .flywheel-map {order:1;width:min(100%,300px);height:auto;min-height:0;aspect-ratio:640/570;margin:0 auto}
  .map-label {max-width:145px}
  .map-label strong {font-size:11px;line-height:1.4}
  .map-label span {font-size:8px;line-height:1.5;margin-bottom:4px}
  .map-origin {bottom:24%}
  .map-destination {top:8%}
  .map-caption {font-size:8px;letter-spacing:.12em}
  .case-top {margin-bottom:28px}
  .case-body {gap:24px}
  .case-tabs {display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:5px}
  .case-tabs button {flex:0 0 86px;min-height:66px;padding:12px 0;text-align:left;scroll-snap-align:start}
  .case-tabs button,.case-tabs button span,.case-tabs button:nth-child(3) span {font-size:11px}
  .case-tabs button span {margin-top:8px}
  #caseDetail {margin-top:10px;padding:24px 20px;min-height:0}
  #caseDetail h3 {font-size:23px;line-height:1.25}
  .observatory-heading {margin-bottom:30px}
  .article-grid {gap:24px}
  .article-card {min-height:0;padding:23px 0 20px}
  .article-card h3 {font-size:25px;line-height:1.2;margin:20px 0 12px;text-wrap:balance}
  .article-card p {font-size:14px;line-height:1.65}
  .article-link {padding-top:24px;font-size:12px}
  .conversation {min-height:0;padding:68px max(24px,var(--safe-right)) 64px max(24px,var(--safe-left))}
  .conversation-content h2 {font-size:clamp(31px,8.5vw,42px);line-height:1.16;letter-spacing:-.045em;margin:22px 0}
  .conversation-content>p:not(.eyebrow) {font-size:15px;line-height:1.7;margin-bottom:26px}
  .conversation-actions {gap:12px}
  .conversation-actions .button {width:100%;font-size:13px;padding-inline:17px}
  .site-footer {padding:40px max(24px,var(--safe-right)) calc(32px + var(--safe-bottom)) max(24px,var(--safe-left))}
  .footer-wordmark img {width:230px}
  .footer-top p {font-size:9px;line-height:1.7;margin-top:12px}
  .footer-bottom {margin-top:26px;padding-top:20px;gap:8px;font-size:12px}
  .footer-bottom>span {margin-bottom:4px}

  /* The case study is a reading page. Keep its symbol quiet and controls in flow. */
  .case-header {row-gap:8px}
  .case-hero {padding-top:32px}
  .hero-story {padding-bottom:30px}
  .hero-story h1 {font-size:clamp(27px,7.6vw,34px);line-height:1.15;letter-spacing:-.04em;margin:20px 0}
  .case-deck {font-size:22px;line-height:1.4;letter-spacing:-.035em}
  .hero-summary {font-size:15px;line-height:1.75;margin-top:22px}
  .hero-orbit {opacity:.1;width:220px;right:-65px;top:25px}
  .case-motion-tools {position:static;inset:auto;margin-top:12px}
  .case-motion-tools button {background:transparent;border:0;border-bottom:1px solid var(--case-line);padding:8px 0;font-size:11px;color:#94B4C9;gap:16px}
  .public-snapshot {padding-top:24px;padding-bottom:28px;gap:24px 16px}
  .public-snapshot strong {font-size:26px}
  .case-section {padding-top:60px;padding-bottom:60px}
  .section-marker {margin-bottom:24px}
  .section-two-column {gap:25px}
  .section-two-column h2 {font-size:31px;line-height:1.2;text-wrap:balance}
  .work-intro,.system-intro,.platform-intro {margin-bottom:28px}
  .work-sequence {gap:28px}
  .work-sequence h3 {font-size:22px;margin:16px 0 12px}
  .system-grid>li {padding:25px 22px}
  .system-grid h3 {font-size:24px;margin:16px 0 14px}
  .platform-links>a {padding:24px 0;gap:12px 16px}
  .platform-links h3 {font-size:23px}
  .takeaway-actions {gap:18px}
  .case-button {width:100%}
  .case-footer {padding-top:32px}
}

@media (max-width: 540px) {
  .case-explorer::before {content:"Swipe to explore →";display:block;margin-bottom:12px;text-align:right;font-size:9px;letter-spacing:.1em;color:#8FADBF}
  .case-tabs {padding-right:18px;mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
}

@media (max-width: 360px) {
  .wordmark img {width:174px}
  .site-header,.site-header.is-scrolled {column-gap:12px}
  .menu-toggle {font-size:12px;gap:12px}
  .hero h1 {font-size:26px}
  .hero-intro {font-size:15px}
  .hero-signature {width:224px}
  .hero .eyebrow {font-size:8px}
}

@media (min-width:761px) and (max-width:1024px) and (max-height:600px) {
  .hero {min-height:510px}
  .hero-copy {width:61%;padding-top:100px;padding-bottom:100px}
  .hero h1 {font-size:34px;line-height:1.12;margin:18px 0}
  .hero h1>span {display:inline}
  .hero-intro {font-size:15px;margin-bottom:20px}
  .hero-signature {width:40vw;top:95px;right:0}
  .hero-bottom {bottom:24px;padding-top:16px}
}