/* ATLAS WORLDS — RESPONSIVE
   Breakpoints:
     1200px  — tablet landscape / small desktop
     1000px  — tablet portrait
     768px   — large phones / small tablets
     560px   — phones
     380px   — very small phones
*/

/* ---------- FLUID TYPE & SPACING ROOT ---------- */
@media (max-width: 1200px) {
  :root {
    --gutter: clamp(18px, 3.5vw, 40px);
  }
  .wrap { padding: 0 var(--gutter); }
}

/* ---------- TABLET LANDSCAPE ---------- */
@media (max-width: 1200px) {
  .hero-title { font-size: clamp(72px, 10vw, 140px) !important; }
  .top nav { gap: 22px; }
  .top nav a { font-size: 10px; letter-spacing: 0.18em; }
  #about .grid { gap: 48px; }
  #projects .feature { gap: 40px; }
  #team .members { gap: 32px; }
}

/* ---------- TABLET PORTRAIT ---------- */
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr !important;
    padding: 110px var(--gutter) 80px !important;
    gap: 40px;
  }
  .hero-seal {
    margin: 0 auto;
    max-width: 380px;
    justify-self: center;
  }
  .hero-right { justify-self: center; }
  .scroll-hint { display: none; }
  .france-seal { flex-wrap: wrap; }

  #about .grid,
  #projects .feature,
  #contact .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }
  #projects .feature .visual {
    order: -1;
    max-width: 600px;
    margin: 0 auto;
  }

  .values { grid-template-columns: repeat(2, 1fr); }
  .values .val {
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .values .val:nth-child(2n) { border-right: none; }

  #approach .approach-grid { grid-template-columns: 1fr; gap: 40px; }

  #team .members { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  footer .ft-top { grid-template-columns: 1fr 1fr; }

  /* Backdrop decor — reduce density */
  .bd-compass { width: 140px; height: 140px; top: 80px; right: 14px; }
  .bd-fleur { font-size: 200px; bottom: 20px; left: 20px; }
  .bd-coord { font-size: 9px; }
  .bd-coord-tr { top: 260px; }
}

/* ---------- LARGE PHONES / SMALL TABLETS ---------- */
@media (max-width: 768px) {
  body { font-size: 17px; }

  /* Nav */
  .top { padding: 14px var(--gutter); }
  .top .brand img { width: 36px; height: 36px; }
  .top .brand .name { font-size: 13px; letter-spacing: 0.14em; }
  .top .brand .name small { font-size: 8px; letter-spacing: 0.22em; }
  .top nav { display: none; }
  .top .util { margin-left: auto; }
  .top .burger { display: inline-flex; }

  /* Hero */
  .hero { padding: 96px var(--gutter) 60px !important; }
  .hero-mark { font-size: 10px; letter-spacing: 0.26em; }
  .hero-title { font-size: clamp(56px, 13vw, 96px) !important; line-height: 0.95; }
  .hero-lead { font-size: 18px; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-meta .m-item { width: 100%; }
  .hero-ctas { flex-wrap: wrap; gap: 10px; }
  .hero-ctas .btn { width: 100%; justify-content: space-between; }
  .hero-seal { max-width: 280px; }

  /* Sections */
  section.editorial { padding: 80px 0 !important; }
  #about, #projects, #approach, #team, #devlog, #contact {
    padding-top: 80px !important;
    padding-bottom: 70px !important;
  }
  .sec-head {
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin-bottom: 40px !important;
  }
  .sec-head .num { font-size: 48px !important; }
  .sec-head .title { font-size: clamp(36px, 8vw, 56px) !important; line-height: 1; }
  .sec-head .meta { justify-self: start; font-size: 10px; }

  /* Values */
  .values { grid-template-columns: 1fr; }
  .values .val { border-right: none !important; padding: 28px 0; }

  /* Projects */
  #projects .feature h3 { font-size: clamp(44px, 10vw, 72px); }
  #projects .specs { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Team */
  #team .members { grid-template-columns: 1fr 1fr; gap: 20px; }
  #team .member .portrait { max-width: 220px; }
  #team .member.is-founder { grid-column: span 1; }
  #team .member h4 { font-size: 22px; }
  #team .member .role { font-size: 12px; }

  /* Devlog */
  #devlog .entry {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 24px 0;
  }
  #devlog .entry .date { font-size: 11px; }
  #devlog .entry h4 { font-size: 22px; }
  #devlog .entry .arrow { display: none; }

  /* Contact */
  #contact .channels { grid-template-columns: 1fr; }
  #contact .channel { padding: 24px; }

  /* Footer */
  footer .ft-top { grid-template-columns: 1fr; gap: 32px; }
  footer .ft-bot {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
  }

  /* Backdrop — dial down */
  .bd-nebula { filter: blur(70px); opacity: 0.35; }
  .bd-compass { display: none; }
  .bd-corner { width: 70px; height: 70px; }
  .bd-coord-tl, .bd-coord-tr { font-size: 8px; }
  .bd-coord-bl, .bd-coord-br { display: none; }
  .bd-fleur { font-size: 150px; opacity: 0.025; }
}

/* ---------- PHONES ---------- */
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }

  .hero-title { font-size: clamp(48px, 15vw, 80px) !important; }
  .hero-lead { font-size: 16px; line-height: 1.5; }

  .sec-head .num { font-size: 40px !important; }
  .sec-head .title { font-size: clamp(32px, 9vw, 48px) !important; }

  #projects .specs { grid-template-columns: 1fr; }
  #projects .feature h3 { font-size: clamp(40px, 12vw, 64px); }

  #team .members { grid-template-columns: 1fr; }
  #team .member .portrait { max-width: 320px; margin: 0 auto; }
  #team .member h4 { text-align: center; }
  #team .member .role, #team .member .tag { text-align: center; }

  #about .sidebar { padding: 24px; }
  #about .sidebar dl { grid-template-columns: 1fr; gap: 8px; }
  #about .sidebar dt { margin-top: 12px; }

  .france-seal { font-size: 10px; gap: 8px; }

  /* Backdrop — minimal */
  .bd-nebula-3 { display: none; }
  .bd-corner-bl, .bd-corner-br { display: none; }
}

/* ---------- VERY SMALL ---------- */
@media (max-width: 380px) {
  .top .brand .name small { display: none; }
  .hero-title { font-size: 44px !important; }
  .sec-head .title { font-size: 28px !important; }
  .hero-ctas .btn { font-size: 12px; padding: 12px 16px; }
}

/* ---------- LANDSCAPE PHONE ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto !important; padding: 80px var(--gutter) 60px !important; }
  .hero-title { font-size: 72px !important; }
  .scroll-hint { display: none; }
}

/* ---------- TOUCH DEVICES — disable hover-only effects ---------- */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none !important; }
  #team .member .portrait { transform: none !important; }
  .top nav a::after { display: none; }
}