/* Site-wide responsive polish. Loaded last on every page, so it can refine the page-specific styles.
   Covers: comfortable touch targets, notch/safe-area padding, short landscape screens, long-word wrapping and a few tablet tweaks. */

/* ---- 1. Safe areas (notches / rounded corners in landscape) ---- */
@supports (padding: max(0px)) {
  .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .site-header__bar { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .mobile-menu { padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem)); }
  .site-footer { padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
}

/* ---- 2. Touch targets: links and buttons should be about 44px tall on touch and small screens ---- */
@media (pointer: coarse), (max-width: 900px) {
  /* breadcrumbs */
  .crumbs a, .crumbs li[aria-current] { display: inline-flex; align-items: center; min-height: 40px; }
  .crumbs { margin-bottom: 1.2rem; gap: .4rem; }
  /* footer link lists */
  .site-footer li a, .site-footer address a, .site-footer__bottom a { display: inline-flex; align-items: center; min-height: 40px; }
  .site-footer li { margin-block: 0; }
  /* text links that sit inside paragraphs/lists */
  .link-arrow { min-height: 44px; padding-block: .6rem .5rem; }
  .copy, .cx__mail { min-height: 44px; display: inline-flex; align-items: center; }
  .call__mail a, .mobile-menu__foot p, p a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
  .prose a, .qa__foot a, .form__note a { padding-block: .6rem; }
  /* buttons and pills */
  .btn { min-height: 48px; }
  .chip, .cx__back, .vals__tab, .dial__tab { min-height: 40px; display: inline-flex; align-items: center; }
  /* work pages: "Work" sub-nav / next-project links */
  .next-project, .site-header a { -webkit-tap-highlight-color: rgba(144,15,255,.18); }
}
@media (pointer: coarse) {
  .menu-toggle { width: 48px; height: 48px; }
  .site-header .logo { min-height: 44px; display: inline-flex; align-items: center; }
  /* no sticky hover states on touch */
  .tile:hover, .bento__tile:hover, .cw__tile:hover { transform: none; }
}

/* ---- 3. Text size floor and long-word wrapping ---- */
.bento__work, .igrid__work, .cw__no { font-size: max(.72rem, 11.5px); }
.cx__mail, .call__mail a, .site-footer a[href^="mailto:"], .contact a[href^="mailto:"] { overflow-wrap: anywhere; word-break: break-word; }
h1, h2, h3 { overflow-wrap: break-word; }
img, svg, video, canvas { max-width: 100%; }
table { display: block; max-width: 100%; overflow-x: auto; }
pre, code { max-width: 100%; overflow-x: auto; }

/* ---- 4. Small phones (<= 380px): tighten big type and spacing a touch ---- */
@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .btn { padding-inline: 1.2rem; font-size: .95rem; }
  .btn-row { gap: .6rem; }
  .site-footer__giant { font-size: 17.5vw; }
}

/* ---- 5. Tablets (601-1024px): keep multi-column grids from getting cramped ---- */
@media (min-width: 601px) and (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }
  .site-footer__start { grid-column: 1 / -1; }
  .deck__card { padding: clamp(1.2rem, 2.6vw, 2rem); }
}

/* ---- 6. Short landscape screens (phones turned sideways) ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero, .page-hero--about, .about-hero { min-height: 0; }
  .about-hero { padding-top: calc(var(--bar-h) + 1rem); }
  .about-hero__main { padding-top: 1.5rem; }
  .kpin__track { height: auto; }
  .kpin__stage { position: static; height: auto; min-height: 0; padding-bottom: 3rem; }
  .kpin__slides { display: grid; gap: 2rem; }
  .kpin__slide { grid-area: auto; visibility: visible; pointer-events: auto; }
  .kpin__n, .kpin__p { opacity: 1; transform: none; } .kp__w > span { transform: none; } .kpin__rail { display: none; }
  .deck__card { position: static; min-height: 0; transform: none !important; } .deck__card::after { display: none; }
  .mobile-menu li a { font-size: clamp(1.6rem, 6vh, 2.4rem); }
}

/* ---- 7. Very wide screens: stop sprawling ---- */
@media (min-width: 1800px) {
  html { font-size: 106%; }
}

/* ---- 8. Safety net: a stray element must never create a horizontal scrollbar (clip does not break position: sticky) ---- */
html, body { overflow-x: clip; }