/* ---------------------------------------------------------------------------
   The Study · German volumes — mobile adaptation layer.
   The volumes were authored desktop-first (fixed 268px sidebar, 64px gutters).
   Instagram traffic is ~95% phone, so this reshapes them without touching the
   authored markup: attribute-substring selectors match the inline styles.
   Desktop is completely unaffected (everything sits inside a media query).
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* clear the fixed burger / "The Study" pill so they never cover the first line */
  body { padding-top: 62px; }

  /* two-column shell → single column */
  div[style*="grid-template-columns: 268px"],
  div[style*="grid-template-columns: 252px"] { display: block !important; }

  /* the sidebar becomes a slide-in drawer */
  aside[style*="position: sticky"] {
    position: fixed !important; top: 0 !important; left: 0; bottom: 0;
    width: min(86vw, 330px) !important; height: 100dvh !important;
    z-index: 9998; transform: translateX(-102%);
    transition: transform .34s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 70px rgba(24,28,34,.32);
    padding-top: 76px !important;
  }
  body.de-drawer-open aside[style*="position: sticky"] { transform: none; }

  /* generous desktop gutters → thumb-friendly ones */
  [style*="padding: 72px 64px"],
  [style*="padding: 76px 64px"],
  [style*="padding: 96px 64px"] { padding: 44px 20px !important; }
  [style*="padding: 40px 64px"],
  [style*="padding: 48px 64px"] { padding: 32px 20px !important; }

  /* anything the author sized for a wide canvas */
  [style*="max-width: 1040px"], [style*="max-width: 980px"],
  [style*="max-width: 900px"]  { max-width: 100% !important; }

  /* tap targets */
  button, [role="button"], a { -webkit-tap-highlight-color: rgba(226,109,92,.16); }
}

/* the drawer trigger + scrim (injected by de-mobile.js) */
#de-burger {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 10000;
  width: 46px; height: 46px; border-radius: 13px; border: 1px solid rgba(30,36,46,.14);
  background: rgba(250,249,246,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 0; box-shadow: 0 6px 22px rgba(24,28,34,.14);
}
#de-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #2b3240;
  transition: transform .3s ease, opacity .3s ease; }
body.de-drawer-open #de-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.de-drawer-open #de-burger span:nth-child(2) { opacity: 0; }
body.de-drawer-open #de-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#de-scrim { position: fixed; inset: 0; z-index: 9997; background: rgba(24,28,34,.42);
  opacity: 0; pointer-events: none; transition: opacity .3s ease; }
body.de-drawer-open #de-scrim { opacity: 1; pointer-events: auto; }
@media (max-width: 860px) { #de-burger { display: flex; } }

/* a thin "back to The Study" ribbon so a reader is never stranded */
#de-home {
  position: fixed; right: 12px; top: 12px; z-index: 10000;
  font: 500 12.5px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em;
  color: #2b3240; text-decoration: none; padding: 12px 15px; border-radius: 100px;
  background: rgba(250,249,246,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(30,36,46,.14); box-shadow: 0 6px 22px rgba(24,28,34,.14);
}