/* anastasijavina.com: responsive layer.
   The pages carry desktop layouts as inline styles; these rules adapt them
   for tablets and phones. !important is needed to beat the inline styles. */

img { max-width: 100%; }
.page { overflow-x: clip; }

/* ---------- Tablet and below ---------- */
@media (max-width: 900px) {
  .site-nav { padding: 14px 24px !important; gap: 20px !important; }
  .site-links { gap: 24px !important; }

  /* Photo + text halves stack vertically */
  .split { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .split > img { height: auto !important; aspect-ratio: 4 / 5; max-height: 80svh; }
  .split-text { padding: 48px 32px 56px !important; }

  .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .masonry { column-count: 2 !important; }

  .intro { grid-template-columns: 1fr !important; gap: 24px !important; padding: 64px 32px !important; text-align: center; justify-items: center; }
  .intro p { margin-left: auto; margin-right: auto; }
  .intro img { height: 110px !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  /* Header: brand on top, the four links centred underneath */
  .site-nav { flex-direction: column; gap: 8px !important; padding: 12px 16px 10px !important; }
  .site-brand { gap: 10px !important; }
  .site-brand img { height: 28px !important; }
  .site-brand span { font-size: 13px !important; letter-spacing: 0.28em !important; white-space: nowrap; }
  .site-links { margin-left: 0 !important; gap: 4px 22px !important; font-size: 12px !important; letter-spacing: 0.12em !important; flex-wrap: wrap; justify-content: center; }

  /* Hover dropdown makes no sense on touch; the Portfolio page links to every category */
  nav .portfolio-drop .portfolio-menu,
  nav .portfolio-drop:hover .portfolio-menu { display: none !important; }

  .split-text { padding: 36px 20px 48px !important; }
  .split h1 { letter-spacing: 0.06em !important; }

  .intro { padding: 48px 20px !important; }
  .intro img { height: 84px !important; }
  .intro p { font-size: 17px !important; }

  .mosaic { grid-template-columns: 1fr !important; padding: 0 16px 64px !important; gap: 16px !important; }
  .mosaic > a { grid-row: auto !important; }

  .page-head { padding: 44px 20px 4px !important; }
  .gallery { padding: 12px 16px 72px !important; gap: 16px !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .masonry { column-gap: 10px !important; }
  .masonry > div { margin-bottom: 10px !important; }

  /* Long-form text: one column, left-aligned (justified text leaves gaps on narrow screens) */
  .prose { column-count: 1 !important; }
  .prose p { text-align: left !important; font-size: 17px !important; line-height: 1.75 !important; }

  .wrap { padding: 52px 20px !important; }
}