/* The overlay lives in the document at every width, so it is kept out of the
   desktop layout unconditionally and only turned on inside the media query. */
#mt-menu { display: none; }

/*
 * Mobile layout for merttureli.com.
 *
 * The page is a Claude Design export: the layout lives in inline styles on the
 * elements themselves, and the export shipped no media queries at all. On a
 * phone that meant every two-column grid kept both columns, so body text was
 * being squeezed into 43px-wide columns, some columns collapsed to 0px, and two
 * of the project videos rendered 14 pixels wide. None of it scrolled sideways,
 * because a wrapper has overflow-x: hidden, so the damage was invisible rather
 * than obvious: content was simply gone off the right edge.
 *
 * Inline styles outrank stylesheets, so every rule here needs !important. The
 * selectors match the inline declaration text, which is why they look odd; that
 * is the only stable handle on markup this file does not own. Nothing here is
 * loaded above 860px, so the desktop design is untouched.
 *
 * Do not scope anything to x-dc. The runtime unwraps that element before paint,
 * so an `x-dc ...` selector silently matches nothing.
 */

@media (max-width: 860px) {

  /* ---- content grids collapse to one column ----------------------------- */

  /* Everything two-column becomes one. auto-fit grids are excluded: they size
     themselves off available width already, and forcing them here produced two
     cramped columns where the design intended one. */
  body [style*="grid-template-columns"]:not([style*="auto-fit"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  /* Label/value rows keep both columns: a narrow label beside its value is the
     right shape on a phone too. These were only ever broken because the grid
     wrapping them had been crushed. */
  body [style*="grid-template-columns: 64px"] {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 6px 14px !important;
  }
  body [style*="minmax(64px, 80px)"],
  body [style*="minmax(64px, 110px)"] {
    grid-template-columns: minmax(52px, 76px) minmax(0, 1fr) !important;
    gap: 6px 12px !important;
  }

  /* The three-column variant (label, value, qualifier) cannot keep all three:
     the qualifier ate enough width to leave 41px for the value. The qualifier
     drops onto its own line, still aligned under the value column. */
  body [style*="minmax(64px, 120px)"] {
    grid-template-columns: minmax(52px, 80px) minmax(0, 1fr) !important;
    gap: 4px 12px !important;
  }
  body [style*="minmax(64px, 120px)"] > *:nth-child(3) {
    grid-column: 2 !important;
  }

  /* Small paired stats stay side by side; they fit and read better that way. */
  body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  /* ---- header ----------------------------------------------------------- */

  /* The four section links cannot fit beside the wordmark, so they move into
     the menu overlay and the button that was already in the markup (and did
     nothing) becomes the way in. */
  header nav > a { display: none !important; }
  header nav { gap: 0 !important; }
  header nav button[aria-label="Menu"] {
    width: 44px !important;
    height: 44px !important;
    margin-left: 0 !important;
  }

  /* Sticky on mobile only. The page is roughly 24,000px tall on a phone; with
     the header scrolling away as it does on desktop, reaching Contact from the
     bottom means scrolling the whole thing back up.
     Being fixed means it now passes over white page content, where its
     paper-white wordmark and white menu icon would be invisible. The bar is
     therefore always ink, never switched on scroll: over the ink-900 hero it
     disappears into the background, and over the white page it reads as a dark
     bar with white type. A scroll-triggered light/dark swap was tried first and
     rejected: it puts the legibility of the only navigation on a phone at the
     mercy of a scroll handler, for no gain over a bar that is simply always
     correct. */
  header {
    position: fixed !important;
    background: rgba(10, 10, 10, .88) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* Anchor jumps must clear the fixed header. */
  section[id] { scroll-margin-top: 72px; }

  /* ---- menu overlay ----------------------------------------------------- */

  #mt-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--ink-900);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  #mt-menu.on { opacity: 1; pointer-events: auto; }
  #mt-menu a {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1.3;
    color: var(--paper);
    text-decoration: none;
    padding: 12px 0;
  }
  #mt-menu-close {
    position: absolute;
    top: 20px;
    right: 22px;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--paper);
    font: 300 32px/1 var(--font-display, sans-serif);
    cursor: pointer;
  }
  body.mt-lock { overflow: hidden; }

  /* ---- type and touch --------------------------------------------------- */

  /* The one string long enough to push a column open on a narrow screen. */
  body { -webkit-text-size-adjust: 100%; }
  p, dd, a, span, li { overflow-wrap: break-word; }

  /* Comfortable targets for the footer and social links. */
  footer a, [aria-label] > a { min-height: 32px; }

  /* Real viewport height on phones, where the address bar makes 100vh lie. */
  section[style*="100vh"] { min-height: min(940px, 100svh) !important; }
}