/* =====================================================================
   Sprezzatura — site stylesheet (flattened, dependency-free).
   Base reset + progressive-enhancement reveal fallback + responsive layer.
   ===================================================================== */

/* ---------- Base (from original design head) ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: #F4F5F6; }
::selection { background: #16181C; color: #F4F5F6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---------- Reveal fallback ----------
   Content is fully visible if JS is off or fails; the animation is a pure
   enhancement applied by app.js. (Inline opacity:0 states in the markup are
   overridden here whenever the 'no-js' class is present.) */
html.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Tablet ( <=1024px ) ---------- */
@media (max-width: 1024px) {
  .r-padx    { padding-left: 34px !important; padding-right: 34px !important; }
  .r-grid-3,
  .r-grid-4  { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Phone ( <=760px ) ---------- */
@media (max-width: 760px) {
  html, body   { overflow-x: hidden; }
  .r-padx      { padding-left: 20px !important; padding-right: 20px !important; }
  .r-grid      { grid-template-columns: 1fr !important; }
  .r-grid > *  { border-right: none !important; }
  .r-biggap    { gap: 34px !important; }
  .r-bighead   { font-size: clamp(30px, 8vw, 46px) !important; line-height: 1.06 !important; }
  .r-left48    { left: 20px !important; }
  input, textarea, select { width: 100% !important; }

  #home-nav { padding-left: 20px !important; padding-right: 20px !important; }
  /* Desktop links/CTA are swapped for the burger ONLY when JS built it
     (html.has-mobile-nav). Without JS the links stay visible as a fallback. */
  html.has-mobile-nav #home-nav > div            { display: none !important; }
  html.has-mobile-nav #home-nav > a:last-of-type { display: none !important; }
}

/* ---------- Mobile menu (built by app.js) ---------- */
.r-burger { display: none; }
.r-menu   { display: none; }

@media (max-width: 760px) {
  .r-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed; top: 12px; right: 16px; z-index: 120;
    width: 44px; height: 44px; padding: 11px;
    background: transparent; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .r-burger span {
    display: block; width: 100%; height: 1.5px; background: #16181C;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
  }
  .r-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .r-burger.open span:nth-child(2) { opacity: 0; }
  .r-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .r-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 110;
    background: rgba(244,245,246,0.98);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: 104px 26px max(34px, env(safe-area-inset-bottom)) 26px;
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.2,.7,.2,1);
  }
  .r-menu.open { transform: none; }
  .r-menu a {
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 30px;
    letter-spacing: -0.02em; color: #16181C !important;
    padding: 16px 0; border-bottom: 1px solid rgba(22,24,28,0.08);
  }
  .r-menu a.r-menu-cta {
    margin-top: 26px; border: none; text-align: center;
    font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.1em;
    text-transform: uppercase; background: #16181C; color: #F4F5F6 !important;
    padding: 18px; border-radius: 999px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-menu        { transition: none; }
  .r-burger span { transition: none; }
}