/* Desktop enhancement layer. Mobile rules remain owned by styles.css. */
.experience-toolbar { display: none; }

@media (min-width: 900px) {
  .experience-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 42px;
  }

  .experience-hint {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--muted);
    font: 700 9px/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
  }

  .experience-hint i {
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, var(--acid), transparent);
  }

  .experience-actions {
    display: grid;
    grid-template-columns: 54px minmax(92px, auto) 54px;
    align-items: stretch;
    border: 1px solid var(--line-strong);
  }

  .experience-actions button {
    min-height: 50px;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: 500 21px/1 var(--mono);
    transition: color .25s, background .25s, opacity .25s;
  }

  .experience-actions button + span,
  .experience-actions span + button { border-left: 1px solid var(--line); }
  .experience-actions button:hover:not(:disabled) { color: var(--bg); background: var(--acid); }
  .experience-actions button:disabled { opacity: .28; cursor: default; }

  #experience-progress {
    display: grid;
    place-items: center;
    color: var(--acid);
    font: 700 9px/1 var(--mono);
    letter-spacing: .12em;
  }

  .experience-rail {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    cursor: grab;
  }

  .experience-rail::-webkit-scrollbar { display: none; }
  .experience-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .experience-card { scroll-snap-align: start; }
}

@media (min-width: 1200px) {
  :root {
    --shell: min(1760px, calc(100vw - 96px));
    --radius: 26px;
  }

  body { font-size: 17px; }
  .section-index { font-size: 12px; }

  .site-header { height: 96px; padding-inline: 48px; }
  .brand { gap: 15px; }
  .brand__mark { width: 54px; height: 54px; font-size: 12px; }
  .brand__copy strong { font-size: 15px; }
  .brand__copy small { font-size: 9px; }
  .desktop-nav { gap: 44px; }
  .desktop-nav a { font-size: 12px; }
  .index-status { font-size: 10px; }
  .header-link { min-height: 48px; padding-inline: 20px; font-size: 11px; }

  .hero {
    min-height: max(900px, 100svh);
    padding: 154px 48px 40px;
  }
  .hero__grid { inset-block-start: 96px; background-size: 8vw 8vw; }
  .hero__meta { grid-template-columns: 1fr minmax(360px, 560px); gap: 64px; }
  .hero__meta > p:last-child { font-size: 15px; }
  .eyebrow { font-size: 11px; }
  .hero__title { margin-block: 74px 42px; font-size: clamp(118px, 13.2vw, 276px); }
  .hero__orbit { top: 18%; right: 3.5vw; width: min(43vw, 760px); }
  .hero-core small { font-size: 8px; }
  .hero-node { width: 184px; min-height: 88px; padding: 16px; }
  .hero-node small { font-size: 8px; }
  .hero-node strong { font-size: 14px; }
  .hero__footer > div, .hero__cta { min-height: 116px; padding: 26px 24px; }
  .hero__footer strong { font-size: 40px; }
  .hero__footer span { font-size: 11px; }
  .hero__cta { font-size: 12px; }

  .manifest { padding-block: 180px 160px; }
  .manifest__grid { gap: 8vw; margin-top: 54px; }
  .manifest h2 { max-width: 1180px; font-size: clamp(58px, 6.2vw, 112px); }
  .manifest__copy > p { font-size: 18px; }
  .manifest__tags span { padding: 11px 15px; font-size: 9px; }

  .atlas { padding-block: 110px 170px; }
  .systems, .index-section, .experiences { padding-block: 150px 170px; }
  .atlas__head, .systems__head, .index-section__head, .experiences__head {
    grid-template-columns: minmax(0, 1.35fr) minmax(390px, .65fr);
    gap: 90px;
  }
  .atlas__head h2, .systems__head h2, .index-section__head h2, .experiences__head h2,
  .matrix__header h2, .about__copy h2, .contact-section h2 {
    font-size: clamp(68px, 7.2vw, 132px);
  }
  .atlas__head > p, .systems__head > p, .experiences__head > p { font-size: 17px; }
  .atlas-shell { margin-top: 66px; }
  .search-box { min-height: 80px; padding-inline: 24px; }
  .search-box input { font-size: 16px; }
  .view-button { min-width: 112px; font-size: 10px; }
  .category-button { min-height: 58px; padding-inline: 22px; font-size: 9px; }
  .atlas-stage { min-height: clamp(800px, 72vh, 1040px); }
  .atlas-hud { padding: 15px 17px; }
  .atlas-hud small { font-size: 8px; }
  .atlas-hud strong { font-size: 11px; }
  .atlas-reset { min-height: 42px; padding-inline: 16px; font-size: 9px; }
  .atlas-list { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 22px; }
  .atlas-list-item { min-height: 138px; padding: 18px; }
  .atlas-list-item__mark { width: 44px; height: 44px; font-size: 11px; }
  .atlas-list-item strong { font-size: 15px; }

  .featured-grid { gap: 20px; margin-top: 68px; }
  .feature-card { min-height: 510px; padding: 34px; }
  .feature-card h3 { margin-top: 78px; font-size: clamp(52px, 4.7vw, 92px); }
  .feature-card > p { font-size: 16px; }
  .feature-flow { left: 34px; right: 34px; bottom: 34px; gap: 8px; }
  .feature-flow span { padding-block: 13px; font-size: 8px; }

  .project-grid { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 58px; }
  .project-card { min-height: 410px; padding: 27px; }
  .project-card h3 { margin-top: 76px; font-size: 42px; }
  .project-card p { max-width: 92%; font-size: 15px; }
  .project-card__bottom { left: 27px; right: 27px; bottom: 24px; }
  .project-card__stack span { font-size: 8px; }

  .matrix { padding-block: 155px 180px; }
  .matrix__header { gap: 120px; }
  .matrix__header p { font-size: 17px; }
  .matrix-table { margin-top: 78px; }
  .matrix-row { min-height: 108px; font-size: 10px; }

  .experience-toolbar { margin-top: 56px; }
  .experience-rail {
    gap: 24px;
    padding: 30px max(48px, calc((100vw - min(1760px, calc(100vw - 96px))) / 2)) 90px;
  }
  .experience-card {
    flex-basis: min(74vw, 1240px);
    min-height: 690px;
    padding: 40px;
  }
  .experience-card__meta { font-size: 10px; }
  .experience-card h3 { left: 40px; bottom: 154px; max-width: 78%; font-size: clamp(82px, 7.6vw, 154px); }
  .experience-card p { left: 42px; bottom: 42px; max-width: 720px; font-size: 16px; }
  .experience-card__code { right: 40px; bottom: 40px; font-size: 14px; }

  .about { padding-block: 175px; }
  .about__grid { grid-template-columns: .82fr 1.18fr; gap: 8vw; }
  .about__portrait { min-height: 760px; }
  .about__copy > p:not(.section-index) { font-size: 20px; }
  .about__columns span { font-size: 15px; }
  .about__links a { min-width: 170px; min-height: 58px; font-size: 10px; }

  .contact-section { padding-block: 170px 195px; }
  .contact-section__grid p { font-size: 17px; }
  .contact-button { min-height: 80px; font-size: 11px; }
  .detail-drawer { width: min(720px, 100vw); }
  .drawer-scroll { padding: 108px 54px 54px; }
}

@media (min-width: 1680px) {
  .hero__orbit { right: 5vw; }
  .atlas-stage { min-height: 930px; }
  .experience-card { flex-basis: min(68vw, 1320px); min-height: 740px; }
  .project-card { min-height: 440px; }
}