/* Phone: introduction first, open page gutters, comfortably sized controls. */
@media(max-width:600px), (max-width:900px) and (max-height:500px) {
  .field > header,.field > main,.field > footer { width:calc(100% - 32px); }
  .field { --section-inset:16px; --landing-columns:minmax(0,1fr); }
  .field .field-hero.section-surface { margin-block:24px 56px; }
  .field h1 { font-size:clamp(32px,8.4vw,48px); overflow-wrap:normal; }
  .field .field-copy .intro { font-size:16px; line-height:1.65; }
  .field .hero-actions { gap:8px 20px; }
  .field .section-surface .resume-preview-card { margin-inline:8px; padding-block:12px; }
  .field .experience-section { gap:24px; }
  .field .experience-copy { grid-row:1; }
  .field .project-story h3 { font-size:32px; }
  .field .evidence-preview { height:240px; padding:16px 8px; }
  .field .evidence-grid { row-gap:64px; }
  .experience-quote-frame { min-height:300px; }
}
/* Tablet portrait stays spacious; landscape uses two comfortable columns. */
@media(min-width:601px) and (max-width:1100px) {
  .field > header { flex-direction:row; align-items:center; gap:20px; }
  .field > header .brand img { width:180px; }
  .field { --section-inset:28px; --landing-gutter:5%; }
  .field h1 { font-size:clamp(36px,4.6vw,48px); }
  .field .hero-actions { gap:12px 20px; }
  .field .project-story h3 { font-size:34px; }
  .field .evidence-preview { height:340px; padding:16px; }
}
@media(hover:none), (pointer:coarse) {
  .resume-preview-window { overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y pinch-zoom; scrollbar-width:thin; }
  .resume-preview-document { transform:none!important; }
  .resume-preview-card { touch-action:pan-y pinch-zoom; }
}
.hero-photos,.experience-quotes { touch-action:pan-y pinch-zoom; }
.motion-toggle { min-width:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:6px 10px; border:0; border-radius:4px; background:transparent; color:#333; font:12px/1.4 Arial,sans-serif; cursor:pointer; }
.motion-toggle:hover { background:#f3f3f3; }
.motion-toggle[hidden] { display:none; }
@media print { .motion-toggle { display:none!important; } }